/* Tweaks panel — clean white v5 */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1E45FF",
  "bg": "#FFFFFF",
  "ink": "#0F0F0F",
  "headlineFont": "Fraunces",
  "counterStart": 47213
}/*EDITMODE-END*/;

const PALETTES = {
  'White + Cobalt': { bg: '#FFFFFF', ink: '#0F0F0F', accent: '#1E45FF' },
  'White + Crimson': { bg: '#FFFFFF', ink: '#0F0F0F', accent: '#D62828' },
  'White + Emerald': { bg: '#FFFFFF', ink: '#0F0F0F', accent: '#0E7C5C' },
  'White + Amber': { bg: '#FFFFFF', ink: '#0F0F0F', accent: '#D97706' },
  'White + Violet': { bg: '#FFFFFF', ink: '#0F0F0F', accent: '#5B2EFF' },
  'White + Ink': { bg: '#FFFFFF', ink: '#0F0F0F', accent: '#0F0F0F' },
};

const FONTS = ['Fraunces', 'Playfair Display', 'Cormorant Garamond', 'EB Garamond'];

function hexToRgba(hex, a) {
  const h = hex.replace('#', '');
  const r = parseInt(h.substring(0, 2), 16);
  const g = parseInt(h.substring(2, 4), 16);
  const b = parseInt(h.substring(4, 6), 16);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

const TalicenseTweaks = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', tweaks.accent);
    r.style.setProperty('--bg', tweaks.bg);
    r.style.setProperty('--ink', tweaks.ink);
    r.style.setProperty('--accent-soft', hexToRgba(tweaks.accent, 0.07));
    r.style.setProperty('--display', `'${tweaks.headlineFont}', Georgia, serif`);
    document.body.style.background = tweaks.bg;
  }, [tweaks]);

  const applyPalette = (name) => {
    const p = PALETTES[name];
    if (p) setTweak(p);
  };
  const currentPalette = Object.entries(PALETTES).find(([_, p]) => p.accent === tweaks.accent && p.bg === tweaks.bg)?.[0] || 'Custom';

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakSelect label="Preset" value={currentPalette} onChange={applyPalette} options={Object.keys(PALETTES)} />
        <TweakColor label="Accent" value={tweaks.accent} onChange={v => setTweak('accent', v)} />
        <TweakColor label="Background" value={tweaks.bg} onChange={v => setTweak('bg', v)} />
        <TweakColor label="Ink" value={tweaks.ink} onChange={v => setTweak('ink', v)} />
      </TweakSection>
      <TweakSection title="Typography">
        <TweakRadio label="Headline serif" value={tweaks.headlineFont} onChange={v => setTweak('headlineFont', v)} options={FONTS} />
      </TweakSection>
      <TweakSection title="Hero">
        <TweakNumber label="Counter starting value" value={tweaks.counterStart} onChange={v => setTweak('counterStart', v)} min={1000} max={500000} step={1000} />
      </TweakSection>
    </TweaksPanel>
  );
};

window.TalicenseTweaks = TalicenseTweaks;
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;