/* tweaks-app.jsx — Tweaks island for the landing.
   Renders only the floating panel; applies values to :root so the
   vanilla page re-themes live. Toggle from the toolbar. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "clean",
  "palette": ["#11b07a", "#2f6bff"],
  "headFont": "Space Grotesk",
  "radius": 14
}/*EDITMODE-END*/;

function mix(a, b) {
  // midpoint hex for a 3-stop gradient
  const p = (h) => h.replace('#', '').match(/.{2}/g).map((x) => parseInt(x, 16));
  const [r1, g1, b1] = p(a), [r2, g2, b2] = p(b);
  const m = (x, y) => Math.round((x + y) / 2).toString(16).padStart(2, '0');
  return `#${m(r1, r2)}${m(g1, g2)}${m(b1, b2)}`;
}

function applyTweaks(t) {
  const root = document.documentElement;
  root.setAttribute('data-theme', t.theme);

  // Accent palette (green → blue) overrides token identity across themes
  const [c0, c1] = t.palette;
  root.style.setProperty('--green', c0);
  root.style.setProperty('--blue', c1);
  root.style.setProperty('--accent', c0);
  root.style.setProperty('--grad', `linear-gradient(115deg, ${c0} 0%, ${mix(c0, c1)} 48%, ${c1} 100%)`);
  root.style.setProperty('--grad-soft', `linear-gradient(115deg, ${c0}1f, ${c1}1f)`);

  // Corner radius scale
  const r = Number(t.radius);
  root.style.setProperty('--radius', r + 'px');
  root.style.setProperty('--radius-sm', Math.max(4, Math.round(r * 0.64)) + 'px');
  root.style.setProperty('--radius-lg', Math.round(r * 1.55) + 'px');

  // Heading font swap (injected override)
  let s = document.getElementById('twk-headfont');
  if (!s) { s = document.createElement('style'); s.id = 'twk-headfont'; document.head.appendChild(s); }
  s.textContent = `h1,h2,h3,h4,.brand,.eyebrow{font-family:"${t.headFont}",system-ui,sans-serif !important;}`;
}

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Direção de estilo" />
      <TweakRadio
        label="Tema"
        value={t.theme}
        options={[
          { value: "clean", label: "Claro" },
          { value: "vivid", label: "Vivo" },
          { value: "terminal", label: "Terminal" },
        ]}
        onChange={(v) => setTweak("theme", v)}
      />

      <TweakSection label="Cor de destaque" />
      <TweakColor
        label="Verde → Azul"
        value={t.palette}
        options={[
          ["#11b07a", "#2f6bff"],
          ["#16a34a", "#2563eb"],
          ["#06b6a4", "#3b5bff"],
          ["#25d366", "#1f6feb"],
        ]}
        onChange={(v) => setTweak("palette", v)}
      />

      <TweakSection label="Tipografia" />
      <TweakRadio
        label="Títulos"
        value={t.headFont}
        options={["Space Grotesk", "Sora", "Outfit"]}
        onChange={(v) => setTweak("headFont", v)}
      />

      <TweakSection label="Forma" />
      <TweakSlider
        label="Cantos"
        value={t.radius}
        min={4}
        max={26}
        step={1}
        unit="px"
        onChange={(v) => setTweak("radius", v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  let host = document.getElementById('tweaks-root');
  if (!host) { host = document.createElement('div'); host.id = 'tweaks-root'; document.body.appendChild(host); }
  // Apply persisted/default values immediately so the page matches on load.
  applyTweaks(TWEAK_DEFAULTS);
  ReactDOM.createRoot(host).render(<TweaksApp />);
})();