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

/* extra font families for the Type tweak */
(function loadFonts() {
  var l = document.createElement("link");
  l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Archivo:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap";
  document.head.appendChild(l);
})();

const ACCENTS = {
  "Royalblau": ["#12229d", "#0d1973", "#ffffff"],
  "Marine":    ["#1b2d8f", "#142272", "#ffffff"],
  "Stahl":     ["#2b3aa6", "#1d2b86", "#ffffff"]
};
const FONTS = {
  "Modern":     ['"Space Grotesk", sans-serif',      '"Hanken Grotesk", sans-serif'],
  "Markant":    ['"Bricolage Grotesque", sans-serif', '"Hanken Grotesk", sans-serif'],
  "Sachlich":   ['"Archivo", sans-serif',             '"IBM Plex Sans", sans-serif']
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Royalblau",
  "font": "Modern",
  "dark": false,
  "status": "prelaunch"
}/*EDITMODE-END*/;

function applyStatus(status) {
  /* i18n owns the badge + CTA copy (language-aware); just hand it the status */
  if (window.MK && window.MK.setStatus) { window.MK.setStatus(status); return; }
  var live = status === "live";
  var badge = document.querySelector(".prelaunch");
  if (badge) {
    var txt = badge.querySelector("[data-badge-text]");
    var tag = badge.querySelector(".tag");
    if (txt) txt.textContent = live ? "Jetzt geöffnet in Marburg" : "Eröffnung in Vorbereitung in Marburg";
    if (tag) tag.textContent = live ? "OPEN" : "NEU";
  }
}

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

  useEffect(() => {
    const r = document.documentElement;
    const a = ACCENTS[t.accent] || ACCENTS.Royalblau;
    r.style.setProperty("--brand", a[0]);
    r.style.setProperty("--brand-deep", a[1]);
    r.style.setProperty("--accent", a[0]);
    r.style.setProperty("--accent-deep", a[1]);
    r.style.setProperty("--on-accent", a[2]);
    const f = FONTS[t.font] || FONTS.Modern;
    r.style.setProperty("--display", f[0]);
    r.style.setProperty("--body", f[1]);
    r.setAttribute("data-theme", t.dark ? "dark" : "light");
    applyStatus(t.status);
  }, [t.accent, t.font, t.dark, t.status]);

  return (
    <React.Fragment>
      <span data-tweaks-ready="1" style={{ display: "none" }} />
      <TweaksPanel>
      <TweakSection label="Markenfarbe" />
      <TweakColor label="Akzent" value={(ACCENTS[t.accent] || ACCENTS.Royalblau)[0]}
        options={Object.keys(ACCENTS).map(k => ACCENTS[k][0])}
        onChange={(v) => {
          const key = Object.keys(ACCENTS).find(k => ACCENTS[k][0] === v) || "Royalblau";
          setTweak("accent", key);
        }} />
      <TweakSection label="Typografie" />
      <TweakRadio label="Schrift" value={t.font} options={Object.keys(FONTS)}
        onChange={(v) => setTweak("font", v)} />
      <TweakSection label="Darstellung" />
      <TweakToggle label="Dark Mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />
      <TweakRadio label="Status" value={t.status} options={["prelaunch", "live"]}
        onChange={(v) => setTweak("status", v)} />
    </TweaksPanel>
    </React.Fragment>
  );
}

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