// ============================================================
//  PROFILE — Fiche détaillée d'un membre
// ============================================================

const Profile = () => {
  const { t, members, profileId, setPage, role } = useApp();
  const m = members.find(x => x.id === profileId) || members[0];
  if (!m) return null;

  const canSeeContact = (visible) => role === "admin" || (role === "member" && visible);
  const colorBg = { blue: "from-ajc-blue to-ajc-blueDk", gold: "from-ajc-gold to-ajc-gold2", red: "from-ajc-red to-red-700", green: "from-ajc-green to-emerald-700" };

  return (
    <div>
      {/* Bandeau retour */}
      <Section className="pt-6 pb-2">
        <button onClick={() => setPage("trombi")} className="inline-flex items-center gap-2 text-sm text-ajc-blue hover:text-ajc-blueDk font-medium">
          <Icon name="arrowLeft" size={16}/> {t.profile.back}
        </button>
      </Section>

      {/* Header profil */}
      <Section className="pt-2">
        <div className={"relative rounded-3xl overflow-hidden bg-gradient-to-br " + (colorBg[m.color] || colorBg.blue) + " text-white"}>
          <div className="absolute inset-0 cross-watermark opacity-25"></div>
          <div className="absolute top-0 right-0 w-96 h-96 rounded-full bg-white/5 blur-3xl -translate-y-1/2 translate-x-1/3"></div>

          <div className="relative p-6 md:p-10 grid md:grid-cols-12 gap-6 md:gap-10 items-center">
            <div className="md:col-span-3 flex justify-center md:justify-start">
              <div className="relative">
                <div className="absolute -inset-2 bg-white/20 rounded-full blur-xl"></div>
                <img src={m.photo} alt={m.first + " " + m.last}
                  className="relative w-40 h-40 md:w-48 md:h-48 rounded-full object-cover border-4 border-white/30 shadow-2xl"/>
                {m.isMe && (
                  <div className="absolute bottom-2 right-2 bg-ajc-gold text-ajc-blueDk text-[10px] font-bold px-2 py-1 rounded-full">VOUS</div>
                )}
              </div>
            </div>
            <div className="md:col-span-9 text-center md:text-left">
              <div className="flex flex-wrap gap-2 justify-center md:justify-start mb-3">
                <span className="badge bg-white/15 text-white border border-white/20">Promotion {m.promo}</span>
                {m.honor && <span className="badge bg-ajc-gold text-ajc-blueDk">★ Membre d'honneur</span>}
                {m.mentor && <span className="badge bg-white/20 text-white">Mentor disponible</span>}
                {m.entrepreneur && <span className="badge bg-white/20 text-white">Entrepreneur</span>}
                {m.retired && <span className="badge bg-white/20 text-white">Retraité</span>}
                {m.diaspora && <span className="badge bg-white/20 text-white">Diaspora</span>}
              </div>
              <h1 className="font-display text-4xl md:text-5xl font-semibold leading-tight">{m.first} {m.last}</h1>
              <div className="mt-2 text-white/80 text-lg">{m.job} · {m.org}</div>
              <div className="mt-3 flex items-center gap-4 justify-center md:justify-start text-sm text-white/75 flex-wrap">
                <span className="flex items-center gap-1.5"><Icon name="mapPin" size={14}/> {m.countryFlag} {m.city}, {m.countryName}</span>
                <span className="flex items-center gap-1.5"><Icon name="church" size={14}/> {m.paroisseNow}</span>
              </div>
              <div className="mt-5 flex flex-wrap gap-2 justify-center md:justify-start">
                {canSeeContact(m.phoneVisible) && (
                  <a href={`tel:${m.phone}`} className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/15 hover:bg-white/25 text-sm font-medium">
                    <Icon name="phone" size={14}/> Appeler
                  </a>
                )}
                {canSeeContact(m.emailVisible) && (
                  <a href={`mailto:${m.email}`} className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/15 hover:bg-white/25 text-sm font-medium">
                    <Icon name="mail" size={14}/> E-mail
                  </a>
                )}
                {canSeeContact(m.whatsappVisible) && (
                  <a href="#" className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-ajc-green hover:bg-emerald-700 text-sm font-medium">
                    WhatsApp
                  </a>
                )}
                {m.linkedin && (
                  <a href={"https://" + m.linkedin} target="_blank" rel="noopener" className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#0A66C2] hover:bg-[#084d96] text-sm font-medium">
                    <Icon name="linkedin" size={14}/> LinkedIn
                  </a>
                )}
              </div>
            </div>
          </div>
        </div>
      </Section>

      {/* Rubriques */}
      <Section className="py-8 grid lg:grid-cols-3 gap-6">
        {/* Colonne gauche — Identité + Camille */}
        <div className="lg:col-span-2 space-y-6">
          <ProfileSection icon="user" title={t.profile.identity}>
            <ProfileGrid>
              <ProfileItem label={t.profile.birthYear} value={m.birthHidden && role !== "admin" ? null : m.birthYear} hidden={m.birthHidden && role !== "admin"}/>
              <ProfileItem label={t.profile.phone} value={canSeeContact(m.phoneVisible) ? m.phone : null} hidden={!canSeeContact(m.phoneVisible)}/>
              <ProfileItem label={t.profile.email} value={canSeeContact(m.emailVisible) ? m.email : null} hidden={!canSeeContact(m.emailVisible)}/>
              <ProfileItem label={t.profile.whatsapp} value={canSeeContact(m.whatsappVisible) ? m.whatsapp : null} hidden={!canSeeContact(m.whatsappVisible)}/>
              <ProfileItem label={t.profile.city} value={`${m.city}, ${m.countryName}`}/>
              <ProfileItem label="Statut" value={m.status}/>
            </ProfileGrid>
          </ProfileSection>

          <ProfileSection icon="school" title={t.profile.camille}>
            <ProfileGrid>
              <ProfileItem label={t.profile.promo} value={m.promo}/>
              <ProfileItem label={t.profile.entry} value={m.entry}/>
              <ProfileItem label={t.profile.exit} value={m.exit}/>
              <ProfileItem label={t.profile.matricule} value={m.matricule}/>
              {m.function && <ProfileItem label={t.profile.function} value={m.function} colSpan/>}
            </ProfileGrid>
            {m.memory && (
              <div className="mt-4 p-4 rounded-xl bg-ajc-cream border border-ajc-gold/30 relative">
                <Icon name="quote" size={18} className="text-ajc-gold absolute -top-2 left-3 bg-white px-1"/>
                <p className="font-display italic text-ajc-blueDk text-lg leading-snug pl-2">"{m.memory}"</p>
              </div>
            )}
          </ProfileSection>

          <ProfileSection icon="briefcase" title={t.profile.pro}>
            <ProfileGrid>
              <ProfileItem label={t.profile.domain} value={m.domain}/>
              <ProfileItem label={t.profile.job} value={m.job}/>
              <ProfileItem label={t.profile.org} value={m.org}/>
              <ProfileItem label={t.profile.position} value={m.position}/>
              <ProfileItem label={t.profile.sector} value={m.sector}/>
              <ProfileItem label={t.profile.status} value={m.status}/>
            </ProfileGrid>

            <div className="mt-4">
              <div className="text-[11px] uppercase tracking-wider font-semibold text-ajc-mute mb-2">{t.profile.skills}</div>
              <div className="flex flex-wrap gap-2">
                {m.skills.map(s => <Badge key={s} tone="blue">{s}</Badge>)}
              </div>
            </div>
            <div className="mt-4 grid md:grid-cols-2 gap-4">
              <div>
                <div className="text-[11px] uppercase tracking-wider font-semibold text-ajc-mute mb-2">{t.profile.services}</div>
                <div className="flex flex-wrap gap-2">{m.services.map(s => <Badge key={s} tone="green">{s}</Badge>)}</div>
              </div>
              <div>
                <div className="text-[11px] uppercase tracking-wider font-semibold text-ajc-mute mb-2">{t.profile.needs}</div>
                <div className="flex flex-wrap gap-2">{m.needs.map(s => <Badge key={s} tone="gold">{s}</Badge>)}</div>
              </div>
            </div>
          </ProfileSection>

          <ProfileSection icon="church" title={t.profile.parish}>
            <ProfileGrid>
              <ProfileItem label={t.profile.paroisseOrigin} value={m.paroisseOrigin}/>
              <ProfileItem label={t.profile.dioceseOrigin} value={m.dioceseOrigin}/>
              <ProfileItem label={t.profile.paroisseNow} value={m.paroisseNow}/>
              <ProfileItem label={t.profile.dioceseNow} value={m.dioceseNow}/>
              {m.engagement && <ProfileItem label={t.profile.engagement} value={m.engagement} colSpan/>}
            </ProfileGrid>
          </ProfileSection>
        </div>

        {/* Colonne droite — Collaboration */}
        <div className="space-y-6">
          <ProfileSection icon="handshake" title={t.profile.collab} tone="green">
            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 rounded-lg bg-ajc-green/5 border border-ajc-green/15">
                <span className="text-sm text-ajc-ink">{t.profile.mentor}</span>
                <span className={"text-xs font-semibold " + (m.mentor ? "text-ajc-green" : "text-ajc-mute")}>{m.mentor ? "✓ " + t.profile.yes : t.profile.no}</span>
              </div>
              <div className="flex items-center justify-between p-3 rounded-lg bg-ajc-green/5 border border-ajc-green/15">
                <span className="text-sm text-ajc-ink">{t.profile.youth}</span>
                <span className={"text-xs font-semibold " + (m.youth ? "text-ajc-green" : "text-ajc-mute")}>{m.youth ? "✓ " + t.profile.yes : t.profile.no}</span>
              </div>
            </div>
            <div className="mt-4">
              <div className="text-[11px] uppercase tracking-wider font-semibold text-ajc-mute mb-2">{t.profile.canHelp}</div>
              <div className="flex flex-wrap gap-2">{m.canHelp.map(s => <Badge key={s} tone="green">{s}</Badge>)}</div>
            </div>
            {m.seekHelp.length > 0 && (
              <div className="mt-4">
                <div className="text-[11px] uppercase tracking-wider font-semibold text-ajc-mute mb-2">{t.profile.seekHelp}</div>
                <div className="flex flex-wrap gap-2">{m.seekHelp.map(s => <Badge key={s} tone="gold">{s}</Badge>)}</div>
              </div>
            )}
          </ProfileSection>

          <ProfileSection icon="globe" title={t.profile.network}>
            <div className="space-y-2 text-sm">
              {m.linkedin && (
                <a href={"https://" + m.linkedin} target="_blank" rel="noopener" className="flex items-center gap-2 text-ajc-blue hover:text-ajc-blueDk">
                  <Icon name="linkedin" size={16}/> {m.linkedin}
                </a>
              )}
              {m.website && (
                <a href={"https://" + m.website} target="_blank" rel="noopener" className="flex items-center gap-2 text-ajc-blue hover:text-ajc-blueDk">
                  <Icon name="globe" size={16}/> {m.website}
                </a>
              )}
              <div className="pt-3 mt-3 border-t border-ajc-blue/10">
                <div className="text-[11px] uppercase tracking-wider font-semibold text-ajc-mute mb-2">{t.profile.interests}</div>
                <div className="flex flex-wrap gap-2">{m.interests.map(i => <Badge key={i} tone="gray">{i}</Badge>)}</div>
              </div>
            </div>
          </ProfileSection>

          {role === "admin" && (
            <div className="rounded-2xl border border-ajc-red/20 bg-ajc-red/5 p-4">
              <div className="text-[11px] uppercase tracking-wider font-semibold text-ajc-red mb-2">Actions admin</div>
              <div className="space-y-2">
                <Btn variant="secondary" icon="edit" size="sm" className="w-full">Modifier le profil</Btn>
                <Btn variant="danger" icon="trash" size="sm" className="w-full">Supprimer</Btn>
              </div>
            </div>
          )}
        </div>
      </Section>
    </div>
  );
};

const ProfileSection = ({ icon, title, tone = "blue", children }) => {
  const tones = { blue: "text-ajc-blue bg-ajc-blue/10", green: "text-ajc-green bg-ajc-green/10", gold: "text-yellow-800 bg-ajc-gold/20", red: "text-ajc-red bg-ajc-red/10" };
  return (
    <div className="bg-white rounded-2xl border border-ajc-blue/10 p-5 md:p-6 shadow-card">
      <div className="flex items-center gap-3 mb-4">
        <div className={"w-9 h-9 rounded-lg flex items-center justify-center " + tones[tone]}>
          <Icon name={icon} size={18}/>
        </div>
        <h3 className="font-display text-xl font-semibold text-ajc-blueDk">{title}</h3>
      </div>
      {children}
    </div>
  );
};

const ProfileGrid = ({ children }) => <div className="grid sm:grid-cols-2 gap-3">{children}</div>;

const ProfileItem = ({ label, value, hidden = false, colSpan = false }) => (
  <div className={colSpan ? "sm:col-span-2" : ""}>
    <div className="text-[10px] uppercase tracking-wider font-semibold text-ajc-mute">{label}</div>
    {hidden ? (
      <div className="text-sm text-ajc-mute mt-0.5 flex items-center gap-1.5 italic">
        <Icon name="eyeOff" size={12}/> Confidentiel
      </div>
    ) : (
      <div className="text-sm text-ajc-blueDk mt-0.5 font-medium">{value || "—"}</div>
    )}
  </div>
);

Object.assign(window, { Profile, ProfileSection, ProfileGrid, ProfileItem });