/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Composant : Modale liste des conversations riverains (Vue Client)
 * =========================================================================
 */

const FallbackNull = () => null;

const FallbackDataCard = ({children, className, onClick}) => (
    <div onClick={onClick} className={`bg-white rounded-3xl p-5 shadow-sm border border-slate-200 flex flex-col gap-4 ${className}`}>
        {children}
    </div>
);

window.pano_ClientRiverainsListModal = ({ panneauId, data, myClientData, onClose }) => {
    // Sécurisation de l'appel aux icônes
    const { MessageCircleIcon, MessageSquareIcon } = window.pano_getIcons?.() || {};
    
    const Modal = window.pano_Modal || FallbackNull;
    const IconBadge = window.pano_IconBadge || FallbackNull;
    const NotificationBadge = window.pano_NotificationBadge || FallbackNull;
    const DataCard = window.pano_DataCard || FallbackDataCard;

    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 riverainThreads = threads.filter(t => t.panneauId === panneauId && t.type === 'riverain');

    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'));
    };

    return (
        <Modal title="Messages des riverains" onClose={onClose} zIndex="z-[250]">
            <div className="space-y-4">
                <p className="text-sm text-slate-500 mb-4">Liste des conversations individuelles avec les riverains concernant ce projet.</p>
                
                <div className="grid grid-cols-1 gap-3">
                    {riverainThreads.map(t => {
                        const lastMsg = t.messages.length > 0 ? t.messages[t.messages.length - 1] : null;
                        return (
                            <DataCard 
                                key={t.id} 
                                onClick={() => openChat(t.id)} 
                                className="cursor-pointer hover:border-emerald-300 transition gap-2 relative overflow-hidden group p-4"
                            >
                                <NotificationBadge count={t.unread} className="absolute top-3 right-3" />
                                
                                <div className="flex items-center gap-3">
                                    {IconBadge && <IconBadge icon={MessageCircleIcon} variant="secondary" size="md" />}
                                    <div className="min-w-0 flex-1 pr-6">
                                        <p className="text-sm font-bold text-slate-800 break-words leading-tight">{t.targetEmail}</p>
                                        <p className="text-[10px] uppercase tracking-widest text-slate-400 font-bold break-words leading-tight mt-0.5">Riverain</p>
                                    </div>
                                </div>
                                
                                <div className="pt-2 border-t border-slate-100 flex-1">
                                    <p className={`text-xs 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-[9px] font-bold text-slate-400 text-right mt-1">
                                    {lastMsg ? new Date(String(lastMsg.created_at || '').replace(' ', 'T')).toLocaleString('fr-FR') : ''}
                                </div>
                            </DataCard>
                        );
                    })}
                    
                    {riverainThreads.length === 0 && (
                        <div className="p-8 text-center text-slate-500 bg-slate-50 rounded-2xl border border-slate-200 border-dashed">
                            {MessageSquareIcon && <MessageSquareIcon size={32} className="mx-auto mb-3 opacity-50"/>}
                            <p className="text-sm font-medium">Aucun message de riverain pour le moment.</p>
                        </div>
                    )}
                </div>
            </div>
        </Modal>
    );
};

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