/* SPMS Tweaks island — mounts the panel + applies tweaks to the DOM.
   Pages set window.SPMS_PAGE = 'landing' | 'project' before this loads. */

const SPMS_ACCENTS = [
  ['#0B1B2E', '#16304B', '#07121E'], // Brand navy (default)
  ['#0E2236', '#1B3A55', '#091824'], // Navy +
  ['#13283D', '#1F4262', '#0C1B2A'], // Lighter navy
  ['#08131F', '#122A40', '#050D16'], // Deep navy
];

const TWEAK_DEFAULTS = {
  accent: ['#0B1B2E', '#16304B', '#07121E'],
  density: 'balanced',
  chart: 'savings',
};

function applySpmsTweaks(t) {
  const r = document.documentElement;
  if (t.accent) {
    r.style.setProperty('--navy', t.accent[0]);
    r.style.setProperty('--navy-700', t.accent[1]);
    r.style.setProperty('--navy-800', t.accent[2]);
  }
  r.setAttribute('data-density', t.density || 'balanced');
  if (typeof window.applyChart === 'function') window.applyChart(t.chart);
}

function SpmsTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => applySpmsTweaks(t), [t]);
  return (
    <TweaksPanel>
      <TweakSection label="Accent" />
      <TweakColor label="Navy shade" value={t.accent} options={SPMS_ACCENTS}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSection label="Layout" />
      <TweakSelect label="Density" value={t.density}
        options={['comfortable', 'balanced', 'compact']}
        onChange={(v) => setTweak('density', v)} />
      {window.SPMS_PAGE === 'landing' && (
        <React.Fragment>
          <TweakSection label="Landing chart" />
          <TweakSelect label="Chart" value={t.chart}
            options={['savings', 'probability', 'none']}
            onChange={(v) => setTweak('chart', v)} />
        </React.Fragment>
      )}
    </TweaksPanel>
  );
}

(function mountSpmsTweaks() {
  const el = document.getElementById('tweaks-root');
  if (el) ReactDOM.createRoot(el).render(<SpmsTweaks />);
})();