// Tweaks panel
const TWEAK_DEFAULS = window.__TWEAKS__;

const TweaksPanel = ({ style, setStyle }) => {
  const [active, setActive] = React.useState(false);

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

  if (!active) return null;

  const styles = [
    { k: "dossier",  zh: "档案袋",   en: "DOSSIER",   hint: "深色 + 牛皮纸卡片 + 红印章" },
    { k: "redacted", zh: "机密文件", en: "REDACTED",  hint: "白纸 + 打字机 + 涂黑" },
    { k: "casewall", zh: "案件墙",   en: "CASE WALL", hint: "拍立得 + 图钉 + 红线" },
  ];

  return (
    <div style={{
      position: "fixed", bottom: 20, right: 20,
      width: 320, background: "#14110f",
      border: "1px solid #8b0000",
      color: "#e8e2d0",
      fontFamily: "'JetBrains Mono',monospace",
      fontSize: 11, letterSpacing: 1,
      zIndex: 9999,
      boxShadow: "0 30px 80px -10px rgba(0,0,0,0.9)",
    }}>
      <div style={{
        padding: "10px 14px", borderBottom: "1px solid #2a2620",
        background: "#8b0000", color: "#f4ecd8",
        display: "flex", justifyContent: "space-between",
      }}>
        <span>// TWEAKS · 设计面板</span>
        <span>v.12</span>
      </div>
      <div style={{ padding: 14 }}>
        <div style={{ fontSize: 10, letterSpacing: 2, color: "#a89b78", marginBottom: 10 }}>
          ▸ 视觉风格 / STYLE VARIANT
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {styles.map(s => {
            const on = style === s.k;
            return (
              <button key={s.k} onClick={() => {
                setStyle(s.k);
                window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { style: s.k } }, "*");
              }} style={{
                padding: "10px 12px",
                border: `1px solid ${on ? "#8b0000" : "#2a2620"}`,
                background: on ? "#2a0808" : "transparent",
                color: "#e8e2d0", textAlign: "left",
                display: "flex", flexDirection: "column", gap: 2,
              }}>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <span style={{ color: on ? "#a81515" : "#e8e2d0", letterSpacing: 2 }}>{s.en}</span>
                  <span style={{ fontFamily: "'Noto Serif SC',serif" }}>{s.zh}</span>
                </div>
                <span style={{ fontSize: 10, color: "#a89b78" }}>{s.hint}</span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};

window.TweaksPanel = TweaksPanel;