// tweaks-panel.jsx — useTweaks hook + dev-only tweaks panel

const { useState, useCallback } = React;

function useTweaks(defaults) {
  const [values, setValues] = useState({ ...defaults });
  const set = useCallback((key, val) => {
    setValues(prev => ({ ...prev, [key]: val }));
  }, []);
  return [values, set];
}

function TweaksPanel({ title, children }) {
  const [open, setOpen] = useState(false);
  if (!open) {
    return (
      <button
        className="tweaks-fab"
        onClick={() => setOpen(true)}
        title="Open tweaks panel"
        aria-label="Open tweaks panel"
      >
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="3"/>
          <path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/>
        </svg>
      </button>
    );
  }
  return (
    <div className="tweaks-panel" role="complementary" aria-label={title}>
      <div className="tweaks-panel-header">
        <span>{title}</span>
        <button className="tweaks-close" onClick={() => setOpen(false)} aria-label="Close tweaks panel">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
        </button>
      </div>
      <div className="tweaks-body">{children}</div>
    </div>
  );
}

function TweakSection({ label }) {
  return <div className="tweak-section-label">{label}</div>;
}

function TweakSlider({ label, value, min, max, step, onChange }) {
  const display = Number.isInteger(step) ? value : Number(value).toFixed(2);
  return (
    <label className="tweak-row">
      <span className="tweak-key">{label}</span>
      <input
        type="range" min={min} max={max} step={step} value={value}
        onChange={e => onChange(Number(e.target.value))}
        className="tweak-range"
      />
      <span className="tweak-val">{display}</span>
    </label>
  );
}

function TweakToggle({ label, value, onChange }) {
  return (
    <div className="tweak-row tweak-toggle-row" role="switch" aria-checked={value} tabIndex={0}
      onClick={() => onChange(!value)}
      onKeyDown={e => (e.key === " " || e.key === "Enter") && onChange(!value)}
    >
      <span className="tweak-key">{label}</span>
      <div className={`tweak-pill ${value ? "on" : ""}`}><div /></div>
    </div>
  );
}

function TweakRadio({ label, value, options, onChange }) {
  return (
    <div className="tweak-row">
      <span className="tweak-key">{label}</span>
      <div className="tweak-opts">
        {options.map(opt => (
          <button
            key={opt}
            className={`tweak-opt ${opt === value ? "on" : ""}`}
            onClick={() => onChange(opt)}
          >{opt}</button>
        ))}
      </div>
    </div>
  );
}

function TweakColor({ label, value, options, onChange }) {
  return (
    <div className="tweak-row">
      <span className="tweak-key">{label}</span>
      <div className="tweak-swatches">
        {options.map((colors, i) => {
          const active = JSON.stringify(colors) === JSON.stringify(value);
          return (
            <button
              key={i}
              className={`tweak-swatch ${active ? "on" : ""}`}
              onClick={() => onChange(colors)}
              style={{
                background: `linear-gradient(135deg, ${colors[3] || "#000"} 0%, ${colors[0] || "#fff"} 100%)`
              }}
            />
          );
        })}
      </div>
    </div>
  );
}

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