const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 360,
  "theme": "light",
  "displayFont": "geist"
}/*EDITMODE-END*/;

const Tweaks = () => {
  const [visible, setVisible] = React.useState(false);
  const [hue, setHue] = React.useState(TWEAK_DEFAULTS.accentHue);
  const [theme, setTheme] = React.useState(TWEAK_DEFAULTS.theme);
  const [font, setFont] = React.useState(TWEAK_DEFAULTS.displayFont);

  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setVisible(true);
      if (e.data.type === '__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent-hue', String(hue));
    root.dataset.theme = theme;
    root.dataset.displayFont = font;
  }, [hue, theme, font]);

  const persist = (patch) => {
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  if (!visible) return null;

  return (
    <div className="tweaks-panel">
      <div className="tw-head">
        <span>Tweaks</span>
        <button onClick={() => setVisible(false)} aria-label="Close">×</button>
      </div>

      <div className="tw-row">
        <label>Theme</label>
        <div className="seg">
          {['dark','light'].map(t => (
            <button key={t} className={theme === t ? 'on' : ''} onClick={() => { setTheme(t); persist({ theme: t }); }}>{t}</button>
          ))}
        </div>
      </div>

      <div className="tw-row">
        <label>Display font</label>
        <div className="seg">
          {[{k:'geist',l:'Geist'},{k:'serif',l:'Serif'},{k:'mono',l:'Mono'}].map(f => (
            <button key={f.k} className={font === f.k ? 'on' : ''} onClick={() => { setFont(f.k); persist({ displayFont: f.k }); }}>{f.l}</button>
          ))}
        </div>
      </div>

      <div className="tw-row">
        <label>Accent hue <span className="tw-val">{hue}°</span></label>
        <input
          type="range" min="0" max="360" step="1" value={hue}
          onChange={e => setHue(+e.target.value)}
          onMouseUp={() => persist({ accentHue: hue })}
          onTouchEnd={() => persist({ accentHue: hue })}
        />
        <div className="tw-swatch" style={{background: `oklch(0.68 0.19 ${hue})`}}/>
      </div>
    </div>
  );
};

window.Tweaks = Tweaks;