// ============================================================
//  TROMBINOSCOPE — Grille/Liste + Filtres avancés + Recherche
// ============================================================

const Trombi = () => {
  const { t, members, countries, domains, openProfile, role } = useApp();
  const [view, setView] = React.useState("grid");
  const [search, setSearch] = React.useState("");
  const [showFilters, setShowFilters] = React.useState(false);
  const [filters, setFilters] = React.useState({
    decade: "", country: "", domain: "", status: "", parish: "",
    mentor: false, entrepreneur: false, retired: false, diaspora: false, honor: false
  });
  const [sort, setSort] = React.useState("name");

  const filtered = React.useMemo(() => {
    let r = members.slice();
    const q = search.toLowerCase().trim();
    if (q) {
      r = r.filter(m => {
        const hay = [m.first, m.last, m.city, m.countryName, m.domain, m.job, m.org, m.paroisseOrigin, m.paroisseNow, m.promo, ...m.skills].join(" ").toLowerCase();
        return hay.includes(q);
      });
    }
    if (filters.decade)  r = r.filter(m => m.decade === parseInt(filters.decade));
    if (filters.country) r = r.filter(m => m.country === filters.country);
    if (filters.domain)  r = r.filter(m => m.domain === filters.domain);
    if (filters.status)  r = r.filter(m => m.status === filters.status);
    if (filters.parish)  r = r.filter(m => m.paroisseOrigin === filters.parish || m.paroisseNow === filters.parish);
    if (filters.mentor)       r = r.filter(m => m.mentor);
    if (filters.entrepreneur) r = r.filter(m => m.entrepreneur);
    if (filters.retired)      r = r.filter(m => m.retired);
    if (filters.diaspora)     r = r.filter(m => m.diaspora);
    if (filters.honor)        r = r.filter(m => m.honor);

    if (sort === "name") r.sort((a, b) => a.last.localeCompare(b.last));
    if (sort === "promo") r.sort((a, b) => b.promo - a.promo);
    if (sort === "country") r.sort((a, b) => a.countryName.localeCompare(b.countryName));
    return r;
  }, [members, search, filters, sort]);

  const activeFiltersCount = Object.values(filters).filter(v => v === true || (typeof v === "string" && v)).length;
  const reset = () => { setFilters({ decade: "", country: "", domain: "", status: "", parish: "", mentor: false, entrepreneur: false, retired: false, diaspora: false, honor: false }); setSearch(""); };

  const decades = [1960, 1970, 1980, 1990, 2000, 2010, 2020];

  return (
    <div>
      {/* Hero */}
      <Section className="pt-10 pb-6">
        <div className="flex items-end justify-between flex-wrap gap-4">
          <div>
            <div className="flex items-center gap-3 mb-2">
              <div className="liturgy-underline w-12"></div>
              <div className="text-[11px] uppercase tracking-[0.22em] text-ajc-red font-semibold">{members.length} anciens recensés</div>
            </div>
            <h1 className="font-display text-4xl md:text-5xl font-semibold text-ajc-blueDk">{t.trombi.title}</h1>
            <p className="mt-2 text-ajc-mute text-lg">{t.trombi.lead}</p>
          </div>
        </div>
      </Section>

      {/* Barre recherche + contrôles */}
      <Section className="sticky top-16 z-20 bg-ajc-cream/95 backdrop-blur-sm py-3 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 border-b border-ajc-blue/10">
        <div className="max-w-7xl mx-auto flex items-center gap-2 flex-wrap">
          <div className="relative flex-1 min-w-[240px]">
            <Icon name="search" size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-ajc-mute"/>
            <input
              type="search" value={search} onChange={e => setSearch(e.target.value)}
              placeholder={t.trombi.search}
              className="w-full pl-10 pr-4 py-2.5 rounded-lg bg-white border border-ajc-blue/15 focus:border-ajc-blue focus:ring-2 focus:ring-ajc-blue/10 outline-none text-sm"
            />
          </div>
          <button onClick={() => setShowFilters(!showFilters)}
            className={"px-3.5 py-2.5 rounded-lg border text-sm font-medium flex items-center gap-2 transition " +
              (showFilters || activeFiltersCount > 0 ? "bg-ajc-blue text-white border-ajc-blue" : "bg-white border-ajc-blue/15 text-ajc-blue hover:bg-ajc-blue/5")}>
            <Icon name="filter" size={16}/>
            {t.trombi.filters}
            {activeFiltersCount > 0 && <span className="bg-ajc-gold text-ajc-blueDk text-[10px] font-bold rounded-full w-5 h-5 flex items-center justify-center">{activeFiltersCount}</span>}
          </button>
          <select value={sort} onChange={e => setSort(e.target.value)}
            className="px-3 py-2.5 rounded-lg border border-ajc-blue/15 bg-white text-sm text-ajc-ink font-medium">
            <option value="name">{t.trombi.sortName}</option>
            <option value="promo">{t.trombi.sortPromo}</option>
            <option value="country">{t.trombi.sortCountry}</option>
          </select>
          <div className="flex items-center bg-white border border-ajc-blue/15 rounded-lg p-1">
            <button onClick={() => setView("grid")} title={t.trombi.grid}
              className={"p-1.5 rounded " + (view === "grid" ? "bg-ajc-blue text-white" : "text-ajc-mute hover:text-ajc-blue")}>
              <Icon name="grid" size={16}/>
            </button>
            <button onClick={() => setView("list")} title={t.trombi.list}
              className={"p-1.5 rounded " + (view === "list" ? "bg-ajc-blue text-white" : "text-ajc-mute hover:text-ajc-blue")}>
              <Icon name="list" size={16}/>
            </button>
          </div>
        </div>

        {/* Chips filtres rapides — décennies */}
        <div className="max-w-7xl mx-auto mt-3 flex gap-2 overflow-x-auto no-scrollbar">
          <button onClick={() => setFilters({...filters, decade: ""})}
            className={"px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap border transition " +
              (filters.decade === "" ? "bg-ajc-blueDk text-white border-ajc-blueDk" : "bg-white text-ajc-mute border-ajc-blue/15 hover:border-ajc-blue/40")}>
            {t.filters.all}
          </button>
          {decades.map(d => (
            <button key={d} onClick={() => setFilters({...filters, decade: filters.decade === d.toString() ? "" : d.toString()})}
              className={"px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap border transition " +
                (filters.decade === d.toString() ? "bg-ajc-blue text-white border-ajc-blue" : "bg-white text-ajc-mute border-ajc-blue/15 hover:border-ajc-blue/40")}>
              {d}s
            </button>
          ))}
          <div className="w-px bg-ajc-blue/10 mx-1"></div>
          {[
            { k: "mentor", label: t.filters.mentor, color: "green" },
            { k: "entrepreneur", label: t.filters.entrepreneur, color: "gold" },
            { k: "retired", label: t.filters.retired, color: "blue" },
            { k: "diaspora", label: t.filters.diaspora, color: "red" },
            { k: "honor", label: t.filters.honor, color: "gold" }
          ].map(b => {
            const active = filters[b.k];
            const colors = { green: "bg-ajc-green text-white border-ajc-green", gold: "bg-ajc-gold text-ajc-blueDk border-ajc-gold", blue: "bg-ajc-blue text-white border-ajc-blue", red: "bg-ajc-red text-white border-ajc-red" };
            return (
              <button key={b.k} onClick={() => setFilters({...filters, [b.k]: !active})}
                className={"px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap border transition " +
                  (active ? colors[b.color] : "bg-white text-ajc-mute border-ajc-blue/15 hover:border-ajc-blue/40")}>
                {b.label}
              </button>
            );
          })}
        </div>
      </Section>

      {/* Panneau filtres avancés */}
      {showFilters && (
        <Section className="py-4">
          <div className="bg-white rounded-2xl border border-ajc-blue/10 p-5 shadow-card">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <FilterSelect label={t.filters.country} value={filters.country} onChange={v => setFilters({...filters, country: v})}
                options={[["", t.filters.all], ...countries.map(c => [c.code, c.flag + " " + c.name])]}/>
              <FilterSelect label={t.filters.domain} value={filters.domain} onChange={v => setFilters({...filters, domain: v})}
                options={[["", t.filters.all], ...domains.map(d => [d, d])]}/>
              <FilterSelect label={t.filters.status} value={filters.status} onChange={v => setFilters({...filters, status: v})}
                options={[["", t.filters.all], ...AJC.STATUSES.map(s => [s, s])]}/>
              <FilterSelect label={t.filters.parish} value={filters.parish} onChange={v => setFilters({...filters, parish: v})}
                options={[["", t.filters.all], ...AJC.PARISHES_BF.map(p => [p, p])]}/>
            </div>
            <div className="mt-4 flex items-center justify-between flex-wrap gap-2">
              <div className="text-sm text-ajc-mute"><strong className="text-ajc-blueDk">{filtered.length}</strong> {t.trombi.results}</div>
              <Btn variant="ghost" icon="close" size="sm" onClick={reset}>{t.trombi.reset}</Btn>
            </div>
          </div>
        </Section>
      )}

      {/* Résultats */}
      <Section className="py-6 pb-16">
        <div className="text-sm text-ajc-mute mb-4">
          <strong className="text-ajc-blueDk">{filtered.length}</strong> {t.trombi.results}
        </div>

        {filtered.length === 0 ? (
          <div className="text-center py-20">
            <div className="w-16 h-16 mx-auto rounded-full bg-ajc-blue/10 flex items-center justify-center mb-3 text-ajc-blue">
              <Icon name="search" size={28}/>
            </div>
            <p className="text-ajc-mute">{t.trombi.noResult}</p>
          </div>
        ) : view === "grid" ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-5">
            {filtered.map(m => <MemberCard key={m.id} m={m} onOpen={() => openProfile(m.id)} t={t}/>)}
          </div>
        ) : (
          <div className="bg-white rounded-2xl border border-ajc-blue/10 overflow-hidden divide-y divide-ajc-blue/5">
            {filtered.map(m => <MemberRow key={m.id} m={m} onOpen={() => openProfile(m.id)} t={t}/>)}
          </div>
        )}
      </Section>
    </div>
  );
};

