// Tweaks panel - exposes accent color, density, surprise mode

const { useState, useEffect } = React;

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "accent": "#a8ff2e",
  "density": "comfy",
  "grid": true,
  "ticker": true,
  "cursor": true,
  "uppercase": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty('--accent', t.accent);
  // dim version
  root.style.setProperty('--accent-dim', t.accent);

  if (t.density === 'compact') {
    root.style.setProperty('--pad', 'clamp(16px, 2.5vw, 32px)');
    document.body.style.fontSize = '14px';
  } else if (t.density === 'roomy') {
    root.style.setProperty('--pad', 'clamp(32px, 6vw, 80px)');
    document.body.style.fontSize = '16px';
  } else {
    root.style.setProperty('--pad', 'clamp(24px, 4vw, 56px)');
    document.body.style.fontSize = '15px';
  }

  // Grid background
  document.body.style.setProperty('--show-grid', t.grid ? 'block' : 'none');
  if (!document.getElementById('tweak-style')) {
    const s = document.createElement('style');
    s.id = 'tweak-style';
    document.head.appendChild(s);
  }
  document.getElementById('tweak-style').textContent = `
    body::before { display: ${t.grid ? 'block' : 'none'} !important; }
    .ticker { display: ${t.ticker ? 'block' : 'none'} !important; }
    .cursor-dot { display: ${t.cursor ? 'block' : 'none'} !important; }
    .nav-link, .label, .mono, .eyebrow, .footer-col h5, .footer-bot, .ticker-track,
    .stat .l, .cap .num, .proc-step .n, .section-num, .hero-eyebrow,
    .hero-meta-row .k, .hero-meta-row .v, .nav-cta, .btn, .sectors .chip,
    .num-tag, .meta .tag, .ph-label, .meas, .label-tag {
      text-transform: ${t.uppercase ? 'uppercase' : 'none'} !important;
    }
  `;
}

function TweaksApp() {
  const [tweaks, setTweak] = window.useTweaks(DEFAULT_TWEAKS);

  useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Identité">
        <window.TweakColor
          label="Couleur d'accent"
          value={tweaks.accent}
          onChange={(v) => setTweak('accent', v)}
          presets={['#a8ff2e', '#ff3b1f', '#ffb800', '#00d4ff', '#ededed', '#ff5cd6']}
        />
      </window.TweakSection>
      <window.TweakSection title="Mise en page">
        <window.TweakRadio
          label="Densité"
          value={tweaks.density}
          onChange={(v) => setTweak('density', v)}
          options={[
            { value: 'compact', label: 'Compact' },
            { value: 'comfy', label: 'Standard' },
            { value: 'roomy', label: 'Aéré' },
          ]}
        />
        <window.TweakToggle label="Grille de fond" value={tweaks.grid} onChange={(v) => setTweak('grid', v)} />
        <window.TweakToggle label="Bandeau défilant" value={tweaks.ticker} onChange={(v) => setTweak('ticker', v)} />
      </window.TweakSection>
      <window.TweakSection title="Texte">
        <window.TweakToggle label="Labels en majuscules" value={tweaks.uppercase} onChange={(v) => setTweak('uppercase', v)} />
      </window.TweakSection>
      <window.TweakSection title="Motion">
        <window.TweakToggle label="Curseur custom" value={tweaks.cursor} onChange={(v) => setTweak('cursor', v)} />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

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