// ECO-PANNEAU.FR - _react/clients/_clients_messages.jsx

// 1. - LOGIQUE MÉTIER : GÉNÉRATION DES CONVERSATIONS CLIENTS
window.pano_buildClientChatThreads = (interactions, myClientData, visiblePanels, pendingInvites) => {
    const threadsMap = {};

    const expectedFullName = myClientData.full_name || 'Utilisateur';
    const expectedCompany = myClientData.name || 'Société';
    const expectedAuthorName = `${expectedFullName} (${expectedCompany})`;
    
    // CORRECTION SÉCURITÉ : Tolérance universelle pour l'identification
    const isMe = (uid) => uid === myClientData.id || uid === myClientData.email_hash;

    interactions.forEach(m => {
        if (m.isAlert === 2) return; 

        let threadId, title, targetEmail, type;
        
        const isMyOwnMessage = (m.authorType === 'Client' && (
            m.author === 'Client' || 
            m.author === myClientData.email || 
            m.author === myClientData.full_name || 
            m.author === myClientData.name ||
            m.author === expectedAuthorName
        ));

        let unread = (!m.resolved && !isMyOwnMessage && m.authorType !== 'Systeme' && m.authorType !== 'System') ? 1 : 0;

        if (m.panneauId === `SUPPORT_${myClientData.id}`) {
            threadId = m.panneauId;
            title = "Support Technique";
            targetEmail = "eco-panneau.fr";
            type = 'support';
        } else if (m.panneauId.startsWith('GROUP_')) {
            const pId = m.panneauId.replace('GROUP_', '');
            const hasAccess = visiblePanels.some(p => p.id === pId) || pendingInvites.some(p => p.id === pId);
            if (!hasAccess) return;
            
            const pObj = visiblePanels.find(p => p.id === pId) || pendingInvites.find(p => p.id === pId);
            threadId = m.panneauId;
            title = pObj?.name ? `Équipe Projet : ${pObj.name}` : `Équipe Projet`;
            targetEmail = "Membres de l'équipe";
            type = 'group';
        } else {
            const panneauObj = visiblePanels.find(p => p.id === m.panneauId);
            if (!panneauObj) return;

            const isOwner = panneauObj.client_uid === myClientData.id;
            const myCollab = !isOwner ? panneauObj.collaborators?.find(c => isMe(c.uid)) : null;
            const hasRiverainAccess = isOwner || (myCollab && myCollab.rights?.chat_access !== 'none');
            
            if (!hasRiverainAccess) return;

            const visitorEmail = (m.authorType === 'Admin' || m.authorType === 'Systeme' || m.authorType === 'System' || isMyOwnMessage) ? m.target : m.author;
            threadId = `${m.panneauId}_${visitorEmail}`;
            title = `Riverain : ${visitorEmail}`;
            targetEmail = panneauObj.name || '';
            type = 'riverain';
        }

        if (!threadsMap[threadId]) {
            threadsMap[threadId] = {
                id: threadId,
                panneauId: m.panneauId,
                title,
                targetEmail,
                type,
                messages: [],
                unread: 0
            };
        }
        threadsMap[threadId].messages.push(m);
        threadsMap[threadId].unread += unread;
    });

    return Object.values(threadsMap).sort((a, b) => {
        const dateA = a.messages.length > 0 ? new Date(String(a.messages[a.messages.length - 1].created_at || '').replace(' ', 'T')).getTime() : 0;
        const dateB = b.messages.length > 0 ? new Date(String(b.messages[b.messages.length - 1].created_at || '').replace(' ', 'T')).getTime() : 0;
        return dateB - dateA;
    });
};

