// Tweaks: color theme + font pairing swapper
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "warm",
  "font": "classic"
}/*EDITMODE-END*/;

function Tweaks() {
  const [on, setOn] = useState(false);
  const [theme, setTheme] = useState(TWEAK_DEFAULTS.theme);
  const [font, setFont] = useState(TWEAK_DEFAULTS.font);

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);
  useEffect(() => {
    document.documentElement.setAttribute("data-font", font);
  }, [font]);

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

  const persist = (k, v) => {
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };

  const themes = [
    { id: "warm", label: "Warm", chip: "linear-gradient(135deg, #f4ecdd, #a24a1c)" },
    { id: "cool", label: "Cool", chip: "linear-gradient(135deg, #eae7df, #3e6780)" },
    { id: "dark", label: "Dark", chip: "linear-gradient(135deg, #17110a, #e69447)" },
  ];
  const fonts = [
    { id: "classic", label: "Classic" },
    { id: "modern", label: "Modern" },
    { id: "editorial", label: "Editor." },
  ];

  if (!on) return null;

  return (
    <div className="tweaks-panel open">
      <h5>Tweaks</h5>
      <div className="group">
        <div className="mono" style={{ fontSize: 10, marginBottom: 8, color: "var(--ink-soft)" }}>Color theme</div>
        <div className="swatches">
          {themes.map((t) => (
            <div
              key={t.id}
              className={`sw ${theme === t.id ? "active" : ""}`}
              onClick={() => { setTheme(t.id); persist("theme", t.id); }}
            >
              <span className="chip" style={{ background: t.chip }} />
              {t.label}
            </div>
          ))}
        </div>
      </div>
      <div className="group">
        <div className="mono" style={{ fontSize: 10, marginBottom: 8, color: "var(--ink-soft)" }}>Typography</div>
        <div className="swatches">
          {fonts.map((f) => (
            <div
              key={f.id}
              className={`sw ${font === f.id ? "active" : ""}`}
              onClick={() => { setFont(f.id); persist("font", f.id); }}
            >
              <span
                className="chip"
                style={{
                  background: "transparent",
                  height: "auto",
                  fontFamily: f.id === "modern" ? "Fraunces, serif" : f.id === "editorial" ? "Lora, serif" : "Fraunces, serif",
                  fontStyle: f.id === "classic" ? "italic" : "normal",
                  fontSize: 18,
                  color: "var(--accent)",
                }}
              >
                Aa
              </span>
              {f.label}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Tweaks = Tweaks;