// ECO-PANNEAU.FR - _react/guest/_guest_view.jsx

// 1. - COMPOSANT PRINCIPAL : ACCÈS INVITÉ (NO-FRICTION)
window.pano_GuestView = ({ token, showToast }) => {
    const { useState, useEffect } = React;
    
    // ZÉRO-DETTE : Utilisation de notre Hook abstrait !
    const { isMounted, safeFetch } = window.pano_useSafeFetch();

    // États globaux
    const [viewState, setViewState] = useState('loading'); // loading, pending, accepted, rejected, error
    const [guestData, setGuestData] = useState(null);
    const [panneau, setPanneau] = useState(null);
    const [errorMsg, setErrorMsg] = useState(null);
    
    // États UI (Modales et actions)
    const [isSaving, setIsSaving] = useState(false);
    const [showIdentityModal, setShowIdentityModal] = useState(false);
    const [showSignupWall, setShowSignupWall] = useState(false);
    const [identityForm, setIdentityForm] = useState({ name: '', company: '' });
    
    // États Éditeur
    const [editingEntity, setEditingEntity] = useState(null);
    const [confirmDialog, setConfirmDialog] = useState(null);

    // Composants et Icônes
    const { 
        LoaderIcon, AlertTriangleIcon, CheckCircleIcon, ShieldIcon, 
        LogOutIcon, EyeIcon, MessageSquareIcon, UserIcon, BuildingIcon, FileTextIcon, LockIcon
    } = window.pano_getIcons();
    
    const { ConfirmModal, Button, Modal, PanneauEditorForm, EntityEditorModal, TextLogo } = window.pano_getComponents();

    // INITIALISATION : Récupération du jeton et du statut
    useEffect(() => {
        fetch(window.pano_CONFIG.apiBaseUrl + 'panneaux/collaborators/guest_access&token=' + encodeURIComponent(token) + '&_t=' + Date.now())
            .then(r => r.json())
            .then(d => {
                if (!isMounted.current) return;
                
                if (d.status === 'success') {
                    setGuestData(d.data);
                    setPanneau(d.data.panneau);
                    setViewState(d.data.status); // 'pending', 'accepted', 'rejected'
                } else {
                    setErrorMsg(d.message);
                    setViewState('error');
                }
            })
            .catch((e) => {
                if (!isMounted.current) return;
                if (window.pano_logFallback) window.pano_logFallback("Erreur fetch guest: " + e.message);
                setErrorMsg("Erreur de connexion au serveur.");
                setViewState('error');
            });
    }, [token, isMounted]);

    // ACTIONS MÉTIER
    const handleAccept = async (e) => {
        e.preventDefault();
        if (!identityForm.name.trim() || !identityForm.company.trim()) {
            showToast("Veuillez remplir tous les champs.", "error");
            return;
        }

        const d = await safeFetch('panneaux/collaborators/guest_respond', {
            body: { token, action: 'accept', name: identityForm.name.trim(), company: identityForm.company.trim() },
            setLoading: setIsSaving
        });
        
        if (!isMounted.current) return;
        
        if (d && d.status === 'success') {
            setShowIdentityModal(false);
            setViewState('accepted');
            showToast("Invitation acceptée. Vous pouvez maintenant éditer le panneau.", "success");
        }
    };

    const handleReject = () => {
        setConfirmDialog({
            title: "Refuser l'invitation",
            message: "Êtes-vous sûr de vouloir refuser cette invitation ? Vous perdrez l'accès à ce panneau.",
            confirmText: "Oui, refuser",
            isDestructive: true,
            onConfirm: async () => {
                setConfirmDialog(null);
                const d = await safeFetch('panneaux/collaborators/guest_respond', {
                    body: { token, action: 'reject' },
                    setLoading: setIsSaving
                });
                
                if (!isMounted.current) return;
                if (d && d.status === 'success') setViewState('rejected');
            }
        });
    };

    const handleSaveEditor = async () => {
        const pCible = panneau || {};
        
        // Anti-conflit d'édition en mode délégué
        const detailsToSave = { ...pCible, ...(pCible.draft_data || {}), draft_data: {} };
        
        const payload = {
            token: token,
            id: String(pCible.id),
            status: String(pCible.status),
            offerType: String(pCible.offerType),
            details: detailsToSave
        };

        const d = await safeFetch('panneaux/collaborators/guest_update', {
            body: payload,
            setLoading: setIsSaving,
            successMessage: "Modifications enregistrées avec succès."
        });
        // Si succès, l'UI reste sur place
    };

    // --- VUES DE LA MACHINE À ÉTATS ---

    if (viewState === 'loading') {
        return (
            <div className="h-screen flex flex-col items-center justify-center bg-slate-50">
                {LoaderIcon && <LoaderIcon className="animate-spin text-emerald-600 mb-4 w-8 h-8" />}
                <p className="font-bold text-slate-500 uppercase tracking-widest text-sm break-words text-center px-4">Vérification de l'accès sécurisé...</p>
            </div>
        );
    }

    if (viewState === 'error') {
        return (
            <div className="h-screen flex items-center justify-center bg-slate-50 p-4">
                <div className="bg-white p-8 rounded-3xl shadow-xl border border-red-200 text-center max-w-md w-full">
                    {AlertTriangleIcon && <AlertTriangleIcon className="w-12 h-12 text-red-500 mx-auto mb-4" />}
                    <h2 className="text-xl font-black text-slate-800 mb-2 break-words leading-tight">Accès refusé</h2>
                    <p className="text-slate-500 break-words leading-relaxed mb-6">{errorMsg}</p>
                    <Button variant="secondary" onClick={() => window.location.href = '?'} className="w-full justify-center">Retour à l'accueil</Button>
                </div>
            </div>
        );
    }

    if (viewState === 'rejected') {
        return (
            <div className="h-screen flex items-center justify-center bg-slate-50 p-4">
                <div className="bg-white p-8 rounded-3xl shadow-xl border border-slate-200 text-center max-w-md w-full">
                    <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4 text-slate-400">
                        <LogOutIcon size={32} />
                    </div>
                    <h2 className="text-xl font-black text-slate-800 mb-2 break-words leading-tight">Invitation refusée</h2>
                    <p className="text-slate-500 break-words leading-relaxed mb-6">Vous avez refusé l'accès à ce panneau. Le propriétaire du projet a été notifié.</p>
                    <Button variant="primary" onClick={() => window.location.href = '?'} className="w-full justify-center">Retour à l'accueil</Button>
                </div>
            </div>
        );
    }

    // LE SAS DE CONSULTATION (En attente)
    if (viewState === 'pending') {
        return (
            <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
                <div className="max-w-xl w-full bg-white rounded-3xl shadow-xl border border-slate-200 overflow-hidden animate-in zoom-in-95 duration-300">
                    <div className="bg-emerald-600 p-6 text-center">
                        <h1 className="text-2xl font-black text-white mb-2 leading-tight">Invitation à collaborer</h1>
                        <p className="text-emerald-100 font-medium text-sm">Vous avez été invité sur un projet géré par <strong className="text-white">eco-panneau.fr</strong></p>
                    </div>
                    
                    <div className="p-6 md:p-8 space-y-8">
                        <div className="text-center">
                            <p className="text-slate-600 leading-relaxed text-lg">
                                <strong>{guestData.inviter_name}</strong> de la société <strong>{guestData.inviter_company}</strong> vous invite à participer au projet suivant :
                            </p>
                        </div>

                        <div className="bg-slate-50 border border-slate-200 rounded-2xl p-5 text-center shadow-sm">
                            <BuildingIcon className="w-10 h-10 text-emerald-500 mx-auto mb-3" />
                            <h3 className="font-black text-xl text-slate-800 mb-1">{panneau?.name}</h3>
                            <p className="text-slate-500 font-medium">{panneau?.location || "Emplacement non renseigné"}</p>
                            
                            {(panneau?.a1PdfId || panneau?.imageId) && (
                                <div className="mt-5 flex justify-center gap-3">
                                    {panneau?.imageId && (
                                        <a href={`${window.pano_CONFIG.apiBaseUrl}panneaux/file&id=${panneau.imageId}`} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-xs font-bold text-blue-600 bg-blue-50 px-3 py-2 rounded-lg hover:bg-blue-100 transition">
                                            <EyeIcon size={14} /> Aperçu Virtuel
                                        </a>
                                    )}
                                    {panneau?.a1PdfId && (
                                        <a href={`${window.pano_CONFIG.apiBaseUrl}panneaux/file&id=${panneau.a1PdfId}`} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-xs font-bold text-red-600 bg-red-50 px-3 py-2 rounded-lg hover:bg-red-100 transition">
                                            <FileTextIcon size={14} /> Arrêté / BAT
                                        </a>
                                    )}
                                </div>
                            )}
                        </div>

                        <div className="flex flex-col sm:flex-row gap-4 pt-4 border-t border-slate-100">
                            <Button variant="secondary" icon={LogOutIcon} onClick={handleReject} disabled={isSaving} className="flex-1 justify-center py-3">
                                Refuser
                            </Button>
                            <Button variant="primary" icon={CheckCircleIcon} onClick={() => setShowIdentityModal(true)} disabled={isSaving} className="flex-[2] justify-center py-3 uppercase tracking-widest text-xs shadow-md">
                                Accepter et participer
                            </Button>
                        </div>
                    </div>
                </div>

                {/* MODALE D'IDENTITÉ (SAS) */}
                {showIdentityModal && Modal && (
                    <Modal title="Vérification d'identité" type="info" onClose={() => !isSaving && setShowIdentityModal(false)} preventClose={isSaving}>
                        <form onSubmit={handleAccept} className="space-y-6">
                            <div className="bg-blue-50 p-4 rounded-xl border border-blue-200 text-sm text-blue-800 font-medium leading-relaxed">
                                Afin de garantir la traçabilité des modifications sur ce panneau de chantier légal, veuillez renseigner votre identité. <strong>Aucune création de compte n'est requise.</strong>
                            </div>
                            
                            <div className="space-y-4">
                                <div className="space-y-1">
                                    <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-2"><UserIcon size={14}/> Votre nom complet <span className="text-red-500">*</span></label>
                                    <input type="text" value={identityForm.name} onChange={e=>setIdentityForm({...identityForm, name: e.target.value})} placeholder="Ex: Jean Dupont" required disabled={isSaving} className="w-full border-2 border-slate-200 rounded-xl p-3 text-sm outline-none focus:border-blue-500 font-bold" />
                                </div>
                                <div className="space-y-1">
                                    <label className="text-xs font-bold text-slate-500 uppercase flex items-center gap-2"><BuildingIcon size={14}/> Votre société <span className="text-red-500">*</span></label>
                                    <input type="text" value={identityForm.company} onChange={e=>setIdentityForm({...identityForm, company: e.target.value})} placeholder="Ex: Bureau de contrôle ABC" required disabled={isSaving} className="w-full border-2 border-slate-200 rounded-xl p-3 text-sm outline-none focus:border-blue-500 font-bold" />
                                </div>
                            </div>

                            <Button type="submit" variant="infoSolid" disabled={isSaving || !identityForm.name || !identityForm.company} icon={isSaving ? LoaderIcon : ShieldIcon} className="w-full justify-center py-3 shadow-md uppercase tracking-widest text-xs">
                                {isSaving ? 'Validation...' : 'Valider et accéder'}
                            </Button>
                        </form>
                    </Modal>
                )}
            </div>
        );
    }

    // ÉTAT ACCEPTÉ : L'ÉDITEUR DÉVERROUILLÉ
    return (
        <div className="min-h-screen bg-slate-50 flex flex-col overflow-x-hidden">
            <header className="bg-white border-b border-slate-200 py-4 px-6 flex justify-between items-center sticky top-0 z-40 shadow-sm shrink-0 gap-4 flex-wrap">
                <div className="min-w-0 pr-4 flex-1">
                    <h1 className="font-black text-xl text-slate-800 flex items-center gap-2 break-words leading-tight">
                        <ShieldIcon className="w-6 h-6 text-emerald-600 shrink-0"/> Mode Invité (Sans compte)
                    </h1>
                    <p className="text-xs text-slate-500 break-words mt-1 leading-tight">Projet : {panneau?.name} - {panneau?.location}</p>
                </div>
                
                <div className="flex gap-3 shrink-0 w-full sm:w-auto">
                    {/* LE MUR D'INSCRIPTION POUR LE CHAT */}
                    <Button variant="outline" icon={MessageSquareIcon} onClick={() => setShowSignupWall(true)} className="flex-1 sm:flex-none justify-center border-slate-300 text-slate-600 hover:bg-slate-50">
                        <span className="hidden sm:inline">Messagerie</span>
                        {LockIcon && <LockIcon size={12} className="ml-1 opacity-50" />}
                    </Button>
                    <Button variant="infoSolid" icon={isSaving ? LoaderIcon : CheckCircleIcon} onClick={handleSaveEditor} disabled={isSaving} className="flex-1 sm:flex-none justify-center shadow-md">
                        Enregistrer
                    </Button>
                </div>
            </header>
            
            <main className="flex-1 max-w-4xl w-full mx-auto p-4 sm:p-8">
                
                {!guestData.can_edit && (
                    <div className="bg-amber-50 border border-amber-200 rounded-2xl p-4 mb-8 text-amber-800 text-sm font-bold flex items-center gap-3 shadow-sm">
                        <LockIcon size={20} className="shrink-0" />
                        Vos droits d'accès sont en lecture seule. Vous ne pouvez pas modifier ce panneau.
                    </div>
                )}

                {guestData.can_edit && guestData.locked_fields && guestData.locked_fields.length > 0 && (
                    <div className="bg-blue-50 border border-blue-200 rounded-2xl p-4 mb-8 text-blue-800 text-sm flex items-center gap-3 shadow-sm">
                        <ShieldIcon size={20} className="shrink-0 text-blue-600" />
                        <span>Certains champs sensibles ont été verrouillés par <strong>{guestData.inviter_name}</strong>.</span>
                    </div>
                )}
                
                {PanneauEditorForm && (
                    <PanneauEditorForm 
                        panneau={panneau} 
                        setPanneau={setPanneau} 
                        managingPanneau={panneau} 
                        originalPanneau={panneau}
                        onCancel={() => window.location.href = '?'} 
                        onPublish={handleSaveEditor} 
                        onEditEntity={(loc, data) => setEditingEntity({location: loc, data})}
                        deleteEntity={(loc) => {
                            setConfirmDialog({
                                title: "Supprimer l'élément",
                                message: "Êtes-vous sûr de vouloir supprimer cet élément de l'équipe ?",
                                confirmText: "Supprimer",
                                type: "error",
                                isDestructive: true,
                                onConfirm: () => {
                                    let newInter = [...(panneau.intervenants || [])];
                                    let newLots = JSON.parse(JSON.stringify(panneau.lots || []));
                                    
                                    if (loc.type === 'intervenant') {
                                        newInter.splice(loc.index, 1);
                                    } else if (loc.type === 'lot') {
                                        newLots.splice(loc.index, 1);
                                    } else {
                                        newLots[loc.lotIndex].entreprises.splice(loc.index, 1);
                                    }
                                    
                                    setPanneau({ ...panneau, intervenants: newInter, lots: newLots });
                                    setConfirmDialog(null);
                                }
                            });
                        }}
                        isSaving={isSaving} 
                        currentUserRole={guestData.can_edit ? "guest" : "reader"} // Adaptatif selon les droits
                        lockedFields={guestData.locked_fields || []}
                        showToast={showToast}
                        myClientData={{ id: 'guest_mode', name: guestData.inviter_company }} // Fake ID strict pour éviter les conflits de permission
                        data={{ settings: {}, team: [] }} // Injection vitale pour éviter les crashs de l'éditeur
                    />
                )}
            </main>
            
            {editingEntity && EntityEditorModal && guestData.can_edit && (
                <EntityEditorModal 
                    editingEntity={editingEntity} 
                    setEditingEntity={setEditingEntity} 
                    saveEditedEntity={() => {
                        let newInter = [...(panneau.intervenants || [])];
                        let newLots = JSON.parse(JSON.stringify(panneau.lots || []));
                        const loc = editingEntity.location;
                        
                        if (loc.type === 'intervenant') { 
                            if (loc.index !== undefined) newInter[loc.index] = editingEntity.data; 
                            else newInter.push({...editingEntity.data, id: window.pano_generateID()}); 
                        } else if (loc.type === 'lot') { 
                            if (loc.index !== undefined) newLots[loc.index] = {...newLots[loc.index], ...editingEntity.data}; 
                            else newLots.push({...editingEntity.data, id: window.pano_generateID(), entreprises: []}); 
                        } else if (loc.type === 'entreprise') { 
                            if (loc.index !== undefined) newLots[loc.lotIndex].entreprises[loc.index] = editingEntity.data; 
                            else newLots[loc.lotIndex].entreprises.push({...editingEntity.data, id: window.pano_generateID()}); 
                        }
                        
                        setPanneau({ ...panneau, intervenants: newInter, lots: newLots });
                        setEditingEntity(null);
                    }} 
                    clientUid="guest_mode" // Bypass de sécurité UI
                    panneauId={panneau?.id}
                    onClose={() => setEditingEntity(null)}
                    showToast={showToast}
                />
            )}

            {/* LE MUR D'INSCRIPTION (Phase 3) */}
            {showSignupWall && Modal && (
                <Modal title="Création de compte requise" type="warning" onClose={() => setShowSignupWall(false)}>
                    <div className="text-center p-4 space-y-6">
                        <div className="w-16 h-16 bg-orange-100 text-orange-500 rounded-full flex items-center justify-center mx-auto shrink-0 shadow-inner">
                            <LockIcon size={32} />
                        </div>
                        <p className="text-slate-600 font-medium leading-relaxed">
                            Pour des raisons de traçabilité légale, l'utilisation de la messagerie pour discuter avec l'équipe du chantier ou répondre aux riverains nécessite de s'authentifier.
                        </p>
                        <div className="bg-slate-50 border border-slate-200 p-4 rounded-xl">
                            <p className="font-bold text-slate-800 text-sm mb-2">Passez à la vitesse supérieure !</p>
                            <ul className="text-xs text-slate-500 text-left list-disc pl-4 space-y-1">
                                <li>Conservez l'historique de tous vos projets.</li>
                                <li>Discutez en temps réel avec tous les intervenants.</li>
                                <li>Créez vos propres panneaux.</li>
                            </ul>
                        </div>
                        <Button variant="primary" onClick={() => window.location.href = '?tab=login'} className="w-full py-4 justify-center uppercase tracking-widest text-xs shadow-xl hover:shadow-2xl transition">
                            Créer mon compte gratuit
                        </Button>
                        <Button variant="secondary" onClick={() => setShowSignupWall(false)} className="w-full justify-center text-xs">
                            Continuer en tant qu'invité
                        </Button>
                    </div>
                </Modal>
            )}

            {confirmDialog && ConfirmModal && (
                <ConfirmModal {...confirmDialog} onCancel={() => setConfirmDialog(null)} />
            )}
        </div>
    );
};

/* EOF ========== [_react/guest/_guest_view.jsx] */