// ECO-PANNEAU.FR - _react/_socle_editeur_autres.jsx

window.pano_PanneauEditorAutres = ({ panneau, setPanneau, lockedFields = [] }) => {
    const { SettingsIcon, CopyIcon, ExternalLinkIcon, EyeIcon, LockIcon, MailIcon } = window.pano_getIcons();
    const { Button } = window.pano_getComponents();

    const isFieldLocked = (fieldId) => lockedFields.includes(fieldId);

    const colors = [
        '#059669', '#2563eb', '#db2777', '#dc2626', '#d97706', '#4f46e5', '#0f172a'
    ];

    const handleColorChange = (c) => setPanneau(p => ({ ...p, themeColor: c }));

    return (
        <div className="space-y-6 animate-in fade-in">
            <div className="space-y-4">
                <h3 className="font-black text-slate-800 text-sm uppercase tracking-widest flex items-center gap-2 mb-1">
                    <SettingsIcon size={16} className="text-emerald-600"/> Thème
                </h3>
                
                <div className="bg-slate-50 p-4 rounded-xl border border-slate-100 space-y-3">
                    <label className="text-xs font-bold text-slate-500 uppercase block">Couleur principale du panneau virtuel</label>
                    <div className="flex flex-wrap gap-3 items-center">
                        {colors.map(c => (
                            <div 
                                key={c} 
                                onClick={() => handleColorChange(c)}
                                className={`w-8 h-8 rounded-full cursor-pointer shadow-sm transition-transform hover:scale-110 ${panneau.themeColor === c ? 'ring-2 ring-offset-2 ring-slate-400 scale-110' : ''}`}
                                style={{ backgroundColor: c }}
                            ></div>
                        ))}
                        <div className="w-[1px] h-6 bg-slate-300 mx-1"></div>
                        <input 
                            type="color" 
                            value={panneau.themeColor || '#059669'} 
                            onChange={(e) => handleColorChange(e.target.value)}
                            className="w-8 h-8 rounded cursor-pointer border-0 bg-transparent p-0"
                            title="Couleur personnalisée"
                        />
                    </div>
                    <p className="text-[10px] text-red-500 mt-2 font-bold">Contrôlez la lisibilité des textes si vous sélectionnez une couleur personnalisée.</p>
                </div>
            </div>

            <div className="space-y-4 pt-6 border-t border-slate-100">
                <h3 className="font-black text-slate-800 text-sm uppercase tracking-widest flex items-center gap-2 mb-1">
                    <MailIcon size={16} className="text-blue-600"/> Réception des messages
                </h3>
                <div className="bg-blue-50 border border-blue-200 p-4 rounded-xl shadow-sm">
                    <label className="text-xs font-bold text-blue-800 uppercase block mb-2 flex items-center gap-1">
                        E-mail de réception des messages riverains
                        {isFieldLocked('contactEmail') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                    </label>
                    <input 
                        type="email" 
                        disabled={isFieldLocked('contactEmail')} 
                        value={panneau.contactEmail || ''} 
                        onChange={e => setPanneau({...panneau, contactEmail: e.target.value})} 
                        placeholder="Laisser vide pour utiliser votre e-mail de compte par défaut" 
                        className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold text-sm ${isFieldLocked('contactEmail') ? 'bg-slate-100 border-slate-200 text-slate-500 cursor-not-allowed' : 'border-blue-200 focus:border-blue-500 bg-white'}`} 
                    />
                    <p className="text-[10px] text-blue-700 font-medium mt-2 leading-relaxed">
                        Si vous indiquez une adresse e-mail différente de la vôtre (ex: un conducteur de travaux), un e-mail lui sera envoyé avec un lien magique lui permettant d'accepter cette redirection. S'il refuse ou si vous laissez ce champ vide, les messages vous seront envoyés.
                    </p>
                </div>
            </div>

            <div className="space-y-4 pt-6 border-t border-slate-100">
                <div>
                    <h3 className="font-black text-slate-800 text-sm uppercase tracking-widest flex items-center gap-2 mb-1">
                        <EyeIcon size={16} className="text-blue-600"/> Affichage du panneau virtuel
                    </h3>
                    <p className="text-xs text-slate-500 leading-relaxed">
                        Voici le lien direct vers la page publique de votre panneau. Vous pouvez le transmettre à votre imprimeur s'il réalise lui-même le support physique, ou le communiquer au public.
                    </p>
                </div>
                
                <div className="flex items-center gap-2 bg-slate-50 p-2 rounded-2xl border border-slate-200">
                    <Button 
                        variant="secondary" 
                        icon={CopyIcon} 
                        onClick={() => {
                            navigator.clipboard.writeText(`https://eco-panneau.fr/?scan=${panneau.id}`);
                            if (window.pano_showToast) window.pano_showToast("Lien copié dans le presse-papiers !", "success");
                        }}
                        className="shrink-0 bg-white py-2.5"
                        title="Copier le lien"
                    >
                        <span className="hidden sm:inline">Copier</span>
                    </Button>
                    <input 
                        type="text" 
                        readOnly 
                        value={`https://eco-panneau.fr/?scan=${panneau.id}`} 
                        className="flex-1 min-w-0 bg-transparent text-sm font-bold text-slate-500 outline-none px-2 select-all" 
                    />
                    <Button 
                        variant="outline" 
                        icon={ExternalLinkIcon} 
                        onClick={() => window.open(`https://eco-panneau.fr/?scan=${panneau.id}`, '_blank')}
                        className="shrink-0 bg-white border-none shadow-none text-blue-600 hover:bg-blue-50 py-2.5"
                        title="Ouvrir dans un nouvel onglet"
                    >
                        <span className="hidden sm:inline">Ouvrir</span>
                    </Button>
                </div>
            </div>
        </div>
    );
};

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