const { useState, useRef, useEffect } = React;

function formatMarkdown(text) {
    if (!text) return '';
    let html = text
        .replace(/&/g, "&")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;");

    // LÍNEAS DIVISORIAS ESTRUCTURADAS
    html = html.replace(/^---$/gim, '<div class="my-4 border-t border-slate-200/80"></div>');

    // ENCABEZADOS DE NIVELES CON ESTILIZADO ENTERPRISE
    html = html.replace(/^### (.*$)/gim, '<h4 class="font-black text-xs text-slate-900 mt-4 mb-2 uppercase tracking-wide flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-indigo-600 inline-block"></span>$1</h4>');
    html = html.replace(/^## (.*$)/gim, '<h3 class="font-black text-sm text-slate-900 mt-5 mb-2 uppercase tracking-wider border-b border-indigo-100 pb-1.5">$1</h3>');
    html = html.replace(/^# (.*$)/gim, '<h2 class="font-black text-base text-slate-900 mt-5 mb-3 pb-1 border-b-2 border-indigo-600">$1</h2>');

    // NEGRITAS Y CURSIVAS
    html = html.replace(/\*\*(.*?)\*\*/g, '<strong class="font-black text-slate-900">$1</strong>');
    html = html.replace(/\*(.*?)\*/g, '<em class="italic text-slate-600">$1</em>');

    // ENCABEZADOS DE DOCUMENTOS LEGALES (PARA, DE, FECHA, ASUNTO)
    html = html.replace(/\b(Para|De|Fecha|Asunto):\s*(.*$)/gim, '<div class="flex items-center gap-2.5 my-1.5 text-slate-700"><span class="px-2.5 py-0.5 bg-indigo-50 border border-indigo-200/80 text-indigo-900 rounded-md font-black text-[10px] uppercase tracking-wider">$1</span><span class="font-bold text-slate-900">$2</span></div>');

    // TABLAS MARKDOWN ELEGANTES
    if (html.includes('|')) {
        const lines = html.split('\n');
        let inTable = false;
        let tableHtml = '<div class="overflow-x-auto my-4 rounded-2xl border border-slate-200/90 bg-white shadow-xs"><table class="w-full text-left border-collapse text-[11px]">';
        let newLines = [];

        lines.forEach(line => {
            const trimmed = line.trim();
            if (trimmed.startsWith('|') && trimmed.endsWith('|')) {
                const cells = trimmed.split('|').filter((_, i, arr) => i > 0 && i < arr.length - 1);
                if (trimmed.includes('---')) return;

                if (!inTable) {
                    inTable = true;
                    tableHtml += '<thead class="bg-slate-50 text-slate-900 font-black uppercase text-[9px] tracking-wider border-b border-slate-200"><tr>';
                    cells.forEach(c => { tableHtml += `<th class="px-3.5 py-2.5">${c.trim()}</th>`; });
                    tableHtml += '</tr></thead><tbody class="divide-y divide-slate-100">';
                } else {
                    tableHtml += '<tr class="hover:bg-slate-50/80 transition-colors">';
                    cells.forEach(c => { tableHtml += `<td class="px-3.5 py-2.5 text-slate-700 font-medium">${c.trim()}</td>`; });
                    tableHtml += '</tr>';
                }
            } else {
                if (inTable) {
                    inTable = false;
                    tableHtml += '</tbody></table></div>';
                    newLines.push(tableHtml);
                    tableHtml = '<div class="overflow-x-auto my-4 rounded-2xl border border-slate-200/90 bg-white shadow-xs"><table class="w-full text-left border-collapse text-[11px]">';
                }
                newLines.push(line);
            }
        });
        if (inTable) {
            tableHtml += '</tbody></table></div>';
            newLines.push(tableHtml);
        }
        html = newLines.join('\n');
    }

    // VIÑETAS LIMPIAS
    html = html.replace(/^\s*[\-\*•]\s+(.*$)/gim, '<div class="flex items-start gap-2.5 my-1.5 text-slate-700 leading-relaxed"><span class="w-1.5 h-1.5 rounded-full bg-indigo-600 mt-2 flex-shrink-0"></span><span>$1</span></div>');

    // ESPACIADO DE PÁRRAFOS
    html = html.replace(/\n\n/g, '<div class="h-3"></div>');

    return html;
}

window.AdminAICopilot = function({ companyName, currentTab = 'logs' }) {
    const [isOpen, setIsOpen] = useState(false);
    const [keySourceUsed, setKeySourceUsed] = useState('maestra');
    const [dynamicPrompts, setDynamicPrompts] = useState([]);
    const [loadingPrompts, setLoadingPrompts] = useState(false);

    const defaultPrompts = [
        {
            title: "Resumen Ejecutivo de Asistencia",
            desc: "Consulta la puntualidad, tardanzas y ausencias del personal este mes.",
            query: "Proporciona un reporte breve de asistencia del personal este mes: puntualidad, tardanzas acumuladas y observaciones principales."
        },
        {
            title: "Balance de Nómina Quincenal",
            desc: "Proyección de salarios brutos, INSS Patronal y retenciones de ley.",
            query: "Genera un balance conciso de la nómina quincenal actual: colaboradores activos, salario total y proyección de INSS Patronal."
        },
        {
            title: "Documento de Llamado de Atención",
            desc: "Redactar llamado de atención formal según el Código del Trabajo.",
            query: "Redacta una plantilla formal de llamado de atención por tardanzas recurrentes conforme al Código del Trabajo de Nicaragua."
        }
    ];

    const [messages, setMessages] = useState([
        { 
            sender: 'ai', 
            text: `¡Hola! Soy **Shift Copilot AI**, tu asistente ejecutivo inteligente para **${companyName || 'tu empresa'}**.\n\nTengo acceso en tiempo real a tus registros de asistencia, horarios, nómina y expedientes de esta empresa. ¿En qué puedo apoyarte hoy?` 
        }
    ]);
    const [inputPrompt, setInputPrompt] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const chatEndRef = useRef(null);

    const loadSmartPrompts = async () => {
        if (dynamicPrompts.length > 0) return;
        setLoadingPrompts(true);
        try {
            const res = await window.apiCall('get_ai_smart_prompts', {});
            if (res && res.success && res.prompts && res.prompts.length > 0) {
                setDynamicPrompts(res.prompts);
            } else {
                setDynamicPrompts(defaultPrompts);
            }
        } catch (e) {
            setDynamicPrompts(defaultPrompts);
        } finally {
            setLoadingPrompts(false);
        }
    };

    useEffect(() => {
        if (isOpen) {
            loadSmartPrompts();
        }
    }, [isOpen]);

    useEffect(() => {
        if (isOpen && chatEndRef.current) {
            chatEndRef.current.scrollIntoView({ behavior: 'smooth' });
        }
    }, [messages, isOpen, isLoading]);

    const handleSendPrompt = async (promptToSend = null) => {
        const textQuery = promptToSend || inputPrompt;
        if (!textQuery.trim() || isLoading) return;

        const userMsg = { sender: 'user', text: textQuery };
        setMessages(prev => [...prev, userMsg]);
        setInputPrompt('');
        setIsLoading(true);

        try {
            const res = await window.apiCall('ask_ai_copilot', {
                prompt: textQuery,
                currentTab: currentTab
            });

            if (res && res.success && res.response) {
                if (res.key_source) setKeySourceUsed(res.key_source);
                setMessages(prev => [...prev, { sender: 'ai', text: res.response }]);
            } else {
                setMessages(prev => [...prev, { sender: 'ai', text: res?.error || "El asistente se encuentra procesando otras solicitudes. Por favor reintente en un momento." }]);
            }
        } catch (err) {
            setMessages(prev => [...prev, { sender: 'ai', text: "Error de comunicación con el motor IA: " + err.message }]);
        } finally {
            setIsLoading(false);
        }
    };

    const activePrompts = dynamicPrompts.length > 0 ? dynamicPrompts : defaultPrompts;

    return (
        <React.Fragment>
            {/* BOTÓN FLOTANTE ENTERPRISE MINIMALISTA */}
            <button 
                onClick={() => setIsOpen(true)}
                className="fixed bottom-20 lg:bottom-6 right-4 lg:right-6 z-[35] h-12 px-4 sm:px-5 bg-slate-900/95 hover:bg-slate-900 text-white rounded-full shadow-xl border border-slate-700/80 backdrop-blur-lg hover:border-indigo-500/60 hover:shadow-indigo-500/20 active:scale-95 transition-all duration-200 flex items-center gap-2.5 sm:gap-3 cursor-pointer print:hidden group"
                title="Abrir Shift Copilot AI"
            >
                <div className="w-6 h-6 rounded-full bg-indigo-600/30 flex items-center justify-center text-indigo-400 group-hover:text-indigo-300 transition-colors">
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                </div>
                <div className="text-left">
                    <span className="font-bold text-xs tracking-tight text-white block leading-none">
                        Copilot AI
                    </span>
                    <span className="text-[9px] font-bold text-emerald-400 uppercase tracking-wider block mt-0.5">
                        {companyName || 'Empresa'}
                    </span>
                </div>
            </button>

            {/* MODAL / DRAWER LATERAL DE CHAT REFINADO */}
            {isOpen && (
                <div className="fixed inset-0 z-[110] bg-slate-950/40 backdrop-blur-xs flex justify-end transition-opacity fade-in" onClick={() => setIsOpen(false)}>
                    <div className="w-full max-w-lg bg-white h-full shadow-2xl flex flex-col border-l border-slate-200/80 overflow-hidden" onClick={e => e.stopPropagation()}>
                        
                        {/* HEADER DEL CHAT */}
                        <div className="p-5 bg-slate-900 text-white border-b border-slate-800 flex justify-between items-center">
                            <div className="flex items-center gap-3">
                                <div className="w-9 h-9 rounded-2xl bg-indigo-600/30 border border-indigo-400/40 flex items-center justify-center text-indigo-400 shadow-xs">
                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                </div>
                                <div>
                                    <div className="flex items-center gap-2">
                                        <h3 className="font-black text-sm tracking-tight text-white">Shift Copilot AI</h3>
                                        <span className="px-2 py-0.5 rounded-full text-[9px] font-extrabold uppercase bg-emerald-500/20 border border-emerald-400/30 text-emerald-300">
                                            Gemini 3.6
                                        </span>
                                    </div>
                                    <p className="text-[11px] text-slate-400 font-medium">
                                        Aislamiento de Datos: <strong className="text-white">{companyName || 'Cliente Activo'}</strong>
                                    </p>
                                </div>
                            </div>

                            <button 
                                onClick={() => setIsOpen(false)}
                                className="p-2 text-slate-400 hover:text-white rounded-xl hover:bg-slate-800 transition-colors cursor-pointer"
                                title="Cerrar Chat"
                            >
                                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </div>

                        {/* HISTORIAL DE CONVERSACIÓN */}
                        <div className="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50/70">
                            {messages.map((m, idx) => (
                                <div key={idx} className={`flex ${m.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
                                    <div className={`max-w-[92%] p-4 sm:p-5 rounded-2xl text-xs leading-relaxed shadow-xs ${
                                        m.sender === 'user' 
                                            ? 'bg-slate-900 text-white font-medium rounded-tr-none border border-slate-800' 
                                            : 'bg-white text-slate-800 border border-slate-200/90 rounded-tl-none font-sans space-y-2'
                                    }`}>
                                        {m.sender === 'ai' ? (
                                            <div dangerouslySetInnerHTML={{ __html: formatMarkdown(m.text) }} />
                                        ) : (
                                            <span>{m.text}</span>
                                        )}
                                    </div>
                                </div>
                            ))}

                            {/* INDICADOR DE CARGA */}
                            {isLoading && (
                                <div className="flex justify-start">
                                    <div className="bg-white p-4 rounded-2xl rounded-tl-none border border-slate-200/80 shadow-xs flex items-center gap-3">
                                        <div className="flex gap-1">
                                            <div className="w-2 h-2 rounded-full bg-indigo-600 animate-bounce"></div>
                                            <div className="w-2 h-2 rounded-full bg-purple-600 animate-bounce [animation-delay:0.2s]"></div>
                                            <div className="w-2 h-2 rounded-full bg-emerald-600 animate-bounce [animation-delay:0.4s]"></div>
                                        </div>
                                        <span className="text-[11px] font-bold text-slate-500">
                                            Consultando expediente y registros de {companyName || 'la empresa'}...
                                        </span>
                                    </div>
                                </div>
                            )}

                            {/* PROMPTS SUGERIDOS INTERACTIVOS */}
                            {messages.length <= 2 && !isLoading && (
                                <div className="pt-3 space-y-2.5">
                                    <span className="text-[10px] font-black uppercase tracking-widest text-slate-400 block px-1">
                                        Consultas Frecuentes Recomendadas:
                                    </span>
                                    <div className="space-y-2">
                                        {activePrompts.map((sp, i) => (
                                            <div 
                                                key={i}
                                                onClick={() => handleSendPrompt(sp.query)}
                                                className="p-3.5 bg-white hover:bg-indigo-50/60 border border-slate-200/90 hover:border-indigo-300 rounded-2xl cursor-pointer transition-all duration-200 shadow-xs group"
                                            >
                                                <div className="flex items-center gap-3">
                                                    <div className="w-7 h-7 rounded-xl bg-indigo-50 group-hover:bg-indigo-600 flex items-center justify-center text-indigo-600 group-hover:text-white transition-colors flex-shrink-0 font-bold text-xs">
                                                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                                    </div>
                                                    <div className="flex-1 overflow-hidden">
                                                        <h4 className="font-bold text-slate-900 text-xs group-hover:text-indigo-600 transition-colors">{sp.title}</h4>
                                                        <p className="text-[11px] text-slate-500 font-medium leading-snug mt-0.5 truncate">{sp.desc}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}

                            <div ref={chatEndRef}></div>
                        </div>

                        {/* CHIPS DE ACCESO RÁPIDO */}
                        <div className="p-2.5 bg-white border-t border-slate-100 flex gap-1.5 overflow-x-auto no-scrollbar">
                            <button onClick={() => handleSendPrompt("Proporciona un resumen de la puntualidad del personal este mes")} className="px-3 py-1 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-full font-bold text-[10px] whitespace-nowrap cursor-pointer transition-colors">Puntualidad Mes</button>
                            <button onClick={() => handleSendPrompt("Calcula los costos de nómina e INSS Patronal de la quincena")} className="px-3 py-1 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-full font-bold text-[10px] whitespace-nowrap cursor-pointer transition-colors">Nómina e INSS</button>
                            <button onClick={() => handleSendPrompt("Verificar si hay contratos laborales próximos a vencer")} className="px-3 py-1 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-full font-bold text-[10px] whitespace-nowrap cursor-pointer transition-colors">Vencimiento Contratos</button>
                        </div>

                        {/* CAJA DE ENTRADA DE MENSAJES */}
                        <form onSubmit={(e) => { e.preventDefault(); handleSendPrompt(); }} className="p-4 border-t border-slate-200/80 bg-white flex items-center gap-2">
                            <input 
                                type="text"
                                value={inputPrompt}
                                onChange={e => setInputPrompt(e.target.value)}
                                placeholder="Escribe tu consulta sobre asistencia, nómina o contratos..."
                                className="flex-1 p-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold outline-none focus:border-indigo-600 focus:bg-white transition-all"
                                disabled={isLoading}
                            />
                            <button 
                                type="submit"
                                disabled={isLoading || !inputPrompt.trim()}
                                className="w-11 h-11 bg-slate-900 hover:bg-black disabled:opacity-40 text-white rounded-2xl shadow-md active:scale-95 transition-all flex items-center justify-center cursor-pointer flex-shrink-0"
                                title="Enviar Consulta"
                            >
                                <svg className="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
                            </button>
                        </form>
                    </div>
                </div>
            )}
        </React.Fragment>
    );
};