// Tweakable defaults — edited live via the Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

function applyTheme(theme) {
  const root = document.documentElement;
  root.setAttribute("data-theme", theme);
}

function Tweaks() {
  const [open, setOpen] = useState(false);
  const [available, setAvailable] = useState(false);
  const [theme, setTheme] = useState(TWEAK_DEFAULTS.theme);

  // Apply on mount
  useEffect(() => { applyTheme(theme); }, [theme]);

  // Edit-mode wiring
  useEffect(() => {
    function onMsg(e) {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") { setAvailable(true); setOpen(true); }
      if (d.type === "__deactivate_edit_mode") { setAvailable(false); setOpen(false); }
    }
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  function setThemeAndPersist(t) {
    setTheme(t);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { theme: t } }, "*");
  }

  if (!available) return null;

  return (
    <div className={`tweaks ${open ? "is-open" : ""}`}>
      <button className="tweaks__toggle" onClick={() => setOpen(!open)}>
        <span>Tweaks</span>
        <span className="tweaks__chev">{open ? "▾" : "▴"}</span>
      </button>
      {open && (
        <div className="tweaks__body">
          <div className="tweaks__row">
            <label>Theme</label>
            <div className="tweaks__seg">
              {[
                { k: "light", label: "Light" },
                { k: "dark",  label: "Dark"  },
                { k: "red",   label: "Red"   },
              ].map((o) => (
                <button
                  key={o.k}
                  className={`tweaks__seg-btn ${theme === o.k ? "is-on" : ""}`}
                  onClick={() => setThemeAndPersist(o.k)}
                >
                  {o.label}
                </button>
              ))}
            </div>
          </div>
          <div className="tweaks__note">
            Light mirrors the game's daylight city. Dark inverts it. Red is the runner's-eye view.
          </div>
        </div>
      )}
    </div>
  );
}

// Initialize theme from defaults immediately, even before Tweaks mounts
applyTheme(TWEAK_DEFAULTS.theme);

Object.assign(window, { Tweaks });