/* =========================================
   OXO — Tweaks setup
   ========================================= */

const OXO_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroHeadline": "chaos",
  "greenAccent": "#2BA88A",
  "showAnnotations": true,
  "heroMode": "dark",
  "fontScale": 1.0
}/*EDITMODE-END*/;

const HEADLINES = {
  chaos:  ["Annual Report", "Chaos?"],
  nomore: ["No More", "Coordination Hell."],
  union:  ["Reporting,", "Reimagined."],
};

const ACCENTS = ["#2BA88A", "#19A974", "#0E8C6F", "#4FB3E0"];

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

  // Apply tweaks to the document live
  React.useEffect(() => {
    document.documentElement.style.setProperty("--green", t.greenAccent);
    document.documentElement.style.setProperty("--green-2", t.greenAccent);
    document.documentElement.style.setProperty("--green-deep", shade(t.greenAccent, -18));
    document.documentElement.style.setProperty("--green-soft", tint(t.greenAccent, 86));

    const h1 = document.querySelector(".hero-headline h1");
    if (h1) {
      const [l1, l2] = HEADLINES[t.heroHeadline] || HEADLINES.chaos;
      h1.innerHTML = `${l1}<br/>${l2}`;
    }
    document.querySelectorAll(".annot").forEach(el => {
      el.style.display = t.showAnnotations ? "" : "none";
    });

    const hero = document.querySelector(".hero");
    if (hero) {
      if (t.heroMode === "light") {
        hero.style.background = "var(--bg)";
        hero.style.color = "var(--ink)";
        const h1 = document.querySelector(".hero-headline h1");
        if (h1) h1.style.setProperty("color", "var(--ink)");
        const strip = document.querySelector(".hero-strip");
        if (strip) strip.style.background = "rgba(0,0,0,.04)";
        const stripInner = document.querySelector(".hero-strip-inner");
        if (stripInner) stripInner.style.color = "var(--ink-mute)";
      } else {
        hero.style.background = "";
        hero.style.color = "";
        const h1 = document.querySelector(".hero-headline h1");
        if (h1) h1.style.removeProperty("color");
        const strip = document.querySelector(".hero-strip");
        if (strip) strip.style.background = "";
        const stripInner = document.querySelector(".hero-strip-inner");
        if (stripInner) stripInner.style.color = "";
      }
    }
    document.documentElement.style.setProperty("--font-scale", t.fontScale);
    document.body.style.fontSize = `${16 * t.fontScale}px`;
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero" />
      <TweakSelect
        label="Headline"
        value={t.heroHeadline}
        options={[
          { value: "chaos",  label: "Annual Report Chaos?" },
          { value: "nomore", label: "No More Coordination Hell" },
          { value: "union",  label: "Reporting, Reimagined" },
        ]}
        onChange={(v) => setTweak("heroHeadline", v)}
      />
      <TweakRadio
        label="Mode"
        value={t.heroMode}
        options={["dark", "light"]}
        onChange={(v) => setTweak("heroMode", v)}
      />
      <TweakToggle
        label="Floating cards"
        value={t.showAnnotations}
        onChange={(v) => setTweak("showAnnotations", v)}
      />

      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={t.greenAccent}
        options={ACCENTS}
        onChange={(v) => setTweak("greenAccent", v)}
      />

      <TweakSection label="Type" />
      <TweakSlider
        label="Body scale"
        value={t.fontScale}
        min={0.85}
        max={1.2}
        step={0.05}
        onChange={(v) => setTweak("fontScale", v)}
      />
    </TweaksPanel>
  );
}

// helpers — adjust hsl-like lightness on a hex
function shade(hex, lumDelta) {
  const { h, s, l } = hexToHsl(hex);
  return hslToHex(h, s, Math.max(0, Math.min(100, l + lumDelta)));
}
function tint(hex, lumTo) {
  const { h, s } = hexToHsl(hex);
  return hslToHex(h, Math.max(20, s - 30), lumTo);
}
function hexToHsl(hex) {
  const r = parseInt(hex.slice(1,3),16)/255, g = parseInt(hex.slice(3,5),16)/255, b = parseInt(hex.slice(5,7),16)/255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h, s, l = (max+min)/2;
  if (max===min) { h=s=0; }
  else {
    const d = max-min;
    s = l>.5 ? d/(2-max-min) : d/(max+min);
    switch(max){
      case r: h = (g-b)/d + (g<b?6:0); break;
      case g: h = (b-r)/d + 2; break;
      case b: h = (r-g)/d + 4; break;
    }
    h /= 6;
  }
  return { h: h*360, s: s*100, l: l*100 };
}
function hslToHex(h, s, l) {
  s/=100; l/=100;
  const k = n => (n + h/30) % 12;
  const a = s * Math.min(l, 1-l);
  const f = n => {
    const c = l - a*Math.max(-1, Math.min(k(n)-3, Math.min(9-k(n), 1)));
    return Math.round(c*255).toString(16).padStart(2,"0");
  };
  return `#${f(0)}${f(8)}${f(4)}`;
}

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