// Lookbook view — single project page with metadata + cascading gallery filters.
const { useState: useStateLB, useEffect: useEffectLB, useMemo: useMemoLB } = React;

// Cascading filter bar: camera → lens → film. Each level shows only the
// values present in items already filtered by the levels above it, with
// counts. Picking a value at a higher level resets the lower levels.
function GalleryFilters({ items, value, onChange }) {
  // Cameras present + counts
  const cameras = useMemoLB(() => {
    const m = new Map();
    items.forEach(it => {
      if (!it.camera) return;
      m.set(it.camera, (m.get(it.camera) || 0) + 1);
    });
    return [...m.entries()].sort((a, b) => b[1] - a[1]);
  }, [items]);

  // Items left after camera filter
  const afterCamera = useMemoLB(
    () => value.camera ? items.filter(it => it.camera === value.camera) : items,
    [items, value.camera]
  );

  // Lenses available (only when a camera is picked, otherwise too noisy)
  const lenses = useMemoLB(() => {
    if (!value.camera) return [];
    const m = new Map();
    afterCamera.forEach(it => {
      if (!it.lens) return;
      m.set(it.lens, (m.get(it.lens) || 0) + 1);
    });
    return [...m.entries()].sort((a, b) => b[1] - a[1]);
  }, [afterCamera, value.camera]);

  // Films — only when the chosen camera is a film body
  const afterLens = useMemoLB(
    () => value.lens ? afterCamera.filter(it => it.lens === value.lens) : afterCamera,
    [afterCamera, value.lens]
  );
  const films = useMemoLB(() => {
    if (!value.camera) return [];
    const isFilmBody = afterCamera.some(it => it.cameraType === 'film');
    if (!isFilmBody) return [];
    const m = new Map();
    afterLens.forEach(it => {
      if (!it.film) return;
      m.set(it.film, (m.get(it.film) || 0) + 1);
    });
    return [...m.entries()].sort((a, b) => b[1] - a[1]);
  }, [afterLens, afterCamera, value.camera]);

  const setCamera = (c) => onChange({ camera: c, lens: null, film: null });
  const setLens   = (l) => onChange({ ...value, lens: l, film: null });
  const setFilm   = (f) => onChange({ ...value, film: f });

  if (cameras.length === 0) return null;

  return (
    <div className="filter-bar">
      <FilterRow
        label="camera"
        active={value.camera}
        options={cameras}
        onPick={setCamera}
        onClear={() => setCamera(null)}
      />
      {/* lens filter — temporarily hidden
      {value.camera && lenses.length > 1 && (
        <FilterRow
          label="lens"
          active={value.lens}
          options={lenses}
          onPick={setLens}
          onClear={() => setLens(null)}
        />
      )}
      */}
      {/* film filter — temporarily hidden
      {films.length > 0 && (
        <FilterRow
          label="film"
          active={value.film}
          options={films}
          onPick={setFilm}
          onClear={() => setFilm(null)}
        />
      )}
      */}
    </div>
  );
}

function FilterRow({ label, active, options, onPick, onClear }) {
  return (
    <div className="filter-row">
      <span className="fr-label">{label}</span>
      <div className="fr-chips">
        <button
          type="button"
          className={`fr-chip ${!active ? 'on' : ''}`}
          onClick={onClear}
        >all <span className="fr-n">{options.reduce((s, [, n]) => s + n, 0)}</span></button>
        {options.map(([name, n]) => (
          <button
            key={name}
            type="button"
            className={`fr-chip ${active === name ? 'on' : ''}`}
            onClick={() => onPick(name)}
          >{name} <span className="fr-n">{n}</span></button>
        ))}
      </div>
    </div>
  );
}

function GalleryMasonry({ items, onOpen }) {
  return (
    <div className="gallery masonry">
      {items.map((it, i) => (
        <div key={it.id} className="item" onClick={() => onOpen(i)}>
          {it.type === 'video' ? (
            <>
              <video src={it.src} poster={it.poster} autoPlay muted loop playsInline />
              <span className="vid-badge">VIDEO</span>
            </>
          ) : (
            <img src={it.src} alt={it.caption || ''} loading="lazy" />
          )}
        </div>
      ))}
    </div>
  );
}

function GalleryGrid({ items, onOpen }) {
  return (
    <div className="gallery grid">
      {items.map((it, i) => (
        <div key={it.id} className="item" onClick={() => onOpen(i)} style={{position:'relative'}}>
          {it.type === 'video' ? (
            <>
              <video src={it.src} poster={it.poster} autoPlay muted loop playsInline />
              <span className="vid-badge">VIDEO</span>
            </>
          ) : (
            <img src={it.src} alt={it.caption || ''} loading="lazy" />
          )}
        </div>
      ))}
    </div>
  );
}

