// Tweaks panel — accent / font / hero variant / motion / theme
const { useEffect: useTweakEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "blue",
  "font": "manrope",
  "heroVariant": "english",
  "motion": "full"
}/*EDITMODE-END*/;

function applyTweaksToDOM(t) {
  const root = document.documentElement;
  root.setAttribute('data-theme', t.theme);
  root.setAttribute('data-accent', t.accent);
  root.setAttribute('data-font', t.font);
  root.setAttribute('data-motion', t.motion);
  // Persist for case study pages
  try { localStorage.setItem('yui_tweaks', JSON.stringify(t)); } catch (e) {}
}

function Tweaks({ tweaks, setTweak }) {
  useTweakEffect(() => {
    applyTweaksToDOM(tweaks);
  }, [tweaks]);

  // On first mount, restore from localStorage (overrides file defaults locally)
  useTweakEffect(() => {
    try {
      const stored = localStorage.getItem('yui_tweaks');
      if (stored) {
        const parsed = JSON.parse(stored);
        Object.keys(parsed).forEach((k) => {
          if (parsed[k] !== tweaks[k]) setTweak(k, parsed[k]);
        });
      }
    } catch (e) {}
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Theme" />
      <window.TweakRadio
        label="模式"
        value={tweaks.theme}
        options={['dark', 'light']}
        onChange={(v) => setTweak('theme', v)}
      />
      <window.TweakSelect
        label="強調色"
        value={tweaks.accent}
        options={[
          { value: 'blue',  label: '電光藍 Electric Blue' },
          { value: 'lime',  label: '螢光黃綠 Lime' },
          { value: 'amber', label: '琥珀橘 Amber' },
          { value: 'mono',  label: '極簡單色 Mono' },
        ]}
        onChange={(v) => setTweak('accent', v)}
      />

      <window.TweakSection label="Typography" />
      <window.TweakSelect
        label="字體"
        value={tweaks.font}
        options={[
          { value: 'manrope', label: 'Manrope (default)' },
          { value: 'geist',   label: 'Geist' },
          { value: 'space',   label: 'Space Grotesk' },
          { value: 'serif',   label: 'Instrument Serif' },
        ]}
        onChange={(v) => setTweak('font', v)}
      />

      <window.TweakSection label="Hero" />
      <window.TweakSelect
        label="Hero 文案"
        value={tweaks.heroVariant}
        options={[
          { value: 'english',   label: 'Design that moves...' },
          { value: 'manifesto', label: '把用戶洞察轉化成...' },
          { value: 'personal',  label: 'Hi, I\u2019m Yui...' },
        ]}
        onChange={(v) => setTweak('heroVariant', v)}
      />

      <window.TweakSection label="Motion" />
      <window.TweakRadio
        label="動畫強度"
        value={tweaks.motion}
        options={['full', 'minimal']}
        onChange={(v) => setTweak('motion', v)}
      />
    </window.TweaksPanel>
  );
}

window.Tweaks = Tweaks;
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;