// Tweaks panel · quick-access design knobs.

function TweaksPanel() {
  const { state, setSetting } = useStore();
  const [open, setOpen] = React.useState(false);
  const [available, setAvailable] = React.useState(false);

  React.useEffect(() => {
    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);
    // After listener is live, announce availability
    setTimeout(() => {
      window.parent.postMessage({ type: "__edit_mode_available" }, "*");
      setAvailable(true);
    }, 0);
    return () => window.removeEventListener("message", onMsg);
  }, []);

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

  if (!open) return null;

  const accents = [
    { label: "Indigo",  hue: 252 },
    { label: "Blue",    hue: 230 },
    { label: "Teal",    hue: 180 },
    { label: "Green",   hue: 152 },
    { label: "Amber",   hue: 70  },
    { label: "Rose",    hue: 12  },
  ];

  return (
    <div id="exos-tweaks-host" className="exos-tweaks-panel">
      <div className="exos-tweaks-head">
        <div className="exos-tweaks-title">Tweaks</div>
        <button className="exos-icon-btn" onClick={close}><Icons.Close size={14} /></button>
      </div>
      <div className="exos-tweaks-body">
        <div className="exos-tweaks-section">
          <div className="exos-label">Theme</div>
          <div style={{ display: "flex", gap: 4, marginTop: 8 }}>
            <Button size="sm" variant={state.settings.theme === "dark" ? "primary" : "secondary"}
              icon={<Icons.Moon size={13} />} onClick={() => setSetting("theme", "dark")}>Dark</Button>
            <Button size="sm" variant={state.settings.theme === "light" ? "primary" : "secondary"}
              icon={<Icons.Sun size={13} />} onClick={() => setSetting("theme", "light")}>Light</Button>
          </div>
        </div>

        <div className="exos-tweaks-section">
          <div className="exos-label">Accent</div>
          <div className="exos-tweaks-accents">
            {accents.map(a => (
              <button key={a.hue} className={`exos-tweaks-accent ${state.settings.accentHue === a.hue ? "on" : ""}`}
                title={a.label}
                onClick={() => setSetting("accentHue", a.hue)}
                style={{ background: `oklch(0.72 0.14 ${a.hue})` }}>
                {state.settings.accentHue === a.hue && <Icons.Check size={12} />}
              </button>
            ))}
          </div>
        </div>

        <div className="exos-tweaks-section">
          <div className="exos-label">Density</div>
          <div style={{ display: "flex", gap: 4, marginTop: 8 }}>
            {["compact", "default", "cozy"].map(d => (
              <Button key={d} size="sm" variant={state.settings.density === d ? "primary" : "secondary"}
                onClick={() => setSetting("density", d)}>{d}</Button>
            ))}
          </div>
        </div>

        <div className="exos-tweaks-section">
          <div className="exos-label">Currency</div>
          <div style={{ display: "flex", gap: 4, marginTop: 8, flexWrap: "wrap" }}>
            {Object.keys(FX).map(c => (
              <Button key={c} size="sm" variant={state.settings.currency === c ? "primary" : "secondary"}
                onClick={() => setSetting("currency", c)}>{c}</Button>
            ))}
          </div>
        </div>

        <div className="exos-tweaks-section">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div>
              <div className="exos-label" style={{ marginBottom: 2 }}>AI features</div>
              <div style={{ fontSize: 11, color: "var(--text-dim)" }}>Plan narrator + Greed Coach</div>
            </div>
            <Toggle checked={state.settings.aiEnabled} onChange={v => setSetting("aiEnabled", v)} />
          </div>
        </div>
      </div>
    </div>
  );
}

const TWEAKS_STYLES = `
.exos-tweaks-panel {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  width: 280px; background: var(--bg-elev);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: var(--shadow-lg);
  animation: tweak-in .25s cubic-bezier(.16,1,.3,1);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
@media (max-width: 760px) {
  .exos-tweaks-panel {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: 12px; left: 12px;
    width: auto;
    max-height: 70vh;
  }
}
@keyframes tweak-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.exos-tweaks-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.exos-tweaks-title { font-weight: 500; font-size: 13px; }
.exos-tweaks-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 14px; }
.exos-tweaks-section { display: flex; flex-direction: column; gap: 4px; }
.exos-tweaks-accents { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.exos-tweaks-accent {
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; color: white;
  border: 2px solid transparent; transition: border-color .15s, transform .12s;
}
.exos-tweaks-accent:hover { transform: scale(1.08); }
.exos-tweaks-accent.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }
`;
(function(){ if(document.getElementById("exos-tweaks-styles")) return; const t=document.createElement("style"); t.id="exos-tweaks-styles"; t.textContent=TWEAKS_STYLES; document.head.appendChild(t); })();

window.TweaksPanel = TweaksPanel;