function GalleryEditorial({ items, onOpen }) {
  const rows = [];
  let i = 0;
  let pattern = ['r1', 'r2', 'r-asym', 'r3', 'r2', 'r1'];
  let pi = 0;
  const sizes = ['wide', 'tall', 'square', 'tall', 'wide', 'square'];
  while (i < items.length) {
    const cls = pattern[pi % pattern.length];
    const cols = cls === 'r1' ? 1 : cls === 'r2' || cls === 'r-asym' ? 2 : 3;
    const slice = items.slice(i, i + cols);
    rows.push({ cls, items: slice, startIdx: i });
    i += cols;
    pi++;
  }
  return (
    <div className="gallery editorial">
      {rows.map((row, ri) => (
        <div key={ri} className={`row ${row.cls}`}>
          {row.items.map((it, j) => {
            const idx = row.startIdx + j;
            const sz = sizes[(ri + j) % sizes.length];
            return (
              <div key={it.id} className={`item ${sz}`} onClick={() => onOpen(idx)} style={{position:'relative'}}>
                {it.type === 'video' ? (
                  <>
                    <video src={it.src} poster={it.poster} autoPlay muted loop playsInline />
                    <span className="vid-badge">VIDEO</span>
                  </>
                ) : (
                  <img src={it.src} alt={it.caption || ''} loading="lazy" />
                )}
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}

function Lookbook({ projectId, tweaks, onBack }) {
  const project = window.PROJECTS_BY_ID[projectId];
  const [lbIdx, setLbIdx] = useStateLB(null);
  const [filter, setFilter] = useStateLB({ camera: null, lens: null, film: null });

  useEffectLB(() => { window.scrollTo(0, 0); }, [projectId]);
  useEffectLB(() => { setFilter({ camera: null, lens: null, film: null }); }, [projectId]);

  if (!project) {
    return (
      <main className="lookbook">
        <a className="back-link" onClick={onBack} href="#/" >
          <Icon name="arrow-left" size={12} /> back
        </a>
        <p style={{color:'var(--fg-3)'}}>nothing here yet</p>
      </main>
    );
  }

  const items = project.items;
  const filteredItems = items.filter(it => {
    if (filter.camera && it.camera !== filter.camera) return false;
    if (filter.lens && it.lens !== filter.lens) return false;
    if (filter.film && it.film !== filter.film) return false;
    return true;
  });

  const layout = tweaks.galleryLayout;
  let gallery;
  if (layout === 'grid') gallery = <GalleryGrid items={filteredItems} onOpen={setLbIdx} />;
  else if (layout === 'editorial') gallery = <GalleryEditorial items={filteredItems} onOpen={setLbIdx} />;
  else gallery = <GalleryMasonry items={filteredItems} onOpen={setLbIdx} />;

  const n = items.length;
  const fn = filteredItems.length;
  const filterActive = filter.camera || filter.lens || filter.film;

  return (
    <main className="lookbook">
      <a className="back-link" onClick={onBack} href="#/">
        <Icon name="arrow-left" size={12} /> all projects
      </a>

      <header className="lb-head">
        <p className="eyebrow">— {project.eyebrow}</p>
        <h1>{project.title}</h1>
        <p className="desc">{project.description}</p>

        <dl className="lb-meta">
          <div><dt>WHEN</dt><dd>{project.year}</dd></div>
          <div><dt>WHERE</dt><dd>{project.location}</dd></div>
          <div><dt>MEDIUM</dt><dd>{project.medium}</dd></div>
          <div><dt>WITH</dt><dd>{project.collaborator}</dd></div>
          <div><dt>TOOLS</dt><dd>{project.tools}</dd></div>
          <div><dt>ITEMS</dt><dd>{String(n).padStart(2, '0')}</dd></div>
        </dl>
      </header>

      <div className="gallery-bar">
        <span className="label">gallery</span>
        <span className="count">
          {filterActive
            ? `${String(fn).padStart(2, '0')} of ${String(n).padStart(2, '0')} · click to expand`
            : `${String(n).padStart(2, '0')} items · click to expand`}
        </span>
      </div>

      <GalleryFilters items={items} value={filter} onChange={setFilter} />

      {fn === 0 ? (
        <p className="empty-filter">no items match — try another camera</p>
      ) : gallery}

      <Lightbox
        items={filteredItems}
        index={lbIdx}
        onClose={() => setLbIdx(null)}
        onPrev={() => setLbIdx((i) => (i - 1 + fn) % fn)}
        onNext={() => setLbIdx((i) => (i + 1) % fn)}
      />
    </main>
  );
}

window.Lookbook = Lookbook;