// ============================================================
// TWEAKS PANEL
// ============================================================

function Tweaks() {
  const [open, setOpen] = useState(false);
  const [accent, setAccent] = useState(window.__TWEAK_DEFAULTS?.accent || "sapphire");
  const [bg, setBg] = useState(window.__TWEAK_DEFAULTS?.bg || "black");
  const [era, setEra] = useState(window.__TWEAK_DEFAULTS?.era || "modern");
  const [mode, setMode] = useState(window.__TWEAK_DEFAULTS?.mode || "dark");
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === "__activate_edit_mode") { setEnabled(true); setOpen(true); }
      if (e.data.type === "__deactivate_edit_mode") { setEnabled(false); setOpen(false); }
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const apply = (key, val) => {
    if (key === "accent") { setAccent(val); document.documentElement.dataset.accent = val; }
    else if (key === "bg") { setBg(val); document.documentElement.dataset.bg = val; }
    else if (key === "era") { setEra(val); document.documentElement.dataset.era = val; }
    else if (key === "mode") { setMode(val); document.documentElement.dataset.mode = val; }
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: val } }, "*");
  };

  if (!enabled) return null;

  const accents = [
    { id: "sapphire", label: "Sapphire", swatch: "#6487b8" },
    { id: "sage", label: "Sage", swatch: "#87a06f" },
    { id: "bordeaux", label: "Bordeaux", swatch: "#a34a56" },
    { id: "gold", label: "Gold", swatch: "#C9A961" },
    { id: "platinum", label: "Platinum", swatch: "#A7ABA7" },
  ];
  const bgs = [
    { id: "black", label: "Obsidian", swatch: "#060504" },
    { id: "brown", label: "Umber", swatch: "#1a120a" },
    { id: "charcoal", label: "Charcoal", swatch: "#14161a" },
  ];
  const modes = [
    { id: "dark", label: "Dark" },
    { id: "light", label: "Ivory" },
  ];
  const eras = [
    { id: "modern", label: "Modern" },
    { id: "classic", label: "Classic" },
  ];

  return (
    <div className={"tweaks " + (open ? "open" : "")}>
      <h4>Tweaks</h4>
      <div className="tweak-row">
        <div className="tweak-label">Mode</div>
        <div className="tweak-options">
          {modes.map((m) => (
            <button key={m.id} className={"tweak-chip " + (mode===m.id ? "on" : "")} onClick={() => apply("mode", m.id)}>{m.label}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <div className="tweak-label">Era</div>
        <div className="tweak-options">
          {eras.map((e) => (
            <button key={e.id} className={"tweak-chip " + (era===e.id ? "on" : "")} onClick={() => apply("era", e.id)}>{e.label}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <div className="tweak-label">Accent</div>
        <div className="tweak-options">
          {accents.map((a) => (
            <button key={a.id} className={"tweak-chip " + (accent===a.id ? "on" : "")} onClick={() => apply("accent", a.id)}>
              <span className="swatch" style={{background: a.swatch}}></span>{a.label}
            </button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <div className="tweak-label">Background</div>
        <div className="tweak-options">
          {bgs.map((b) => (
            <button key={b.id} className={"tweak-chip " + (bg===b.id ? "on" : "")} onClick={() => apply("bg", b.id)}>
              <span className="swatch" style={{background: b.swatch, border:"1px solid #333"}}></span>{b.label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}
window.Tweaks = Tweaks;