/* BecomingHealthyHer — Tweaks panel */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#4E2236",
  "density": "default",
  "displayFont": "Newsreader",
  "bodyFont": "Hanken Grotesk"
}/*EDITMODE-END*/;

const ACCENT_KEY = {
  "#4E2236": "mauve",
  "#3E2347": "plum",
  "#7A3322": "terra",
  "#234536": "forest",
};

const DISPLAY_STACK = {
  "Newsreader": "'Newsreader', Georgia, serif",
  "Spectral": "'Spectral', Georgia, serif",
  "Lora": "'Lora', Georgia, serif",
};
const BODY_STACK = {
  "Hanken Grotesk": "'Hanken Grotesk', system-ui, sans-serif",
  "Mulish": "'Mulish', system-ui, sans-serif",
  "Figtree": "'Figtree', system-ui, sans-serif",
};

function applyTweaks(t) {
  const root = document.documentElement;
  root.setAttribute('data-accent', ACCENT_KEY[t.accent] || 'mauve');
  root.setAttribute('data-density', t.density);
  root.style.setProperty('--font-display', DISPLAY_STACK[t.displayFont] || DISPLAY_STACK['Newsreader']);
  root.style.setProperty('--font-body', BODY_STACK[t.bodyFont] || BODY_STACK['Hanken Grotesk']);
  root.style.setProperty('--font-label', BODY_STACK[t.bodyFont] || BODY_STACK['Hanken Grotesk']);
}

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

  useEffect(() => { applyTweaks(t); }, [t.accent, t.density, t.displayFont, t.bodyFont]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={['#4E2236', '#3E2347', '#7A3322', '#234536']}
        onChange={(v) => setTweak('accent', v)}
      />

      <TweakSection label="Type" />
      <TweakSelect
        label="Display font"
        value={t.displayFont}
        options={['Newsreader', 'Spectral', 'Lora']}
        onChange={(v) => setTweak('displayFont', v)}
      />
      <TweakSelect
        label="Body font"
        value={t.bodyFont}
        options={['Hanken Grotesk', 'Mulish', 'Figtree']}
        onChange={(v) => setTweak('bodyFont', v)}
      />

      <TweakSection label="Spacing" />
      <TweakRadio
        label="Density"
        value={t.density}
        options={[
          { value: 'cozy', label: 'Cozy' },
          { value: 'default', label: 'Default' },
          { value: 'spacious', label: 'Roomy' },
        ]}
        onChange={(v) => setTweak('density', v)}
      />
    </TweaksPanel>
  );
}

// apply persisted/default tweaks before the panel mounts
(function () {
  let stored = {};
  try { stored = JSON.parse(localStorage.getItem('tweaks') || '{}'); } catch (e) {}
  applyTweaks(Object.assign({}, TWEAK_DEFAULTS, stored));
})();

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