/* global React */
const { useState, useEffect, useRef } = React;

function Themes({ onBack, onOpenPhoto }) {
  const themes = window.THEMES || [];
  const photos = window.DARSHAN || [];
  const photoById = Object.fromEntries(photos.map(p => [p.id, p]));
  const [active, setActive] = useState(null);
  const scrollRef = useRef(null);

  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") { active ? setActive(null) : onBack(); } };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [active, onBack]);

  if (active) {
    const t = themes.find(x => x.key === active);
    return <ThemeChapter theme={t} photoById={photoById} onBack={() => setActive(null)} onOpenPhoto={onOpenPhoto} />;
  }

  return (
    <div className="chamber chamber-themes" ref={scrollRef}>
      <ChamberChrome onBack={onBack} num="iii." dev="विषय" en="The Five Chambers" />

      <header className="chamber-head">
        <h1 className="chamber-title">
          five lenses, <em>one looking.</em>
        </h1>
        <p className="chamber-sub">
          the archive is not a category. it is a slow river that has chosen to enter five separate rooms.
        </p>
      </header>

      <div className="theme-index">
        {themes.map((t, i) => {
          const cover = photoById[t.photoIds[0]];
          return (
            <button
              key={t.key}
              className="theme-row"
              onClick={() => setActive(t.key)}
              data-cursor
              style={{ "--i": i }}
            >
              <div className="theme-row-num">— {t.num} —</div>

              <div className="theme-row-cover">
                <img src={cover?.file} alt="" loading="lazy"/>
                <div className="theme-row-cover-tag">
                  <span className="dev">{t.dev}</span>
                  <span className="dot">·</span>
                  <span>{t.photoIds.length} photographs</span>
                </div>
              </div>

              <div className="theme-row-body">
                <h2 className="theme-row-title">
                  <span className="theme-row-dev">{t.dev}</span>
                  <span className="theme-row-en">{t.en}</span>
                </h2>
                <div className="theme-row-sub">— {t.enSub}</div>
                <div className="theme-row-epigraph">"{t.epigraph}"</div>
                <div className="theme-row-cta">
                  enter the chamber
                  <span className="arrow">→</span>
                </div>
              </div>
            </button>
          );
        })}
      </div>

      <footer className="chamber-foot">
        <div className="rule"></div>
        <p>five chambers · one breath · twenty photographs</p>
      </footer>
    </div>
  );
}

function ThemeChapter({ theme, photoById, onBack, onOpenPhoto }) {
  return (
    <div className="chamber chamber-theme-detail">
      <ChamberChrome onBack={onBack} num={theme.num} dev={theme.dev} en={theme.en} hint="back to chambers" />

      <article className="theme-article">
        <header className="theme-article-head">
          <div className="theme-article-num">— {theme.num} —</div>
          <h1 className="theme-article-title">
            <span className="dev">{theme.dev}</span>
            <span className="en">{theme.en}</span>
          </h1>
          <p className="theme-article-sub">{theme.enSub}</p>
          <blockquote className="theme-article-epigraph">"{theme.epigraph}"</blockquote>
        </header>

        <div className="theme-article-body">
          {theme.body.map((p, i) => <p key={i}>{p}</p>)}
        </div>

        <div className="theme-article-gallery">
          {theme.photoIds.map((id, i) => {
            const p = photoById[id];
            if (!p) return null;
            return (
              <figure key={id} className={`theme-fig theme-fig-${i % 3}`} onClick={() => onOpenPhoto && onOpenPhoto(id)} data-cursor>
                <div className="theme-fig-img">
                  <img src={p.file} alt={p.title} loading="lazy" />
                </div>
                <figcaption>
                  <div className="dev">{p.dev}</div>
                  <div className="ttl">{p.title}</div>
                  <div className="ln">{p.line}</div>
                  <div className="loc">{p.place} · {p.year}</div>
                </figcaption>
              </figure>
            );
          })}
        </div>

        <footer className="theme-article-end">
          <div className="rule"></div>
          <button className="chamber-link" onClick={onBack} data-cursor>
            ← return to the five chambers
          </button>
        </footer>
      </article>
    </div>
  );
}

function ChamberChrome({ onBack, num, dev, en, hint = "back to the threshold" }) {
  return (
    <div className="chamber-chrome">
      <button className="chamber-back" onClick={onBack} data-cursor>
        <span className="dash"></span>
        {hint}
      </button>
      <div className="chamber-loc">
        <span>{num}</span>
        <span className="dev">{dev}</span>
        <span>{en}</span>
      </div>
    </div>
  );
}

window.Themes = Themes;
window.ChamberChrome = ChamberChrome;