// tweaks.jsx — Tweaks panel for Hug A Plant

const HAP_TWEAK_DEFAULTS = {
  palette: 'ambady',
  heading: 'instrument',
  body: 'dmsans',
  density: 'comfy',
  cardStyle: 'image-up',
  radius: 16,
  announce: true
};

const HAP_PALETTES = {
  ambady:    { '--forest': '#2f4a1f', '--forest-2': '#3c5e29', '--moss': '#5a7340', '--terra': '#9c2f22', '--cream': '#f1ead9', '--paper': '#f8f3e7', '--sage': '#b7c39a', '--sage-2': '#d7dfc4', '--ink': '#241c14' },
  earthy:    { '--forest': '#5b4a2f', '--forest-2': '#6f5a39', '--moss': '#8a7340', '--terra': '#b5622f', '--cream': '#efe6d4', '--paper': '#f7f0e2', '--sage': '#cdbf9b', '--sage-2': '#e0d6bc', '--ink': '#2a2114' },
  forest:    { '--forest': '#12211c', '--forest-2': '#1c3029', '--moss': '#4f7a64', '--terra': '#b8442f', '--cream': '#e9efe8', '--paper': '#f4f7f2', '--sage': '#9fc0ad', '--sage-2': '#cfe0d3', '--ink': '#0e1714' },
  slate:     { '--forest': '#33414a', '--forest-2': '#41525c', '--moss': '#5e7079', '--terra': '#9c2f22', '--cream': '#eceef0', '--paper': '#f5f6f8', '--sage': '#b3c0c7', '--sage-2': '#d4dde2', '--ink': '#1b232a' }
};

const HAP_FONTS = {
  instrument: '"Instrument Serif", Georgia, serif',
  cormorant: '"Cormorant Garamond", Georgia, serif',
  playfair: '"Playfair Display", Georgia, serif',
  fraunces: '"Fraunces", Georgia, serif'
};
const HAP_BODY_FONTS = {
  dmsans: '"DM Sans", system-ui, sans-serif',
  inter: '"Inter", system-ui, sans-serif',
  mono: '"Space Grotesk", system-ui, sans-serif'
};

function applyHapTweaks(t) {
  const root = document.documentElement;
  const pal = HAP_PALETTES[t.palette] || HAP_PALETTES.botanical;
  Object.entries(pal).forEach(([k, v]) => root.style.setProperty(k, v));
  root.style.setProperty('--serif', HAP_FONTS[t.heading] || HAP_FONTS.instrument);
  root.style.setProperty('--sans', HAP_BODY_FONTS[t.body] || HAP_BODY_FONTS.dmsans);
  root.style.setProperty('--r-lg', t.radius + 'px');
  root.style.setProperty('--r-md', Math.round(t.radius * 0.55) + 'px');
  root.style.setProperty('--r-xl', Math.round(t.radius * 1.5) + 'px');
  // density
  if (t.density === 'compact') {
    root.style.setProperty('--fs-body', '0.92rem');
  } else {
    root.style.setProperty('--fs-body', '0.975rem');
  }
  document.body.dataset.cardStyle = t.cardStyle;
  const ann = document.querySelector('.announce');
  if (ann) ann.style.display = t.announce ? '' : 'none';
}

function HapTweaks() {
  const [tweaks, setTweak] = useTweaks(HAP_TWEAK_DEFAULTS);
  React.useEffect(() => { applyHapTweaks(tweaks); }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakRadio label="Colour theme" value={tweaks.palette} onChange={(v) => setTweak('palette', v)}
          options={[
            { value: 'ambady', label: 'Ambady' },
            { value: 'earthy', label: 'Earthy' },
            { value: 'forest', label: 'Forest' },
            { value: 'slate', label: 'Slate' }
          ]} />
      </TweakSection>

      <TweakSection title="Type">
        <TweakSelect label="Heading font" value={tweaks.heading} onChange={(v) => setTweak('heading', v)}
          options={[
            { value: 'instrument', label: 'Instrument Serif' },
            { value: 'cormorant', label: 'Cormorant Garamond' },
            { value: 'playfair', label: 'Playfair Display' },
            { value: 'fraunces', label: 'Fraunces' }
          ]} />
        <TweakSelect label="Body font" value={tweaks.body} onChange={(v) => setTweak('body', v)}
          options={[
            { value: 'dmsans', label: 'DM Sans' },
            { value: 'inter', label: 'Inter' },
            { value: 'mono', label: 'Space Grotesk' }
          ]} />
      </TweakSection>

      <TweakSection title="Layout">
        <TweakRadio label="Density" value={tweaks.density} onChange={(v) => setTweak('density', v)}
          options={[{ value: 'comfy', label: 'Comfy' }, { value: 'compact', label: 'Compact' }]} />
        <TweakSlider label="Corner radius" min={0} max={28} step={2} value={tweaks.radius} onChange={(v) => setTweak('radius', v)} suffix="px" />
        <TweakToggle label="Announcement bar" value={tweaks.announce} onChange={(v) => setTweak('announce', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// Mount into its own root
const tweakHost = document.getElementById('tweaks-root');
if (tweakHost) ReactDOM.createRoot(tweakHost).render(<HapTweaks />);