/* global React, TweaksPanel, TweakSection, TweakRadio, TweakColor, useTweaks */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero_variant": "terminal",
  "headline": "robots",
  "accent": "violet"
}/*EDITMODE-END*/;

const ACCENTS = {
  violet: { violet: "oklch(0.72 0.19 285)", violet2: "oklch(0.62 0.22 290)", blue: "oklch(0.78 0.16 230)" },
  cyan:   { violet: "oklch(0.78 0.16 200)", violet2: "oklch(0.68 0.19 210)", blue: "oklch(0.82 0.14 180)" },
  amber:  { violet: "oklch(0.78 0.16 65)",  violet2: "oklch(0.70 0.18 50)",  blue: "oklch(0.82 0.14 90)"  },
  pink:   { violet: "oklch(0.74 0.20 340)", violet2: "oklch(0.64 0.22 340)", blue: "oklch(0.78 0.16 290)" },
};

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

  useEffect(() => {
    if (window.__site) window.__site.setHeroVariant(t.hero_variant);
  }, [t.hero_variant]);

  useEffect(() => {
    if (window.__site) window.__site.setHeadline(t.headline);
  }, [t.headline]);

  useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS.violet;
    const root = document.documentElement;
    root.style.setProperty("--violet", a.violet);
    root.style.setProperty("--violet-2", a.violet2);
    root.style.setProperty("--blue", a.blue);
    root.style.setProperty("--accent-glow", `color-mix(in oklch, ${a.violet} 40%, transparent)`);
  }, [t.accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero vizuál">
        <TweakRadio
          value={t.hero_variant}
          onChange={(v) => setTweak("hero_variant", v)}
          options={[
            { value: "terminal", label: "Terminál" },
            { value: "network", label: "AI síť" },
            { value: "code", label: "Kód" },
          ]}
        />
      </TweakSection>
      <TweakSection label="Headline">
        <TweakRadio
          value={t.headline}
          onChange={(v) => setTweak("headline", v)}
          options={[
            { value: "pillars", label: "Pod jednou střechou" },
            { value: "robots", label: "Roboti" },
            { value: "idea", label: "Z nápadu" },
          ]}
        />
      </TweakSection>
      <TweakSection label="Akcent">
        <TweakSelect
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={[
            { value: "violet", label: "Violet · Blue" },
            { value: "cyan",   label: "Cyan · Mint" },
            { value: "amber",  label: "Amber · Gold" },
            { value: "pink",   label: "Pink · Magenta" },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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