/* ============================================================
   PROTOCOSMOS — Tweaks app (shared across all pages)
   Theme (dark/light), hero typography, and motif controls.
   Persisted via the host EDITMODE block + localStorage so the
   choice carries across page navigation with no flash.
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "heroScale": 100,
  "heroDensity": "regular",
  "motif": true
}/*EDITMODE-END*/;

const DENSITY = {
  compact: { lh: 0.84, ls: '0em' },
  regular: { lh: 0.92, ls: '0.004em' },
  roomy:   { lh: 1.04, ls: '0.012em' },
};

function applyTheme(theme) {
  const link = document.getElementById('theme-css');
  if (link) {
    const href = theme === 'light' ? 'assets/styles-a.css' : 'assets/styles.css';
    if (!link.getAttribute('href').endsWith(href)) link.setAttribute('href', href);
  }
  try { localStorage.setItem('pc-theme-v2', theme); } catch (e) {}
}

function applyHero(scale, density) {
  const root = document.documentElement;
  root.style.setProperty('--hero-scale', (scale / 100).toFixed(3));
  const d = DENSITY[density] || DENSITY.regular;
  root.style.setProperty('--hero-lh', d.lh);
  root.style.setProperty('--hero-ls', d.ls);
  try {
    localStorage.setItem('pc-hero-scale', String(scale));
    localStorage.setItem('pc-hero-density', density);
  } catch (e) {}
}

function applyMotif(show) {
  document.body.classList.toggle('motif-off', !show);
  try { localStorage.setItem('pc-motif', show ? '1' : '0'); } catch (e) {}
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // On mount: reconcile with anything saved on a previous page (cross-page memory).
  React.useEffect(() => {
    try {
      const edits = {};
      const th = localStorage.getItem('pc-theme-v2');
      if (th && th !== t.theme) edits.theme = th;
      const hs = localStorage.getItem('pc-hero-scale');
      if (hs && Number(hs) !== t.heroScale) edits.heroScale = Number(hs);
      const hd = localStorage.getItem('pc-hero-density');
      if (hd && hd !== t.heroDensity) edits.heroDensity = hd;
      const mo = localStorage.getItem('pc-motif');
      if (mo != null && (mo === '1') !== t.motif) edits.motif = mo === '1';
      if (Object.keys(edits).length) setTweak(edits);
    } catch (e) {}
  }, []); // eslint-disable-line

  React.useEffect(() => { applyTheme(t.theme); }, [t.theme]);
  React.useEffect(() => { applyHero(t.heroScale, t.heroDensity); }, [t.heroScale, t.heroDensity]);
  React.useEffect(() => { applyMotif(t.motif); }, [t.motif]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Appearance" />
      <TweakRadio label="Theme" value={t.theme}
        options={[{ value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }]}
        onChange={(v) => setTweak('theme', v)} />
      <TweakToggle label="Flower motif" value={t.motif}
        onChange={(v) => setTweak('motif', v)} />

      <TweakSection label="Hero headline" />
      <TweakSlider label="Size" value={t.heroScale} min={65} max={120} step={1} unit="%"
        onChange={(v) => setTweak('heroScale', v)} />
      <TweakRadio label="Density" value={t.heroDensity}
        options={['compact', 'regular', 'roomy']}
        onChange={(v) => setTweak('heroDensity', v)} />
    </TweaksPanel>
  );
}

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