/* ============================================================
   VIENTA — Tweaks panel app
   Drives the page via data-attrs + CSS vars (page itself is vanilla).
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "ink",
  "accent": "auto",
  "display": "Space Grotesk",
  "headline": "We build software with studio craft and engineering rigor.",
  "motion": "lively",
  "grid": true
}/*EDITMODE-END*/;

const ACCENTS = {
  auto:     null,
  lime:     "#CBFF47",
  brick:    "#B3261E",
  ultra:    "#1E2BF0",
  cyan:     "#3CE7FF",
  vermilion:"#FF5436",
  violet:   "#9B6BFF",
};
const THEME_ACCENT = { carbon: "#CBFF47", ink: "#B3261E", signal: "#3CE7FF" };
const DISPLAY_FONTS = ["Space Grotesk", "Archivo", "Syne", "Sora"];

function applyTweaks(t) {
  const root = document.documentElement;
  // Disable transitions during the swap — Chromium leaves var()-based
  // properties stuck at their old value when the custom prop changes mid-transition.
  root.classList.add("theme-switching");
  // direction
  root.setAttribute("data-theme", t.direction);
  // accent override
  const acc = t.accent === "auto" ? THEME_ACCENT[t.direction] : (ACCENTS[t.accent] || THEME_ACCENT[t.direction]);
  root.style.setProperty("--accent", acc);
  root.style.setProperty("--accent2", acc);
  root.style.setProperty("--glow", hexA(acc, .16));
  root.style.setProperty("--select", hexA(acc, .26));
  // on-accent contrast
  root.style.setProperty("--on-accent", isLight(acc) ? "#0A0B0D" : "#F7F4ED");
  // display font
  root.style.setProperty("--ff-display", `"${t.display}",system-ui,sans-serif`);
  // motion
  root.style.setProperty("--motion", t.motion === "calm" ? "0.42" : "1");
  document.body.classList.toggle("calm", t.motion === "calm");
  // grid
  root.style.setProperty("--grid-on", t.grid ? "1" : "0");
  // refresh canvas colors
  if (window.__viFieldRefresh) window.__viFieldRefresh();
  // force reflow, then re-enable transitions next frame
  void root.offsetWidth;
  requestAnimationFrame(() => root.classList.remove("theme-switching"));
}

function hexA(hex, a) {
  const h = hex.replace("#", "");
  const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
  const n = parseInt(x, 16);
  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
}
function isLight(hex) {
  const h = hex.replace("#", "");
  const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h;
  const n = parseInt(x, 16);
  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  return r * 299 + g * 587 + b * 114 > 150000;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTweaks(t); }, [t]);

  // headline -> rebuild hero H1 words
  React.useEffect(() => {
    const h1 = document.querySelector(".h1");
    if (!h1) return;
    const words = t.headline.trim().split(/\s+/);
    // accent the last 2 words
    h1.innerHTML = words.map((wd, i) => {
      const it = i >= words.length - 2 ? " it" : "";
      return `<span class="word"><span class="${it.trim()}">${wd}</span></span>`;
    }).join(" ");
  }, [t.headline]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Direction" />
      <TweakRadio label="Theme" value={t.direction}
        options={[{value:"carbon",label:"Carbon"},{value:"ink",label:"Ink"},{value:"signal",label:"Signal"}]}
        onChange={(v) => setTweak("direction", v)} />
      <TweakColor label="Accent" value={t.accent === "auto" ? THEME_ACCENT[t.direction] : ACCENTS[t.accent]}
        options={[THEME_ACCENT[t.direction], ACCENTS.lime, ACCENTS.ultra, ACCENTS.cyan, ACCENTS.vermilion, ACCENTS.violet]}
        onChange={(hex) => {
          const key = Object.keys(ACCENTS).find((k) => ACCENTS[k] && ACCENTS[k].toLowerCase() === String(hex).toLowerCase());
          setTweak("accent", key || "auto");
        }} />

      <TweakSection label="Type & Motion" />
      <TweakSelect label="Display font" value={t.display} options={DISPLAY_FONTS}
        onChange={(v) => setTweak("display", v)} />
      <TweakRadio label="Motion" value={t.motion} options={["calm", "lively"]}
        onChange={(v) => setTweak("motion", v)} />
      <TweakToggle label="Background grid" value={t.grid}
        onChange={(v) => setTweak("grid", v)} />

      <TweakSection label="Copy" />
      <TweakText label="Hero headline" value={t.headline}
        onChange={(v) => setTweak("headline", v)} />
    </TweaksPanel>
  );
}

// Apply persisted defaults immediately (before panel ever opens)
applyTweaks(TWEAK_DEFAULTS);

const mount = document.getElementById("tweaks-root");
ReactDOM.createRoot(mount).render(<App />);