// ECO-PANNEAU.FR - _react/riverains/_riverains_contact.jsx

const { useState, useEffect } = React;

window.pano_RiverainContactTab = ({
    panneau,
    themeColor,
    interactions,
    settings,
    refreshData,
    showToast,
    isPreview,
    handleExternalLink
}) => {
    // 1. - SÉCURITÉ ANTI-FUITE DE MÉMOIRE : Utilisation du Hook Global Zéro-Dette
    const { isMounted, safeFetch } = window.pano_useSafeFetch();

    // 2. - Routage et modales
    const { activeDialog, openDialog, closeCurrentLayer } = window.pano_useUrlModal();
    const [contactSuccess, setContactSuccess] = useState(false);
    const [mountTime] = useState(Math.floor(Date.now() / 1000));

    // 3. - Composants et Icônes
    const { PhoneIcon, MessageSquareIcon, Trash2Icon, MailIcon, InfoIcon } = window.pano_getIcons();
    const { Button, PublicContactForm, ChatBox, ConfirmModal } = window.pano_getComponents();

    // 4. - Contexte du panneau et messages
    const isPublicContact = panneau.id === 'CONTACT_PUBLIC';
    const isSimulated = isPreview || panneau.id === 'demo-panneau';

    const panelInteractions = (interactions || []).filter(i => i.panneauId === panneau.id);

    // 5. - Actions métier
    const handleChatSend = async (text) => {
        if (isSimulated) {
            openDialog('demo_warning', 'chat');
            return;
        }

        // ZÉRO-TRUST : On se base uniquement sur l'authorType pour retrouver l'email du Riverain
        let threadEmail = panelInteractions.find(m => m.authorType !== 'Admin' && m.authorType !== 'Client')?.author || localStorage.getItem('pano_riverain_email') || 'Visiteur anonyme';
        if (threadEmail !== 'Visiteur anonyme') {
            localStorage.setItem('pano_riverain_email', threadEmail);
        }

        const token = localStorage.getItem('pano_riverain_token_' + threadEmail);

        const data = { 
            panneauId: panneau.id, 
            detail: text, 
            author: threadEmail, 
            isAlert: 0,
            hp_time: mountTime,
            verification_token: token
        };
        
        // SÉCURITÉ : Utilisation de safeFetch
        const d = await safeFetch('interactions', {
            body: data,
            errorMessage: "Erreur lors de l'envoi"
        });

        if (!isMounted.current) return; // SÉCURITÉ : Coupe-circuit

        if (d) {
            if (refreshData) refreshData();
        } else {
            // ANTI TOKEN-TRAP : Purge du jeton expiré pour débloquer le riverain en cas d'erreur
            if (token) {
                localStorage.removeItem('pano_riverain_token_' + threadEmail);
            }
        }
    };

    const confirmDeleteThread = async () => {
        // ZÉRO-TRUST : Utilisation de authorType
        let threadEmail = panelInteractions.find(m => m.authorType !== 'Admin' && m.authorType !== 'Client')?.author || localStorage.getItem('pano_riverain_email');
        const token = localStorage.getItem('pano_riverain_token_' + threadEmail);

        if (!token || !threadEmail) {
             if(showToast) showToast("Vous n'êtes pas authentifié pour effectuer cette action.", "error");
             closeCurrentLayer();
             return;
        }

        const data = {
            thread_id: panneau.id,
            email: threadEmail,
            verification_token: token
        };

        // SÉCURITÉ : Utilisation de safeFetch
        const d = await safeFetch('interactions/delete_thread', {
            body: data,
            successMessage: "Votre conversation a été effacée.",
            errorMessage: "Action non autorisée."
        });

        if (!isMounted.current) return; // SÉCURITÉ : Coupe-circuit

        if (d) {
            if (refreshData) refreshData();
        } else {
            // ANTI TOKEN-TRAP
            localStorage.removeItem('pano_riverain_token_' + threadEmail);
        }
        closeCurrentLayer();
    };

    // 6. - Préparation des données d'affichage
    const fakeDemoInteractions = [
        { id: 'fake_1', panneauId: panneau.id, author: 'Riverain (Voisin)', authorType: 'Riverain', target: 'Client', detail: "Bonjour, j'habite la maison voisine. Pouvez-vous me dire quand les travaux de démolition vont commencer ?", created_at: new Date(Date.now() - 172800000).toISOString(), resolved: true, isAlert: 0 },
        { id: 'fake_2', panneauId: panneau.id, author: 'Responsable', authorType: 'Client', target: 'Riverain', detail: "Bonjour. La démolition est prévue pour la première semaine du mois prochain. Nous ferons le maximum pour limiter les nuisances sonores.", created_at: new Date(Date.now() - 86400000).toISOString(), resolved: true, isAlert: 0 }
    ];

    const effectiveInteractions = isSimulated ? fakeDemoInteractions : panelInteractions;

    const chatMessages = effectiveInteractions.map(m => ({
        ...m,
        // SÉCURITÉ : authorType détermine le sens d'affichage
        author: (m.authorType !== 'Admin' && m.authorType !== 'Client') ? (isSimulated ? m.author : 'Riverain') : m.author
    }));

    const isChatActive = effectiveInteractions.length > 0;

    // 7. - Rendu UI
    return (
        <div className={`p-3 space-y-3 flex flex-col animate-in fade-in slide-in-from-bottom-2 duration-300 ${isChatActive ? 'flex-1 min-h-0' : ''}`}>
            
            {panneau.emergencyPhone && (
                <div className="bg-slate-50 p-3 rounded-xl border border-slate-200 flex items-center justify-between shrink-0">
                    <div>
                        <p className="text-[9px] font-black text-slate-500 uppercase tracking-widest mb-0.5">Numéro de contact</p>
                        <p className="text-base font-black text-slate-800">{panneau.emergencyPhone}</p>
                    </div>
                    <Button 
                        variant="primary"
                        shape="square"
                        icon={PhoneIcon}
                        onClick={(e) => {
                            const blocked = handleExternalLink(e, null);
                            if (!blocked) window.location.href = `tel:${panneau.emergencyPhone.replace(/\s+/g, '')}`;
                        }}
                        className="shadow-md"
                        style={{ backgroundColor: themeColor, borderColor: themeColor }}
                    />
                </div>
            )}

            <div className={`bg-white rounded-xl shadow-sm border border-slate-100 flex flex-col relative ${isChatActive ? 'flex-1 min-h-0' : ''}`}>
                <div className="p-3 border-b border-slate-100 bg-slate-50 shrink-0 flex justify-between items-center rounded-t-xl">
                    <h3 className="font-black text-slate-800 flex items-center gap-2 text-sm">
                        <MessageSquareIcon size={16} style={{color: themeColor}}/> Échanger avec {isPublicContact ? "le service client" : "le responsable"}
                    </h3>
                    {isChatActive && !isSimulated && (
                        <Button 
                            variant="danger" 
                            shape="round" 
                            onClick={() => openDialog('confirm_delete_thread')} 
                            icon={Trash2Icon} 
                            className="p-1.5 shadow-none" 
                            title="Effacer mon historique" 
                        />
                    )}
                </div>
                
                <div className={`relative bg-slate-50/50 rounded-b-xl ${isChatActive ? 'flex-1 min-h-0' : 'p-3 h-full'}`}>
                    {isSimulated && (
                        <div 
                            className="absolute inset-0 z-[60] cursor-pointer"
                            onClick={(e) => { e.preventDefault(); e.stopPropagation(); openDialog('demo_warning', 'chat'); }}
                            onDrop={(e) => { e.preventDefault(); e.stopPropagation(); openDialog('demo_warning', 'chat'); }}
                            onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
                            title="Messagerie désactivée"
                        ></div>
                    )}

                    {effectiveInteractions.length === 0 ? (
                        contactSuccess ? (
                            <div className="p-6 text-center flex flex-col items-center justify-center h-full animate-in zoom-in-95 duration-300">
                                <div className="w-16 h-16 rounded-2xl flex items-center justify-center mb-4" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                                    <MailIcon size={32} />
                                </div>
                                <h3 className="text-lg font-black text-slate-800 mb-2">Message envoyé !</h3>
                                <p className="text-sm text-slate-600 font-medium mb-6">
                                    Votre demande a été transmise au responsable du chantier en toute confidentialité. 
                                </p>
                                <div className="bg-slate-100 p-4 rounded-xl border border-slate-200 text-left w-full shadow-sm mb-6">
                                    <p className="text-xs text-slate-500 font-bold uppercase tracking-widest mb-2 flex items-center gap-2"><InfoIcon size={14}/> Étape suivante</p>
                                    <p className="text-sm text-slate-700 leading-relaxed">
                                        Un e-mail contenant votre <strong>lien d'accès sécurisé</strong> vient de vous être envoyé. Veuillez utiliser ce lien pour lire la réponse et poursuivre la conversation.
                                    </p>
                                </div>
                                {Button && (
                                    <Button variant="secondary" onClick={() => setContactSuccess(false)} className="w-full py-3 justify-center">Nouveau message</Button>
                                )}
                            </div>
                        ) : (
                            <PublicContactForm 
                                panneauId={panneau.id} 
                                showToast={showToast} 
                                isPreview={isPreview}
                                settings={settings}
                                themeColor={themeColor}
                                onSuccess={() => { 
                                    setContactSuccess(true);
                                    if (refreshData) refreshData(); 
                                }}
                            />
                        )
                    ) : (
                        <div className="absolute inset-0">
                            <ChatBox 
                                messages={chatMessages} 
                                currentUserRole="public" 
                                panneauId={panneau.id} 
                                refreshData={refreshData} 
                                onSend={handleChatSend} 
                                clientName={panneau.maitreOuvrage || 'Responsable'}
                                settings={settings}
                                themeColor={themeColor}
                            />
                        </div>
                    )}
                </div>
            </div>

            {activeDialog === 'confirm_delete_thread' && ConfirmModal && (
                <ConfirmModal 
                    title="Effacer ma conversation"
                    message="Voulez-vous vraiment supprimer définitivement tous vos messages et pièces jointes ? Cette action est irréversible."
                    confirmText="Oui, effacer"
                    isDestructive={true}
                    onConfirm={confirmDeleteThread}
                    onCancel={closeCurrentLayer}
                />
            )}
        </div>
    );
};

/* EOF ========== [_react/riverains/_riverains_contact.jsx] */