// screen-series.jsx — Series detail (asymmetric editorial scroll)
const { useMemo: _sUseM } = React;

function SeriesScreen({ t, lang, route, navigate }) {
  const all = window.JP_DATA.series;
  const i = _sUseM(() => all.findIndex((s) => s.id === route.id), [route.id, all]);
  const s = all[i];
  if (!s) {
    return (
      <main className="page" style={{ paddingTop: 'var(--space-24)' }}>
        <p className="body-l">Série introuvable.</p>
        <button className="link-u" onClick={() => navigate({ name: 'index' })}>{t.series.back}</button>
      </main>
    );
  }
  const prev = all[(i - 1 + all.length) % all.length];
  const next = all[(i + 1) % all.length];

  // Build asymmetric figure layout — alternates between full-bleed, left, right, diptych.
  const figures = s.images.map((src, idx) => {
    const mode =
      idx === 0          ? 'full'
      : idx % 4 === 1    ? 'left'
      : idx % 4 === 2    ? 'right'
      : idx % 4 === 3    ? 'diptych'
      :                    'full';
    return { src, mode, idx };
  });

  // Group diptych pairs (mode==='diptych') with the next image to form a pair.
  const blocks = [];
  for (let k = 0; k < figures.length; k++) {
    const f = figures[k];
    if (f.mode === 'diptych' && figures[k + 1]) {
      blocks.push({ kind: 'diptych', a: f, b: figures[k + 1] });
      k++; // skip pair
    } else {
      blocks.push({ kind: f.mode, fig: f });
    }
  }

  return (
    <main className="series-screen">
      {/* Title strip — asymmetric editorial */}
      <header className="page series-head" data-screen-label="Series Head">
        <div className="series-head-meta">
          <span className="micro">{s.idx} / {String(all.length).padStart(2, '0')}</span>
          <span className="micro">{s.category}</span>
        </div>
        <div className="series-head-title">
          <h1 className="h1">{s.title[lang]}</h1>
          <p className="body-l series-head-lede">
            {s.client} — {s.place} · {s.year}
          </p>
        </div>
        <dl className="series-head-dl micro">
          <div><dt>Client</dt><dd>{s.client}</dd></div>
          <div><dt>Year</dt><dd>{s.year}</dd></div>
          <div><dt>Place</dt><dd>{s.place}</dd></div>
          <div><dt>Medium</dt><dd>{s.medium}</dd></div>
        </dl>
      </header>

      {/* First plate full-bleed edge-to-edge — Koloff-inspired */}
      {s.images[0] ? (
        <figure className="fig fig-bleed">
          <div className="img-bleed">
            <SafeImg
              src={s.images[0]}
              alt={`${s.title[lang]} — opening plate`}
              label="OPENING PLATE"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
            />
          </div>
          <figcaption className="page micro">
            OPENING PLATE · {s.place} · {s.year}
          </figcaption>
        </figure>
      ) : null}

      {/* Figures */}
      <section className="series-body" data-screen-label="Series Body">
        {blocks.slice(1).map((b, bi) => {
          if (b.kind === 'full') {
            return (
              <figure className="fig fig-full" key={`f-${bi}`}>
                <div className="img-frame" style={{ aspectRatio: '3 / 2' }}>
                  <SafeImg src={b.fig.src} alt={`${s.title[lang]} — ${b.fig.idx + 1}`} label={`PLATE ${String(b.fig.idx + 1).padStart(2, '0')}`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <figcaption className="micro">
                  PLATE {String(b.fig.idx + 1).padStart(2, '0')} · {s.place} · {s.year}
                </figcaption>
              </figure>
            );
          }
          if (b.kind === 'left') {
            return (
              <figure className="fig fig-left" key={`f-${bi}`}>
                <div className="img-frame" style={{ aspectRatio: '4 / 5' }}>
                  <SafeImg src={b.fig.src} alt="" label={`PLATE ${String(b.fig.idx + 1).padStart(2, '0')}`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <figcaption className="micro">
                  PLATE {String(b.fig.idx + 1).padStart(2, '0')}
                </figcaption>
              </figure>
            );
          }
          if (b.kind === 'right') {
            return (
              <figure className="fig fig-right" key={`f-${bi}`}>
                <div className="img-frame" style={{ aspectRatio: '4 / 5' }}>
                  <SafeImg src={b.fig.src} alt="" label={`PLATE ${String(b.fig.idx + 1).padStart(2, '0')}`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <figcaption className="micro">
                  PLATE {String(b.fig.idx + 1).padStart(2, '0')}
                </figcaption>
              </figure>
            );
          }
          if (b.kind === 'diptych') {
            return (
              <figure className="fig fig-diptych" key={`f-${bi}`}>
                <div className="dip">
                  <div className="img-frame" style={{ aspectRatio: '4 / 5' }}>
                    <SafeImg src={b.a.src} alt="" label={`PLATE ${String(b.a.idx + 1).padStart(2, '0')}`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                  </div>
                  <div className="img-frame" style={{ aspectRatio: '4 / 5' }}>
                    <SafeImg src={b.b.src} alt="" label={`PLATE ${String(b.b.idx + 1).padStart(2, '0')}`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                  </div>
                </div>
                <figcaption className="micro">
                  PLATES {String(b.a.idx + 1).padStart(2, '0')} — {String(b.b.idx + 1).padStart(2, '0')}
                </figcaption>
              </figure>
            );
          }
          return null;
        })}
      </section>

      {/* Pagination */}
      <nav className="series-pager page" aria-label="Series pagination">
        <button
          className="pager-l"
          onClick={() => navigate({ name: 'series', id: prev.id })}
        >
          <span className="micro">← {t.series.prev}</span>
          <span className="h3">{prev.title[lang]}</span>
        </button>
        <button
          className="pager-c"
          onClick={() => navigate({ name: 'index' })}
        >
          <span className="micro">{t.series.back}</span>
        </button>
        <button
          className="pager-r"
          onClick={() => navigate({ name: 'series', id: next.id })}
        >
          <span className="micro">{t.series.next} →</span>
          <span className="h3">{next.title[lang]}</span>
        </button>
      </nav>
    </main>
  );
}

window.SeriesScreen = SeriesScreen;