/**
 * Componente de ejemplo para generar PDFs desde React
 *
 * @example
 * import { GenerarPdfButton } from '@/Components/Examples/GenerarPdfButton';
 *
 * <GenerarPdfButton
 *   template="contrato.pdf"
 *   data={{
 *     nombre_cliente: cliente.nombre,
 *     dni: cliente.dni,
 *     cups: contrato.cups
 *   }}
 *   filename="contrato-cliente-123"
 * />
 */

import React, { useState } from 'react';
import { Button, Spinner, Alert } from 'react-bootstrap';
import { FileText, Download, Eye, Check, X } from 'lucide-react';
import { pdfService } from '@/services/pdfService';

interface GenerarPdfButtonProps {
    template: string;
    data: Record<string, any>;
    filename?: string;
    mode?: 'generate' | 'download' | 'view';
    buttonText?: string;
    buttonVariant?: string;
    className?: string;
    onSuccess?: (url: string) => void;
    onError?: (error: string) => void;
}

export const GenerarPdfButton: React.FC<GenerarPdfButtonProps> = ({
    template,
    data,
    filename,
    mode = 'generate',
    buttonText,
    buttonVariant = 'primary',
    className = '',
    onSuccess,
    onError
}) => {
    const [loading, setLoading] = useState(false);
    const [success, setSuccess] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const getButtonIcon = () => {
        if (loading) return <Spinner animation="border" size="sm" />;
        if (success) return <Check size={18} />;
        if (error) return <X size={18} />;

        switch (mode) {
            case 'download':
                return <Download size={18} />;
            case 'view':
                return <Eye size={18} />;
            default:
                return <FileText size={18} />;
        }
    };

    const getDefaultButtonText = () => {
        switch (mode) {
            case 'download':
                return 'Descargar PDF';
            case 'view':
                return 'Ver PDF';
            default:
                return 'Generar PDF';
        }
    };

    const handleClick = async () => {
        setLoading(true);
        setError(null);
        setSuccess(false);

        try {
            let result;

            switch (mode) {
                case 'download':
                    await pdfService.downloadPdfForm(template, data, filename || 'documento.pdf');
                    setSuccess(true);
                    if (onSuccess) onSuccess('downloaded');
                    break;

                case 'view':
                    await pdfService.viewPdfForm(template, data);
                    setSuccess(true);
                    if (onSuccess) onSuccess('viewed');
                    break;

                default:
                    result = await pdfService.fillPdfForm(template, data, filename);
                    if (result.success && result.url) {
                        setSuccess(true);
                        if (onSuccess) onSuccess(result.url);
                    } else {
                        throw new Error(result.message);
                    }
                    break;
            }

            // Resetear el estado de éxito después de 3 segundos
            setTimeout(() => setSuccess(false), 3000);

        } catch (err: any) {
            const errorMessage = err.message || 'Error al procesar el PDF';
            setError(errorMessage);
            if (onError) onError(errorMessage);

            // Resetear el error después de 5 segundos
            setTimeout(() => setError(null), 5000);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className={className}>
            <Button
                variant={error ? 'danger' : success ? 'success' : buttonVariant}
                onClick={handleClick}
                disabled={loading}
                className="d-flex align-items-center gap-2"
            >
                {getButtonIcon()}
                <span>{buttonText || getDefaultButtonText()}</span>
            </Button>

            {error && (
                <Alert variant="danger" className="mt-2 mb-0" dismissible onClose={() => setError(null)}>
                    <small>{error}</small>
                </Alert>
            )}
        </div>
    );
};

/**
 * Componente más completo con todas las opciones
 */
interface GenerarPdfCompletoProps {
    template: string;
    data: Record<string, any>;
    filename?: string;
    title?: string;
    onGenerate?: (url: string) => void;
}

export const GenerarPdfCompleto: React.FC<GenerarPdfCompletoProps> = ({
    template,
    data,
    filename,
    title = 'Generar Documento PDF',
    onGenerate
}) => {
    const [pdfUrl, setPdfUrl] = useState<string | null>(null);
    const [loading, setLoading] = useState(false);

    const handleGenerate = async () => {
        setLoading(true);
        try {
            const result = await pdfService.fillPdfForm(template, data, filename);

            if (result.success && result.url) {
                setPdfUrl(result.url);
                if (onGenerate) onGenerate(result.url);
            }
        } catch (error) {
            console.error('Error al generar PDF:', error);
        } finally {
            setLoading(false);
        }
    };

    const handleDownload = async () => {
        if (pdfUrl) {
            window.open(pdfUrl, '_blank');
        }
    };

    return (
        <div className="card">
            <div className="card-body">
                <h5 className="card-title">{title}</h5>

                <div className="d-flex gap-2 flex-wrap">
                    <Button
                        variant="primary"
                        onClick={handleGenerate}
                        disabled={loading}
                        className="d-flex align-items-center gap-2"
                    >
                        {loading ? (
                            <Spinner animation="border" size="sm" />
                        ) : (
                            <FileText size={18} />
                        )}
                        <span>Generar PDF</span>
                    </Button>

                    {pdfUrl && (
                        <>
                            <Button
                                variant="success"
                                onClick={handleDownload}
                                className="d-flex align-items-center gap-2"
                            >
                                <Download size={18} />
                                <span>Descargar</span>
                            </Button>

                            <Button
                                variant="info"
                                onClick={() => window.open(pdfUrl, '_blank')}
                                className="d-flex align-items-center gap-2"
                            >
                                <Eye size={18} />
                                <span>Ver PDF</span>
                            </Button>
                        </>
                    )}
                </div>

                {pdfUrl && (
                    <div className="mt-3">
                        <Alert variant="success">
                            <strong>✓ PDF generado exitosamente</strong>
                            <br />
                            <small>
                                <a href={pdfUrl} target="_blank" rel="noopener noreferrer">
                                    {pdfUrl}
                                </a>
                            </small>
                        </Alert>
                    </div>
                )}
            </div>
        </div>
    );
};

// Ejemplo de uso en un componente de contrato
export const EjemploUsoEnContrato: React.FC<{ contrato: any }> = ({ contrato }) => {
    const handleSuccess = (url: string) => {
        console.log('PDF generado:', url);
        // Aquí podrías actualizar el estado del contrato, mostrar una notificación, etc.
    };

    const handleError = (error: string) => {
        console.error('Error:', error);
        // Mostrar notificación de error
    };

    const datosContrato = {
        nombre_cliente: contrato.cliente?.nombre || '',
        dni: contrato.cliente?.dni || '',
        cups: contrato.cups || '',
        tarifa: contrato.tarifa?.nombre || '',
        fecha_contrato: new Date().toLocaleDateString('es-ES'),
        numero_contrato: contrato.id || '',
        direccion: contrato.direccion || '',
        codigo_postal: contrato.codigo_postal || '',
        ciudad: contrato.ciudad || '',
        provincia: contrato.provincia || ''
    };

    return (
        <div className="d-flex gap-2">
            <GenerarPdfButton
                template="contrato.pdf"
                data={datosContrato}
                filename={`contrato-${contrato.id}`}
                mode="generate"
                buttonText="Generar Contrato"
                onSuccess={handleSuccess}
                onError={handleError}
            />

            <GenerarPdfButton
                template="contrato.pdf"
                data={datosContrato}
                filename={`contrato-${contrato.id}.pdf`}
                mode="download"
                buttonVariant="success"
            />

            <GenerarPdfButton
                template="contrato.pdf"
                data={datosContrato}
                mode="view"
                buttonVariant="info"
            />
        </div>
    );
};