// screen-index.jsx — Index/Work landing with 3 layout variants
const { useState: _useS, useMemo: _useM, useEffect: _useE } = React;

function IndexScreen({ t, lang, route, navigate, tweaks }) {
  const all = window.JP_DATA.series;
  const filter = route.filter || null;
  const filtered = _useM(() => {
    if (!filter) return all;
    return all.filter((s) => s.category === filter);
  }, [filter, all]);

  const layout = tweaks.homeLayout || 'modular';
  const hoverMode = tweaks.hoverMode || 'opacity';

  const filterLabel =
    filter === 'EDITORIAL'  ? t.cats.editorial
    : filter === 'COMMERCIAL' ? t.cats.commercial
    : filter === 'ARCHIVE'    ? t.cats.archive
    : t.cats.all;

  return (
    <main className="page index-screen" data-screen-label="Index">
      {/* Slim contextual strip — not a marketing hero. Just identity + count. */}
      <div className="index-strip">
        <div className="strip-l">
          <span className="micro">INDEX / {filterLabel.toUpperCase()}</span>
        </div>
        <div className="strip-r">
          <span className="micro">{t.index.count(filtered.length).toUpperCase()}</span>
        </div>
      </div>

      <div className="index-intro">
        <p className="body-l">{t.index.intro}</p>
      </div>

      {layout === 'modular'    ? <ModularGrid items={filtered} navigate={navigate} hoverMode={hoverMode} /> : null}
      {layout === 'asymmetric' ? <AsymmetricList items={filtered} navigate={navigate} hoverMode={hoverMode} t={t} /> : null}
      {layout === 'indexed'    ? <IndexedList items={filtered} navigate={navigate} hoverMode={hoverMode} t={t} /> : null}
    </main>
  );
}

/* ─────────────────────────────────────────────────────────────────────
   Layout A — Modular grid : 3 colonnes égales, vignettes 4:5,
   avec une bande full-bleed tous les 7 items pour rythme éditorial.
   ───────────────────────────────────────────────────────────────────── */
function ModularGrid({ items, navigate, hoverMode }) {
  // Split items into chunks of 6, separated by full-bleed feature bands.
  const chunks = [];
  for (let i = 0; i < items.length; i += 6) {
    chunks.push(items.slice(i, i + 6));
  }
  return (
    <div className="grid-modular-wrap">
      {chunks.map((chunk, ci) => (
        <React.Fragment key={ci}>
          <div className="grid-modular">
            {chunk.map((s, idx) => (
              <article key={s.id} className="card" data-screen-label={`Card ${s.idx}`}>
                <Vignette
                  src={s.hero}
                  altSrc={s.alt}
                  ratio="4 / 5"
                  variant={hoverMode}
                  onClick={() => navigate({ name: 'series', id: s.id })}
                  label={`${s.title.fr} — ${s.meta}`}
                />
                <div className="card-meta">
                  <div className="card-meta-l">
                    <span className="micro card-idx">№ {s.idx}</span>
                    <h3 className="h4 card-title">{s.title.fr}</h3>
                  </div>
                  <span className="micro card-year">{s.meta}</span>
                </div>
              </article>
            ))}
          </div>

          {/* Full-bleed feature band between chunks (not after the last one) */}
          {ci < chunks.length - 1 && chunks[ci + 1]?.[0] ? (
            <FeatureBand
              series={chunks[ci + 1][0]}
              navigate={navigate}
            />
          ) : null}
        </React.Fragment>
      ))}
    </div>
  );
}

/* Full-bleed editorial feature band — image extends beyond .page padding */
function FeatureBand({ series, navigate }) {
  return (
    <button
      className="feature-band"
      onClick={() => navigate({ name: 'series', id: series.id })}
      aria-label={`${series.title.fr} — ${series.metaLong}`}
    >
      <div className="feature-img">
        <SafeImg
          src={series.images[2] || series.hero}
          alt=""
          label={`PLATE — ${series.title.fr.toUpperCase()}`}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
        />
      </div>
      <div className="feature-meta">
        <span className="micro">— FEATURED · № {series.idx}</span>
        <h3 className="h2 feature-title">{series.title.fr}</h3>
        <span className="micro feature-place">{series.metaLong}</span>
      </div>
    </button>
  );
}

/* ─────────────────────────────────────────────────────────────────────
   Layout B — Asymétrique : 8col image + 3col meta, alternance gauche/droite.
   ───────────────────────────────────────────────────────────────────── */
function AsymmetricList({ items, navigate, hoverMode, t }) {
  return (
    <div className="grid-asym">
      {items.map((s, i) => {
        const left = i % 2 === 0;
        return (
          <article
            key={s.id}
            className={`asym-row ${left ? 'left' : 'right'}`}
          >
            <div className="asym-img">
              <Vignette
                src={s.hero}
                altSrc={s.alt}
                ratio={i % 3 === 0 ? '3 / 4' : '4 / 5'}
                variant={hoverMode}
                onClick={() => navigate({ name: 'series', id: s.id })}
                label={`${s.title.fr} — ${s.meta}`}
              />
            </div>
            <div className="asym-meta">
              <span className="micro">{String(i + 1).padStart(2, '0')} / {String(items.length).padStart(2, '0')}</span>
              <h3 className="h2 asym-title">{s.title.fr}</h3>
              <ul className="asym-list">
                <li><span className="micro">Client</span><span>{s.client}</span></li>
                <li><span className="micro">Year</span><span>{s.year}</span></li>
                <li><span className="micro">Place</span><span>{s.place}</span></li>
                <li><span className="micro">Medium</span><span>{s.medium}</span></li>
              </ul>
              <button className="link-u" onClick={() => navigate({ name: 'series', id: s.id })}>
                Voir la série
              </button>
            </div>
          </article>
        );
      })}
    </div>
  );
}

/* ─────────────────────────────────────────────────────────────────────
   Layout C — Liste indexée façon Knight : nom de série en colonne,
   image qui apparaît à droite au hover (preview sticky).
   ───────────────────────────────────────────────────────────────────── */
function IndexedList({ items, navigate, hoverMode, t }) {
  const [hoverId, setHoverId] = _useS(null);
  const active = _useM(() => items.find((s) => s.id === hoverId) || items[0], [hoverId, items]);

  return (
    <div className="grid-indexed">
      <ol className="indexed-list">
        {items.map((s, i) => (
          <li key={s.id}>
            <button
              className="indexed-row"
              onMouseEnter={() => setHoverId(s.id)}
              onFocus={() => setHoverId(s.id)}
              onClick={() => navigate({ name: 'series', id: s.id })}
            >
              <span className="micro idx">{s.idx}</span>
              <span className="ttl">{s.title.fr}</span>
              <span className="micro cat">{s.category}</span>
              <span className="micro yr">{s.year}</span>
              <span className="micro pl">{s.place}</span>
            </button>
          </li>
        ))}
      </ol>
      <aside className="indexed-preview" aria-hidden="true">
        <div className="indexed-preview-inner">
          <Vignette
            key={active?.id}
            src={active?.hero}
            ratio="3 / 4"
            variant="static"
          />
          <div className="preview-meta">
            <span className="micro">{active?.metaLong}</span>
          </div>
        </div>
      </aside>
    </div>
  );
}

window.IndexScreen = IndexScreen;