// Tweaks panel — toggled from toolbar
const { useState, useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "amber",
  "heroVariant": "both",
  "showIndices": true
}/*EDITMODE-END*/;

function applyPalette(p) {
  if (p === "amber") document.documentElement.removeAttribute("data-palette");
  else document.documentElement.setAttribute("data-palette", p);
  try { localStorage.setItem("ai_palette", p); } catch (e) {}
}

function applyHero(v) {
  if (window.__heroSetVariant) window.__heroSetVariant(v);
}

function applyIndices(show) {
  document.body.classList.toggle("hide-indices", !show);
}

function TweaksApp() {
  const [open, setOpen] = useState(false);
  const [t, setT] = useState(DEFAULTS);

  useEffect(() => {
    function onMsg(e) {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") setOpen(true);
      if (d.type === "__deactivate_edit_mode") setOpen(false);
    }
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    // Apply initial
    applyPalette(t.palette);
    applyHero(t.heroVariant);
    applyIndices(t.showIndices);
    return () => window.removeEventListener("message", onMsg);
    // eslint-disable-next-line
  }, []);

  function set(key, val) {
    const next = { ...t, [key]: val };
    setT(next);
    if (key === "palette") applyPalette(val);
    if (key === "heroVariant") applyHero(val);
    if (key === "showIndices") applyIndices(val);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: val } }, "*");
  }

  function close() {
    setOpen(false);
    window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*");
  }

  if (!open) return null;

  return (
    <div style={panelStyles.wrap}>
      <div style={panelStyles.header}>
        <span style={panelStyles.title}>TWEAKS</span>
        <button onClick={close} style={panelStyles.close}>×</button>
      </div>
      <div style={panelStyles.body}>
        <Group label="PALETTE">
          <Seg val={t.palette} options={[
            { v: "amber", l: "Amber" },
            { v: "electric", l: "Electric" },
            { v: "mono", l: "Mono" },
          ]} onChange={v => set("palette", v)} />
        </Group>
        <Group label="HERO BG">
          <Seg val={t.heroVariant} options={[
            { v: "both", l: "Both" },
            { v: "grid", l: "Grid" },
            { v: "topo", l: "Topo" },
          ]} onChange={v => set("heroVariant", v)} />
        </Group>
        <Group label="SECTION INDICES">
          <Seg val={t.showIndices ? "on" : "off"} options={[
            { v: "on", l: "On" },
            { v: "off", l: "Off" },
          ]} onChange={v => set("showIndices", v === "on")} />
        </Group>
      </div>
    </div>
  );
}

function Group({ label, children }) {
  return (
    <div style={panelStyles.group}>
      <div style={panelStyles.groupLabel}>{label}</div>
      {children}
    </div>
  );
}

function Seg({ val, options, onChange }) {
  return (
    <div style={panelStyles.seg}>
      {options.map(o => (
        <button
          key={o.v}
          onClick={() => onChange(o.v)}
          style={{
            ...panelStyles.segBtn,
            ...(val === o.v ? panelStyles.segBtnActive : null)
          }}
        >{o.l}</button>
      ))}
    </div>
  );
}

const panelStyles = {
  wrap: {
    position: "fixed", right: 20, bottom: 20, zIndex: 999,
    width: 280, background: "#0a0a0a",
    border: "1px solid #3a3429",
    boxShadow: "0 24px 60px rgba(0,0,0,0.6)",
    fontFamily: "JetBrains Mono, ui-monospace, monospace",
    color: "#f3f1ea",
  },
  header: {
    display: "flex", justifyContent: "space-between", alignItems: "center",
    padding: "10px 14px",
    borderBottom: "1px solid #26221c",
    background: "#111110",
  },
  title: {
    fontSize: 11, letterSpacing: "0.12em", color: "#d97706", fontWeight: 600
  },
  close: {
    background: "none", border: "none", color: "#7a756a",
    fontSize: 22, lineHeight: 1, cursor: "pointer", padding: 0
  },
  body: { padding: 14, display: "flex", flexDirection: "column", gap: 16 },
  group: { display: "flex", flexDirection: "column", gap: 8 },
  groupLabel: {
    fontSize: 10, letterSpacing: "0.12em", color: "#7a756a", fontWeight: 500
  },
  seg: {
    display: "flex", border: "1px solid #26221c"
  },
  segBtn: {
    flex: 1, padding: "8px 10px", background: "transparent",
    border: "none", borderRight: "1px solid #26221c",
    color: "#b9b3a5", cursor: "pointer",
    fontFamily: "inherit", fontSize: 10, letterSpacing: "0.08em",
    textTransform: "uppercase", fontWeight: 500
  },
  segBtnActive: {
    background: "#d97706", color: "#0a0a0a"
  }
};

ReactDOM.createRoot(document.getElementById("__tweaks_root")).render(<TweaksApp />);