// ==============================================================================
// SHIFT ERP - MODULO INDEPENDIENTE BANDEJA & CHAT WHATSAPP WEB
// ==============================================================================

window.AdminWhatsAppModal = function({ 
    isOpen, 
    onClose, 
    activeClientId, 
    adminAlerts = { unread_count: 0, alerts: [] }, 
    fetchAdminAlerts = () => {}, 
    showToast = () => {},
    initialSelectedUser = null
}) {
    if (!isOpen) return null;

    const [conversations, setConversations] = React.useState([]);
    const [chatSearchQuery, setChatSearchQuery] = React.useState('');
    const [selectedChatUser, setSelectedChatUser] = React.useState(initialSelectedUser);
    const [chatHistory, setChatHistory] = React.useState([]);
    const [adminReplyText, setAdminReplyText] = React.useState('');
    const [isSendingReply, setIsSendingReply] = React.useState(false);
    const chatEndRef = React.useRef(null);

    const fetchConversations = React.useCallback(async () => {
        try {
            const res = await window.apiCall('get_chat_conversations', {}, activeClientId);
            if (res && res.success) {
                setConversations(res.conversations || []);
            }
        } catch (e) {}
    }, [activeClientId]);

    const handleLoadChatHistory = React.useCallback(async (userObj) => {
        if (!userObj) return;
        setSelectedChatUser(userObj);
        try {
            const res = await window.apiCall('get_chat_history', { 
                user_id: userObj.user_id || userObj.id || 0,
                phone: userObj.phone || userObj.sender_phone || ''
            }, activeClientId);
            if (res && res.success) {
                setChatHistory(res.messages || []);
            }
        } catch (e) {}
    }, [activeClientId]);

    React.useEffect(() => {
        if (isOpen) {
            fetchConversations();
            fetchAdminAlerts();
            if (initialSelectedUser) {
                handleLoadChatHistory(initialSelectedUser);
            }
        }
    }, [isOpen, fetchConversations, fetchAdminAlerts, initialSelectedUser, handleLoadChatHistory]);

    // Polling en vivo mientras el modal está abierto
    React.useEffect(() => {
        if (!isOpen) return;
        const interval = setInterval(() => {
            fetchConversations();
            fetchAdminAlerts();
            if (selectedChatUser) {
                handleLoadChatHistory(selectedChatUser);
            }
        }, 3500);
        return () => clearInterval(interval);
    }, [isOpen, fetchConversations, fetchAdminAlerts, selectedChatUser, handleLoadChatHistory]);

    // Auto-scroll al fondo al actualizar historial
    React.useEffect(() => {
        if (chatEndRef.current) {
            chatEndRef.current.scrollIntoView({ behavior: 'smooth' });
        }
    }, [chatHistory]);

    const handleMarkAlertRead = async (alertId = 0) => {
        try {
            await window.apiCall('mark_alert_read', { alert_id: alertId }, activeClientId);
            await fetchAdminAlerts();
            await fetchConversations();
        } catch (e) {}
    };

    const handleSendAdminReply = async () => {
        if (!selectedChatUser || !adminReplyText.trim()) return;
        setIsSendingReply(true);
        try {
            const res = await window.apiCall('send_admin_chat_reply', {
                user_id: selectedChatUser.user_id || selectedChatUser.id || 0,
                phone: selectedChatUser.phone || selectedChatUser.sender_phone || '',
                message: adminReplyText.trim()
            }, activeClientId);
            if (res && res.success) {
                if (typeof showToast === 'function') showToast("✅ Respuesta enviada vía WhatsApp.");
                setAdminReplyText('');
                await handleLoadChatHistory(selectedChatUser);
                await fetchConversations();
            } else {
                if (typeof showToast === 'function') showToast("⚠️ Error: " + (res?.error || "Fallo de envío"));
            }
        } catch (e) {
            if (typeof showToast === 'function') showToast("Error de conexión al responder.");
        } finally {
            setIsSendingReply(false);
        }
    };

    return (
        <div className="fixed inset-0 bg-slate-950/80 z-[130] flex items-center justify-center p-2 sm:p-4 fade-in" onClick={onClose}>
            <div className="bg-[#111b21] rounded-2xl max-w-6xl w-full h-[90vh] overflow-hidden shadow-2xl border border-slate-700/60 flex flex-col" onClick={e => e.stopPropagation()}>
                
                {/* MAIN LAYOUT 2 COLUMNAS WHATSAPP WEB */}
                <div className="flex-1 flex flex-col md:flex-row overflow-hidden bg-[#0b141a]">
                    
                    {/* COLUMNA IZQUIERDA: BUZÓN DE CONVERSACIONES / CONTACTOS */}
                    <div className={`w-full md:w-5/12 lg:w-4/12 border-r border-[#222d34] flex flex-col h-full bg-[#111b21] ${selectedChatUser ? 'hidden md:flex' : 'flex'}`}>
                        
                        {/* HEADER DE BARRA IZQUIERDA */}
                        <div className="p-3 bg-[#202c33] border-b border-[#222d34] flex justify-between items-center text-white">
                            <div className="flex items-center gap-2.5">
                                <div className="w-9 h-9 rounded-full bg-emerald-600 text-white flex items-center justify-center font-black text-sm shadow-sm">
                                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/></svg>
                                </div>
                                <div>
                                    <h3 className="font-bold text-sm text-white leading-tight">Buzón WhatsApp</h3>
                                    <p className="text-[10px] font-medium text-emerald-400">
                                        Conversaciones & Alertas
                                    </p>
                                </div>
                            </div>
                            <div className="flex items-center gap-2">
                                {adminAlerts.unread_count > 0 && (
                                    <span className="bg-[#00a884] text-[#111b21] text-[10px] font-black px-2 py-0.5 rounded-full shadow-xs">
                                        {adminAlerts.unread_count} no leídas
                                    </span>
                                )}
                                <button onClick={onClose} className="p-1.5 text-[#8696a0] hover:text-white rounded-full hover:bg-[#2a3942] transition-colors cursor-pointer" title="Cerrar modal">
                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
                                </button>
                            </div>
                        </div>

                        {/* BUSCADOR DE CONTACTOS */}
                        <div className="p-2.5 bg-[#111b21] border-b border-[#222d34]">
                            <div className="relative flex items-center bg-[#202c33] rounded-xl px-3 py-1.5">
                                <svg className="w-4 h-4 text-[#8696a0] mr-2 flex-shrink-0" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                                <input 
                                    type="text"
                                    value={chatSearchQuery}
                                    onChange={e => setChatSearchQuery(e.target.value)}
                                    placeholder="Buscar colaborador o mensaje..."
                                    className="bg-transparent border-none text-white text-xs placeholder-[#8696a0] focus:outline-none w-full font-medium"
                                />
                                {chatSearchQuery && (
                                    <button onClick={() => setChatSearchQuery('')} className="text-[#8696a0] hover:text-white text-xs">✕</button>
                                )}
                            </div>
                        </div>

                        {/* LISTA DE BUZÓN DE CHATS POR USUARIO */}
                        <div className="flex-1 overflow-y-auto divide-y divide-[#222d34]/40">
                            {conversations.length === 0 ? (
                                <div className="p-8 text-center text-[#8696a0] text-xs">
                                    <svg className="w-10 h-10 mx-auto text-[#2a3942] mb-2" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                                    Cargando conversaciones de la empresa...
                                </div>
                            ) : (
                                conversations
                                    .filter(c => {
                                        if (!chatSearchQuery.trim()) return true;
                                        const q = chatSearchQuery.toLowerCase();
                                        return (c.name || '').toLowerCase().includes(q) || (c.phone || '').includes(q) || (c.last_message || '').toLowerCase().includes(q);
                                    })
                                    .map(conv => {
                                        const isSelected = selectedChatUser && (
                                            (conv.user_id > 0 && (selectedChatUser.user_id === conv.user_id || selectedChatUser.id === conv.user_id)) ||
                                            (conv.user_id === 0 && conv.phone && conv.phone.length >= 8 && (selectedChatUser.phone === conv.phone || selectedChatUser.sender_phone === conv.phone))
                                        );
                                        return (
                                            <div 
                                                key={conv.user_id > 0 ? `u_${conv.user_id}` : `p_${conv.phone}`}
                                                onClick={() => {
                                                    if (conv.unread_count > 0) handleMarkAlertRead(0);
                                                    handleLoadChatHistory(conv);
                                                }}
                                                className={`p-3 flex items-center gap-3 transition-colors cursor-pointer border-l-4 ${isSelected ? 'bg-[#2a3942] border-[#00a884]' : conv.unread_count > 0 ? 'bg-[#182229] border-[#00a884] hover:bg-[#202c33]' : 'border-transparent hover:bg-[#202c33]'}`}
                                            >
                                                {/* AVATAR */}
                                                <div className="w-11 h-11 rounded-full bg-emerald-700 text-white font-bold text-sm flex items-center justify-center flex-shrink-0 relative shadow-sm">
                                                    {(conv.name || 'U')[0].toUpperCase()}
                                                    {conv.unread_count > 0 && (
                                                        <span className="absolute -top-1 -right-1 bg-[#00a884] text-[#111b21] font-black text-[10px] w-5 h-5 rounded-full flex items-center justify-center shadow-md animate-bounce">
                                                            {conv.unread_count}
                                                        </span>
                                                    )}
                                                </div>

                                                {/* DETALLES CONVERSACIÓN */}
                                                <div className="flex-1 min-w-0">
                                                    <div className="flex justify-between items-baseline mb-0.5">
                                                        <span className="font-bold text-xs text-[#e9edef] truncate">{conv.name}</span>
                                                        {conv.last_time && (
                                                            <span className="text-[10px] text-[#8696a0] flex-shrink-0 font-mono">
                                                                {new Date(Number(conv.last_time)).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                                            </span>
                                                        )}
                                                    </div>
                                                    <div className="flex items-center justify-between gap-1">
                                                        <p className="text-xs text-[#8696a0] truncate font-normal leading-tight">
                                                            {conv.direction === 'outgoing' && <span className="text-emerald-400 mr-1">✓✓</span>}
                                                            {conv.last_message}
                                                        </p>
                                                    </div>
                                                    <span className="text-[9px] text-emerald-400/80 font-medium block truncate mt-0.5">
                                                        {conv.role} {conv.phone ? `• +${conv.phone}` : ''}
                                                    </span>
                                                </div>
                                            </div>
                                        );
                                    })
                            )}
                        </div>
                    </div>

                    {/* COLUMNA DERECHA: VENTANA DE CHAT WHATSAPP WEB */}
                    <div className={`w-full md:w-7/12 lg:w-8/12 flex flex-col h-full bg-[#0b141a] relative ${!selectedChatUser ? 'hidden md:flex' : 'flex'}`}>
                        {selectedChatUser ? (
                            <div className="flex flex-col h-full relative">
                                {/* HEADER DEL CHAT ACTIVO */}
                                <div className="p-3 bg-[#202c33] border-b border-[#222d34] flex justify-between items-center shadow-md text-white z-10">
                                    <div className="flex items-center gap-3">
                                        <button onClick={() => setSelectedChatUser(null)} className="md:hidden p-1.5 text-[#8696a0] hover:text-white rounded-lg">
                                            ←
                                        </button>
                                        <div className="w-10 h-10 rounded-full bg-emerald-600 text-white flex items-center justify-center font-bold text-sm shadow-sm">
                                            {(selectedChatUser.name || 'U')[0].toUpperCase()}
                                        </div>
                                        <div>
                                            <h4 className="font-bold text-sm text-[#e9edef]">{selectedChatUser.name}</h4>
                                            <span className="text-[11px] text-[#8696a0] font-medium block">
                                                {selectedChatUser.role || 'Colaborador'} {selectedChatUser.phone ? `• +${selectedChatUser.phone}` : ''}
                                            </span>
                                        </div>
                                    </div>
                                    <button 
                                        onClick={() => handleLoadChatHistory(selectedChatUser)} 
                                        className="p-2 text-[#8696a0] hover:text-white hover:bg-[#2a3942] rounded-full transition-colors" 
                                        title="Actualizar conversación"
                                    >
                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                    </button>
                                </div>

                                {/* MENSAJES (ESTILO BUBBLE WHATSAPP WEB, RECIENTES ABAJO) */}
                                <div className="flex-1 p-4 overflow-y-auto space-y-3 bg-[#0b141a] relative">
                                    {/* Fondo de patrón WhatsApp sutil */}
                                    <div className="absolute inset-0 opacity-[0.03] pointer-events-none bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>

                                    {chatHistory.length === 0 ? (
                                        <div className="p-8 text-center text-[#8696a0] text-xs">
                                            No hay mensajes registrados con este usuario.
                                        </div>
                                    ) : (
                                        chatHistory.map(m => {
                                            const isIncoming = m.direction === 'incoming';
                                            return (
                                                <div key={m.id} className={`flex flex-col ${isIncoming ? 'items-start' : 'items-end'} relative z-10`}>
                                                    <div className={`max-w-[85%] sm:max-w-[75%] rounded-2xl px-3.5 py-2 shadow-md text-xs relative ${
                                                        isIncoming 
                                                            ? 'bg-[#202c33] text-[#e9edef] rounded-tl-xs border border-[#2a3942]/60' 
                                                            : 'bg-[#005c4b] text-[#e9edef] rounded-tr-xs border border-[#007a63]/40'
                                                    }`}>
                                                        <div className="flex justify-between items-center gap-4 text-[10px] font-bold mb-1 opacity-90">
                                                            <span className={isIncoming ? 'text-emerald-400' : 'text-emerald-200'}>
                                                                {m.sender_name || (isIncoming ? selectedChatUser.name : 'Shift ERP')}
                                                            </span>
                                                            <span className="text-[#8696a0] font-mono text-[9px]">
                                                                {window.formatNICTimeFull ? window.formatNICTimeFull(m.created_at) : new Date(m.created_at).toLocaleTimeString()}
                                                            </span>
                                                        </div>
                                                        <p className="whitespace-pre-wrap leading-relaxed select-text font-normal">{m.message_text || m.message_body || m.message || ''}</p>
                                                        {!isIncoming && (
                                                            <div className="text-[10px] text-emerald-200/80 text-right mt-0.5 flex items-center justify-end gap-1 font-mono">
                                                                <span>✓✓</span>
                                                            </div>
                                                        )}
                                                    </div>
                                                </div>
                                            );
                                        })
                                    )}
                                    <div ref={chatEndRef} />
                                </div>

                                {/* CAJA DE ENVIAR MENSAJE (WHATSAPP WEB BAR) */}
                                <div className="p-3 bg-[#202c33] border-t border-[#222d34] flex items-center gap-2.5 z-10">
                                    <input 
                                        type="text" 
                                        value={adminReplyText}
                                        onChange={e => setAdminReplyText(e.target.value)}
                                        onKeyDown={e => { if (e.key === 'Enter') handleSendAdminReply(); }}
                                        placeholder={`Escribe un mensaje a ${selectedChatUser.name} por WhatsApp...`} 
                                        className="flex-1 px-4 py-2.5 bg-[#2a3942] border border-[#374248] rounded-xl text-xs text-white placeholder-[#8696a0] focus:outline-none focus:border-[#00a884] focus:bg-[#202c33] font-medium transition-all"
                                    />
                                    <button 
                                        onClick={handleSendAdminReply} 
                                        disabled={isSendingReply || !adminReplyText.trim()}
                                        className="w-10 h-10 rounded-xl bg-[#00a884] hover:bg-[#029071] text-[#111b21] flex items-center justify-center font-bold shadow-md transition-all cursor-pointer flex-shrink-0 disabled:opacity-40"
                                        title="Enviar mensaje por WhatsApp"
                                    >
                                        {isSendingReply ? (
                                            <span className="text-xs font-bold">...</span>
                                        ) : (
                                            <svg className="w-5 h-5 transform rotate-45 -mt-0.5 -ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
                                        )}
                                    </button>
                                </div>
                            </div>
                        ) : (
                            <div className="flex-1 flex flex-col items-center justify-center p-8 text-center text-[#8696a0] bg-[#222e35]">
                                <div className="w-20 h-20 rounded-full bg-[#2a3942] flex items-center justify-center text-[#00a884] mb-4 shadow-lg">
                                    <svg className="w-10 h-10" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/></svg>
                                </div>
                                <h4 className="font-black text-lg text-white mb-1">Shift ERP • WhatsApp Web</h4>
                                <p className="text-xs text-[#8696a0] max-w-sm leading-relaxed">
                                    Selecciona un colaborador del buzón de la izquierda para abrir su chat en vivo, revisar el historial de mensajes y enviar notificaciones o respuestas por WhatsApp.
                                </p>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};