const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "INDEX of TASTE",
  "background": "#eddbbf",
  "spacing": 132,
  "figureScale": 0.33,
  "showCaptions": false
}/*EDITMODE-END*/;

const HEADLINE_OPTIONS = [
  "Underseen",
  "People You Should Know",
  "A Better Reference Set",
  "INDEX of TASTE",
  "Worth Your Attention"
];

// Renders the headline with the word "of" italic (case-insensitive) with asymmetric kerning
// (tighter on the left, more breathing room on the right because the italic "f" stem extends)
function renderHeadline(text) {
  return text.split(/(\bof\b)/i).map((part, i) =>
    /^of$/i.test(part)
      ? <em key={i} style={{ marginLeft: '-0.06em', marginRight: '0.1em' }}>{part}</em>
      : part
  );
}

function IndexView({ tweaks, onSelect }) {
  return (
    <div className="page" style={{ background: tweaks.background }}>
      <header className="masthead">
        <div className="eyebrow">Vol. 01 – Spring/Summer 2026</div>
        <h1 className="headline">
          <img src="index-of-taste.svg?v=2" alt={tweaks.headline} className="headline-svg" />
        </h1>
      </header>

      <main
        className="gallery"
        style={{ gap: `${tweaks.spacing}px`, '--fig-scale': String(tweaks.figureScale) }}
        data-captions={tweaks.showCaptions ? "on" : "off"}
      >
        {PEOPLE.map((person) => (
          <Figure key={person.id} person={person} onClick={onSelect} />
        ))}
      </main>

      <footer className="colophon">
        <span>Index of Taste</span>
        <span>An ongoing index</span>
        <span>{PEOPLE.length} entries</span>
      </footer>
    </div>
  );
}

function getRoute() {
  const m = window.location.pathname.match(/^\/p\/([^/]+)/);
  return m ? { view: 'profile', id: m[1] } : { view: 'index' };
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState(getRoute);

  useEffect(() => {
    const onPop = () => setRoute(getRoute());
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  const activeId = route.view === 'profile' ? route.id : null;

  useEffect(() => {
    document.body.style.background = activeId ? "#FFFBEB" : tweaks.background;
  }, [tweaks.background, activeId]);

  const activeIdx = activeId ? PEOPLE.findIndex(p => p.id === activeId) : -1;
  const activePerson = activeIdx >= 0 ? PEOPLE[activeIdx] : null;

  const goTo = (id) => { window.history.pushState(null, null, `/p/${id}`); setRoute({ view: 'profile', id }); };
  const goPrev = () => goTo(PEOPLE[(activeIdx - 1 + PEOPLE.length) % PEOPLE.length].id);
  const goNext = () => goTo(PEOPLE[(activeIdx + 1) % PEOPLE.length].id);
  const goBack = () => { window.history.pushState(null, null, '/'); setRoute({ view: 'index' }); };

  if (activePerson) {
    return (
      <div className="profile-shell">
        <Profile
          key={activePerson.id}
          person={activePerson}
          onBack={goBack}
          onPrev={goPrev}
          onNext={goNext}
        />
      </div>
    );
  }

  return (
    <>
      <IndexView tweaks={tweaks} onSelect={(p) => goTo(p.id)} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Headline">
          <TweakSelect
            label="Text"
            value={tweaks.headline}
            options={HEADLINE_OPTIONS.map(o => ({ value: o, label: o }))}
            onChange={(v) => setTweak("headline", v)}
          />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakSlider
            label="Figure size"
            min={0.005} max={1} step={0.005}
            value={tweaks.figureScale}
            onChange={(v) => setTweak("figureScale", v)}
          />
          <TweakSlider
            label="Spacing"
            min={8} max={140} step={2}
            value={tweaks.spacing}
            onChange={(v) => setTweak("spacing", v)}
          />
          <TweakToggle
            label="Show captions"
            value={tweaks.showCaptions}
            onChange={(v) => setTweak("showCaptions", v)}
          />
        </TweakSection>
        <TweakSection label="Surface">
          <TweakColor
            label="Background"
            value={tweaks.background}
            onChange={(v) => setTweak("background", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);