/* Tweaks panel for Vincent lander — palettes, motion, rain */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "cpp-blue",
  "motion": 1,
  "codeRain": true
}/*EDITMODE-END*/;

const VINCENT_PALETTES = {
  "cpp-blue": {
    label: "C++ Blue",
    vars: {
      "--bg": "#06090f", "--bg-2": "#0a0f18",
      "--ink": "#e8eef5", "--ink-dim": "#8b9bb0",
      "--accent": "#6aa5e8", "--accent-2": "#9ecbff",
      "--accent-deep": "#1d3a5f", "--accent-glow": "rgba(106,165,232,0.55)",
      "--line": "rgba(140,170,210,0.14)"
    }
  },
  "hacker-green": {
    label: "Hacker Green",
    vars: {
      "--bg": "#050b07", "--bg-2": "#08120c",
      "--ink": "#e9f5ec", "--ink-dim": "#86a892",
      "--accent": "#3dff8f", "--accent-2": "#a4ffce",
      "--accent-deep": "#0e4d2c", "--accent-glow": "rgba(61,255,143,0.45)",
      "--line": "rgba(120,210,160,0.14)"
    }
  },
  "synthwave": {
    label: "Synthwave",
    vars: {
      "--bg": "#0a0712", "--bg-2": "#110b1d",
      "--ink": "#f0eaff", "--ink-dim": "#9d8fbd",
      "--accent": "#a06bff", "--accent-2": "#ff7ec2",
      "--accent-deep": "#3a1f6e", "--accent-glow": "rgba(160,107,255,0.5)",
      "--line": "rgba(180,140,255,0.15)"
    }
  },
  "compiler-fire": {
    label: "Compiler Fire",
    vars: {
      "--bg": "#0d0805", "--bg-2": "#160d08",
      "--ink": "#fdf2e8", "--ink-dim": "#b39782",
      "--accent": "#ff9a3d", "--accent-2": "#ffc98f",
      "--accent-deep": "#6e3410", "--accent-glow": "rgba(255,154,61,0.5)",
      "--line": "rgba(255,180,120,0.14)"
    }
  }
};

function applyVincentTweaks(t) {
  const root = document.documentElement;
  const pal = VINCENT_PALETTES[t.palette] || VINCENT_PALETTES["cpp-blue"];
  Object.entries(pal.vars).forEach(([k, v]) => root.style.setProperty(k, v));
  root.style.setProperty("--motion", String(t.motion));
  window.dispatchEvent(new CustomEvent("vincent-palette-change"));
  window.dispatchEvent(new CustomEvent("vincent-rain-toggle", { detail: !!t.codeRain }));
}

function VincentTweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyVincentTweaks(t); }, [t]);
  return (
    <TweaksPanel>
      <TweakSection label="Theme"></TweakSection>
      <TweakSelect
        label="Palette"
        value={t.palette}
        options={Object.keys(VINCENT_PALETTES).map((k) => ({ value: k, label: VINCENT_PALETTES[k].label }))}
        onChange={(v) => setTweak("palette", v)}
      ></TweakSelect>
      <TweakSection label="Motion"></TweakSection>
      <TweakSlider
        label="Intensity"
        value={t.motion} min={0.2} max={2} step={0.1}
        onChange={(v) => setTweak("motion", v)}
      ></TweakSlider>
      <TweakToggle
        label="Code rain"
        value={t.codeRain}
        onChange={(v) => setTweak("codeRain", v)}
      ></TweakToggle>
    </TweaksPanel>
  );
}

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