/* ============================================================
   АРТ-РАБОТЫ ДРУЗЕЙ — дерево по авторам + галерея
   ============================================================ */

function ArtistTree({ artists, total, sel, onSelect }) {
  return (
    <nav className="tree" aria-label="Художники">
      <button
        className={"tree__root" + (sel === "all" ? " is-active" : "")}
        onClick={() => onSelect("all")}
        aria-pressed={sel === "all"}
      >
        <span className="tree__label">Все работы</span>
        <span className="tree__c">{String(total).padStart(2, "0")}</span>
      </button>

      <ul className="tree__list">
        {artists.map((a) => {
          const empty = a.works.length === 0;
          return (
            <li key={a.id}>
              <button
                className={"tree__node" + (sel === a.id ? " is-active" : "") + (empty ? " is-empty" : "")}
                onClick={() => !empty && onSelect(a.id)}
                disabled={empty}
                aria-pressed={sel === a.id}
              >
                <span className="tree__tick" aria-hidden="true" />
                <span className="tree__label">{a.name}</span>
                <span className="tree__c">{empty ? "скоро" : String(a.works.length).padStart(2, "0")}</span>
              </button>
            </li>
          );
        })}
      </ul>

      <p className="tree__hint">Раздел растёт — со временем добавятся новые авторы.</p>
    </nav>
  );
}

function Friends() {
  const artists = FRIENDS;
  const total = artists.reduce((n, a) => n + a.works.length, 0);
  const [sel, setSel] = useState("all");
  const [lb, setLb] = useState(-1);
  const gridRef = useReveal();

  const active = sel === "all" ? null : artists.find((a) => a.id === sel);
  const items = sel === "all"
    ? artists.flatMap((a) => a.works.map((w) => ({ ...w, author: a.name, meta: a.name + " · " + w.meta })))
    : (active ? active.works.map((w) => ({ ...w, author: active.name })) : []);

  return (
    <section className="friends wrap page">
      <div className="gallery__head">
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Архив · Гости</div>
          <h1 className="gallery__title">Друзья</h1>
        </div>
        <p className="gallery__lead">Работы друзей-художников — приглашённый раздел рядом с «Рисунком». Выберите автора в дереве слева.</p>
      </div>

      <div className="friends__body">
        <aside className="friends__aside">
          <ArtistTree artists={artists} total={total} sel={sel} onSelect={(v) => { setSel(v); setLb(-1); }} />
        </aside>

        <div className="friends__main">
          {active && active.note && (
            <div className="friends__intro">
              <h2>{active.name}</h2>
              <span className="friends__role">{active.role}</span>
              <p>{active.note}</p>
            </div>
          )}

          {items.length > 0 ? (
            <div className="grid" ref={gridRef} key={sel}>
              {items.map((w, i) => (
                <figure
                  className="grid__item reveal"
                  key={w.id}
                  onClick={() => setLb(i)}
                  role="button" tabIndex={0}
                  onKeyDown={(e) => { if (e.key === "Enter") setLb(i); }}
                >
                  <Placeholder ratio={w.ratio} src={w.src} pos={w.pos} tone={w.tone} label={w.label} alt={w.title} no={String(i + 1).padStart(2, "0")} />
                  <figcaption className="tile-cap">
                    <span className="t">{w.title}</span>
                    <span className="m">{w.meta}</span>
                  </figcaption>
                </figure>
              ))}
            </div>
          ) : (
            <div className="friends__empty">
              <div className="perf-mini" aria-hidden="true"><i></i><i></i><i></i></div>
              <p>Работы этого автора появятся позже.</p>
            </div>
          )}
        </div>
      </div>

      <Lightbox items={items} index={lb} onClose={() => setLb(-1)} onIndex={setLb} />
    </section>
  );
}

Object.assign(window, { Friends, ArtistTree });