// Wholesome Fitness — Tweaks panel mount
// Loaded on every page after tweaks-panel.jsx. Exposes brand knobs.

(function () {
  const root = document.createElement('div');
  root.id = 'wf-tweaks-root';
  document.body.appendChild(root);

  const stored = (window.WFSite && window.WFSite.loadTweaks()) || {};

  const DEFAULTS = {
    accent: stored.accent || '#06438D',
    accentHover: stored.accentHover || '#08366E',
    bodySize: stored.bodySize || 16,
    heroDisplay: stored.heroDisplay || 84,
    cardRadius: stored.cardRadius != null ? stored.cardRadius : 4,
    sectionPad: stored.sectionPad || 88,
    gridGap: stored.gridGap || 20,
    density: stored.density || 'normal',
    theme: document.documentElement.getAttribute('data-theme') || 'light',
    vibe: document.documentElement.getAttribute('data-vibe') || 'athletic',
  };

  function App() {
    const [t, setT] = React.useState(DEFAULTS);

    const set = (k, v) => {
      const next = { ...t, [k]: v };
      setT(next);
      const { theme, vibe, ...rest } = next;
      window.WFSite.saveTweaks(rest);
      // also keep accentHover roughly in sync if user drags accent
      if (k === 'accent') {
        // derive a darker hover automatically
        const hover = darken(v, 0.15);
        const next2 = { ...next, accentHover: hover };
        setT(next2);
        window.WFSite.saveTweaks({ accent: v, accentHover: hover });
      }
    };

    const setTheme = (v) => { setT({ ...t, theme: v }); window.WFSite.setTheme(v); };
    const setVibe = (v) => { setT({ ...t, vibe: v }); window.WFSite.setVibe(v); };

    const reset = () => {
      try { localStorage.removeItem('wf-tweaks'); } catch (e) {}
      location.reload();
    };

    return (
      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme}
          options={['light', 'dark']}
          onChange={setTheme} />
        <TweakRadio label="Vibe" value={t.vibe}
          options={['athletic', 'editorial', 'performance']}
          onChange={setVibe} />

        <TweakSection label="Brand color" />
        <TweakColor label="Accent" value={t.accent}
          onChange={(v) => set('accent', v)} />

        <TweakSection label="Type scale" />
        <TweakSlider label="Body size" value={t.bodySize} min={14} max={20} step={1} unit="px"
          onChange={(v) => set('bodySize', v)} />
        <TweakSlider label="Hero display" value={t.heroDisplay} min={56} max={120} step={2} unit="px"
          onChange={(v) => set('heroDisplay', v)} />

        <TweakSection label="Density" />
        <TweakRadio label="Spacing" value={t.density}
          options={['cozy', 'normal', 'roomy']}
          onChange={(v) => set('density', v)} />
        <TweakSlider label="Section padding" value={t.sectionPad} min={48} max={160} step={4} unit="px"
          onChange={(v) => set('sectionPad', v)} />
        <TweakSlider label="Grid gap" value={t.gridGap} min={8} max={48} step={2} unit="px"
          onChange={(v) => set('gridGap', v)} />

        <TweakSection label="Shape" />
        <TweakSlider label="Card radius" value={t.cardRadius} min={0} max={16} step={1} unit="px"
          onChange={(v) => set('cardRadius', v)} />

        <TweakButton onClick={reset}>Reset to defaults</TweakButton>
      </TweaksPanel>
    );
  }

  function darken(hex, amt) {
    const c = hex.replace('#', '');
    const r = Math.max(0, Math.round(parseInt(c.slice(0, 2), 16) * (1 - amt)));
    const g = Math.max(0, Math.round(parseInt(c.slice(2, 4), 16) * (1 - amt)));
    const b = Math.max(0, Math.round(parseInt(c.slice(4, 6), 16) * (1 - amt)));
    return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
  }

  ReactDOM.createRoot(root).render(<App />);
})();