/* GCP Tweaks panel — applies to all home variations.
   Stores user-facing edits to body attributes. */

const GCP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "chrome": "layered",
  "theme": "paper",
  "hero": "thesis",
  "accent": "#B25426",
  "leadership": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const html = document.documentElement;
  html.dataset.chrome = t.chrome;
  html.dataset.theme = t.theme;
  html.dataset.hero = t.hero;
  html.dataset.leadership = t.leadership ? 'on' : 'off';
  // Apply accent as CSS variable override
  html.style.setProperty('--amber', t.accent);
  // Derive deep variant by darkening 25%
  html.style.setProperty('--amber-deep', shade(t.accent, -0.35));

  // Hero swap
  document.querySelectorAll('[data-hero-thesis]').forEach(el => {
    el.hidden = t.hero !== 'thesis';
  });
  document.querySelectorAll('[data-hero-capabilities]').forEach(el => {
    el.hidden = t.hero !== 'capabilities';
  });
}

function shade(hex, pct) {
  const h = hex.replace('#', '');
  const n = parseInt(h.length === 3 ? h.replace(/./g, c => c + c) : h, 16);
  let r = (n >> 16) & 0xff, g = (n >> 8) & 0xff, b = n & 0xff;
  const t = pct < 0 ? 0 : 255;
  const p = Math.abs(pct);
  r = Math.round((t - r) * p) + r;
  g = Math.round((t - g) * p) + g;
  b = Math.round((t - b) * p) + b;
  return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
}

// Apply defaults on first paint
applyTweaks(GCP_TWEAK_DEFAULTS);

function GCPTweaks() {
  const [t, setTweak] = useTweaks(GCP_TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Chrome density" />
      <TweakRadio label="Density" value={t.chrome}
        options={[
          { value: 'hidden',     label: 'Hidden' },
          { value: 'restrained', label: 'Subtle' },
          { value: 'layered',    label: 'Layered' },
        ]}
        onChange={v => setTweak('chrome', v)} />

      <TweakSection label="Theme" />
      <TweakRadio label="Mode" value={t.theme}
        options={[
          { value: 'paper', label: 'Paper' },
          { value: 'ops',   label: 'Dark ops' },
        ]}
        onChange={v => setTweak('theme', v)} />

      <TweakSection label="Hero" />
      <TweakRadio label="Direction" value={t.hero}
        options={[
          { value: 'thesis',       label: 'Human' },
          { value: 'capabilities', label: 'Caps' },
        ]}
        onChange={v => setTweak('hero', v)} />

      <TweakSection label="Accent" />
      <TweakColor label="Color" value={t.accent}
        options={['#B25426', '#0F2A3E', '#4A5A33', '#15181E']}
        onChange={v => setTweak('accent', v)} />

      <TweakSection label="Sections" />
      <TweakToggle label="Show leadership"
        value={t.leadership}
        onChange={v => setTweak('leadership', v)} />
    </TweaksPanel>
  );
}

const __gcpRoot = document.createElement('div');
__gcpRoot.id = '__gcp_tweaks_root';
document.body.appendChild(__gcpRoot);
ReactDOM.createRoot(__gcpRoot).render(<GCPTweaks />);