const { useState } = React;

function TweaksPanel({ tweaks, setTweaks, visible, onClose }) {
  if (!visible) return null;
  const set = (k, v) => setTweaks({ ...tweaks, [k]: v });
  return (
    <div style={{
      position: "fixed", right: 20, bottom: 20, zIndex: 100,
      width: 320, background: "var(--bg)", color: "var(--fg)",
      border: "1px solid var(--rule-2)", borderRadius: 16, padding: 20,
      boxShadow: "0 30px 60px -20px rgba(0,0,0,.5)",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
        <div className="mono" style={{ color: "var(--accent)" }}>TWEAKS</div>
        <button onClick={onClose} className="mono" style={{ color: "var(--fg-mute)" }}>CLOSE ×</button>
      </div>

      <Group label="Palette">
        <div style={{ display: "grid", gap: 8 }}>
          {Object.entries(PALETTES).map(([k, p]) => (
            <button key={k} onClick={() => set("palette", k)} style={{
              display: "flex", alignItems: "center", gap: 12, padding: "10px 12px",
              borderRadius: 10, background: tweaks.palette === k ? "var(--rule)" : "transparent",
              border: `1px solid ${tweaks.palette === k ? "var(--accent)" : "var(--rule-2)"}`,
            }}>
              <span style={{ width: 22, height: 22, borderRadius: 6, background: p.swatch, border: `2px solid ${p.bg}` }} />
              <span style={{ fontSize: 14, fontWeight: 500 }}>{p.name}</span>
            </button>
          ))}
        </div>
      </Group>

      <Group label="Hero">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6 }}>
          {Object.entries(HERO_VARIANTS).map(([k, name]) => (
            <button key={k} onClick={() => set("hero", k)} style={{
              padding: "10px 8px", fontFamily: "var(--mono)", fontSize: 10,
              letterSpacing: "0.08em", textTransform: "uppercase",
              borderRadius: 8,
              border: `1px solid ${tweaks.hero === k ? "var(--accent)" : "var(--rule-2)"}`,
              background: tweaks.hero === k ? "var(--accent)" : "transparent",
              color: tweaks.hero === k ? "var(--accent-ink)" : "var(--fg-mute)",
            }}>{name}</button>
          ))}
        </div>
      </Group>

      <Group label="Typography">
        <div style={{ display: "grid", gap: 6 }}>
          {Object.entries(TYPE_PAIRS).map(([k, p]) => (
            <button key={k} onClick={() => set("type", k)} style={{
              padding: "10px 12px", textAlign: "left", borderRadius: 8,
              border: `1px solid ${tweaks.type === k ? "var(--accent)" : "var(--rule-2)"}`,
              background: tweaks.type === k ? "var(--rule)" : "transparent",
              fontFamily: p.display, fontSize: 16, color: "var(--fg)",
            }}>{p.name}</button>
          ))}
        </div>
      </Group>
    </div>
  );
}

function Group({ label, children }) {
  return (
    <div style={{ marginBottom: 16 }}>
      <div className="mono" style={{ color: "var(--fg-mute)", marginBottom: 8 }}>{label.toUpperCase()}</div>
      {children}
    </div>
  );
}

Object.assign(window, { TweaksPanel });