// ECO-PANNEAU.FR - _react/riverains/_riverains_accueil.jsx

window.pano_RiverainAccueilTab = ({
    panneau,
    themeColor,
    displayMoaLogoUrl,
    hideLegal,
    handleExternalLink,
    openModal
}) => {
    // 1. - Récupération sécurisée des composants et icones
    const {
        BuildingIcon, ExternalLinkIcon, ShieldIcon, FileDigitIcon, ClockIcon, 
        MapPinIcon, ArrowRightIcon, HardHatIcon, InfoIcon, PhoneIcon
    } = window.pano_getIcons();
    
    const { Button } = window.pano_getComponents();

    // 2. - Calculs et formatages des données
    const validModificatifs = (panneau.modificatifs || []).filter(mod => mod.id && !mod.id.startsWith('mod_'));
    const hasModificatifs = validModificatifs.length > 0;

    // CORRECTION OOM : Le logo de l'architecte passe en miniature (&preview=1)
    const displayArchLogoUrl = panneau.architecteLogoUrl || (panneau.architecteLogoId ? `${window.pano_CONFIG?.apiBaseUrl}file/download&type=image&id=${panneau.architecteLogoId}&preview=1` : null);

    // 3. - Rendu UI
    return (
        <div className="p-3 space-y-3 animate-in fade-in slide-in-from-bottom-2 duration-300">

            {/* 3.1 - Maître d'ouvrage et Architecte */}
            {(panneau.maitreOuvrage || displayMoaLogoUrl) && (
                <div className="bg-white p-3 rounded-xl shadow-sm border border-slate-100 flex items-center gap-3">
                    {displayMoaLogoUrl ? (
                        <img src={displayMoaLogoUrl} alt="Maître d'ouvrage" className="h-10 w-auto object-contain shrink-0" />
                    ) : (
                        <div className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                            <BuildingIcon size={16} />
                        </div>
                    )}
                    <div className="min-w-0 flex-1">
                        <p className="text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-0.5 break-words">Bénéficiaire (Maître d'ouvrage)</p>
                        {panneau.maitreOuvrage && <p className="text-xs font-black text-slate-800 break-words leading-tight">{panneau.maitreOuvrage}</p>}
                    </div>
                </div>
            )}

            {(panneau.architecte || displayArchLogoUrl) && (
                <div className="bg-white p-3 rounded-xl shadow-sm border border-slate-100 flex items-center gap-3">
                    {displayArchLogoUrl ? (
                        <img src={displayArchLogoUrl} alt="Architecte" className="h-10 w-auto object-contain shrink-0" />
                    ) : (
                        <div className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                            <HardHatIcon size={16} />
                        </div>
                    )}
                    <div className="min-w-0 flex-1">
                        <p className="text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-0.5 break-words">Architecte du projet</p>
                        {panneau.architecte && <p className="text-xs font-black text-slate-800 break-words leading-tight">{panneau.architecte}</p>}
                    </div>
                </div>
            )}

            {/* 3.2 - Description des travaux */}
            {panneau.description && (
                <div className="bg-white p-3 rounded-xl shadow-sm border border-slate-100">
                    <p className="text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-1.5 break-words">Nature des travaux</p>
                    <p className="text-xs text-slate-600 leading-relaxed whitespace-pre-wrap break-words">{panneau.description}</p>
                </div>
            )}

            {/* 3.3 - Surfaces et dimensions */}
            {(panneau.superficieTerrain || panneau.surfacePlancher || panneau.hauteur || panneau.surfaceDemolir) && (
                <div className="bg-white p-3 rounded-xl shadow-sm border border-slate-100">
                    <div className="flex items-center gap-2 mb-3">
                        <div className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                            <BuildingIcon size={16} />
                        </div>
                        <h3 className="text-[9px] font-bold text-slate-400 uppercase tracking-wider break-words">Surfaces et dimensions</h3>
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                        {panneau.superficieTerrain && (
                            <div className="bg-slate-50 p-2 rounded-lg border border-slate-100">
                                <p className="text-[9px] text-slate-500 font-bold uppercase tracking-wider break-words leading-tight mb-0.5">Superficie terrain</p>
                                <p className="text-sm font-black text-slate-800 break-words leading-tight">{panneau.superficieTerrain} <span className="text-[10px] text-slate-500 font-bold">m²</span></p>
                            </div>
                        )}
                        {panneau.surfacePlancher && (
                            <div className="bg-slate-50 p-2 rounded-lg border border-slate-100">
                                <p className="text-[9px] text-slate-500 font-bold uppercase tracking-wider break-words leading-tight mb-0.5">Surface plancher</p>
                                <p className="text-sm font-black text-slate-800 break-words leading-tight">{panneau.surfacePlancher} <span className="text-[10px] text-slate-500 font-bold">m²</span></p>
                            </div>
                        )}
                        {panneau.hauteur && (
                            <div className="bg-slate-50 p-2 rounded-lg border border-slate-100">
                                <p className="text-[9px] text-slate-500 font-bold uppercase tracking-wider break-words leading-tight mb-0.5">Hauteur maximale</p>
                                <p className="text-sm font-black text-slate-800 break-words leading-tight">{panneau.hauteur} <span className="text-[10px] text-slate-500 font-bold">m</span></p>
                            </div>
                        )}
                        {panneau.surfaceDemolir && (
                            <div className="bg-slate-50 p-2 rounded-lg border border-slate-100">
                                <p className="text-[9px] text-slate-500 font-bold uppercase tracking-wider break-words leading-tight mb-0.5">Surface à démolir</p>
                                <p className="text-sm font-black text-slate-800 break-words leading-tight">{panneau.surfaceDemolir} <span className="text-[10px] text-slate-500 font-bold">m²</span></p>
                            </div>
                        )}
                    </div>
                </div>
            )}

            {/* 3.4 - Informations pratiques */}
            {(panneau.noiseSchedule || panneau.emergencyPhone) && (
                <div className="bg-white p-3 rounded-xl shadow-sm border border-slate-100">
                    <div className="flex items-center gap-2 mb-3">
                        <div className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                            <InfoIcon size={16} />
                        </div>
                        <h3 className="text-[9px] font-bold text-slate-400 uppercase tracking-wider break-words">Informations pratiques</h3>
                    </div>
                    <div className="space-y-3">
                        {panneau.noiseSchedule && (
                            <div className="flex items-start gap-3 p-2 bg-slate-50 rounded-lg border border-slate-100">
                                <ClockIcon size={14} className="shrink-0 mt-0.5 text-slate-400" />
                                <div className="min-w-0 flex-1">
                                    <p className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mb-0.5 break-words">Horaires de nuisances</p>
                                    <p className="text-xs font-bold text-slate-700 break-words">{panneau.noiseSchedule}</p>
                                </div>
                            </div>
                        )}
                        {panneau.emergencyPhone && (
                            <div className="flex items-start gap-3 p-2 bg-slate-50 rounded-lg border border-slate-100">
                                <PhoneIcon size={14} className="shrink-0 mt-0.5 text-slate-400" />
                                <div className="min-w-0 flex-1">
                                    <p className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mb-0.5 break-words">Téléphone d'urgence</p>
                                    <p className="text-xs font-bold text-slate-700 break-words">{panneau.emergencyPhone}</p>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            )}

            {/* 3.5 - Lien vers le promoteur (commercial) */}
            {panneau.promoterLink && (
                <div 
                    role="button"
                    tabIndex={0}
                    onClick={(e) => {
                        const blocked = handleExternalLink(e, panneau.promoterLink);
                        if (!blocked) window.open(panneau.promoterLink.startsWith('http') ? panneau.promoterLink : `https://${panneau.promoterLink}`, '_blank', 'noopener,noreferrer');
                    }} 
                    className="bg-white p-3 rounded-xl shadow-sm border border-slate-100 flex items-center justify-between hover:bg-slate-50 transition group w-full cursor-pointer"
                >
                    <div className="flex items-center gap-3 w-full min-w-0">
                        <div className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                            <ExternalLinkIcon size={16} />
                        </div>
                        <div className="flex-1 min-w-0">
                            <p className="text-sm font-bold text-slate-800 break-words">Acheter ou s'informer</p>
                        </div>
                        <ArrowRightIcon size={16} className="text-slate-300 group-hover:text-slate-600 group-hover:translate-x-1 transition-all shrink-0"/>
                    </div>
                </div>
            )}

            {/* 3.6 - Informations légales (Arrêté d'urbanisme) */}
            {!hideLegal && (panneau.pdfId || panneau.permitNumber) && (
                <div className="bg-white p-3 rounded-xl shadow-sm border-2" style={{ borderColor: `${themeColor}20` }}>
                    <div className="flex items-start gap-3">
                        <div className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                            <ShieldIcon size={16} />
                        </div>
                        <div className="flex-1 min-w-0">
                            <p className="text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-0.5 break-words">Autorisation d'urbanisme</p>
                            <p className="text-xs font-black text-slate-800 uppercase break-words leading-tight">{panneau.permitNumber || 'Arrêté officiel'}</p>
                            
                            {panneau.permitDate && (
                                <p className="text-[10px] text-slate-500 mt-1.5 leading-tight break-words">
                                    Délivrée le : <strong className="text-slate-700">{new Date(panneau.permitDate).toLocaleDateString('fr-FR')}</strong>
                                </p>
                            )}
                            
                            {panneau.mairie && (
                                <p className="text-[10px] text-slate-500 mt-1 leading-tight break-words">
                                    Dossier consultable en mairie de : <strong className="text-slate-700">{panneau.mairie}</strong>
                                </p>
                            )}
                        </div>
                    </div>
                    
                    {panneau.pdfId && (
                        <Button 
                            onClick={(e) => { 
                                if (e) { e.preventDefault(); e.stopPropagation(); }
                                if (hasModificatifs) openModal('arretes', null, e); 
                                else openModal('pdf', panneau.pdfId, e); 
                            }} 
                            className="mt-3 w-full py-2.5 justify-center shadow-md border-none text-white font-bold text-xs" 
                            style={{ backgroundColor: themeColor }}
                            icon={FileDigitIcon}
                        >
                            <span className="break-words text-center">
                                Consulter {hasModificatifs ? "les arrêtés" : "l'arrêté"}
                                {hasModificatifs && <span className="bg-white/20 px-1.5 py-0.5 rounded text-[10px] ml-1 font-black">{validModificatifs.length + 1}</span>}
                            </span>
                        </Button>
                    )}
                </div>
            )}

            {/* 3.7 - Localisation */}
            {panneau.location && (
                <div className="bg-white p-3 rounded-xl shadow-sm border border-slate-100 flex items-start gap-3">
                    <div className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                        <MapPinIcon size={16} />
                    </div>
                    <div className="min-w-0 flex-1">
                        <p className="text-[9px] font-bold text-slate-400 uppercase tracking-wider mb-0.5 break-words">Localisation</p>
                        <p className="text-xs font-bold text-slate-700 leading-snug break-words">{panneau.location}</p>
                    </div>
                </div>
            )}
        </div>
    );
};

/* EOF ========== [_react/riverains/_riverains_accueil.jsx] */