/* Tweaks panel — accent/layout/grid controls */
function Tweaks({ state, setState }) {
  const [active, setActive] = React.useState(false);

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

  const update = (k, v) => {
    const next = { ...state, [k]: v };
    setState(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };

  if (!active) return null;

  const Row = ({ label, value, options, onChange }) => (
    <div style={{ marginBottom: "1rem" }}>
      <div style={{ fontSize: ".64rem", color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".1em", fontWeight: 700, marginBottom: ".45rem" }}>{label}</div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: ".35rem" }}>
        {options.map(([v, l, dot]) => (
          <button key={v} onClick={() => onChange(v)} style={{
            display: "inline-flex", alignItems: "center", gap: ".35rem",
            padding: ".45rem .7rem", borderRadius: 7,
            fontSize: ".72rem", fontWeight: 600,
            border: "1px solid " + (value === v ? "var(--accent-border)" : "var(--border)"),
            background: value === v ? "var(--accent-dim)" : "transparent",
            color: value === v ? "var(--accent-light)" : "var(--text-dim)",
          }}>
            {dot && <span style={{ width: 8, height: 8, borderRadius: "50%", background: dot }}/>}
            {l}
          </button>
        ))}
      </div>
    </div>
  );

  return (
    <div style={{
      position: "fixed", right: 20, bottom: 20, zIndex: 100,
      background: "rgba(10,10,12,0.95)", backdropFilter: "blur(16px)",
      border: "1px solid var(--accent-border)",
      borderRadius: 14, padding: "1.1rem 1.2rem",
      minWidth: 280, boxShadow: "0 20px 60px rgba(0,0,0,0.6), 0 0 30px var(--accent-glow)",
    }}>
      <div style={{ fontSize: ".72rem", color: "var(--white)", fontWeight: 800, letterSpacing: ".06em", textTransform: "uppercase", marginBottom: "1rem", display: "flex", alignItems: "center", gap: ".5rem" }}>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", boxShadow: "0 0 8px var(--accent-glow)" }}/>
        Tweaks
      </div>
      <Row label="Hero layout" value={state.heroLayout}
        options={[["split", "Split"], ["dashboard", "Dashboard"], ["center", "Statement"]]}
        onChange={(v) => update("heroLayout", v)}/>
      <Row label="Accent" value={state.accent}
        options={[
          ["ember", "Ember", "#F27A1A"],
          ["amber", "Amber", "#E8B000"],
          ["electric", "Lime", "#4ADE80"],
          ["violet", "Violet", "#A855F7"],
          ["ice", "Ice", "#60A5FA"],
        ]}
        onChange={(v) => update("accent", v)}/>
      <Row label="Grid backdrop" value={state.grid}
        options={[["subtle", "Subtle"], ["dense", "Dense"], ["off", "Off"]]}
        onChange={(v) => update("grid", v)}/>
    </div>
  );
}
window.Tweaks = Tweaks;