// 2. - COMPOSANT PRINCIPAL : MESSAGERIE CLIENT
window.pano_ClientMessagesTab = ({ data, myClientData, refreshData, showToast, setPanelTeamModal, openLocalDialog, closeCurrentLayer, activeDialog, clientOpts, toggleDashboardPin, isLockedForClient }) => {
    const { useState, useMemo } = React;
    
    // 2.1 - SÉCURITÉ ANTI-FUITE DE MÉMOIRE : Utilisation du Hook Global Zéro-Dette
    const { isMounted, safeFetch } = window.pano_useSafeFetch();

    // 2.2 - États et Routage Zéro-Dette
    const [isSaving, setIsSaving] = useState(false);
    const urlModal = window.pano_useUrlModal ? window.pano_useUrlModal() : {};

    const routerActiveDialog = activeDialog || urlModal.activeDialog;
    const routerOpenDialog = openLocalDialog || urlModal.openDialog;
    const routerCloseLayer = closeCurrentLayer || urlModal.closeCurrentLayer;

    const [newThreadData, setNewThreadData] = useState({ subject: 'support_technique', message: '', specificPanel: '' });

    // 2.3 - Composants et Icônes
    const { 
        UsersIcon, MessageSquareIcon, MessageCircleIcon, MailIcon, 
        AlertTriangleIcon, SendIcon, LoaderIcon, CheckCircleIcon, PlusIcon, PinIcon
    } = window.pano_getIcons();

    const {
        IconBadge, NotificationBadge, Button, Modal, FormTextarea, 
        CardGrid, DataCard, SearchBar, EmptySearch, PaginationFooter
    } = window.pano_getComponents();

    // 2.4 - Logique de recherche et pagination
    const allPanels = data.panneaux || [];
    const interactions = data.interactions || [];

    const { pendingInvites, visiblePanels } = window.pano_getPanelAccessRights ? window.pano_getPanelAccessRights(allPanels, myClientData.id, myClientData.email_hash) : { pendingInvites:[], visiblePanels:[] };
    let threads = window.pano_buildClientChatThreads(interactions, myClientData, visiblePanels, pendingInvites);

    if (isLockedForClient) {
        threads = threads.filter(t => t.type === 'support');
    }

    const { 
        searchQuery, setSearchQuery, 
        visibleCount, setVisibleCount, 
        filteredData 
    } = window.pano_useSearchAndPagination(threads, (t, q) => {
        const n = window.pano_normalizeString;
        const statusStr = n(t.unread > 0 ? "non lu " : "lu ");
        return n(t.title).includes(q) || 
               n(t.targetEmail).includes(q) ||
               n(t.type).includes(q) ||
               statusStr.includes(q); 
    });

    const openChat = (id, e) => {
        if (e) { e.preventDefault(); e.stopPropagation(); }
        urlModal.openChat(id, false);
        if (refreshData) refreshData();
    };

    // 2.5 - Actions métier sécurisées
    const handleNewThreadSubmit = async (e) => {
        e.preventDefault();
        if (!newThreadData.message.trim()) return;

        let endpoint = 'interactions';
        let body = {};

        if (newThreadData.subject === 'support_technique' || newThreadData.subject === 'support_billing' || newThreadData.subject === 'support_legal') {
            body = { panneauId: `SUPPORT_${myClientData.id}`, detail: `[${newThreadData.subject.split('_')[1].toUpperCase()}] ${newThreadData.message}`, author: 'Client', targetEmail: 'Support Technique', type: 'message' };
        } else if (newThreadData.subject === 'equipe_projet') {
            if (!newThreadData.specificPanel) return showToast("Veuillez sélectionner un panneau.", "error");
            body = { panneauId: `GROUP_${newThreadData.specificPanel}`, detail: newThreadData.message, author: 'Client', targetEmail: 'Groupe', type: 'message' };
        } else {
            return;
        }

        const d = await safeFetch(endpoint, {
            body,
            setLoading: setIsSaving,
            successMessage: "Message envoyé avec succès !"
        });

        if (!isMounted.current) return; // SÉCURITÉ : Coupe-circuit anti-fuite de mémoire

        if (d) {
            setNewThreadData({ subject: 'support_technique', message: '', specificPanel: '' });
            if (refreshData) refreshData();
            // Remplacement de la couche de dialogue actuelle par la modale de Chat
            urlModal.replaceCurrentLayer('chat', 'chat', body.panneauId, false);
        }
    };

    // 2.6 - Rendu dynamique des cartes
    const getThreadIcon = (type) => {
        switch(type) {
            case 'support': return MessageSquareIcon;
            case 'group': return UsersIcon;
            case 'riverain': return MessageCircleIcon;
            default: return MailIcon;
        }
    };

    const getThreadVariant = (type) => {
        switch(type) {
            case 'support': return 'success';
            case 'group': return 'info';
            case 'riverain': return 'warning';
            default: return 'secondary';
        }
    };

    const getThreadTitleClass = (type) => {
        if (type === 'support') return 'font-black text-emerald-700';
        if (type === 'group') return 'font-black text-blue-700';
        if (type === 'riverain') return 'font-black text-amber-700';
        return 'font-bold text-slate-800';
    };

    const pinnedIds = clientOpts?.pinned_threads || [];
    
    const attentionThreads = [];
    const pinnedThreads = [];
    const otherThreads = [];

    // CLASSIFICATION : URGENCE > FAVORIS > RESTE
    filteredData.forEach(t => {
        const isPinned = pinnedIds.includes(t.id);
        
        if (t.unread > 0) {
            attentionThreads.push(t);
        } else if (isPinned) {
            pinnedThreads.push(t);
        } else {
            otherThreads.push(t);
        }
    });

    const displayedOtherThreads = otherThreads.slice(0, visibleCount);

    const renderThreadCard = (t) => {
        const lastMsg = t.messages.length > 0 ? t.messages[t.messages.length - 1] : null;
        const isPinned = pinnedIds.includes(t.id);
        
        return (
            <DataCard 
                key={t.id} 
                onClick={(e) => openChat(t.id, e)} 
                className="group gap-3 relative cursor-pointer p-4 transition-colors hover:border-emerald-300"
            >
                {/* ÉPINGLE VOLANTE ET INCLINÉE (INDIGO POUR LES MESSAGES) */}
                <div 
                    role="button" 
                    tabIndex={0} 
                    onClick={(e) => { e.stopPropagation(); toggleDashboardPin && toggleDashboardPin('pinned_threads', t.id, e); }} 
                    className={`absolute top-2 right-2 z-20 p-1 cursor-pointer transition-all duration-200 ${isPinned ? 'text-indigo-500 opacity-100 hover:scale-110' : 'text-slate-300 opacity-0 group-hover:opacity-100 hover:text-slate-500 hover:scale-110'}`}
                    style={{ transform: 'rotate(30deg)' }}
                    title={isPinned ? "Désépingler" : "Épingler au tableau de bord"}
                >
                    <PinIcon size={18} filled={isPinned} />
                </div>

                <div className="flex justify-between items-start gap-2 mb-2">
                    <div className="flex items-center gap-3 min-w-0 flex-1">
                        {IconBadge && (
                            <IconBadge 
                                icon={getThreadIcon(t.type)} 
                                variant={getThreadVariant(t.type)} 
                                size="md" 
                            />
                        )}
                        <div className="min-w-0 flex-1">
                            <p className={`text-sm break-words leading-tight ${getThreadTitleClass(t.type)}`}>{t.title}</p>
                            {t.targetEmail && <p className="text-[10px] uppercase tracking-widest text-slate-400 font-bold mt-0.5 truncate">{t.targetEmail}</p>}
                        </div>
                    </div>
                    <div className="shrink-0 relative z-10 mt-1">
                        <NotificationBadge count={t.unread} />
                    </div>
                </div>
                
                <div className="pt-3 border-t border-slate-100 flex-1">
                    <div className={`text-sm max-h-16 overflow-y-auto custom-scrollbar break-words block ${t.unread > 0 ? 'text-slate-800 font-bold' : 'text-slate-600'}`}>
                        {lastMsg ? lastMsg.detail.replace(/\[ATTACHMENT:[^\]]+\]/g, '[Pièce jointe]').replace(/<[^>]*>?/gm, '') : <span className="italic text-slate-400">Nouvelle conversation...</span>}
                    </div>
                </div>
                
                <div className="text-[10px] font-bold text-slate-400 text-right mt-2 flex justify-between items-center">
                    <span className={`px-2 py-0.5 rounded uppercase tracking-wider ${t.type === 'support' ? 'bg-emerald-50 text-emerald-600' : (t.type === 'group' ? 'bg-blue-50 text-blue-600' : 'bg-amber-50 text-amber-600')}`}>
                        {t.type}
                    </span>
                    <span>{lastMsg ? new Date(String(lastMsg.created_at || '').replace(' ', 'T')).toLocaleString('fr-FR') : ''}</span>
                </div>
            </DataCard>
        );
    };

    // 3. - RENDU UI
    return (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
            
            {/* 3.1 - En-tête */}
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
                <div>
                    <h1 className="text-3xl font-black text-slate-800">Messagerie Globale</h1>
                    <p className="text-slate-500 font-medium">Boîte de réception centralisée (Support, Riverains, Équipe).</p>
                </div>
                
                {threads.length > 0 && SearchBar && (
                    <div className="w-full md:w-auto flex-1 flex justify-end gap-2">
                        <SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} placeholder="Rechercher (Nom, Projet)..." />
                        <Button variant="primary" icon={PlusIcon} onClick={(e) => routerOpenDialog('new_thread', null)} className="px-4 py-3 shrink-0 shadow-md">
                            <span className="hidden sm:inline">Nouveau message</span>
                        </Button>
                    </div>
                )}
                {threads.length === 0 && (
                    <div className="flex gap-2 shrink-0">
                        <Button variant="primary" icon={PlusIcon} onClick={(e) => routerOpenDialog('new_thread', null)} className="px-4 py-2 shadow-md">
                            Contacter le Support Technique
                        </Button>
                    </div>
                )}
            </div>

            {/* 3.2 - Liste des conversations */}
            {threads.length === 0 ? (
                <div className="p-12 text-center text-slate-500 bg-white rounded-3xl border border-slate-200 border-dashed">
                    <MessageSquareIcon size={48} className="mx-auto mb-4 opacity-50"/>
                    <p className="font-medium">Votre boîte de réception est vide.</p>
                </div>
            ) : filteredData.length === 0 ? (
                EmptySearch && <EmptySearch searchQuery={searchQuery} />
            ) : (
                <>
                    {/* A. PRIORITÉ */}
                    {attentionThreads.length > 0 && (
                        <div className="mb-10 space-y-4">
                            <h2 className="text-lg font-black text-slate-800 flex items-center gap-2 border-b border-slate-200 pb-2">
                                <AlertTriangleIcon size={20} className="text-amber-500" /> Messages non lus
                            </h2>
                            <CardGrid minWidth="300px">
                                {attentionThreads.map(renderThreadCard)}
                            </CardGrid>
                        </div>
                    )}

                    {/* B. FAVORIS */}
                    {pinnedThreads.length > 0 && (
                        <div className="mb-10 space-y-4">
                            <h2 className="text-lg font-black text-slate-800 flex items-center gap-2 border-b border-slate-200 pb-2">
                                <PinIcon size={20} className="text-emerald-600" filled /> Favoris (Épinglés)
                            </h2>
                            <CardGrid minWidth="300px">
                                {pinnedThreads.map(renderThreadCard)}
                            </CardGrid>
                        </div>
                    )}

                    {/* C. LE RESTE */}
                    {otherThreads.length > 0 && (
                        <div className="space-y-4">
                            <h2 className="text-lg font-black text-slate-800 flex items-center gap-2 border-b border-slate-200 pb-2">
                                <MessageSquareIcon size={20} className="text-blue-600" /> Historique des conversations
                            </h2>
                            <CardGrid minWidth="300px">
                                {displayedOtherThreads.map(renderThreadCard)}
                            </CardGrid>
                            
                            {PaginationFooter && (
                                <PaginationFooter 
                                    visibleCount={visibleCount} 
                                    setVisibleCount={setVisibleCount} 
                                    totalCount={otherThreads.length} 
                                    itemName="conversations" 
                                />
                            )}
                        </div>
                    )}
                </>
            )}

            {/* 4. - Modale : Nouvelle conversation */}
            {routerActiveDialog === 'new_thread' && Modal && (
                <Modal 
                    title="Démarrer une conversation" 
                    onClose={routerCloseLayer} 
                    preventClose={isSaving} 
                    actions={(close) => (
                        <>
                            <Button variant="secondary" type="button" onClick={close} disabled={isSaving} className="flex-1 py-3 justify-center text-xs">
                                Annuler
                            </Button>
                            <Button variant="primary" type="submit" form="new-thread-form" disabled={isSaving || !newThreadData.message.trim() || (newThreadData.subject === 'equipe_projet' && !newThreadData.specificPanel)} icon={isSaving ? LoaderIcon : SendIcon} className="flex-[2] py-3 uppercase tracking-widest justify-center shadow-md text-xs">
                                Envoyer
                            </Button>
                        </>
                    )}
                >
                    <form id="new-thread-form" onSubmit={handleNewThreadSubmit} className="space-y-4">
                        <div className="space-y-2">
                            <label className="text-xs font-bold text-slate-500 uppercase block">Destinataire / Sujet <span className="text-red-500">*</span></label>
                            <select 
                                required
                                value={newThreadData.subject} 
                                onChange={e => setNewThreadData({...newThreadData, subject: e.target.value, specificPanel: ''})} 
                                disabled={isSaving || isLockedForClient}
                                className="w-full border-2 border-slate-200 rounded-xl p-3 focus:border-emerald-500 outline-none transition font-bold text-slate-700 bg-white disabled:opacity-50 disabled:bg-slate-100"
                            >
                                <option value="support_technique">Support Technique (Bugs, Utilisation)</option>
                                {!isLockedForClient && <option value="support_billing">Service facturation (Abonnements, Devis)</option>}
                                {!isLockedForClient && <option value="support_legal">Support Juridique (Aide sur les D.O.E)</option>}
                                {!isLockedForClient && visiblePanels.length > 0 && <option value="equipe_projet">Message à l'équipe d'un projet (Collaborateurs)</option>}
                            </select>
                        </div>

                        {newThreadData.subject === 'equipe_projet' && (
                            <div className="space-y-2 animate-in fade-in slide-in-from-top-2">
                                <label className="text-xs font-bold text-slate-500 uppercase block">Sélectionnez le projet concerné <span className="text-red-500">*</span></label>
                                <select 
                                    required
                                    value={newThreadData.specificPanel} 
                                    onChange={e => setNewThreadData({...newThreadData, specificPanel: e.target.value})} 
                                    disabled={isSaving}
                                    className="w-full border-2 border-slate-200 rounded-xl p-3 focus:border-emerald-500 outline-none transition font-bold text-slate-700 bg-white"
                                >
                                    <option value="" disabled>-- Choisir un panneau --</option>
                                    {visiblePanels.map(p => (
                                        <option key={p.id} value={p.id}>{p.name} ({p.location || 'Localisation inconnue'})</option>
                                    ))}
                                </select>
                                <div className="flex justify-between items-center mt-1">
                                    <p className="text-[10px] text-slate-500">Ce message sera visible par tous les collaborateurs ayant accès à ce panneau.</p>
                                    {newThreadData.specificPanel && setPanelTeamModal && (
                                        <div role="button" tabIndex={0} onClick={(e) => { routerCloseLayer(e); setTimeout(() => { setPanelTeamModal(visiblePanels.find(p=>p.id===newThreadData.specificPanel)); routerOpenDialog('team', null, false); }, 200); }} className="text-[10px] font-bold text-blue-600 hover:text-blue-800 cursor-pointer">
                                            Gérer l'équipe
                                        </div>
                                    )}
                                </div>
                            </div>
                        )}

                        {FormTextarea && (
                            <FormTextarea 
                                label="Votre message *" 
                                value={newThreadData.message} 
                                onChange={e => setNewThreadData({...newThreadData, message: e.target.value})} 
                                rows={5} 
                                required 
                                disabled={isSaving}
                            />
                        )}
                    </form>
                </Modal>
            )}
        </div>
    );
};

/* EOF ========== [_react/clients/_clients_messages.jsx] */