// Tweaks panel for Capitage Global
const { useEffect } = React;

const PRESETS = {
  classic: { navy: '#0A1628', accent: '#2563EB', accentBright: '#3B82F6', accentSoft: '#DBEAFE', label: 'Classic Navy' },
  midnight: { navy: '#050B1A', accent: '#3B82F6', accentBright: '#60A5FA', accentSoft: '#DBEAFE', label: 'Midnight Deep' },
  royal:    { navy: '#0F1F3A', accent: '#7C3AED', accentBright: '#8B5CF6', accentSoft: '#EDE9FE', label: 'Royal Violet' },
  emerald:  { navy: '#0A1F1A', accent: '#059669', accentBright: '#10B981', accentSoft: '#D1FAE5', label: 'Forest Emerald' },
  sunrise:  { navy: '#1F0E0A', accent: '#EA580C', accentBright: '#F97316', accentSoft: '#FED7AA', label: 'Sunrise Amber' },
};

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "preset": "classic",
  "navyDepth": "0A1628",
  "accentHue": "2563EB"
}/*EDITMODE-END*/;

function CapitageTweaks() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);

  useEffect(() => {
    const preset = PRESETS[tweaks.preset] || PRESETS.classic;
    const navy = '#' + (tweaks.navyDepth || preset.navy.replace('#',''));
    const accent = '#' + (tweaks.accentHue || preset.accent.replace('#',''));
    applyTheme({
      navy,
      accent,
      accentBright: preset.accentBright,
      accentSoft: preset.accentSoft,
    });
  }, [tweaks]);

  const onPreset = (key) => {
    const p = PRESETS[key];
    setTweak({
      preset: key,
      navyDepth: p.navy.replace('#',''),
      accentHue: p.accent.replace('#',''),
    });
  };

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color theme">
        <TweakSelect
          label="Preset"
          value={tweaks.preset}
          onChange={onPreset}
          options={Object.keys(PRESETS).map((k) => ({ value: k, label: PRESETS[k].label }))}
        />
        <TweakColor
          label="Navy depth"
          value={'#' + tweaks.navyDepth}
          onChange={(v) => setTweak('navyDepth', v.replace('#',''))}
        />
        <TweakColor
          label="Accent hue"
          value={'#' + tweaks.accentHue}
          onChange={(v) => setTweak('accentHue', v.replace('#',''))}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const tweakRoot = document.createElement('div');
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<CapitageTweaks />);