/* global React */
// Tweaks panel — floats in bottom-right when edit mode is on.

function TweaksPanel({ tweaks, setTweak }) {
  const [open, setOpen] = useState(true);
  return (
    <div style={{
      position: "fixed", bottom: 16, right: 16, zIndex: 1000,
      width: open ? 320 : 56, transition: "width .3s var(--ease-apple)",
      background: "var(--surface-card)", border: "1px solid var(--border)",
      borderRadius: 20, boxShadow: "0 16px 32px -8px rgba(12,10,9,0.18)",
      fontFamily: "var(--font-sans)", color: "var(--fg-1)", overflow: "hidden"
    }}>
      <button onClick={() => setOpen(o => !o)}
        style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "14px 18px", background: "transparent", border: "none", cursor: "pointer",
          borderBottom: open ? "1px solid var(--border)" : "none" }}>
        <span style={{ fontSize: 13, fontWeight: 500, letterSpacing: "0.04em",
          textTransform: "uppercase" }}>{open ? "Tweaks" : "⚙"}</span>
        {open && <span style={{ fontSize: 14, color: "var(--fg-3)" }}>–</span>}
      </button>
      {open && (
        <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 14,
          maxHeight: "70vh", overflowY: "auto" }}>
          <Row label="Concept">
            <Select value={tweaks.concept} onChange={v => setTweak("concept", v)}
              options={TWEAK_OPTIONS.concept.map(o => ({ value: o.id, label: o.label }))}/>
          </Row>
          <Row label="Theme">
            <Seg value={tweaks.theme} onChange={v => setTweak("theme", v)}
              options={[{ value: "light", label: "Light" }, { value: "dark", label: "Dark" }]}/>
          </Row>
          <Row label="Animation speed">
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <input type="range" min="0.5" max="2" step="0.1" value={tweaks.animationSpeed}
                onChange={e => setTweak("animationSpeed", Number(e.target.value))}
                style={{ flex: 1 }}/>
              <span style={{ fontSize: 12, color: "var(--fg-3)", width: 32, textAlign: "right" }}>
                {Number(tweaks.animationSpeed).toFixed(1)}×</span>
            </div>
          </Row>
          <Row label="Headline">
            <TextInput value={tweaks.ctaHeadline} onChange={v => setTweak("ctaHeadline", v)}/>
          </Row>
          <Row label="Subhead">
            <TextInput value={tweaks.ctaSubhead} onChange={v => setTweak("ctaSubhead", v)}/>
          </Row>
          <Row label="Incentive copy">
            <TextInput value={tweaks.incentiveCopy} onChange={v => setTweak("incentiveCopy", v)}/>
          </Row>
          <Row label="Email button">
            <TextInput value={tweaks.emailButton} onChange={v => setTweak("emailButton", v)}/>
          </Row>
          <Row label="Event line">
            <TextInput value={tweaks.eventLine} onChange={v => setTweak("eventLine", v)}/>
          </Row>
          <Row label="Industries (comma-sep)">
            <TextInput value={tweaks.industries} onChange={v => setTweak("industries", v)} multi/>
          </Row>
        </div>
      )}
    </div>
  );
}

function Row({ label, children }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.04em",
        textTransform: "uppercase" }}>{label}</span>
      {children}
    </label>
  );
}

function TextInput({ value, onChange, multi }) {
  const Tag = multi ? "textarea" : "input";
  return (
    <Tag value={value} onChange={e => onChange(e.target.value)}
      rows={multi ? 2 : undefined}
      style={{ fontSize: 13, padding: "8px 10px", border: "1px solid var(--border)",
        borderRadius: 10, background: "var(--bg)", color: "var(--fg-1)",
        fontFamily: "var(--font-sans)", outline: "none",
        resize: multi ? "vertical" : "none" }}/>
  );
}

function Seg({ value, onChange, options }) {
  return (
    <div style={{ display: "flex", gap: 4, padding: 4, borderRadius: 9999,
      background: "var(--bg-muted)", border: "1px solid var(--border)" }}>
      {options.map(o => (
        <button key={o.value} onClick={() => onChange(o.value)}
          style={{ flex: 1, padding: "6px 10px", borderRadius: 9999, border: "none", cursor: "pointer",
            fontSize: 12, fontWeight: 500,
            background: value === o.value ? "var(--stone-950)" : "transparent",
            color: value === o.value ? "#fff" : "var(--fg-2)" }}>
          {o.label}
        </button>
      ))}
    </div>
  );
}

function Select({ value, onChange, options }) {
  return (
    <select value={value} onChange={e => onChange(e.target.value)}
      style={{ fontSize: 13, padding: "8px 10px", border: "1px solid var(--border)",
        borderRadius: 10, background: "var(--bg)", color: "var(--fg-1)",
        fontFamily: "var(--font-sans)", outline: "none" }}>
      {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
    </select>
  );
}

Object.assign(window, { TweaksPanel });