const FilterSelect = ({ label, value, onChange, options }) => (
  <div>
    <label className="text-[11px] uppercase tracking-wider font-semibold text-ajc-mute mb-1.5 block">{label}</label>
    <select value={value} onChange={e => onChange(e.target.value)}
      className="w-full px-3 py-2 rounded-lg border border-ajc-blue/15 bg-white text-sm focus:border-ajc-blue focus:ring-2 focus:ring-ajc-blue/10 outline-none">
      {options.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
    </select>
  </div>
);

const MemberCard = ({ m, onOpen, t }) => (
  <button onClick={onOpen} className="text-left bg-white rounded-2xl border border-ajc-blue/10 overflow-hidden hover:shadow-cardHover hover:border-ajc-blue/30 transition group">
    <div className="relative aspect-[4/5] overflow-hidden bg-gradient-to-br from-ajc-blue/5 to-ajc-blue/10">
      <img src={m.photo} alt={m.first + " " + m.last} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"/>
      <div className="absolute top-2 left-2 flex flex-col gap-1 items-start">
        <span className="badge bg-white/95 text-ajc-blueDk shadow-sm">Promo {m.promo}</span>
      </div>
      <div className="absolute top-2 right-2 flex flex-col gap-1 items-end">
        {m.honor && <Badge tone="gold" icon="star">Honneur</Badge>}
        {m.mentor && <Badge tone="green" icon="heart">Mentor</Badge>}
        {m.entrepreneur && <Badge tone="gold">Entrepreneur</Badge>}
        {m.retired && <Badge tone="blue">Retraité</Badge>}
      </div>
      <div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/60 to-transparent text-white">
        <div className="text-xs flex items-center gap-1.5">
          <span>{m.countryFlag}</span>
          <span className="truncate">{m.city}</span>
        </div>
      </div>
    </div>
    <div className="p-3.5">
      <div className="font-semibold text-ajc-blueDk truncate">{m.first} {m.last}</div>
      <div className="text-xs text-ajc-mute mt-0.5 truncate">{m.job}</div>
      <div className="text-[11px] text-ajc-blue mt-0.5 truncate font-medium">{m.domain}</div>
    </div>
  </button>
);

const MemberRow = ({ m, onOpen, t }) => (
  <button onClick={onOpen} className="w-full text-left p-3 md:p-4 hover:bg-ajc-blue/5 transition flex items-center gap-4">
    <img src={m.photo} alt="" className="w-12 h-12 md:w-14 md:h-14 rounded-full object-cover border-2 border-white shadow-sm flex-shrink-0"/>
    <div className="flex-1 min-w-0 grid grid-cols-2 md:grid-cols-5 gap-2 items-center">
      <div className="md:col-span-2">
        <div className="font-semibold text-ajc-blueDk truncate">{m.first} {m.last}</div>
        <div className="text-xs text-ajc-mute truncate">{m.job}</div>
      </div>
      <div className="text-sm text-ajc-blue font-medium hidden md:block">Promo {m.promo}</div>
      <div className="text-xs text-ajc-mute truncate">{m.countryFlag} {m.city}</div>
      <div className="flex justify-end gap-1 flex-wrap">
        {m.honor && <Badge tone="gold" icon="star">★</Badge>}
        {m.mentor && <Badge tone="green">M</Badge>}
        {m.entrepreneur && <Badge tone="gold">E</Badge>}
        {m.retired && <Badge tone="blue">R</Badge>}
      </div>
    </div>
    <Icon name="arrowRight" size={16} className="text-ajc-mute flex-shrink-0"/>
  </button>
);

Object.assign(window, { Trombi, MemberCard, MemberRow });