/* global React, ReactDOM, Nav, Footer, HomePage, ProductsPage, PDPPage, IngredientsPage, JournalPage, IdentityPage, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakSelect, TweakSlider */
// app.jsx — router + Tweaks shell

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c43a1f",
  "background": "warm-white",
  "fonts": "geist",
  "logoVariant": "wordmark",
  "dark": false,
  "density": "regular"
}/*EDITMODE-END*/;

const BACKGROUNDS = {
  'pure-white': { bg: '#ffffff', soft: '#f7f6f3', label: 'Pure white' },
  'warm-white': { bg: '#faf8f3', soft: '#f2efe8', label: 'Warm off-white' },
  'cool-grey':  { bg: '#f1f1ef', soft: '#e8e8e5', label: 'Cool grey' },
};

const FONT_PAIRINGS = {
  geist:   { sans: '"Geist", system-ui, sans-serif', mono: '"Geist Mono", ui-monospace, monospace', label: 'Geist' },
  inter:   { sans: '"Inter Tight", system-ui, sans-serif', mono: '"JetBrains Mono", ui-monospace, monospace', label: 'Inter Tight' },
  hanken:  { sans: '"Hanken Grotesk", system-ui, sans-serif', mono: '"IBM Plex Mono", ui-monospace, monospace', label: 'Hanken' },
};

const DENSITY = {
  compact: { gutter: 16, secPad: 56,  rowGap: 18, label: 'Compact' },
  regular: { gutter: 24, secPad: 96,  rowGap: 24, label: 'Regular' },
  airy:    { gutter: 32, secPad: 144, rowGap: 32, label: 'Airy' },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, _setRoute] = React.useState(() => parseHash() || 'home');
  const [productId, setProductId] = React.useState(() => parseProductId() || '01');

  function parseHash() {
    const h = (location.hash || '').replace(/^#/, '');
    return h.split('/')[0] || 'home';
  }
  function parseProductId() {
    const h = (location.hash || '').replace(/^#/, '');
    const parts = h.split('/');
    return parts[1] || '01';
  }

  const setRoute = (r, sub) => {
    _setRoute(r);
    if (r === 'product' && sub) {
      setProductId(sub);
      location.hash = `product/${sub}`;
    } else {
      location.hash = r;
    }
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  React.useEffect(() => {
    const onPop = () => {
      _setRoute(parseHash());
      setProductId(parseProductId());
    };
    window.addEventListener('hashchange', onPop);
    return () => window.removeEventListener('hashchange', onPop);
  }, []);

  const openProduct = (id) => setRoute('product', id);

  // Apply theme tokens to :root
  React.useEffect(() => {
    const root = document.documentElement;
    const bg = BACKGROUNDS[t.background] || BACKGROUNDS['pure-white'];
    const fp = FONT_PAIRINGS[t.fonts] || FONT_PAIRINGS.geist;
    const d  = DENSITY[t.density] || DENSITY.regular;

    if (t.dark) {
      root.style.setProperty('--bg', '#0a0a0a');
      root.style.setProperty('--bg-soft', '#161614');
      root.style.setProperty('--ink', '#fafaf7');
      root.style.setProperty('--ink-2', 'rgba(250,250,247,.62)');
      root.style.setProperty('--ink-3', 'rgba(250,250,247,.42)');
      root.style.setProperty('--ink-4', 'rgba(250,250,247,.18)');
      root.style.setProperty('--hair', 'rgba(250,250,247,.14)');
      root.style.setProperty('--hair-strong', 'rgba(250,250,247,.32)');
    } else {
      root.style.setProperty('--bg', bg.bg);
      root.style.setProperty('--bg-soft', bg.soft);
      root.style.setProperty('--ink', '#0a0a0a');
      root.style.setProperty('--ink-2', 'rgba(10,10,10,.62)');
      root.style.setProperty('--ink-3', 'rgba(10,10,10,.42)');
      root.style.setProperty('--ink-4', 'rgba(10,10,10,.18)');
      root.style.setProperty('--hair', 'rgba(10,10,10,.12)');
      root.style.setProperty('--hair-strong', 'rgba(10,10,10,.32)');
    }

    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--sans', fp.sans);
    root.style.setProperty('--mono', fp.mono);
    root.style.setProperty('--gutter', d.gutter + 'px');
    root.style.setProperty('--sec-pad', d.secPad + 'px');
    root.setAttribute('data-dark', t.dark ? '1' : '0');
  }, [t]);

  const Page = (() => {
    if (route === 'product') return <PDPPage productId={productId} openProduct={openProduct} />;
    if (route === 'products') return <ProductsPage openProduct={openProduct} />;
    if (route === 'ingredients') return <IngredientsPage />;
    if (route === 'journal') return <JournalPage />;
    if (route === 'identity') return <IdentityPage logoVariant={t.logoVariant} accent={t.accent} />;
    return <HomePage setRoute={(r) => setRoute(r)} openProduct={openProduct} />;
  })();

  return (
    <>
      <Nav route={route} setRoute={(r) => setRoute(r)} logoVariant={t.logoVariant} dense={t.density === 'compact'} />
      <main key={route + productId} className="fade-up">
        {Page}
      </main>
      <Footer logoVariant={t.logoVariant} />

      <TweaksPanel title="Tweaks · Protocol">
        <TweakSection label="Accent" />
        <TweakColor label="Reagent accent"
                    value={t.accent}
                    options={['#c43a1f', '#0a0a0a', '#2b4a3e', '#1f3a5f', '#d4a017', '#7a7468']}
                    onChange={(v) => setTweak('accent', v)} />

        <TweakSection label="Theme" />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak('dark', v)} />
        <TweakSelect label="Background tone"
                     value={t.background}
                     options={[
                       { value: 'pure-white', label: 'Pure white' },
                       { value: 'warm-white', label: 'Warm off-white' },
                       { value: 'cool-grey',  label: 'Cool grey' },
                     ]}
                     onChange={(v) => setTweak('background', v)} />

        <TweakSection label="Identity" />
        <TweakSelect label="Logo lockup"
                     value={t.logoVariant}
                     options={[
                       { value: 'wordmark',  label: 'Wordmark' },
                       { value: 'technical', label: 'Technical lockup' },
                       { value: 'stamp',     label: 'Identification stamp' },
                     ]}
                     onChange={(v) => setTweak('logoVariant', v)} />
        <TweakSelect label="Type pairing"
                     value={t.fonts}
                     options={[
                       { value: 'geist',  label: 'Geist + Geist Mono' },
                       { value: 'inter',  label: 'Inter Tight + JetBrains' },
                       { value: 'hanken', label: 'Hanken + IBM Plex Mono' },
                     ]}
                     onChange={(v) => setTweak('fonts', v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Density"
                    value={t.density}
                    options={['compact', 'regular', 'airy']}
                    onChange={(v) => setTweak('density', v)} />
      </TweaksPanel>
    </>
  );
}

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