/* global React */
const { useState: useTwState, useEffect: useTwEffect, useRef: useTwRef } = React;

// ============================================
// SITE CONTROLLER — tweaks panel + konami code
// Runs on every page.
// ============================================
function SiteController() {
  const DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "blue",
    "type": "geist",
    "hero_motion": "morph",
    "density": "comfortable",
    "grain": 0.04,
    "retro": false
  }/*EDITMODE-END*/;

  const [state, setState] = useTwState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem("piluski.settings") || "null");
      return { ...DEFAULTS, ...(saved || {}) };
    } catch (e) {
      return { ...DEFAULTS };
    }
  });
  const [open, setOpen] = useTwState(false);
  const [showRetroToast, setShowRetroToast] = useTwState(false);

  // Apply state to DOM
  useTwEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-accent", state.accent);
    r.setAttribute("data-type", state.type);
    r.setAttribute("data-density", state.density);
    r.setAttribute("data-retro", state.retro ? "on" : "off");
    r.style.setProperty("--grain", state.grain);
    localStorage.setItem("piluski.settings", JSON.stringify(state));
  }, [state]);

  // Edit-mode host bridge
  useTwEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === "__activate_edit_mode") setOpen(true);
      if (e.data?.type === "__deactivate_edit_mode") setOpen(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  // Save partial to host
  const update = (patch) => {
    setState((s) => {
      const next = { ...s, ...patch };
      try {
        window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*");
      } catch (e) {}
      return next;
    });
  };

  useTwEffect(() => {
    const onBuddyClick = () => triggerRetro();
    window.addEventListener("buddy-click", onBuddyClick);
    return () => window.removeEventListener("buddy-click", onBuddyClick);
  }, [state.retro]);

  const triggerRetro = () => {
    update({ retro: !state.retro });
    window.track('retro_mode_toggle', { state: state.retro ? 'off' : 'on' });
    setShowRetroToast(true);
    setTimeout(() => setShowRetroToast(false), 2800);
  };

  const accentOptions = [
    { key: "violet", color: "#7c6aff" },
    { key: "blue", color: "#5b8dff" },
    { key: "white", color: "#f5f5f7" },
    { key: "orange", color: "#ff7a59" },
    { key: "teal", color: "#4fd1c5" },
  ];

  const typeOptions = [
    { key: "geist", label: "Geist" },
    { key: "general", label: "General Sans" },
    { key: "inter", label: "Inter Tight" },
    { key: "satoshi", label: "Satoshi" },
    { key: "serif", label: "Instrument Serif" },
  ];

  return (
    <>
      <div className={"tweaks " + (open ? "tweaks--open" : "")}>
        <div className="tweaks__title">
          <span>◎ Tweaks</span>
          <button className="tweaks__close" onClick={() => setOpen(false)} aria-label="Close">×</button>
        </div>

        <div className="tweaks__group">
          <div className="tweaks__label">Accent</div>
          <div className="tweaks__swatches">
            {accentOptions.map((o) => (
              <button
                key={o.key}
                className="tweaks__swatch"
                data-active={state.accent === o.key}
                style={{ background: o.color }}
                onClick={() => update({ accent: o.key })}
                aria-label={o.key}
              />
            ))}
          </div>
        </div>

        <div className="tweaks__group">
          <div className="tweaks__label">Typography</div>
          <select
            className="tweaks__select"
            value={state.type}
            onChange={(e) => update({ type: e.target.value })}
          >
            {typeOptions.map((o) => (
              <option key={o.key} value={o.key}>{o.label}</option>
            ))}
          </select>
        </div>

        <div className="tweaks__group">
          <div className="tweaks__label">Density</div>
          <div className="tweaks__seg">
            {["compact", "comfortable"].map((d) => (
              <button
                key={d}
                className="tweaks__seg-btn"
                data-active={state.density === d}
                onClick={() => update({ density: d })}
              >
                {d[0].toUpperCase() + d.slice(1)}
              </button>
            ))}
          </div>
        </div>

        <div className="tweaks__group">
          <div className="tweaks__label">
            Grain <b>{Math.round(state.grain * 100)}%</b>
          </div>
          <input
            type="range"
            className="tweaks__range"
            min="0" max="0.14" step="0.01"
            value={state.grain}
            onChange={(e) => update({ grain: parseFloat(e.target.value) })}
          />
        </div>

        <div className="tweaks__group">
          <button
            className="tweaks__toggle"
            data-on={state.retro}
            onClick={() => update({ retro: !state.retro })}
          >
            <span>Retro mode</span>
            <span className="tweaks__toggle-ind" />
          </button>
        </div>
      </div>

      {showRetroToast && (
        <div className="retro-toast">
          <div className="retro-toast__title">◆ Cheat activated ◆</div>
          <div className="retro-toast__sub">Retro mode {state.retro ? "ON" : "OFF"}</div>
        </div>
      )}
    </>
  );
}

window.SiteController = SiteController;