// ============ Stagify - Tweaks ============

const TweaksPanel = ({ tweaks, setTweaks, visible, onClose }) => {
  if (!visible) return null;

  const set = (k, v) => setTweaks({ ...tweaks, [k]: v });

  const palettes = [
    { k: "ink", c: "#1e3a2c" },
    { k: "ocean", c: "#1f3a5f" },
    { k: "sand", c: "#c4603a" },
    { k: "mono", c: "#0a0a0a" },
  ];

  return (
    <div className="tweaks">
      <div className="tweaks__h">
        <div className="tweaks__title">Tweaks</div>
        <button className="tweaks__close" onClick={onClose} aria-label="Close"><Icon name="x" size={14}/></button>
      </div>

      <div className="tweaks__row">
        <label className="tweaks__label">Palette</label>
        <div className="tweaks__opts">
          {palettes.map(p => (
            <button
              key={p.k}
              className={`tweaks__swatch ${tweaks.palette === p.k ? "is-active" : ""}`}
              style={{ background: p.c }}
              onClick={() => set("palette", p.k)}
              title={p.k}
            />
          ))}
        </div>
      </div>

      <div className="tweaks__row">
        <label className="tweaks__label">Typography</label>
        <div className="tweaks__opts">
          {["editorial", "grotesque", "humanist", "rounded", "neutral"].map(t => (
            <button key={t} className={`tweaks__opt ${tweaks.typography === t ? "is-active" : ""}`} onClick={() => set("typography", t)}>{t}</button>
          ))}
        </div>
      </div>

      <div className="tweaks__row">
        <label className="tweaks__label">Theme</label>
        <div className="tweaks__opts">
          {["light", "dark"].map(t => (
            <button key={t} className={`tweaks__opt ${tweaks.theme === t ? "is-active" : ""}`} onClick={() => set("theme", t)}>{t}</button>
          ))}
        </div>
      </div>

      <div className="tweaks__row">
        <label className="tweaks__label">Density</label>
        <div className="tweaks__opts">
          {["airy", "compact"].map(t => (
            <button key={t} className={`tweaks__opt ${tweaks.density === t ? "is-active" : ""}`} onClick={() => set("density", t)}>{t}</button>
          ))}
        </div>
      </div>

      <div className="tweaks__row">
        <label className="tweaks__label">Hero variant</label>
        <div className="tweaks__opts">
          {[1, 2, 3].map(v => (
            <button key={v} className={`tweaks__opt ${tweaks.heroVariant === v ? "is-active" : ""}`} onClick={() => set("heroVariant", v)}>v{v}</button>
          ))}
        </div>
      </div>

      <div className="tweaks__row" style={{ marginTop: 18, paddingTop: 14, borderTop: "1px solid var(--c-line)" }}>
        <label className="tweaks__label">Export for developer</label>
        <ExportActions tweaks={tweaks}/>
      </div>
    </div>
  );
};

// Resolves tweak names → concrete token values so devs get hex codes, not labels.
const PALETTES = {
  ink:   { accent: "#1e3a2c", highlight: "#e8dcc5", signal: "#c4603a", paper: "#f6f3ec", paper2: "#eeeae0" },
  ocean: { accent: "#1f3a5f", highlight: "#d9e6f2", signal: "#3a7bbf", paper: "#f4f5f7", paper2: "#e9ebef" },
  sand:  { accent: "#1a1a1a", highlight: "#eadcc0", signal: "#c4603a", paper: "#faf6ee", paper2: "#f0ead9" },
  mono:  { accent: "#0a0a0a", highlight: "#f0f0ed", signal: "#0a0a0a", paper: "#ffffff", paper2: "#f5f4f0" },
};
const FONTS = {
  editorial: { display: "Fraunces", body: "Inter" },
  grotesque: { display: "Schibsted Grotesk", body: "Inter" },
  humanist:  { display: "DM Sans",  body: "DM Sans" },
  rounded:   { display: "Manrope",  body: "Manrope" },
  neutral:   { display: "Geist",    body: "Geist" },
};

const resolveTokens = (tweaks) => ({
  tweaks,
  palette: PALETTES[tweaks.palette],
  fonts:   FONTS[tweaks.typography],
  theme:   tweaks.theme,
  density: tweaks.density,
  hero:    `variant-${tweaks.heroVariant}`,
  compare: tweaks.compareStyle,
});

const ExportActions = ({ tweaks }) => {
  const [copied, setCopied] = React.useState(false);

  const copyJSON = () => {
    const payload = resolveTokens(tweaks);
    navigator.clipboard.writeText(JSON.stringify(payload, null, 2));
    setCopied(true); setTimeout(() => setCopied(false), 1400);
  };

  const download = () => {
    const payload = resolveTokens(tweaks);
    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = "design-tokens.json";
    document.body.appendChild(a); a.click(); a.remove();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <button className="tweaks__opt" style={{ textAlign: "left" }} onClick={copyJSON}>
        {copied ? "✓ Copied" : "Copy resolved JSON"}
      </button>
      <button className="tweaks__opt" style={{ textAlign: "left" }} onClick={download}>
        Download design-tokens.json
      </button>
    </div>
  );
};

Object.assign(window, { TweaksPanel });