/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Interface Client - Onglet : Messagerie (Vue en liste)
 * =========================================================================
 */

// =========================================================================
// 1. LOGIQUE MÉTIER : COMPILATION DES FILS DE DISCUSSION CLIENT
// =========================================================================
window.pano_buildClientChatThreads = (interactions, myClientData, visiblePanels, pendingInvites) => {
    const supportThreadId = `SUPPORT_${myClientData.id}`;
    const threadsMap = {
        [supportThreadId]: { id: supportThreadId, title: "Support technique", targetEmail: 'Admin', messages: [], unread: 0, type: 'support' }
    };

    [...visiblePanels, ...pendingInvites].forEach(p => {
        const groupId = `GROUP_${p.id}`;
        threadsMap[groupId] = {
            id: groupId, panneauId: p.id, title: `Équipe du panneau : ${p.name || 'Brouillon'}`,
            targetEmail: 'Groupe', messages: [], unread: 0, type: 'group', panneauData: p
        };
    });

    interactions.forEach(m => {
        if (m.panneauId === supportThreadId) {
            threadsMap[supportThreadId].messages.push(m);
            if (!m.resolved && m.author !== 'Client' && m.author !== myClientData.email && m.author !== myClientData.full_name && m.author !== myClientData.name) {
                threadsMap[supportThreadId].unread++;
            }
        } else if (m.panneauId.startsWith('GROUP_')) {
            if (threadsMap[m.panneauId]) {
                threadsMap[m.panneauId].messages.push(m);
                if (!m.resolved && m.author !== 'Client' && m.author !== myClientData.email && m.author !== myClientData.full_name && m.author !== myClientData.name) {
                    threadsMap[m.panneauId].unread++;
                }
            }
        } else {
            const isInternalMsg = m.authorType === 'Client' || m.authorType === 'Admin';
            const riverainEmail = (!isInternalMsg && m.author !== myClientData.email && m.author !== myClientData.full_name && m.author !== myClientData.name) ? m.author : m.target;
            
            if (riverainEmail && riverainEmail !== 'Groupe') {
                const threadId = `${m.panneauId}_${riverainEmail}`;
                const panneauObj = visiblePanels.find(c => c.id === m.panneauId);
                if (panneauObj) {
                    if (!threadsMap[threadId]) {
                        threadsMap[threadId] = { id: threadId, panneauId: m.panneauId, title: `Riverain : ${panneauObj.name} - ${riverainEmail}`, targetEmail: riverainEmail, messages: [], unread: 0, type: 'riverain' };
                    }
                    threadsMap[threadId].messages.push(m);
                    if (!isInternalMsg && !m.resolved) threadsMap[threadId].unread++;
                }
            }
        }
    });

    return Object.values(threadsMap)
        .filter(t => t.type === 'support' || t.messages.length > 0 || t.type === 'group')
        .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 : ONGLET MESSAGERIE (LISTE DES CONVERSATIONS)
// =========================================================================

window.pano_ClientMessagesTab = ({ data, myClientData, refreshData }) => {
    const { useState, useEffect } = React;

    const [forceRender, setForceRender] = useState(0);
    useEffect(() => {
        const handlePop = () => setForceRender(f => f + 1);
        window.addEventListener('popstate', handlePop);
        return () => window.removeEventListener('popstate', handlePop);
    }, []);

    const { UsersIcon, MessageSquareIcon, MessageCircleIcon } = window.pano_getIcons();
    const IconBadge = window.pano_IconBadge || (() => null);

    const { pendingInvites, visiblePanels } = window.pano_getPanelAccessRights 
        ? window.pano_getPanelAccessRights(data.panneaux || [], myClientData.id) 
        : { pendingInvites:[], visiblePanels:[] };
        
    const threads = window.pano_buildClientChatThreads 
        ? window.pano_buildClientChatThreads(data.interactions || [], myClientData, visiblePanels, pendingInvites) 
        : [];

    const openChat = (id) => {
        const u = new URL(window.location);
        u.searchParams.set('chat_id', id);
        window.history.pushState({ chat_id: id }, '', u);
        window.dispatchEvent(new Event('popstate'));
        refreshData(); 
    };

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

    return (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4">
            <div className="flex justify-between items-center mb-6">
                <div>
                    <h1 className="text-3xl font-black text-slate-800">Messagerie</h1>
                    <p className="text-slate-500 font-medium">Échanges avec les riverains, votre équipe et le support.</p>
                </div>
            </div>

            <div className="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-4">
                {threads.map(t => {
                    const lastMsg = t.messages.length > 0 ? t.messages[t.messages.length - 1] : null;
                    return (
                        <div 
                            key={t.id} 
                            onClick={() => openChat(t.id)} 
                            className="bg-white border border-slate-200 rounded-3xl p-5 cursor-pointer hover:border-emerald-300 hover:shadow-md transition flex flex-col gap-3 relative overflow-hidden group"
                        >
                            {t.unread > 0 && (
                                <span className="absolute top-4 right-4 bg-red-500 text-white w-6 h-6 flex items-center justify-center rounded-full text-xs font-black shadow-sm animate-pulse">
                                    {t.unread}
                                </span>
                            )}
                            
                            <div className="flex items-center gap-3">
                                {IconBadge && (
                                    <IconBadge 
                                        icon={t.type === 'group' ? UsersIcon : (t.type === 'support' ? MessageSquareIcon : MessageCircleIcon)} 
                                        variant={t.type === 'support' ? 'success' : (t.type === 'group' ? 'info' : 'secondary')} 
                                        size="md" 
                                    />
                                )}
                                <div className="min-w-0 flex-1 pr-6">
                                    <p className={`text-sm truncate ${getThreadTitleClass(t.type)}`}>{t.title}</p>
                                    <p className="text-[10px] uppercase tracking-widest text-slate-400 font-bold truncate mt-0.5">{t.targetEmail}</p>
                                </div>
                            </div>
                            
                            <div className="pt-3 border-t border-slate-100 flex-1">
                                <p className={`text-sm line-clamp-2 ${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>}
                                </p>
                            </div>
                            
                            <div className="text-[10px] font-bold text-slate-400 text-right mt-2">
                                {lastMsg ? new Date(String(lastMsg.created_at || '').replace(' ', 'T')).toLocaleString('fr-FR') : ''}
                            </div>
                        </div>
                    );
                })}
                
                {threads.length === 0 && (
                    <div className="col-span-full 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">Aucune conversation pour le moment.</p>
                    </div>
                )}
            </div>
        </div>
    );
};

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