/* global React */
const { useState, useRef } = React;

// Minimal tweaks panel — collapsible side drawer
function TweaksPanel({ title = "Tweaks", children }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button
        onClick={() => setOpen(!open)}
        style={{ position: "fixed", bottom: 20, left: open ? 260 : 20, zIndex: 200, width: 32, height: 32, borderRadius: "50%", background: "var(--bg-3)", border: "1px solid var(--line-2)", color: "var(--text-2)", display: "grid", placeItems: "center", transition: "left 0.2s", fontSize: 14, fontFamily: "var(--font-mono)" }}
        title="Tweaks"
      >⚙</button>
      {open && (
        <div style={{ position: "fixed", left: 0, top: 0, bottom: 0, width: 260, background: "var(--bg-1)", borderRight: "1px solid var(--line)", zIndex: 199, overflowY: "auto", padding: "48px 0 20px" }}>
          <div style={{ padding: "0 14px 12px", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--text-3)" }}>{title}</div>
          {children}
        </div>
      )}
    </>
  );
}

function TweakSection({ title, children }) {
  return (
    <div style={{ borderTop: "1px solid var(--line)", padding: "12px 14px" }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--text-3)", marginBottom: 10 }}>{title}</div>
      {children}
    </div>
  );
}

function TweakRow({ label, children }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "5px 0" }}>
      <span style={{ fontSize: 11, color: "var(--text-1)" }}>{label}</span>
      {children}
    </div>
  );
}

function TweakToggle({ label, value, onChange }) {
  return (
    <TweakRow label={label}>
      <div className={`toggle ${value ? "on" : ""}`} onClick={() => onChange(!value)} />
    </TweakRow>
  );
}

function TweakRadio({ label, value, options, onChange }) {
  return (
    <div style={{ marginBottom: 8 }}>
      <div style={{ fontSize: 11, color: "var(--text-2)", marginBottom: 6 }}>{label}</div>
      <div style={{ display: "flex", gap: 4 }}>
        {options.map((o) => (
          <button
            key={o.value}
            className={`btn sm ${value === o.value ? "" : "ghost"}`}
            style={{ fontSize: 10, padding: "3px 8px" }}
            onClick={() => onChange(o.value)}
          >{o.label}</button>
        ))}
      </div>
    </div>
  );
}

function TweakColor({ label, value, onChange }) {
  return (
    <TweakRow label={label}>
      <input type="color" value={value} onChange={(e) => onChange(e.target.value)} style={{ width: 28, height: 22, border: 0, background: "none", cursor: "pointer", padding: 0 }} />
    </TweakRow>
  );
}

function TweakButton({ label, onClick }) {
  return (
    <button className="btn sm ghost" style={{ width: "100%", marginTop: 4 }} onClick={onClick}>{label}</button>
  );
}

function useTweaks(defaults) {
  const [tweaks, setTweaks] = useState(defaults);
  const setTweak = (key, value) => setTweaks((t) => ({ ...t, [key]: value }));
  return [tweaks, setTweak];
}

Object.assign(window, { TweaksPanel, TweakSection, TweakToggle, TweakRadio, TweakColor, TweakButton, useTweaks });