/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Socle Éditeur (3/4) - Onglet Affichage et Personnalisation
 * =========================================================================
 */

window.pano_PanneauEditorAffichage = ({
    panneau,
    setPanneau,
    uiMode,
    settings
}) => {
    // 1. RÉCUPÉRATION DES COMPOSANTS ET ICÔNES GLOBAUX
    const Toggle = window.pano_Toggle || (() => null);
    
    const { EyeIcon, PaletteIcon, UploadCloudIcon, Trash2Icon } = window.pano_getIcons();

    // 2. LOGIQUE D'AFFICHAGE (Mode simplifié vs pro)
    const isAdvanced = uiMode === 'professionnel';
    
    const showTheme = isAdvanced || settings?.simp_opt_theme === '1';
    const showHideInter = isAdvanced || settings?.simp_opt_hide_intervenants === '1';
    const showHideLots = isAdvanced || settings?.simp_opt_hide_lots === '1';
    const showHideLegal = isAdvanced || settings?.simp_opt_hide_legal === '1';
    const showVisibility = showHideInter || showHideLots || showHideLegal;

    const displayOptions = panneau.displayOptions || {
        hideLots: false,
        hideIntervenants: false,
        hideLegal: false,
        customColor: '#059669',
        phone: '',
        hours: '',
        link: ''
    };

    // 3. HANDLERS SPÉCIFIQUES
    const updateDisplayOption = (key, value) => {
        setPanneau({ ...panneau, displayOptions: { ...displayOptions, [key]: value } });
    };

    const handleFileUpload = async (e, type) => {
        const file = e.target.files[0];
        if (!file) return;

        if (type === 'logo') {
            const reader = new FileReader();
            reader.onload = async (event) => {
                const base64Url = event.target.result;
                setPanneau(prev => ({ ...prev, maitreOuvrageLogoUrl: base64Url }));
                
                try {
                    const fileId = await window.pano_uploadFile(file, 'image', null, false, false, panneau.client_uid, panneau.id);
                    setPanneau(prev => ({ ...prev, maitreOuvrageLogoId: fileId }));
                } catch (err) {
                    if (window.pano_showToast) window.pano_showToast(err, "error");
                    setPanneau(prev => ({ ...prev, maitreOuvrageLogoUrl: '' }));
                }
            };
            reader.readAsDataURL(file);
        }
    };

    // 4. RENDU
    return (
        <div className="space-y-8 animate-in fade-in pb-10">
            {showVisibility && (
                <div className="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm space-y-4">
                    <h4 className="font-black text-slate-800 flex items-center gap-2 border-b border-slate-100 pb-3">
                        <EyeIcon size={20} className="text-purple-600"/> Visibilité riverains
                    </h4>
                    <p className="text-sm text-slate-500 mb-4">Contrôlez les éléments qui s'affichent publiquement sur le scan QR du panneau.</p>
                    
                    <div className="space-y-3">
                        {showHideInter && (
                            <div className="flex items-center justify-between p-3 rounded-xl border border-slate-200 hover:bg-slate-50 transition cursor-pointer" onClick={() => updateDisplayOption('hideIntervenants', !displayOptions.hideIntervenants)}>
                                <span className="text-sm font-bold text-slate-700">Masquer l'équipe (intervenants)</span>
                                <Toggle checked={displayOptions.hideIntervenants} variant="purple" />
                            </div>
                        )}
                        
                        {showHideLots && (
                            <div className="flex items-center justify-between p-3 rounded-xl border border-slate-200 hover:bg-slate-50 transition cursor-pointer" onClick={() => updateDisplayOption('hideLots', !displayOptions.hideLots)}>
                                <span className="text-sm font-bold text-slate-700">Masquer les entreprises (lots)</span>
                                <Toggle checked={displayOptions.hideLots} variant="purple" />
                            </div>
                        )}

                        {showHideLegal && (
                            <div className="flex items-center justify-between p-3 rounded-xl border border-slate-200 hover:bg-slate-50 transition cursor-pointer" onClick={() => updateDisplayOption('hideLegal', !displayOptions.hideLegal)}>
                                <span className="text-sm font-bold text-slate-700">Masquer l'arrêté légal et documents</span>
                                <Toggle checked={displayOptions.hideLegal} variant="purple" />
                            </div>
                        )}
                    </div>
                </div>
            )}

            <div className="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm space-y-4">
                <h4 className="font-black text-slate-800 flex items-center gap-2 border-b border-slate-100 pb-3">
                    <PaletteIcon size={20} className="text-emerald-600"/> Apparence du panneau public
                </h4>
                
                {showTheme && (
                    <div className="space-y-2">
                        <label className="text-xs font-bold text-slate-500 uppercase block">Couleur du thème public</label>
                        <p className="text-xs text-slate-400 mb-2">Cliquez sur le carré de couleur ci-dessous pour ouvrir le sélecteur, ou saisissez un code Hexadécimal.</p>
                        <div className="flex items-center gap-3">
                            <input type="color" value={displayOptions.customColor || '#059669'} onChange={e => updateDisplayOption('customColor', e.target.value)} className="w-14 h-14 rounded-xl cursor-pointer border-4 border-slate-200 shadow-sm" title="Cliquez pour choisir une couleur" />
                            <input type="text" value={displayOptions.customColor || '#059669'} onChange={e => updateDisplayOption('customColor', e.target.value)} className="flex-1 border-2 border-slate-200 rounded-xl p-3 focus:border-emerald-500 outline-none transition font-bold font-mono uppercase" placeholder="#059669" />
                        </div>
                    </div>
                )}
                
                <div className={`space-y-2 ${showTheme ? 'pt-4 border-t border-slate-100' : ''}`}>
                    <label className="text-xs font-bold text-slate-500 uppercase block">Logo du maître d'ouvrage</label>
                    <div className="flex items-center gap-4">
                        <label className="bg-white border-2 border-slate-200 hover:border-emerald-500 text-slate-700 px-4 py-3 rounded-xl font-bold cursor-pointer transition shadow-sm flex items-center gap-2 text-sm">
                            <UploadCloudIcon size={18}/> Uploader
                            <input type="file" accept="image/*" className="hidden" onChange={e => handleFileUpload(e, 'logo')} />
                        </label>
                        {(panneau.maitreOuvrageLogoUrl || panneau.maitreOuvrageLogoId) && (
                            <div className="relative w-20 h-20 rounded-xl overflow-hidden border border-slate-200 bg-slate-50 flex items-center justify-center p-2 group">
                                <img src={panneau.maitreOuvrageLogoUrl || (window.pano_CONFIG?.apiBaseUrl + 'file/download&type=image&id=' + panneau.maitreOuvrageLogoId)} alt="Logo Propriétaire" className="max-w-full max-h-full object-contain" />
                                <div 
                                    role="button" 
                                    tabIndex={0} 
                                    onClick={(e) => { 
                                        e.preventDefault(); 
                                        if (panneau.maitreOuvrageLogoId) {
                                            window.pano_apiFetch('file/delete', { body: { id: panneau.maitreOuvrageLogoId } });
                                        }
                                        setPanneau({...panneau, maitreOuvrageLogoUrl: '', maitreOuvrageLogoId: ''}); 
                                    }}
                                    className="absolute top-1 right-1 bg-red-600/90 hover:bg-red-600 text-white p-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-all cursor-pointer shadow-md"
                                    title="Supprimer le logo"
                                >
                                    <Trash2Icon size={14} />
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

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