// Tweaks panel for Sabrana
const { useState: useStateTw, useEffect: useEffectTw } = React;

function Tweaks({ tweaks, onSet }) {
  const [active, setActive] = useStateTw(false);
  const [open, setOpen] = useStateTw(true);

  useEffectTw(() => {
    function handle(e) {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") setActive(true);
      if (d.type === "__deactivate_edit_mode") setActive(false);
    }
    window.addEventListener("message", handle);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handle);
  }, []);

  if (!active) return null;

  const accents = [
    { id: "burgundy", label: "Burgundy", color: "#6B1F2A" },
    { id: "oxblood", label: "Oxblood", color: "#58161E" },
    { id: "plum", label: "Plum", color: "#5A2A43" },
    { id: "claret", label: "Claret", color: "#7A2E3A" },
    { id: "ink", label: "Ink (mono)", color: "#1C1A17" },
  ];
  const palettes = [
    { id: "beige", label: "Beige (signature)" },
    { id: "ivory", label: "Ivory" },
    { id: "stone", label: "Stone" },
  ];
  const types = [
    { id: "cormorant", label: "Cormorant × Inter" },
    { id: "playfair", label: "Playfair × Inter" },
    { id: "dmserif", label: "DM Serif × DM Sans" },
  ];
  const headlines = [
    { id: "original", label: "Original" },
    { id: "atelier", label: "Atelier" },
    { id: "winery", label: "Winery" },
  ];

  return (
    <div className={"sbr-tweaks" + (open ? "" : " is-closed")}>
      <div className="sbr-tweaks-head">
        <div className="sbr-eyebrow">Tweaks</div>
        <button onClick={() => setOpen(!open)}>{open ? "–" : "+"}</button>
      </div>
      {open && (
        <div className="sbr-tweaks-body">
          <Group label="Accent">
            <div className="sbr-swatches">
              {accents.map((a) => (
                <button
                  key={a.id}
                  className={"sbr-swatch" + (tweaks.accent === a.id ? " is-on" : "")}
                  style={{ background: a.color }}
                  title={a.label}
                  onClick={() => onSet({ accent: a.id })}
                />
              ))}
            </div>
          </Group>
          <Group label="Palette">
            <Segmented
              options={palettes}
              value={tweaks.palette}
              onChange={(v) => onSet({ palette: v })}
            />
          </Group>
          <Group label="Type pairing">
            <Segmented
              options={types}
              value={tweaks.type}
              onChange={(v) => onSet({ type: v })}
            />
          </Group>
          <Group label="Hero headline">
            <Segmented
              options={headlines}
              value={tweaks.headline}
              onChange={(v) => onSet({ headline: v })}
            />
          </Group>
          <Group label="Density">
            <Segmented
              options={[
                { id: "airy", label: "Airy" },
                { id: "standard", label: "Standard" },
                { id: "dense", label: "Dense" },
              ]}
              value={tweaks.density}
              onChange={(v) => onSet({ density: v })}
            />
          </Group>
          <Group label="Cursor">
            <Segmented
              options={[
                { id: "on", label: "Custom" },
                { id: "off", label: "Native" },
              ]}
              value={tweaks.cursor}
              onChange={(v) => onSet({ cursor: v })}
            />
          </Group>
        </div>
      )}
    </div>
  );
}

function Group({ label, children }) {
  return (
    <div className="sbr-tweaks-group">
      <div className="sbr-tweaks-label">{label}</div>
      {children}
    </div>
  );
}

function Segmented({ options, value, onChange }) {
  return (
    <div className="sbr-segmented">
      {options.map((o) => (
        <button
          key={o.id}
          className={"sbr-seg" + (value === o.id ? " is-on" : "")}
          onClick={() => onChange(o.id)}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
}

window.Tweaks = Tweaks;