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

window.pano_RiverainEquipeTab = ({
    panneau,
    themeColor,
    handleExternalLink,
    isPreview = false
}) => {
    // 1. - Récupération sécurisée des icônes et composants
    const {
        UsersIcon, BuildingIcon, MapPinIcon, PhoneIcon, MailIcon, ExternalLinkIcon, FileDigitIcon
    } = window.pano_getIcons();
    
    const { Button, CardGrid } = window.pano_getComponents();

    const hasIntervenants = panneau.intervenants && panneau.intervenants.length > 0;
    const hasLots = panneau.lots && panneau.lots.length > 0;

    if (!hasIntervenants && !hasLots) {
        return (
            <div className="p-3 animate-in fade-in slide-in-from-bottom-2 duration-300">
                <div className="text-center p-8 text-slate-400 font-medium text-sm">
                    L'équipe du panneau n'a pas encore été renseignée.
                </div>
            </div>
        );
    }

    return (
        <div className="p-3 space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300">
            
            {/* 2. - Intervenants principaux */}
            {hasIntervenants && (
                <div className="space-y-2">
                    <h3 className="text-[9px] font-black text-slate-400 uppercase tracking-widest pl-1">Intervenants principaux</h3>
                    
                    <CardGrid minWidth="280px" className="gap-3">
                        {panneau.intervenants.map((inter, idx) => (
                            <div key={idx} className={`bg-white p-3 rounded-xl shadow-sm border border-slate-100 flex items-start gap-3 h-full ${isPreview ? 'flex-col' : 'flex-col sm:flex-row'}`}>
                                {inter.logoId ? (
                                    <img src={`${window.pano_CONFIG.apiBaseUrl}file/download&type=image&id=${inter.logoId}&preview=1`} alt="logo" className="w-10 h-10 object-contain rounded-xl shrink-0 border border-slate-100 bg-slate-50" />
                                ) : (
                                    <div className={`w-10 h-10 rounded-xl items-center justify-center shrink-0 ${isPreview ? 'hidden' : 'hidden sm:flex'}`} style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                                        <UsersIcon size={16}/>
                                    </div>
                                )}
                                <div className="min-w-0 flex-1 w-full flex flex-col h-full">
                                    <p className="text-[9px] font-bold uppercase mb-0.5 break-words leading-tight" style={{color: themeColor}}>{inter.role || 'Rôle non défini'}</p>
                                    <p className="font-black text-xs text-slate-800 break-words leading-tight">{inter.name}</p>
                                    {inter.description && <p className="text-[11px] text-slate-600 mt-1 mb-1.5 leading-relaxed flex-1">{inter.description}</p>}
                                    
                                    {/* AFFICHAGE DU SIRET */}
                                    {inter.siret && (
                                        <p className="text-[9px] text-slate-500 mt-1 flex items-start gap-1">
                                            <FileDigitIcon size={10} className="mt-0.5 shrink-0" style={{ color: themeColor }}/> SIRET : {inter.siret}
                                        </p>
                                    )}

                                    {inter.address && (
                                        <p className="text-[9px] text-slate-500 mt-1 flex items-start gap-1">
                                            <MapPinIcon size={10} className="mt-0.5 shrink-0" style={{ color: themeColor }}/> {inter.address}
                                        </p>
                                    )}

                                    {(inter.phone || inter.email || inter.website) && (
                                        <div className="flex flex-wrap gap-1.5 mt-2 pt-2 border-t border-slate-50">
                                            {inter.phone && (
                                                <Button variant="secondary" onClick={(e) => { const blocked = handleExternalLink(e, null); if(!blocked) window.location.href = `tel:${inter.phone.replace(/\s+/g, '')}`; }} className="text-[9px] py-1 px-2 shadow-sm bg-slate-50 border-slate-100 text-slate-500 hover:text-slate-800">
                                                    <PhoneIcon size={10} style={{ color: themeColor }}/> <span className="mt-[1px]">{inter.phone}</span>
                                                </Button>
                                            )}
                                            {inter.email && (
                                                <Button variant="secondary" onClick={(e) => { const blocked = handleExternalLink(e, null); if(!blocked) window.location.href = `mailto:${inter.email}`; }} className="text-[9px] py-1 px-2 shadow-sm bg-slate-50 border-slate-100 text-slate-500 hover:text-slate-800">
                                                    <MailIcon size={10} style={{ color: themeColor }}/> <span className="mt-[1px]">Email</span>
                                                </Button>
                                            )}
                                            {inter.website && (
                                                <Button variant="secondary" onClick={(e) => { 
                                                    const url = inter.website.startsWith('http') ? inter.website : `https://${inter.website}`;
                                                    const blocked = handleExternalLink(e, url); 
                                                    if(!blocked) window.open(url, '_blank', 'noopener,noreferrer'); 
                                                }} className="text-[9px] py-1 px-2 shadow-sm bg-slate-50 border-slate-100 text-slate-500 hover:text-slate-800">
                                                    <ExternalLinkIcon size={10} style={{ color: themeColor }}/> <span className="mt-[1px]">Web</span>
                                                </Button>
                                            )}
                                        </div>
                                    )}
                                </div>
                            </div>
                        ))}
                    </CardGrid>
                </div>
            )}

            {/* 3. - Lots et entreprises sous-traitantes */}
            {hasLots && (
                <div className={`space-y-3 ${hasIntervenants ? 'pt-3 border-t border-slate-200/60' : ''}`}>
                    <h3 className="text-[9px] font-black text-slate-400 uppercase tracking-widest pl-1">Entreprises sous-traitantes</h3>
                    
                    <CardGrid minWidth="280px" className="gap-3">
                        {panneau.lots.map((lot, idx) => (
                            <div key={idx} className="bg-white rounded-xl shadow-sm border border-slate-100 flex flex-col h-full">
                                <div className="bg-slate-50 px-3 py-2 border-b border-slate-100 rounded-t-xl">
                                    <p className="font-black text-[10px] text-slate-700 uppercase">{lot.name}</p>
                                </div>
                                <div className="divide-y divide-slate-50 flex-1 flex flex-col">
                                    {lot.entreprises?.map((ent, eIdx) => (
                                        <div key={eIdx} className={`p-3 flex items-start flex-1 gap-3 ${isPreview ? 'flex-col' : 'flex-col sm:flex-row'}`}>
                                            {ent.logoId ? (
                                                <img src={`${window.pano_CONFIG.apiBaseUrl}file/download&type=image&id=${ent.logoId}&preview=1`} alt="logo" className="w-8 h-8 object-contain rounded-xl shrink-0 border border-slate-100 bg-white" />
                                            ) : (
                                                <div className={`w-8 h-8 rounded-xl items-center justify-center shrink-0 ${isPreview ? 'hidden' : 'hidden sm:flex'}`} style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                                                    <BuildingIcon size={14}/>
                                                </div>
                                            )}
                                            <div className="min-w-0 flex-1 w-full flex flex-col h-full">
                                                <p className="font-bold text-xs text-slate-800 break-words leading-tight">{ent.name}</p>
                                                {ent.role && <p className="text-[9px] font-bold uppercase mt-0.5 break-words leading-tight" style={{color: themeColor}}>{ent.role}</p>}
                                                {ent.description && <p className="text-[10px] text-slate-600 mt-1 leading-relaxed flex-1">{ent.description}</p>}
                                                
                                                {/* AFFICHAGE DU SIRET */}
                                                {ent.siret && (
                                                    <p className="text-[9px] text-slate-500 mt-1 flex items-start gap-1">
                                                        <FileDigitIcon size={10} className="mt-0.5 shrink-0" style={{ color: themeColor }}/> SIRET : {ent.siret}
                                                    </p>
                                                )}

                                                {ent.address && (
                                                    <p className="text-[9px] text-slate-500 mt-1 flex items-start gap-1">
                                                        <MapPinIcon size={10} className="mt-0.5 shrink-0" style={{ color: themeColor }}/> {ent.address}
                                                    </p>
                                                )}

                                                {(ent.phone || ent.email || ent.website) && (
                                                    <div className="flex flex-wrap gap-1.5 mt-2 pt-2 border-t border-slate-50">
                                                        {ent.phone && (
                                                            <Button variant="secondary" onClick={(e) => { const blocked = handleExternalLink(e, null); if(!blocked) window.location.href = `tel:${ent.phone.replace(/\s+/g, '')}`; }} className="text-[9px] py-1 px-2 shadow-sm bg-white border-slate-100 text-slate-500 hover:text-slate-800">
                                                                <PhoneIcon size={10} style={{ color: themeColor }}/> <span className="mt-[1px]">{ent.phone}</span>
                                                            </Button>
                                                        )}
                                                        {ent.email && (
                                                            <Button variant="secondary" onClick={(e) => { const blocked = handleExternalLink(e, null); if(!blocked) window.location.href = `mailto:${ent.email}`; }} className="text-[9px] py-1 px-2 shadow-sm bg-white border-slate-100 text-slate-500 hover:text-slate-800">
                                                                <MailIcon size={10} style={{ color: themeColor }}/> <span className="mt-[1px]">Email</span>
                                                            </Button>
                                                        )}
                                                        {ent.website && (
                                                            <Button variant="secondary" onClick={(e) => { 
                                                                const url = ent.website.startsWith('http') ? ent.website : `https://${ent.website}`;
                                                                const blocked = handleExternalLink(e, url); 
                                                                if(!blocked) window.open(url, '_blank', 'noopener,noreferrer'); 
                                                            }} className="text-[9px] py-1 px-2 shadow-sm bg-white border-slate-100 text-slate-500 hover:text-slate-800">
                                                                <ExternalLinkIcon size={10} style={{ color: themeColor }}/> <span className="mt-[1px]">Web</span>
                                                            </Button>
                                                        )}
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    ))}
                                    {(!lot.entreprises || lot.entreprises.length === 0) && (
                                        <p className="p-3 text-[10px] text-slate-400 italic flex-1">En cours d'attribution</p>
                                    )}
                                </div>
                            </div>
                        ))}
                    </CardGrid>
                </div>
            )}
        </div>
    );
};

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