// Tweaks panel for Fayez Hassoun portfolio
// Reads default values, exposes a floating control surface, applies changes live
// to: CSS variables (accent colors), document attributes (background, grid),
// window.__TWEAKS (consumed each frame by hero-graph.js), and DOM text
// (hero headline variant).

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#00e5ff", "#9b6dff", "#2dffb5", "#ff4ee0"],
  "background": "deep-space",
  "headline": "memory",
  "rotateSpeed": 1.0,
  "signalDensity": 100,
  "showGrid": true,
  "motionOff": false
}/*EDITMODE-END*/;

const PALETTES = {
  "Cyan / Violet": ["#00e5ff", "#9b6dff", "#2dffb5", "#ff4ee0"],
  "Emerald / Sky": ["#2dffb5", "#00e5ff", "#4d7dff", "#c4a8ff"],
  "Magenta / Amber": ["#ff4ee0", "#ffb454", "#5cf3ff", "#9b6dff"],
  "Mono Cyan": ["#5cf3ff", "#00e5ff", "#4d7dff", "#ffffff"],
};

const BACKGROUNDS = {
  "deep-space": { name: "Deep Space", bg0: "#04040c", bg1: "#07071a", bg2: "#0b0a24" },
  "deep-navy":  { name: "Deep Navy",  bg0: "#020512", bg1: "#04081f", bg2: "#070d2e" },
  "deep-violet":{ name: "Deep Violet",bg0: "#08030f", bg1: "#10081f", bg2: "#1a0c2d" },
  "abyss":      { name: "Abyss",      bg0: "#000000", bg1: "#040409", bg2: "#080812" },
};

const HEADLINES = {
  "memory": {
    label: "Memory Systems",
    pre: "I build ",
    em: "AI memory systems",
    post: " and agent workflows for marketing teams",
  },
  "agents": {
    label: "Agent Systems",
    pre: "",
    em: "AI agent systems",
    post: " for marketing teams",
  },
  "layer": {
    label: "Operating Layer",
    pre: "A living ",
    em: "AI operating layer",
    post: " for marketing workflows",
  },
  "operator": {
    label: "Operator → Builder",
    pre: "Performance marketing operator turned ",
    em: "AI systems builder",
    post: ".",
  },
  "brain": {
    label: "AI Brain",
    pre: "I build the ",
    em: "AI brain",
    post: " behind marketing operations",
  },
};

function applyPalette(p) {
  const root = document.documentElement;
  root.style.setProperty("--cyan", p[0]);
  root.style.setProperty("--violet", p[1]);
  root.style.setProperty("--emerald", p[2]);
  root.style.setProperty("--magenta", p[3]);
  // Derive a "soft cyan" for gradients
  root.style.setProperty("--cyan-soft", p[0]);
}

function applyBackground(key) {
  const cfg = BACKGROUNDS[key] || BACKGROUNDS["deep-space"];
  const root = document.documentElement;
  root.style.setProperty("--bg-0", cfg.bg0);
  root.style.setProperty("--bg-1", cfg.bg1);
  root.style.setProperty("--bg-2", cfg.bg2);
  document.body.style.background = cfg.bg0;
}

function applyHeadline(key) {
  const h = HEADLINES[key] || HEADLINES.memory;
  const el = document.querySelector(".hero-headline");
  if (!el) return;
  el.innerHTML = `${h.pre}<em>${h.em}</em>${h.post ? "<br/>" + h.post : ""}`;
}

function applyGrid(show) {
  document.body.classList.toggle("no-grid", !show);
}

function applyMotion(off) {
  document.body.classList.toggle("motion-off", off);
  window.__TWEAKS.motionOff = off;
}

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

  // Apply on every change
  React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  React.useEffect(() => { applyBackground(t.background); }, [t.background]);
  React.useEffect(() => { applyHeadline(t.headline); }, [t.headline]);
  React.useEffect(() => { applyGrid(t.showGrid); }, [t.showGrid]);
  React.useEffect(() => { applyMotion(t.motionOff); }, [t.motionOff]);
  React.useEffect(() => { window.__TWEAKS.rotateSpeed = t.rotateSpeed; }, [t.rotateSpeed]);
  React.useEffect(() => { window.__TWEAKS.signalDensity = t.signalDensity / 100; }, [t.signalDensity]);

  // Resolve palette option (compare arrays)
  const paletteOptions = Object.values(PALETTES);
  const paletteValue = paletteOptions.find(
    (p) => p.every((c, i) => c === t.palette[i])
  ) || t.palette;

  const headlineOptions = Object.entries(HEADLINES).map(([k, v]) => ({ value: k, label: v.label }));
  const bgOptions = Object.entries(BACKGROUNDS).map(([k, v]) => ({ value: k, label: v.name }));

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Identity" />
      <TweakSelect
        label="Hero headline"
        value={t.headline}
        options={headlineOptions}
        onChange={(v) => setTweak("headline", v)}
      />

      <TweakSection label="Visual" />
      <TweakColor
        label="Accent palette"
        value={paletteValue}
        options={paletteOptions}
        onChange={(v) => setTweak("palette", v)}
      />
      <TweakSelect
        label="Background"
        value={t.background}
        options={bgOptions}
        onChange={(v) => setTweak("background", v)}
      />
      <TweakToggle
        label="Grid backdrop"
        value={t.showGrid}
        onChange={(v) => setTweak("showGrid", v)}
      />

      <TweakSection label="Motion" />
      <TweakSlider
        label="Graph rotation"
        value={t.rotateSpeed}
        min={0} max={3} step={0.1} unit="×"
        onChange={(v) => setTweak("rotateSpeed", v)}
      />
      <TweakSlider
        label="Signal density"
        value={t.signalDensity}
        min={0} max={100} step={5} unit="%"
        onChange={(v) => setTweak("signalDensity", v)}
      />
      <TweakToggle
        label="Reduce motion"
        value={t.motionOff}
        onChange={(v) => setTweak("motionOff", v)}
      />
    </TweaksPanel>
  );
}

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