/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Socle Éditeur (1/4) - Onglet Informations Générales
 * =========================================================================
 */

window.pano_PanneauEditorInfos = ({ 
    panneau, 
    setPanneau, 
    lockedFields = [], 
    validationErrors = [], 
    uiMode, 
    settings 
}) => {
    // 1. RÉCUPÉRATION DES COMPOSANTS ET ICÔNES GLOBAUX
    const AlertBox = window.pano_AlertBox || (() => null);
    const Button = window.pano_Button || (() => null);
    
    const {
        InfoIcon, LockIcon, MapPinIcon, CalendarIcon, UploadCloudIcon,
        CheckCircleIcon, Trash2Icon, PlusIcon
    } = window.pano_getIcons();

    // 2. LOGIQUE D'AFFICHAGE (Mode simplifié vs pro)
    const isAdvanced = uiMode === 'professionnel';
    
    const showDesc = isAdvanced || settings?.simp_opt_description === '1';
    const showImage = isAdvanced || settings?.simp_opt_image === '1';
    const showLink = isAdvanced || settings?.simp_opt_link === '1';
    const showEmergency = isAdvanced || settings?.simp_opt_emergency === '1';
    const showSchedule = isAdvanced || settings?.simp_opt_schedule === '1';
    const showPractical = showLink || showEmergency || showSchedule;

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

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

    // 3. HANDLERS SPÉCIFIQUES À CE COMPOSANT
    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 === 'image') {
            const reader = new FileReader();
            reader.onload = async (event) => {
                const base64Url = event.target.result;
                setPanneau(prev => ({ ...prev, imageUrl: base64Url }));
                
                try {
                    const fileId = await window.pano_uploadFile(file, 'image', null, false, false, panneau.client_uid, panneau.id);
                    setPanneau(prev => ({ ...prev, imageId: fileId }));
                } catch (err) {
                    if (window.pano_showToast) window.pano_showToast(err, "error");
                    setPanneau(prev => ({ ...prev, imageUrl: '' }));
                }
            };
            reader.readAsDataURL(file);
        } else if (type === 'pdf') {
            try {
                const fileId = await window.pano_uploadFile(file, 'pdf', null, false, false, panneau.client_uid, panneau.id);
                setPanneau(prev => ({ ...prev, pdfId: fileId }));
            } catch (err) {
                if (window.pano_showToast) window.pano_showToast(err, "error");
            }
        }
    };

    const addModifiedPermit = () => {
        if (isFieldLocked('permitNumber')) return;
        const currentArr = panneau.modifiedPermits || [];
        const newId = 'mod_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
        setPanneau({ ...panneau, modifiedPermits: [...currentArr, { number: '', date: '', id: newId }] });
    };

    const updateModifiedPermit = (id, field, value) => {
        if (isFieldLocked('permitNumber')) return;
        const newArr = (panneau.modifiedPermits || []).map(p => p.id === id ? { ...p, [field]: value } : p);
        setPanneau({ ...panneau, modifiedPermits: newArr });
    };

    const removeModifiedPermit = (id) => {
        if (isFieldLocked('permitNumber')) return;
        const newArr = (panneau.modifiedPermits || []).filter(p => p.id !== id);
        setPanneau({ ...panneau, modifiedPermits: newArr });
    };

    // 4. RENDU
    return (
        <div className="space-y-8 animate-in fade-in pb-8">
            
            <AlertBox type="info" icon={InfoIcon}>
                Renseignez les mentions légales affichées publiquement. Les champs marqués d'un <span className="text-red-500 font-black">*</span> sont obligatoires pour la publication.
                {lockedFields.length > 0 && <span className="block mt-2 font-bold text-amber-600"><LockIcon size={14} className="inline mr-1"/> Certains champs ont été verrouillés par le propriétaire du projet.</span>}
            </AlertBox>

            {/* SECTION 1 : LE PROJET */}
            <div className="space-y-4">
                <h4 className="font-black text-slate-800 text-sm uppercase tracking-widest border-b border-slate-200 pb-2">1. Le projet</h4>
                <div className="flex flex-col gap-4">
                    <div className="space-y-1 relative">
                        <label className="text-xs font-bold text-slate-500 uppercase block flex items-center gap-1">
                            Nom du chantier / projet <span className="text-red-500">*</span>
                            {isFieldLocked('name') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                        </label>
                        <input type="text" disabled={isFieldLocked('name')} value={panneau.name || ''} onChange={e => setPanneau({...panneau, name: e.target.value})} placeholder="Ex: Construction de 12 logements collectifs" className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold ${isFieldLocked('name') ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' : (validationErrors.some(e => e.includes('nom du chantier')) ? 'border-red-300 focus:border-red-500 bg-red-50' : 'border-slate-200 focus:border-emerald-500')}`} />
                    </div>
                    
                    {showDesc && (
                        <div className="space-y-1 relative">
                            <label className="text-xs font-bold text-slate-500 uppercase block flex items-center gap-1">
                                Nature des travaux (Description)
                                {isFieldLocked('description') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                            </label>
                            <textarea 
                                disabled={isFieldLocked('description')}
                                value={panneau.description || ''} 
                                onChange={e => setPanneau({...panneau, description: e.target.value})} 
                                placeholder="Ex: Démolition de l'existant et construction d'un immeuble R+3 avec parking souterrain..." 
                                rows="2" 
                                className={`w-full border-2 rounded-xl p-3 outline-none transition text-sm resize-none ${isFieldLocked('description') ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' : 'border-slate-200 focus:border-emerald-500'}`}
                            ></textarea>
                        </div>
                    )}

                    <div className="space-y-1 relative">
                        <label className="text-xs font-bold text-slate-500 uppercase block flex items-center gap-1">
                            Adresse complète du terrain <span className="text-red-500">*</span>
                            {isFieldLocked('location') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                        </label>
                        <div className="relative">
                            <MapPinIcon size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
                            <input type="text" disabled={isFieldLocked('location')} value={panneau.location || ''} onChange={e => setPanneau({...panneau, location: e.target.value})} placeholder="Numéro, Rue, Code Postal, Ville" className={`w-full border-2 rounded-xl p-3 pl-10 outline-none transition font-bold ${isFieldLocked('location') ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' : (validationErrors.some(e => e.includes('adresse du panneau')) ? 'border-red-300 focus:border-red-500 bg-red-50' : 'border-slate-200 focus:border-emerald-500')}`} />
                        </div>
                    </div>

                    {showPractical && (
                        <div className="space-y-4 pt-4 border-t border-slate-100">
                            <label className="text-xs font-bold text-slate-500 uppercase block">Informations pratiques (optionnel)</label>
                            <div className="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
                                {showSchedule && (
                                    <div className="relative">
                                        {isFieldLocked('noiseSchedule') && <LockIcon size={12} className="absolute right-3 top-1/2 -translate-y-1/2 text-amber-500" title="Verrouillé" />}
                                        <input type="text" disabled={isFieldLocked('noiseSchedule')} value={displayOptions.hours || ''} onChange={e => updateDisplayOption('hours', e.target.value)} placeholder="Horaires bruyants (Ex: Lun-Ven 8h-17h)" className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold text-sm ${isFieldLocked('noiseSchedule') ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' : 'border-slate-200 focus:border-emerald-500'}`} />
                                    </div>
                                )}
                                {showEmergency && (
                                    <div className="relative">
                                        {isFieldLocked('emergencyPhone') && <LockIcon size={12} className="absolute right-3 top-1/2 -translate-y-1/2 text-amber-500" title="Verrouillé" />}
                                        <input type="tel" disabled={isFieldLocked('emergencyPhone')} value={displayOptions.phone || ''} onChange={e => updateDisplayOption('phone', e.target.value)} placeholder="Téléphone d'urgence (24/7)" className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold text-sm ${isFieldLocked('emergencyPhone') ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' : 'border-slate-200 focus:border-emerald-500'}`} />
                                    </div>
                                )}
                                {showLink && (
                                    <div className="relative col-span-full">
                                        {isFieldLocked('promoterLink') && <LockIcon size={12} className="absolute right-3 top-1/2 -translate-y-1/2 text-amber-500" title="Verrouillé" />}
                                        <input type="url" disabled={isFieldLocked('promoterLink')} value={displayOptions.link || ''} onChange={e => updateDisplayOption('link', e.target.value)} placeholder="Lien vers le site du promoteur (https://...)" className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold text-sm ${isFieldLocked('promoterLink') ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' : 'border-slate-200 focus:border-emerald-500'}`} />
                                    </div>
                                )}
                            </div>
                        </div>
                    )}

                    {showImage && (
                        <div className="space-y-2 pt-4 border-t border-slate-100">
                            <label className="text-xs font-bold text-slate-500 uppercase block flex items-center gap-2">Vue du projet (optionnel)</label>
                            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
                                <label className="bg-white border-2 border-slate-200 hover:border-blue-500 text-slate-700 px-4 py-3 rounded-xl font-bold cursor-pointer transition shadow-sm flex items-center gap-2 text-sm shrink-0">
                                    <UploadCloudIcon size={18}/> Parcourir
                                    <input type="file" accept="image/*" className="hidden" onChange={e => handleFileUpload(e, 'image')} />
                                </label>
                                {(panneau.imageUrl || panneau.imageId) && (
                                    <div className="relative w-32 h-20 rounded-xl overflow-hidden border border-slate-200 shadow-sm group bg-slate-50">
                                        <img src={panneau.imageUrl || (window.pano_CONFIG?.apiBaseUrl + 'file/download&type=image&id=' + panneau.imageId)} alt="Aperçu" className="w-full h-full object-cover" />
                                        <div 
                                            role="button" 
                                            tabIndex={0} 
                                            onClick={(e) => { 
                                                e.preventDefault(); 
                                                if (panneau.imageId) {
                                                    window.pano_apiFetch('file/delete', { body: { id: panneau.imageId } });
                                                }
                                                setPanneau({...panneau, imageUrl: '', imageId: ''}); 
                                            }}
                                            className="absolute top-2 right-2 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 la vue"
                                        >
                                            <Trash2Icon size={14} />
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    )}
                </div>
            </div>

            {/* SECTION 2 : AUTORISATION */}
            <div className="space-y-4 pt-6 border-t border-slate-200">
                <h4 className="font-black text-slate-800 text-sm uppercase tracking-widest border-b border-slate-200 pb-2">2. L'autorisation</h4>
                <div className="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
                    <div className="space-y-1 relative">
                        <label className="text-xs font-bold text-slate-500 uppercase block flex items-center gap-1">
                            N° de permis / déclaration <span className="text-red-500">*</span>
                            {isFieldLocked('permitNumber') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                        </label>
                        <input type="text" disabled={isFieldLocked('permitNumber')} value={panneau.permitNumber || ''} onChange={e => setPanneau({...panneau, permitNumber: e.target.value})} placeholder="PC 000 000 00 00000" className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold uppercase ${isFieldLocked('permitNumber') ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' : 'border-slate-200 focus:border-emerald-500'}`} />
                    </div>
                    
                    <div className="space-y-1 relative">
                        <label className="text-xs font-bold text-slate-500 uppercase block flex items-center gap-1">
                            Date de délivrance <span className="text-red-500">*</span>
                            {isFieldLocked('permitNumber') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                        </label>
                        <div className="relative">
                            <CalendarIcon size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
                            <input type="date" disabled={isFieldLocked('permitNumber')} value={panneau.permitDate || ''} onChange={e => setPanneau({...panneau, permitDate: e.target.value})} className={`w-full border-2 rounded-xl p-3 pl-10 outline-none transition font-bold ${isFieldLocked('permitNumber') ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' : 'border-slate-200 focus:border-emerald-500'}`} />
                        </div>
                    </div>

                    <div className="space-y-1 col-span-full relative">
                        <label className="text-xs font-bold text-slate-500 uppercase block flex items-center gap-1">
                            Mairie où le dossier peut être consulté <span className="text-red-500">*</span>
                            {isFieldLocked('permitNumber') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                        </label>
                        <input type="text" disabled={isFieldLocked('permitNumber')} value={panneau.mairie || ''} onChange={e => setPanneau({...panneau, mairie: e.target.value})} placeholder="Mairie de..." className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold ${isFieldLocked('permitNumber') ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' : 'border-slate-200 focus:border-emerald-500'}`} />
                    </div>

                    <div className="space-y-2 pt-4 col-span-full border-t border-slate-100">
                        <label className="text-xs font-bold text-slate-500 uppercase block flex items-center gap-1">
                            Arrêté législatif numérique (PDF) <span className="text-red-500">*</span>
                            {isFieldLocked('pdfId') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                        </label>
                        <div className="flex items-center gap-4">
                            <label className={`border-2 px-4 py-3 rounded-xl font-bold transition shadow-sm flex items-center gap-2 text-sm ${isFieldLocked('pdfId') ? 'bg-slate-50 border-slate-200 text-slate-400 cursor-not-allowed pointer-events-none opacity-60' : 'bg-white border-slate-200 hover:border-emerald-500 text-slate-700 cursor-pointer'}`}>
                                <UploadCloudIcon size={18}/> Parcourir
                                <input type="file" accept="application/pdf" className="hidden" disabled={isFieldLocked('pdfId')} onChange={e => handleFileUpload(e, 'pdf')} />
                            </label>
                            {panneau.pdfId && (
                                <div className="flex items-center gap-3 text-emerald-600 bg-emerald-50 px-3 py-2 rounded-lg border border-emerald-100">
                                    <div className="flex items-center gap-2">
                                        <CheckCircleIcon size={16}/> <span className="text-sm font-bold">PDF uploadé</span>
                                    </div>
                                    {!isFieldLocked('pdfId') && (
                                        <Button 
                                            variant="danger" 
                                            shape="round"
                                            icon={Trash2Icon} 
                                            onClick={() => {
                                                if (panneau.pdfId) {
                                                    window.pano_apiFetch('file/delete', { body: { id: panneau.pdfId } });
                                                }
                                                setPanneau({...panneau, pdfId: ''});
                                            }}
                                            className="p-1.5 ml-1 bg-red-100/50 hover:bg-red-100 text-red-500 hover:text-red-700 border-none shadow-none"
                                            title="Supprimer le document"
                                        />
                                    )}
                                </div>
                            )}
                        </div>
                    </div>
                </div>
                
                <div className="pt-4 border-t border-slate-100">
                    <div className="flex justify-between items-center mb-3">
                        <label className="text-xs font-bold text-slate-500 uppercase block flex items-center gap-1">
                            Arrêtés modificatifs (optionnel)
                            {isFieldLocked('permitNumber') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                        </label>
                        {!isFieldLocked('permitNumber') && (
                            <Button variant="secondary" icon={PlusIcon} onClick={addModifiedPermit} className="px-3 py-1.5 text-[10px] uppercase tracking-wider">Ajouter</Button>
                        )}
                    </div>
                    <div className="space-y-2">
                        {(panneau.modifiedPermits || []).map((mod) => (
                            <div key={mod.id} className="flex gap-2 items-center bg-slate-50 p-2 rounded-xl border border-slate-200 animate-in slide-in-from-top-2">
                                <input type="text" placeholder="N° Arrêté" disabled={isFieldLocked('permitNumber')} value={mod.number} onChange={e => updateModifiedPermit(mod.id, 'number', e.target.value)} className={`flex-1 border border-slate-200 rounded-lg p-2 text-sm outline-none transition font-bold ${isFieldLocked('permitNumber') ? 'bg-slate-100 text-slate-500 cursor-not-allowed' : 'focus:border-emerald-500'}`} />
                                <input type="date" disabled={isFieldLocked('permitNumber')} value={mod.date} onChange={e => updateModifiedPermit(mod.id, 'date', e.target.value)} className={`w-36 border border-slate-200 rounded-lg p-2 text-sm outline-none transition font-bold ${isFieldLocked('permitNumber') ? 'bg-slate-100 text-slate-500 cursor-not-allowed' : 'focus:border-emerald-500'}`} />
                                {!isFieldLocked('permitNumber') && (
                                    <Button variant="danger" shape="round" icon={Trash2Icon} onClick={() => removeModifiedPermit(mod.id)} className="p-2 shadow-none" title="Supprimer" />
                                )}
                            </div>
                        ))}
                    </div>
                </div>
            </div>

            {/* SECTION 3 : ACTEURS */}
            <div className="space-y-4 pt-6 border-t border-slate-200">
                <h4 className="font-black text-slate-800 text-sm uppercase tracking-widest border-b border-slate-200 pb-2">3. Acteurs principaux</h4>
                <div className="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
                    <div className="space-y-1 relative">
                        <label className="text-xs font-bold text-slate-500 uppercase block flex items-center gap-1">
                            Bénéficiaire / maître d'ouvrage <span className="text-red-500">*</span>
                            {isFieldLocked('maitreOuvrage') && <LockIcon size={12} className="text-amber-500 ml-1" title="Verrouillé" />}
                        </label>
                        <input type="text" disabled={isFieldLocked('maitreOuvrage')} value={panneau.maitreOuvrage || ''} onChange={e => setPanneau({...panneau, maitreOuvrage: e.target.value})} placeholder="Nom ou Société du bénéficiaire" className={`w-full border-2 rounded-xl p-3 outline-none transition font-bold ${isFieldLocked('maitreOuvrage') ? 'bg-slate-50 border-slate-200 text-slate-500 cursor-not-allowed' : 'border-slate-200 focus:border-emerald-500'}`} />
                    </div>
                    <div className="space-y-1 relative">
                        <label className="text-xs font-bold text-slate-500 uppercase block">Architecte du projet</label>
                        <input type="text" value={panneau.architecte || ''} onChange={e => setPanneau({...panneau, architecte: e.target.value})} placeholder="Nom de l'architecte" className="w-full border-2 border-slate-200 rounded-xl p-3 focus:border-emerald-500 outline-none transition font-bold" />
                    </div>
                </div>
            </div>

            {/* SECTION 4 : DIMENSIONS */}
            <div className="space-y-4 pt-6 border-t border-slate-200">
                <h4 className="font-black text-slate-800 text-sm uppercase tracking-widest border-b border-slate-200 pb-2">4. Surfaces et dimensions</h4>
                <div className="grid grid-cols-[repeat(auto-fit,minmax(130px,1fr))] gap-4">
                    <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-500 uppercase block truncate" title="Superficie du terrain">Sup. Terrain</label>
                        <div className="relative">
                            <input type="number" min="0" step="0.01" value={panneau.superficieTerrain || ''} onChange={e => setPanneau({...panneau, superficieTerrain: e.target.value})} className="w-full border-2 border-slate-200 rounded-xl p-2.5 pr-8 focus:border-emerald-500 outline-none transition font-bold text-sm" />
                            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-xs">m²</span>
                        </div>
                    </div>
                    <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-500 uppercase block truncate" title="Surface de plancher">Sur. Plancher</label>
                        <div className="relative">
                            <input type="number" min="0" step="0.01" value={panneau.surfacePlancher || ''} onChange={e => setPanneau({...panneau, surfacePlancher: e.target.value})} className="w-full border-2 border-slate-200 rounded-xl p-2.5 pr-8 focus:border-emerald-500 outline-none transition font-bold text-sm" />
                            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-xs">m²</span>
                        </div>
                    </div>
                    <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-500 uppercase block truncate" title="Hauteur du projet">Hauteur max</label>
                        <div className="relative">
                            <input type="number" min="0" step="0.01" value={panneau.hauteur || ''} onChange={e => setPanneau({...panneau, hauteur: e.target.value})} className="w-full border-2 border-slate-200 rounded-xl p-2.5 pr-8 focus:border-emerald-500 outline-none transition font-bold text-sm" />
                            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-xs">m</span>
                        </div>
                    </div>
                    <div className="space-y-1">
                        <label className="text-[10px] font-bold text-slate-500 uppercase block truncate" title="Surface à démolir">Sur. Démolir</label>
                        <div className="relative">
                            <input type="number" min="0" step="0.01" value={panneau.surfaceDemolir || ''} onChange={e => setPanneau({...panneau, surfaceDemolir: e.target.value})} className="w-full border-2 border-slate-200 rounded-xl p-2.5 pr-8 focus:border-emerald-500 outline-none transition font-bold text-sm" />
                            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-xs">m²</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    );
};

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