/**
 * =========================================================================
 * PLATEFORME ECO-PANNEAU.FR - VERSION 1.0.0
 * Socle Riverains (2/4) - Onglet L'équipe (Intervenants et Lots)
 * =========================================================================
 */

window.pano_RiverainEquipeTab = ({
    panneau,
    themeColor,
    hideIntervenants,
    hideLots,
    handleExternalLink
}) => {
    // RÉCUPÉRATION SÉCURISÉE DES ICÔNES
    const {
        UsersIcon, BuildingIcon, MapPinIcon, PhoneIcon, MailIcon, ExternalLinkIcon
    } = window.pano_getIcons();
    
    const Button = window.pano_Button || (() => null);

    if (!panneau.intervenants?.length && !panneau.lots?.length) {
        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">
            
            {/* 1. INTERVENANTS PRINCIPAUX */}
            {!hideIntervenants && panneau.intervenants?.length > 0 && (
                <div className="space-y-2">
                    <h3 className="text-[9px] font-black text-slate-400 uppercase tracking-widest pl-1">Intervenants principaux</h3>
                    {panneau.intervenants.map((inter, idx) => (
                        <div key={idx} className="bg-white p-3 rounded-xl shadow-sm border border-slate-100 flex flex-col sm:flex-row items-start gap-3">
                            {inter.logoId ? (
                                <img src={`${window.pano_CONFIG.apiBaseUrl}file/download&type=image&id=${inter.logoId}`} 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 flex items-center justify-center shrink-0 hidden sm:flex" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                                    <UsersIcon size={16}/>
                                </div>
                            )}
                            <div className="min-w-0 flex-1 w-full">
                                <p className="text-[9px] font-bold uppercase mb-0.5 truncate" 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">{inter.description}</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" shape="square" 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" shape="square" 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" shape="square" 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>
                    ))}
                </div>
            )}

            {/* 2. LOTS ET ENTREPRISES SOUS-TRAITANTES */}
            {!hideLots && panneau.lots?.length > 0 && (
                <div className={`space-y-3 ${!hideIntervenants && panneau.intervenants?.length > 0 ? '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>
                    {panneau.lots.map((lot, idx) => (
                        <div key={idx} className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
                            <div className="bg-slate-50 px-3 py-2 border-b border-slate-100">
                                <p className="font-black text-[10px] text-slate-700 uppercase">{lot.name}</p>
                            </div>
                            <div className="divide-y divide-slate-50">
                                {lot.entreprises?.map((ent, eIdx) => (
                                    <div key={eIdx} className="p-3 flex flex-col sm:flex-row gap-3 items-start">
                                        {ent.logoId ? (
                                            <img src={`${window.pano_CONFIG.apiBaseUrl}file/download&type=image&id=${ent.logoId}`} 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 flex items-center justify-center shrink-0 hidden sm:flex" style={{ backgroundColor: `${themeColor}15`, color: themeColor }}>
                                                <BuildingIcon size={14}/>
                                            </div>
                                        )}
                                        <div className="min-w-0 flex-1 w-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 truncate" style={{color: themeColor}}>{ent.role}</p>}
                                            {ent.description && <p className="text-[10px] text-slate-600 mt-1 leading-relaxed">{ent.description}</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" shape="square" 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" shape="square" 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" shape="square" 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">En cours d'attribution</p>
                                )}
                            </div>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

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