/* global React, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSelect, TweakColor */
function Tweaks() {
  const defaults = /*EDITMODE-BEGIN*/{
    "accentHue": 40,
    "showTutor": true,
    "skinPreview": "landing",
    "wizardScreen": "auto",
    "fontPair": "fraunces-geist"
  }/*EDITMODE-END*/;
  const [t, setT] = useTweaks(defaults);

  // Apply hue live
  React.useEffect(() => {
    const h = t.accentHue;
    document.documentElement.style.setProperty("--accent", `oklch(0.62 0.13 ${h})`);
    document.documentElement.style.setProperty("--accent-soft", `oklch(0.92 0.04 ${h})`);
  }, [t.accentHue]);

  React.useEffect(() => {
    const root = document.documentElement;
    if (t.fontPair === "fraunces-geist") {
      root.style.setProperty("--serif", `"Fraunces", Georgia, serif`);
      root.style.setProperty("--sans", `"Geist", system-ui, sans-serif`);
    } else if (t.fontPair === "playfair-inter") {
      root.style.setProperty("--serif", `"Playfair Display", Georgia, serif`);
      root.style.setProperty("--sans", `"Inter", system-ui, sans-serif`);
    } else if (t.fontPair === "dm-serif-dm-sans") {
      root.style.setProperty("--serif", `"DM Serif Display", Georgia, serif`);
      root.style.setProperty("--sans", `"DM Sans", system-ui, sans-serif`);
    }
  }, [t.fontPair]);

  React.useEffect(() => {
    document.body.classList.toggle("tweak-no-tutor", !t.showTutor);
  }, [t.showTutor]);

  // Programmatic navigation hook for Tweaks (lets reviewer jump screens)
  React.useEffect(() => {
    if (t.wizardScreen === "auto") return;
    window.dispatchEvent(new CustomEvent("__tweak_goto", { detail: t.wizardScreen }));
  }, [t.wizardScreen]);

  // Force live-app preview variant
  React.useEffect(() => {
    window.dispatchEvent(new CustomEvent("__tweak_skin", { detail: t.skinPreview }));
  }, [t.skinPreview]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Brand">
        <div style={{ padding: "8px 0" }}>
          <label style={{ display: "block", fontFamily: "var(--mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--ink-3)", marginBottom: 6 }}>Accent hue</label>
          <input type="range" min="0" max="360" step="1" value={t.accentHue} onChange={(e) => setT("accentHue", Number(e.target.value))} style={{ width: "100%" }} />
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)" }}>{t.accentHue}°</div>
        </div>
        <TweakRadio label="Type pairing" value={t.fontPair} onChange={(v) => setT("fontPair", v)} options={[
          { value: "fraunces-geist", label: "Fraunces × Geist" },
          { value: "playfair-inter", label: "Playfair × Inter" },
          { value: "dm-serif-dm-sans", label: "DM Serif × DM Sans" },
        ]} />
      </TweakSection>

      <TweakSection title="Editor">
        <TweakToggle label="Show tutor bubble" value={t.showTutor} onChange={(v) => setT("showTutor", v)} />
      </TweakSection>

      <TweakSection title="Demo navigation">
        <TweakSelect label="Jump to screen" value={t.wizardScreen} onChange={(v) => setT("wizardScreen", v)} options={[
          { value: "auto", label: "(no jump)" },
          { value: "welcome", label: "Welcome" },
          { value: "wizard", label: "Wizard (start)" },
          { value: "editor", label: "Editor" },
          { value: "deploy", label: "Deploy modal" },
          { value: "live", label: "Live app" },
        ]} />
        <TweakRadio label="Live preview type" value={t.skinPreview} onChange={(v) => setT("skinPreview", v)} options={[
          { value: "landing", label: "Landing" },
          { value: "site", label: "Site" },
          { value: "app", label: "App" },
          { value: "ai", label: "AI" },
        ]} />
      </TweakSection>
    </TweaksPanel>
  );
}

window.Tweaks = Tweaks;