/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Socle Riverains (3/4) - Onglet Contact et Messagerie
 * =========================================================================
 */

const { useState, useEffect } = React;

window.pano_RiverainContactTab = ({
    panneau,
    themeColor,
    interactions,
    settings,
    refreshData,
    showToast,
    isPreview,
    handleExternalLink
}) => {
    const { activeDialog, openDialog, closeCurrentLayer } = window.pano_useUrlModal();
    const [contactSuccess, setContactSuccess] = useState(false);
    const [mountTime] = useState(Math.floor(Date.now() / 1000));

    const { PhoneIcon, MessageSquareIcon, Trash2Icon, MailIcon, InfoIcon } = window.pano_getIcons();
    const Button = window.pano_Button || (() => null);
    const PublicContactForm = window.pano_PublicContactForm || (() => null);
    const ChatBox = window.pano_ChatBox || (() => null);
    const ConfirmModal = window.pano_ConfirmModal || (() => null);

    const isPublicContact = panneau.id === 'CONTACT_PUBLIC';
    const isSimulated = isPreview || panneau.id === 'demo-panneau';

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

    const handleChatSend = async (text) => {
        if (isSimulated) {
            openDialog('demo_warning', 'chat');
            return;
        }

        // CORRECTION ZÉRO-TRUST : pano_riverain_email
        let threadEmail = panelInteractions.find(m => m.author !== 'Admin' && m.author !== 'Client')?.author || localStorage.getItem('pano_riverain_email') || 'Visiteur anonyme';
        if (threadEmail !== 'Visiteur anonyme') {
            localStorage.setItem('pano_riverain_email', threadEmail);
        }

        const data = { 
            panneauId: panneau.id, 
            detail: text, 
            author: threadEmail, 
            isAlert: 0,
            hp_time: mountTime
        };
        
        try {
            await fetch(window.pano_CONFIG.apiBaseUrl + 'interactions', { 
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data) 
            });
            
            if (refreshData) refreshData();
        } catch (e) {
            if (showToast) showToast("Erreur lors de l'envoi", "error");
        }
    };

    const confirmDeleteThread = async () => {
        let threadEmail = panelInteractions.find(m => m.author !== 'Admin' && m.author !== '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
        };

        try {
            const res = await fetch(window.pano_CONFIG.apiBaseUrl + 'interactions/delete_thread', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            const d = await res.json();
            if (d.status === 'success') {
                if (showToast) showToast("Votre conversation a été effacée.", "success");
                if (refreshData) refreshData();
            } else {
                if (showToast) showToast(d.message || "Action non autorisée.", "error");
            }
        } catch (e) {
            if (showToast) showToast("Erreur réseau.", "error");
        }
        closeCurrentLayer();
    };

    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,
        author: (m.author !== 'Admin' && m.author !== 'Client') ? (isSimulated ? m.author : 'Riverain') : m.author
    }));

    const isChatActive = effectiveInteractions.length > 0;

    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 overflow-hidden 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">
                    <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 ${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}
                    zIndex="z-[999999]"
                />
            )}
        </div>
    );
};

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