/* ============================================================
   Tweaks island — applies live controls to the page DOM.
   Uses helpers exported by tweaks-panel.jsx.
   ============================================================ */
const MP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E37B3F",
  "light": false,
  "glow": true,
  "eventDate": "2026-10-15T16:30",
  "formLink": "https://forms.office.com/e/0kaKYjH66e"
}/*EDITMODE-END*/;

// accent hex -> {hover, soft}
const ACCENT_MAP = {
  "#E37B3F": { hover: "#CC6D35", name: "Orange" },
  "#6082A0": { hover: "#416073", name: "Steel" },
  "#C951BD": { hover: "#A8409B", name: "Magenta" },
  "#8ECD4F": { hover: "#6D9442", name: "Grön" }
};

function hexToRgba(hex, a) {
  const h = hex.replace("#", "");
  const r = parseInt(h.substring(0, 2), 16);
  const g = parseInt(h.substring(2, 4), 16);
  const b = parseInt(h.substring(4, 6), 16);
  return "rgba(" + r + "," + g + "," + b + "," + a + ")";
}

function MPTweaks() {
  const [t, setTweak] = useTweaks(MP_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    const conf = ACCENT_MAP[t.accent] || ACCENT_MAP["#E37B3F"];
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-hover", conf.hover);
    root.style.setProperty("--accent-soft", hexToRgba(t.accent, 0.14));
    if (window.__syncPinColor) window.__syncPinColor();
  }, [t.accent]);

  React.useEffect(() => {
    document.body.classList.toggle("theme-light", !!t.light);
  }, [t.light]);

  React.useEffect(() => {
    if (window.__toggleGlow) window.__toggleGlow(!!t.glow);
  }, [t.glow]);

  React.useEffect(() => {
    if (window.__setEventDate && t.eventDate) window.__setEventDate(t.eventDate + ":00");
  }, [t.eventDate]);

  React.useEffect(() => {
    if (window.__setFormLink) window.__setFormLink(t.formLink || "#");
  }, [t.formLink]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Utseende" />
      <TweakColor
        label="Accentfärg"
        value={t.accent}
        options={["#E37B3F", "#6082A0", "#C951BD", "#8ECD4F"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakToggle label="Ljust tema" value={t.light} onChange={(v) => setTweak("light", v)} />
      <TweakToggle label="Bakgrundsglöd" value={t.glow} onChange={(v) => setTweak("glow", v)} />

      <TweakSection label="Innehåll" />
      <TweakRow label="Datum & tid">
        <input
          type="datetime-local"
          value={t.eventDate}
          onChange={(e) => setTweak("eventDate", e.target.value)}
          style={{
            background: "rgba(255,255,255,0.08)", color: "#fff",
            border: "1px solid rgba(255,255,255,0.18)", borderRadius: "6px",
            padding: "6px 8px", fontFamily: "inherit", fontSize: "13px",
            colorScheme: "dark", width: "100%"
          }}
        />
      </TweakRow>
      <TweakText
        label="Formulärlänk"
        value={t.formLink}
        placeholder="https://…"
        onChange={(v) => setTweak("formLink", v)}
      />
    </TweaksPanel>
  );
}

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