/* global React, ReactDOM */
// Palaemon Systems — Tweaks panel

const PALAEMON_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "ink",
  "accent": "indigo"
}/*EDITMODE-END*/;

function PalaemonTweaks() {
  const [t, setTweak] = useTweaks(PALAEMON_TWEAK_DEFAULTS);

  // Theme: ink (dark) | paper (light)
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
    document.body.setAttribute('data-theme', t.theme);
    document.querySelector('meta[name="theme-color"]')?.setAttribute(
      'content', t.theme === 'ink' ? '#0A0A0B' : '#FAFAFA'
    );
  }, [t.theme]);

  // Accent: indigo (default) | green | orange
  React.useEffect(() => {
    const root = document.documentElement;
    const map = {
      indigo: 'var(--accent-indigo)',
      green:  'var(--accent-green)',
      orange: 'var(--accent-orange)',
    };
    const softMap = {
      indigo: 'rgba(124,156,255,.15)',
      green:  'rgba(52,211,153,.15)',
      orange: 'rgba(245,158,91,.18)',
    };
    const borderMap = {
      indigo: 'rgba(124,156,255,.30)',
      green:  'rgba(52,211,153,.30)',
      orange: 'rgba(245,158,91,.35)',
    };
    // Light-theme overrides
    const isLight = t.theme === 'paper';
    if (isLight) {
      softMap.indigo  = 'rgba(79,70,229,.10)';
      softMap.green   = 'rgba(22,163,74,.10)';
      softMap.orange  = 'rgba(194,65,12,.10)';
      borderMap.indigo = 'rgba(79,70,229,.30)';
      borderMap.green  = 'rgba(22,163,74,.30)';
      borderMap.orange = 'rgba(194,65,12,.30)';
    }
    root.style.setProperty('--accent', map[t.accent] || map.indigo);
    root.style.setProperty('--accent-soft', softMap[t.accent] || softMap.indigo);
    root.style.setProperty('--accent-border', borderMap[t.accent] || borderMap.indigo);
  }, [t.accent, t.theme]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakRadio
        label="Canvas"
        value={t.theme}
        options={[
          { value: 'ink',   label: 'Ink' },
          { value: 'paper', label: 'Paper' },
        ]}
        onChange={(v) => setTweak('theme', v)}
      />

      <TweakSection label="Accent" />
      <TweakRadio
        label="Color"
        value={t.accent}
        options={[
          { value: 'indigo', label: 'Indigo' },
          { value: 'green',  label: 'Green' },
          { value: 'orange', label: 'Orange' },
        ]}
        onChange={(v) => setTweak('accent', v)}
      />
    </TweaksPanel>
  );
}

const tweakRoot = document.createElement('div');
tweakRoot.id = 'palaemon-tweaks-root';
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<PalaemonTweaks />);