import { useState, useRef, useEffect } from 'react';
import './Generator.css';
import { renderQRCode, downloadIDCards, downloadBulkIDCards, getXLSXLib, clientTemplates } from './script/script.jsx';
import { uploadEmployeePhoto, saveClienteProyecto } from './services/storage.js';
import { supabase } from "./services/supabase";

// Convierte datos binarios recibidos (base64, buffer, array de bytes) en un Blob URL local de forma robusta
const convertBinaryToBlobUrl = (data) => {
    if (!data) return null;
    try {
        if (typeof data === 'object' && data.type === 'Buffer' && Array.isArray(data.data)) {
            const byteArray = new Uint8Array(data.data);
            const blob = new Blob([byteArray], { type: 'image/jpeg' });
            return URL.createObjectURL(blob);
        }

        if (Array.isArray(data)) {
            const byteArray = new Uint8Array(data);
            const blob = new Blob([byteArray], { type: 'image/jpeg' });
            return URL.createObjectURL(blob);
        }

        if (typeof data === 'string') {
            const cleanBase64 = data.replace(/^data:image\/\w+;base64,/, "");
            const byteCharacters = atob(cleanBase64);
            const byteNumbers = new Array(byteCharacters.length);
            for (let i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            const blob = new Blob([byteArray], { type: 'image/jpeg' });
            return URL.createObjectURL(blob);
        }
    } catch (e) {
        console.error("Error convirtiendo formato binario a Blob URL:", e);
    }
    return null;
};

export default function IdCardGenerator() {
    // --- Estados formulario individual ───
    const [name, setName] = useState('');
    const [role, setRole] = useState('');
    const [language, setLanguage] = useState('Esp');
    const [selectedClient, setSelectedClient] = useState('Generico');
    const [employeeId, setEmployeeId] = useState('');
    const [photoSrc, setPhotoSrc] = useState('');
    const [photoFile, setPhotoFile] = useState(null);
    const [photoProcessing, setPhotoProcessing] = useState(false);
    const [downloadStatus, setDownloadStatus] = useState({ processing: false, text: '⬇ Descargar' });

    // Bloquea el botón Descargar hasta que nombre, puesto e ID estén llenos
    const isFormComplete = name.trim() && role.trim() && employeeId.trim();

    // --- Estados Lote / Excel Masivo ───
    const [bulkEmployees, setBulkEmployees] = useState([]);
    const [bulkStatusText, setBulkStatusText] = useState('');
    const [bulkDownloadStatus, setBulkDownloadStatus] = useState({ processing: false, text: '⬇ Descargar' });
    const [showTooltip, setShowTooltip] = useState(false);

    const fileInputRef = useRef(null);
    const excelInputRef = useRef(null);
    const qrCanvasRef = useRef(null);

    const baseUrl = import.meta.env.BASE_URL.endsWith('/')
        ? import.meta.env.BASE_URL
        : `${import.meta.env.BASE_URL}/`;

    useEffect(() => {
        if (qrCanvasRef.current) {
            renderQRCode(employeeId, qrCanvasRef.current);
        }
    }, [employeeId]);

    const handlePhotoUpload = async (e) => {
        const file = e.target.files[0];
        if (!file) return;

        setPhotoFile(file);
        setPhotoSrc(URL.createObjectURL(file));
        setPhotoProcessing(true);

        try {
            const editedBlob = await processPhotoWithAI(file);
            const editedUrl = URL.createObjectURL(editedBlob);
            setPhotoSrc(editedUrl);
            setPhotoFile(new File([editedBlob], file.name, { type: editedBlob.type || 'image/jpeg' }));
        } catch (error) {
            console.error('Error al procesar la foto con IA en n8n:', error);
            alert('No se pudo procesar la foto con IA. Se usará la foto original para la vista previa.');
        } finally {
            setPhotoProcessing(false);
        }
    };

    const processPhotoWithAI = async (file) => {
        const N8N_WEBHOOK_URL = import.meta.env.VITE_N8N_WEBHOOK_URL;
        const TOKEN_SECRETO = import.meta.env.VITE_WEBHOOK_TOKEN;

        const formData = new FormData();
        formData.append('edited', file, file.name);
        formData.append('name', name);
        formData.append('role', role);
        formData.append('employeeId', employeeId);
        formData.append('fechaProcesado', new Date().toISOString());

        const response = await fetch(N8N_WEBHOOK_URL, {
            method: 'POST',
            headers: {
                'Authorization': TOKEN_SECRETO
            },
            body: formData
        });

        if (!response.ok) {
            throw new Error(`El servidor de n8n rechazó la petición (Código: ${response.status})`);
        }

        const contentType = response.headers.get('content-type') || '';
        if (contentType.includes('application/json')) {
            const data = await response.json();
            const bin = data.edited || data.data || data.foto_processed_base64 || data.photo || data.binary || (Array.isArray(data) && (data[0]?.edited || data[0]?.data));
            const blobUrl = convertBinaryToBlobUrl(bin);
            if (!blobUrl) throw new Error('n8n no devolvió un binario válido.');
            const blob = await (await fetch(blobUrl)).blob();
            return blob;
        }

        const blob = await response.blob();
        if (!blob || blob.size === 0) throw new Error('n8n devolvió un binario vacío.');
        return blob;
    };

    const handleEmployeeIdChange = (e) => {
        const rawValue = e.target.value;
        const cleanValue = rawValue.replace(/[-\s]/g, '');
        setEmployeeId(cleanValue);
    };

    const enviarDatosAn8n = async (datosEmpleados) => {
        const N8N_WEBHOOK_URL = import.meta.env.VITE_N8N_WEBHOOK_URL;
        const TOKEN_SECRETO = import.meta.env.VITE_WEBHOOK_TOKEN;

        try {
            const response = await fetch(N8N_WEBHOOK_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': TOKEN_SECRETO
                },
                body: JSON.stringify({
                    empleados: datosEmpleados,
                    total: datosEmpleados.length,
                    fechaProcesado: new Date().toISOString()
                })
            });

            if (!response.ok) {
                throw new Error(`El servidor de n8n rechazó la petición (Código: ${response.status})`);
            }

            const resData = await response.json();
            return Array.isArray(resData) ? resData : (resData.empleados || resData.data || []);
        } catch (error) {
            console.error('Error de comunicación con n8n:', error);
            throw error;
        }
    };

    const handleBulkSupabaseSync = async (cedula, blobData, currentEmployee) => {
        const cleanCedula = String(cedula).replace(/[-\s]/g, '');
        if (!cleanCedula) return;

        try {
            // Se usa el cliente extraído directamente del array renderizado
            const clienteProyectoValue = currentEmployee?.selectedClient || 'Generico';
            await saveClienteProyecto(cleanCedula, clienteProyectoValue);
            console.log(`[Supabase DB] Guardado: ${cleanCedula} → ${clienteProyectoValue}`);

            const customFile = new File([blobData], `${cleanCedula}.jpg`, { type: 'image/jpeg' });
            const remoteStorageUrl = await uploadEmployeePhoto(cleanCedula, customFile);

            if (remoteStorageUrl) {
                await supabase.rpc("save_employee_photo", {
                    p_employee_number: cleanCedula,
                    p_photo_url: remoteStorageUrl
                });
            }
        } catch (error) {
            console.error(`[Supabase Sync Fallido] Cédula ${cleanCedula}:`, error);
        }
    };

    const handleExcelUpload = async (e) => {
        const file = e.target.files[0];
        if (!file) return;

        setBulkStatusText('Leyendo documento...');
        try {
            const XLSXLib = await getXLSXLib();
            const reader = new FileReader();

            reader.onload = async (evt) => {
                try {
                    const bstr = evt.target.result;
                    const wb = XLSXLib.read(bstr, { type: 'binary' });
                    const wsname = wb.SheetNames[0];
                    const ws = wb.Sheets[wsname];
                    const jsonRows = XLSXLib.utils.sheet_to_json(ws);

                    if (jsonRows.length === 0) {
                        setBulkStatusText('❌ El archivo está vacío.');
                        return;
                    }

                    const formatted = jsonRows.map((row) => {
                        let rawLang = String(row.lenguaje || 'Esp').trim().toLowerCase();
                        if (rawLang.includes('es') || rawLang.includes('esp')) {
                            rawLang = 'Esp';
                        } else if (rawLang.includes('en') || rawLang.includes('ing')) {
                            rawLang = 'Ing';
                        } else {
                            rawLang = 'Esp';
                        }

                        let rawClient = String(row['cliente/proyecto'] || 'Generico')
                            .trim()
                            .normalize("NFD")
                            .replace(/[\u0300-\u036f]/g, "");

                        const lowerClient = rawClient.toLowerCase();
                        if (lowerClient.includes('nestle')) rawClient = 'Nestle';
                        else if (lowerClient.includes('claro')) rawClient = 'Claro';
                        else if (lowerClient.includes('colgate')) rawClient = 'Colgate';
                        else if (lowerClient.includes('kitchenaid') || lowerClient.includes('kitchen')) rawClient = 'KitchenAid';
                        else if (lowerClient.includes('kraft')) rawClient = 'Kraft';
                        else if (lowerClient.includes('motorola')) rawClient = 'Motorola';
                        else if (lowerClient.includes('p&g') || lowerClient.includes('p y g')) rawClient = 'P&G';
                        else if (lowerClient.includes('philip') || lowerClient.includes('morris')) rawClient = 'Philip Morris';
                        else if (lowerClient.includes('whirlpool')) rawClient = 'Whirlpool';
                        else rawClient = 'Generico';

                        const cleanedCedula = String(row.cedula || '').replace(/[-\s]/g, '');

                        return {
                            name: String(row.nombre || '').trim(),
                            role: String(row.puesto || '').trim(),
                            selectedClient: rawClient,
                            language: rawLang,
                            employeeId: cleanedCedula,
                            fotoUrl: String(row.foto_url || '').trim()
                        };
                    }).filter(emp => emp.name && emp.role && emp.employeeId);

                    setBulkEmployees(formatted);
                    setBulkStatusText(`✅ ¡Cargados ${formatted.length} colaboradores! Listo para procesar.`);
                    setBulkDownloadStatus({ processing: false, text: '⬇ Descargar' });

                } catch (innerErr) {
                    console.error(innerErr);
                    setBulkStatusText('❌ Error de lectura. Revisa el formato de columnas.');
                }
            };
            reader.readAsBinaryString(file);
        } catch (err) {
            console.error(err);
            setBulkStatusText('❌ Error cargando el motor XLSX.');
        }
    };

    const triggerBulkDownload = async () => {
        if (bulkEmployees.length === 0) return;

        setBulkDownloadStatus({ processing: true, text: '🔄 Descargando...' });
        setBulkStatusText('Descargando retratos...');

        try {
            const resultadosN8n = await enviarDatosAn8n(bulkEmployees);
            setBulkStatusText('Generando frentes, reversos y empaquetando en carpetas locales...');

            const employeesReadyForRender = bulkEmployees.map((originalEmp, index) => {
                const n8nEmp = resultadosN8n[index] || resultadosN8n.find(e => e.employeeId === originalEmp.employeeId) || {};

                const base64Source = n8nEmp.data || n8nEmp.foto_processed_base64 || originalEmp.data;
                let finalPhotoUrl = convertBinaryToBlobUrl(base64Source) || originalEmp.fotoUrl;

                const validClient = n8nEmp.selectedClient || originalEmp.selectedClient || 'Generico';
                const validLang = n8nEmp.language || originalEmp.language || 'Esp';

                return {
                    name: n8nEmp.name || originalEmp.name,
                    role: n8nEmp.role || originalEmp.role,
                    selectedClient: validClient,
                    language: validLang,
                    employeeId: n8nEmp.employeeId || originalEmp.employeeId,
                    fotoUrl: finalPhotoUrl
                };
            });

            await downloadBulkIDCards({
                employees: employeesReadyForRender,
                baseUrl,
                onStateChange: null,
                // CORRECCIÓN AQUÍ: Buscamos al empleado en nuestro arreglo usando la cédula que nos devuelve script.jsx
                onProcessEmployeePhoto: (cedula, blobData) => {
                    const currentEmp = employeesReadyForRender.find(emp => emp.employeeId === cedula);
                    return handleBulkSupabaseSync(cedula, blobData, currentEmp);
                }
            });

            setBulkStatusText('🎉 ¡Lote de carnets guardado correctamente!');
            setBulkEmployees([]);

        } catch (error) {
            console.error(error);
            setBulkStatusText(`❌ Error al procesar: ${error.message || error}`);
        } finally {
            setBulkDownloadStatus({ processing: false, text: '⬇ Descargar' });
        }
    };

    const triggerDownload = async () => {
        if (!validateForm()) return;
        setDownloadStatus({ processing: true, text: '🔄 Descargando...' });
        try {
            await saveClienteProyecto(employeeId, selectedClient);

            if (photoFile) {
                const photoUrl = await uploadEmployeePhoto(employeeId, photoFile);
                await supabase.rpc("save_employee_photo", {
                    p_employee_number: employeeId,
                    p_photo_url: photoUrl
                });
            }

            await downloadIDCards({
                name, role, selectedClient, language, photoSrc,
                baseUrl,
                qrCanvas: qrCanvasRef.current,
                onStateChange: setDownloadStatus
            });
        } catch (err) {
            console.error(err);
            alert(err.message);
            setDownloadStatus({ processing: false, text: '⬇ Descargar' });
        }
    };

    const validateForm = () => {
        if (!name.trim()) { alert("Debe ingresar el nombre."); return false; }
        if (!role.trim()) { alert("Debe ingresar el puesto."); return false; }
        if (!employeeId.trim()) { alert("Debe ingresar el ID del empleado."); return false; }
        if (!photoFile) { alert("Debe subir la foto del colaborador."); return false; }
        return true;
    };

    return (
        <>
            <div className="page-title">
                <h1>GLM ID Card Generator</h1>
                <p>GomezLee Marketing · Carnet Corporativo CR80</p>
            </div>

            <div className="main-container" style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
                {/* FORMULARIO MASIVO EXCEL */}
                <div className="panel" style={{ minWidth: '320px' }}>
                    <div className="preview-badge" style={{ background: '#FFF3E0', color: '#E65100' }}>
                        <div className="dot" style={{ background: '#E65100' }}></div>
                        <span>Módulo de Lotes Automáticos</span>
                    </div>

                    <div className="panel-section">
                        <div className="panel-section-title" style={{ display: 'flex', alignItems: 'center', gap: '6px', position: 'relative' }}>
                            <span>Carga Masiva de Colaboradores</span>
                            <div
                                style={{
                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                                    width: '16px', height: '16px', borderRadius: '50%',
                                    background: '#cbd5e1', color: '#334155', fontSize: '11px',
                                    fontWeight: 'bold', cursor: 'help', userSelect: 'none'
                                }}
                                onMouseEnter={() => setShowTooltip(true)}
                                onMouseLeave={() => setShowTooltip(false)}
                            >
                                ?
                            </div>

                            {showTooltip && (
                                <div style={{
                                    position: 'absolute', top: '24px', left: '0', right: '0',
                                    background: '#1e293b', color: '#ffffff', padding: '10px',
                                    borderRadius: '6px', fontSize: '11px', lineHeight: '1.4',
                                    zIndex: '99', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
                                    fontWeight: 'normal', textTransform: 'none'
                                }}>
                                    Formato de columnas requeridas en el Excel: <br />
                                    <b style={{ color: '#6CC24A' }}>nombre, puesto, cliente/proyecto, cedula, lenguaje, foto_url</b>.<br />
                                </div>
                            )}
                        </div>

                        <div className="upload-btn" style={{ background: '#475569', marginTop: '12px' }} onClick={() => excelInputRef.current.click()}>
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                                <polyline points="14 2 14 8 20 8" />
                                <line x1="16" y1="13" x2="8" y2="13" />
                                <line x1="16" y1="17" x2="8" y2="17" />
                            </svg>
                            Seleccionar Archivo Excel
                        </div>
                        <input type="file" accept=".xlsx, .xls, .csv" style={{ display: 'none' }} ref={excelInputRef} onChange={handleExcelUpload} />

                        {bulkStatusText && (
                            <div style={{ fontSize: '12px', marginTop: '8px', fontWeight: '500', color: '#475569' }}>
                                {bulkStatusText}
                            </div>
                        )}
                    </div>

                    <div className="divider"></div>

                    <div className="panel-section">
                        <div className="panel-section-title">Exportar Lote</div>
                        <button
                            className="export-btn blue"
                            disabled={bulkDownloadStatus.processing || bulkEmployees.length === 0}
                            onClick={triggerBulkDownload}
                            style={{ opacity: bulkEmployees.length === 0 ? 0.6 : 1 }}
                        >
                            {bulkDownloadStatus.text}
                        </button>
                    </div>
                </div>

                {/* FORMULARIO INDIVIDUAL */}
                <div className="panel">
                    <div className="preview-badge">
                        <div className="dot"></div>
                        <span>Vista previa en tiempo real</span>
                    </div>

                    <div className="panel-section">
                        <div className="panel-section-title">Colaborador</div>
                        <div className="field">
                            <label>Nombre</label>
                            <input type="text" placeholder="Ej: Alexi Zabala" value={name} onChange={(e) => setName(e.target.value)} />
                        </div>
                        <div className="field">
                            <label>Puesto</label>
                            <input type="text" placeholder="Ej: Mercaderista" value={role} onChange={(e) => setRole(e.target.value)} />
                        </div>
                        <div className="upload-btn" onClick={() => !photoProcessing && fileInputRef.current.click()} style={{ opacity: photoProcessing ? 0.6 : 1, cursor: photoProcessing ? 'wait' : 'pointer' }}>
                            {photoProcessing ? '⏳ Procesando foto con IA...' : 'Subir foto del colaborador'}
                        </div>
                        <input type="file" accept="image/*" style={{ display: 'none' }} ref={fileInputRef} onChange={handlePhotoUpload} />
                    </div>

                    <div className="divider"></div>

                    <div className="panel-section">
                        <div className="panel-section-title">Cliente / Proyecto</div>
                        <div className="lang-container">
                            <button type="button" className={`lang-btn ${language === 'Esp' ? 'active' : ''}`} onClick={() => setLanguage('Esp')}>Español</button>
                            <button type="button" className={`lang-btn ${language === 'Ing' ? 'active' : ''}`} onClick={() => setLanguage('Ing')}>Inglés</button>
                        </div>
                        <div className="field">
                            <label>Seleccionar Cliente</label>
                            <select value={selectedClient} onChange={(e) => setSelectedClient(e.target.value)}>
                                <option value="Generico">Genérico (Por defecto)</option>
                                <option value="Claro">Claro</option>
                                <option value="Colgate">Colgate</option>
                                <option value="KitchenAid">KitchenAid</option>
                                <option value="Kraft">Kraft</option>
                                <option value="Motorola">Motorola</option>
                                <option value="Nestle">Nestle</option>
                                <option value="P&G">P&G</option>
                                <option value="Philip Morris">Philip Morris International</option>
                                <option value="Whirlpool">Whirlpool</option>
                            </select>
                        </div>
                    </div>

                    <div className="divider"></div>

                    <div className="panel-section">
                        <div className="panel-section-title">Código QR</div>
                        <div className="field">
                            <label>ID del empleado / Cédula</label>
                            <input
                                type="text"
                                placeholder="Ej: 123456789 (Sin guiones ni espacios)"
                                value={employeeId}
                                onChange={handleEmployeeIdChange}
                            />
                        </div>
                        <button className="export-btn" style={{ background: '#6CC24A', marginTop: '2px' }} onClick={() => renderQRCode(employeeId, qrCanvasRef.current)}>
                            ⟳ Generar QR
                        </button>
                    </div>

                    <div className="divider"></div>

                    <div className="panel-section">
                        <div className="panel-section-title">Exportar</div>
                        <button className="export-btn blue" disabled={downloadStatus.processing || !isFormComplete} onClick={triggerDownload} style={{ opacity: (!isFormComplete || downloadStatus.processing) ? 0.6 : 1 }}>
                            {downloadStatus.text}
                        </button>
                    </div>
                </div>

                {/* VISTA PREVIA */}
                <div className="stage">
                    <div className="card-wrap">
                        <div className="card-label">Frente</div>
                        <div className="card" id="cardFront" style={{ backgroundImage: `url('${baseUrl}images/AF GLM Frente.png')` }}>
                            <div className="front-photo-frame" style={{ position: 'relative', overflow: 'hidden' }}>
                                {photoSrc ? (
                                    <img src={photoSrc} alt="Foto Colaborador" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                                ) : (null)}
                                {photoProcessing && (
                                    <div style={{
                                        position: 'absolute', inset: 0, display: 'flex',
                                        alignItems: 'center', justifyContent: 'center',
                                        background: 'rgba(0,0,0,0.45)', color: '#fff',
                                        fontSize: '13px', fontWeight: '600', textAlign: 'center', padding: '8px'
                                    }}>
                                        ⏳ Editando foto con IA...
                                    </div>
                                )}
                                {!photoSrc && (
                                    <svg className="placeholder-svg" viewBox="0 0 28 28" fill="none" style={{ width: '60%', height: '60%', opacity: 0.4 }}>
                                        <circle cx="14" cy="10" r="5.5" stroke="currentColor" strokeWidth="1.5" />
                                        <path d="M3 24c0-6 22-6 22 0" stroke="currentColor" strokeWidth="1.5" />
                                    </svg>
                                )}
                            </div>
                            <div className="front-dynamic-name">{name ? name.toUpperCase() : 'NOMBRE APELLIDO'}</div>
                            <div className="front-dynamic-role">{role ? role.toUpperCase() : 'PUESTO'}</div>
                        </div>
                    </div>

                    <div className="card-wrap">
                        <div className="card-label">Reverso</div>
                        <div
                            className="card"
                            id="cardBack"
                            style={{
                                backgroundImage: `url('${baseUrl}${(clientTemplates[language] || clientTemplates['Esp'])[selectedClient] || (clientTemplates[language] || clientTemplates['Esp'])['Generico']}')`
                            }}
                        >
                            <div className="back-qr-zone">
                                <canvas ref={qrCanvasRef} width={55} height={55}></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}