// ECO-PANNEAU.FR - _react/clients/_clients_modals_delegate.jsx

const { useState, useEffect } = React;

// 1. - MODALE : GESTION DE LA SAISIE DÉLÉGUÉE
window.pano_ClientDelegateShareModal = ({ managingPanneau, setManagingPanneau, onClose, refreshData, showToast }) => {
    
    // ZÉRO-DETTE : Utilisation de notre Hook abstrait !
    const { isMounted, safeFetch } = window.pano_useSafeFetch();

    // 1.1 - Routage et modales
    const { activeDialog, openDialog, closeCurrentLayer } = window.pano_useUrlModal();
    const routerCloseLayer = onClose || closeCurrentLayer;

    // 1.2 - Composants et Icônes
    const {
        PlusIcon, LockIcon, CopyIcon, Trash2Icon, LinkIcon, MailIcon, EditIcon, SaveIcon
    } = window.pano_getIcons();
    
    const { Modal, AlertBox, EmptyState, Toggle, ConfirmModal, Button } = window.pano_getComponents();

    // 1.3 - États locaux
    const [newLink, setNewLink] = useState({ email: '', expDays: 7, lockedFields: [] });
    const [editingLink, setEditingLink] = useState(null);
    const [isSaving, setIsSaving] = useState(false);
    const [confirmConfig, setConfirmConfig] = useState(null);

    const isDirty = newLink.email.trim() !== '' || newLink.lockedFields.length > 0 || editingLink !== null;

    const AVAILABLE_FIELDS = [
        { id: 'name', label: 'Nom du chantier' }, { id: 'location', label: 'Lieu' },
        { id: 'maitreOuvrage', label: "Maître d'ouvrage" }, { id: 'permitNumber', label: 'N° de permis' },
        { id: 'description', label: 'Description' }, { id: 'promoterLink', label: 'Lien promoteur' },
        { id: 'emergencyPhone', label: 'N° d\'urgence' }, { id: 'noiseSchedule', label: 'Horaires' },
        { id: 'intervenants', label: 'Intervenants' }, { id: 'lots', label: 'Lots' }, { id: 'pdfId', label: 'Arrêté (PDF)' }
    ];

    // 2. - Rendu UI
    return (
        <>
            <Modal 
                title="Saisie déléguée" 
                type="black" 
                onClose={routerCloseLayer} 
                requireConfirm={isDirty} 
                actions={(close) => (
                    <Button variant="secondary" onClick={close} className="w-full py-3 justify-center text-sm shadow-sm">
                        Fermer
                    </Button>
                )}
            >
                <div className="space-y-6">
                    <div className="text-xs text-slate-500 mb-2"><span className="text-red-500 font-black">*</span> Champs obligatoires</div>
                    
                    <AlertBox type="info" icon={LockIcon}>
                        Créez des liens sécurisés pour confier la saisie d'informations ou le dépôt de documents (PDF) à d'autres membres de l'équipe du chantier sans leur donner accès à votre compte ou à votre facturation. Le lien sera directement envoyé par e-mail au destinataire !
                    </AlertBox>

                    <form onSubmit={async (e) => {
                        e.preventDefault();
                        if (!newLink.email.trim() || !newLink.email.includes('@')) return showToast("Veuillez saisir une adresse e-mail valide.", "error");
                        
                        // CORRECTION SÉCURITÉ : Utilisation du générateur d'ID avec fallback
                        const linkId = window.pano_generateID();
                        const expTime = Math.floor(Date.now() / 1000) + (newLink.expDays * 86400);
                        const linkObj = { id: linkId, name: newLink.email.trim(), exp: expTime, active: true, lockedFields: newLink.lockedFields };
                        const updatedPanneau = { ...managingPanneau, delegate_links: [...(managingPanneau.delegate_links || []), linkObj] };
                        
                        setIsSaving(true);

                        const dSave = await safeFetch('panneaux', { 
                            body: { id: updatedPanneau.id, status: updatedPanneau.status, offerType: updatedPanneau.offerType, physicalPanels: updatedPanneau.physicalPanels, details: updatedPanneau }
                        });
                        
                        if (!isMounted.current) return; // SÉCURITÉ : Coupe-circuit
                        
                        if (dSave) {
                            const dSend = await safeFetch('panneaux/delegate_link/send', {
                                body: { id: updatedPanneau.id, link_id: linkId, email: newLink.email.trim(), exp_days: newLink.expDays }
                            });

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

                            if (dSend) {
                                showToast("Le lien de saisie a été envoyé avec succès.", "success");
                                setManagingPanneau(updatedPanneau);
                                setNewLink({ email: '', expDays: 7, lockedFields: [] });
                                if (refreshData) refreshData();
                            } else {
                                showToast("Le lien a été créé mais une erreur est survenue lors de l'envoi de l'e-mail.", "error");
                            }
                        } else {
                            showToast("Erreur lors de la création du lien.", "error");
                        }

                        if (isMounted.current) setIsSaving(false);
                    }} className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm space-y-4">
                        <h4 className="font-bold text-slate-800 text-sm flex items-center gap-2"><MailIcon size={16}/> Envoyer un accès délégué</h4>
                        <div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
                            <div className="space-y-1">
                                <label className="text-xs font-bold text-slate-500 uppercase block">E-mail du destinataire <span className="text-red-500 font-black">*</span></label>
                                <input type="email" value={newLink.email} onChange={e=>setNewLink({...newLink, email: e.target.value})} placeholder="Ex: architecte@exemple.com" className="w-full border border-slate-200 rounded-xl p-3 text-sm outline-none focus:border-blue-500 font-bold" disabled={isSaving} />
                            </div>
                            <div className="space-y-1">
                                <label className="text-xs font-bold text-slate-500 uppercase block">Validité (jours)</label>
                                <input type="number" min="1" max="90" value={newLink.expDays} onChange={e=>setNewLink({...newLink, expDays: parseInt(e.target.value)||7})} className="w-full border border-slate-200 rounded-xl p-3 text-sm outline-none focus:border-blue-500 font-bold" disabled={isSaving} />
                            </div>
                        </div>
                        <div className="space-y-2 pt-2">
                            <label className="text-xs font-bold text-slate-500 uppercase block">Verrouiller la saisie de ces champs (lecture seule) :</label>
                            <div className="flex flex-wrap gap-2">
                                {AVAILABLE_FIELDS.map(f => (
                                    <div role="button" tabIndex={0} key={f.id} onClick={() => !isSaving && setNewLink(p => ({...p, lockedFields: p.lockedFields.includes(f.id) ? p.lockedFields.filter(x=>x!==f.id) : [...p.lockedFields, f.id]}))} className={`px-3 py-1.5 rounded-lg text-xs font-bold transition border ${isSaving ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} ${newLink.lockedFields.includes(f.id) ? 'bg-red-50 text-red-600 border-red-200' : 'bg-slate-50 text-slate-500 border-slate-200 hover:bg-slate-100'}`}>
                                        {newLink.lockedFields.includes(f.id) && <LockIcon size={12} className="inline mr-1"/>}{f.label}
                                    </div>
                                ))}
                            </div>
                        </div>
                        <Button type="submit" variant="primary" disabled={isSaving || !newLink.email.trim()} icon={MailIcon} className="w-full py-3 justify-center uppercase tracking-widest text-xs">
                            Générer et envoyer par e-mail
                        </Button>
                    </form>

                    <div className="space-y-3">
                        <h4 className="font-bold text-slate-800 text-sm">Liens générés pour ce panneau</h4>
                        
                        {(!managingPanneau.delegate_links || managingPanneau.delegate_links.length === 0) && (
                            <EmptyState icon={LinkIcon} text="Aucun lien n'a encore été créé pour ce panneau." />
                        )}

                        {managingPanneau.delegate_links?.map((link, idx) => {
                            const isExpired = link.exp < Date.now() / 1000;
                            const isEditing = editingLink && editingLink.id === link.id;

                            return (
                                <div key={idx} className={`p-4 rounded-xl border ${link.active && !isExpired ? 'bg-white border-slate-200 shadow-sm' : 'bg-slate-50 border-slate-200 opacity-75'}`}>
                                    <div className="flex justify-between items-start mb-2">
                                        <div>
                                            <p className="font-bold text-slate-800 text-sm">{link.name}</p>
                                            <p className="text-xs text-slate-500">Exp. : {new Date(link.exp * 1000).toLocaleDateString('fr-FR')} {isExpired && <span className="text-red-500 font-bold ml-1">(Expiré)</span>}</p>
                                        </div>
                                        <div className="flex flex-wrap items-center gap-3">
                                            
                                            <Toggle 
                                                checked={link.active} 
                                                disabled={isSaving}
                                                onChange={async (newVal) => {
                                                    const links = [...managingPanneau.delegate_links];
                                                    links[idx] = { ...links[idx], active: newVal };
                                                    const updatedPanneau = { ...managingPanneau, delegate_links: links };
                                                    
                                                    const d = await safeFetch('panneaux', { 
                                                        body: { id: updatedPanneau.id, status: updatedPanneau.status, offerType: updatedPanneau.offerType, physicalPanels: updatedPanneau.physicalPanels, details: updatedPanneau },
                                                        setLoading: setIsSaving
                                                    });
                                                    
                                                    if (!isMounted.current) return; // SÉCURITÉ : Coupe-circuit
                                                    
                                                    if (d) { 
                                                        setManagingPanneau(updatedPanneau); 
                                                        if (refreshData) refreshData(); 
                                                    }
                                                }} 
                                            />

                                            <Button variant="secondary" icon={EditIcon} onClick={() => setEditingLink({...link})} disabled={!link.active || isExpired || isSaving} title="Modifier les droits de saisie" className="p-2" />

                                            <Button variant="secondary" icon={CopyIcon} onClick={async () => {
                                                const d = await safeFetch('panneaux/delegate_link', { 
                                                    body: { id: managingPanneau.id, link_id: link.id },
                                                    setLoading: setIsSaving 
                                                });
                                                
                                                if (!isMounted.current) return; // SÉCURITÉ : Coupe-circuit
                                                
                                                if (d) { 
                                                    navigator.clipboard.writeText(d.data.link); 
                                                    showToast("Lien copié !", "success"); 
                                                }
                                            }} disabled={!link.active || isExpired || isSaving} title="Copier l'URL manuellement" className="p-2" />
                                            
                                            <Button variant="danger" shape="round" icon={Trash2Icon} disabled={isSaving} onClick={(e) => {
                                                e.stopPropagation();
                                                setConfirmConfig({
                                                    title: "Supprimer le lien",
                                                    message: "Voulez-vous vraiment supprimer ce lien délégué ?",
                                                    confirmText: "Supprimer",
                                                    isDestructive: true,
                                                    onConfirm: async () => {
                                                        setConfirmConfig(null);
                                                        routerCloseLayer();
                                                        
                                                        const links = [...managingPanneau.delegate_links];
                                                        links.splice(idx, 1);
                                                        const updatedPanneau = { ...managingPanneau, delegate_links: links };
                                                        
                                                        const d = await safeFetch('panneaux', { 
                                                            body: { id: updatedPanneau.id, status: updatedPanneau.status, offerType: updatedPanneau.offerType, physicalPanels: updatedPanneau.physicalPanels, details: updatedPanneau },
                                                            setLoading: setIsSaving
                                                        });
                                                        
                                                        if (!isMounted.current) return; // SÉCURITÉ : Coupe-circuit
                                                        
                                                        if (d) { 
                                                            setManagingPanneau(updatedPanneau); 
                                                            if (refreshData) refreshData(); 
                                                        }
                                                    }
                                                });
                                                openDialog('confirm');
                                            }} className="p-2 shadow-none" title="Supprimer" />
                                        </div>
                                    </div>

                                    {isEditing ? (
                                        <div className="mt-4 pt-4 border-t border-slate-200 space-y-4 animate-in fade-in slide-in-from-top-2">
                                            <label className="text-xs font-bold text-slate-500 uppercase block">Modifier les champs verrouillés :</label>
                                            <div className="flex flex-wrap gap-2">
                                                {AVAILABLE_FIELDS.map(f => (
                                                    <div role="button" tabIndex={0} key={f.id} onClick={() => !isSaving && setEditingLink(p => ({...p, lockedFields: p.lockedFields.includes(f.id) ? p.lockedFields.filter(x=>x!==f.id) : [...p.lockedFields, f.id]}))} className={`px-3 py-1.5 rounded-lg text-xs font-bold transition border ${isSaving ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} ${editingLink.lockedFields.includes(f.id) ? 'bg-red-50 text-red-600 border-red-200' : 'bg-slate-50 text-slate-500 border-slate-200 hover:bg-slate-100'}`}>
                                                        {editingLink.lockedFields.includes(f.id) && <LockIcon size={12} className="inline mr-1"/>}{f.label}
                                                    </div>
                                                ))}
                                            </div>
                                            <div className="flex gap-2">
                                                <Button variant="secondary" onClick={() => setEditingLink(null)} disabled={isSaving} className="flex-1 py-2 text-xs justify-center">Annuler</Button>
                                                <Button variant="primary" onClick={async () => {
                                                    const links = [...managingPanneau.delegate_links];
                                                    links[idx] = { ...links[idx], lockedFields: editingLink.lockedFields };
                                                    const updatedPanneau = { ...managingPanneau, delegate_links: links };
                                                    
                                                    setIsSaving(true);
                                                    const d = await safeFetch('panneaux', { 
                                                        body: { id: updatedPanneau.id, status: updatedPanneau.status, offerType: updatedPanneau.offerType, physicalPanels: updatedPanneau.physicalPanels, details: updatedPanneau }
                                                    });
                                                    
                                                    if (!isMounted.current) return; // SÉCURITÉ : Coupe-circuit
                                                    setIsSaving(false);
                                                    
                                                    if (d) { 
                                                        setManagingPanneau(updatedPanneau); 
                                                        setEditingLink(null);
                                                        showToast("Droits mis à jour avec succès.", "success");
                                                        if (refreshData) refreshData(); 
                                                    }
                                                }} disabled={isSaving} icon={SaveIcon} className="flex-1 py-2 text-xs justify-center">Enregistrer</Button>
                                            </div>
                                        </div>
                                    ) : (
                                        link.lockedFields && link.lockedFields.length > 0 && (
                                            <p className="text-[10px] text-slate-500 mt-2 border-t border-slate-100 pt-2"><LockIcon size={10} className="inline mr-1"/> Verrouillés : {link.lockedFields.join(', ')}</p>
                                        )
                                    )}
                                </div>
                            );
                        })}
                    </div>
                </div>
            </Modal>

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

/* EOF ========== [_react/clients/_clients_modals_delegate.jsx] */