/* Livers.Agency — Tweaks panel
 * Allows the user to swap accent color, motion intensity and hero variation.
 */

const NOVA_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#25F4EE",
  "motionLevel": "high",
  "heroVariant": "creators-grid"
}/*EDITMODE-END*/;

(function () {
  const TweaksPanel = window.TweaksPanel;
  const useTweaks  = window.useTweaks;
  const TweakSection = window.TweakSection;
  const TweakRadio = window.TweakRadio;
  const TweakColor = window.TweakColor;
  if (!TweaksPanel || !useTweaks) {
    console.warn("[Livers] tweaks helpers missing — skipping");
    return;
  }

  function applyAccent(hex) {
    document.documentElement.style.setProperty("--accent", hex);
    // recompute soft + glow
    const r = parseInt(hex.slice(1,3),16) || 37;
    const g = parseInt(hex.slice(3,5),16) || 244;
    const b = parseInt(hex.slice(5,7),16) || 238;
    document.documentElement.style.setProperty("--accent-soft", `rgba(${r},${g},${b},0.12)`);
    document.documentElement.style.setProperty("--accent-glow", `rgba(${r},${g},${b},0.45)`);
  }

  function applyMotion(level) {
    document.body.dataset.motion = level;
    if (level === "low") {
      document.querySelectorAll(".hero-tile").forEach(t => t.style.animation = "none");
      document.querySelectorAll(".marquee-track, .ticker-track").forEach(t => t.style.animationPlayState = "paused");
    } else {
      document.querySelectorAll(".hero-tile").forEach(t => t.style.animation = "");
      document.querySelectorAll(".marquee-track, .ticker-track").forEach(t => t.style.animationPlayState = "");
    }
  }

  function applyHero(variant) {
    const grid = document.querySelector(".hero-grid-bg");
    const vignette = document.querySelector(".hero-vignette");
    if (!grid) return;
    if (variant === "minimal") {
      grid.style.opacity = "0.15";
    } else if (variant === "off") {
      grid.style.display = "none";
    } else {
      grid.style.display = "";
      grid.style.opacity = "0.55";
    }
  }

  function App() {
    const [tweaks, setTweak] = useTweaks(NOVA_DEFAULTS);

    React.useEffect(() => applyAccent(tweaks.accentColor), [tweaks.accentColor]);
    React.useEffect(() => applyMotion(tweaks.motionLevel), [tweaks.motionLevel]);
    React.useEffect(() => applyHero(tweaks.heroVariant), [tweaks.heroVariant]);

    return (
      <TweaksPanel title="Tweaks">
        <TweakSection title="Vurgu rengi">
          <TweakColor label="Accent" value={tweaks.accentColor} onChange={v => setTweak("accentColor", v)} />
          <TweakRadio
            value={tweaks.accentColor}
            onChange={v => setTweak("accentColor", v)}
            options={[
              { value: "#25F4EE", label: "Cyan" },
              { value: "#FE2C55", label: "Kırmızı" },
              { value: "#C4FF3D", label: "Lime" },
              { value: "#A855F7", label: "Mor" },
            ]}
          />
        </TweakSection>

        <TweakSection title="Hareket yoğunluğu">
          <TweakRadio
            value={tweaks.motionLevel}
            onChange={v => setTweak("motionLevel", v)}
            options={[
              { value: "high", label: "Yoğun" },
              { value: "medium", label: "Orta" },
              { value: "low", label: "Az" },
            ]}
          />
        </TweakSection>

        <TweakSection title="Hero varyasyonu">
          <TweakRadio
            value={tweaks.heroVariant}
            onChange={v => setTweak("heroVariant", v)}
            options={[
              { value: "creators-grid", label: "Yayıncı grid'i" },
              { value: "minimal", label: "Minimal" },
              { value: "off", label: "Sade" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    );
  }

  document.addEventListener("DOMContentLoaded", () => {
    const root = document.createElement("div");
    root.id = "nova-tweaks-root";
    document.body.appendChild(root);
    ReactDOM.createRoot(root).render(<App />);
  });
})();