// TweaksPanel.jsx
function TweaksPanel({ visible, tweaks, setTweaks }) {
  if (!visible) return null;

  const OPTIONS = {
    accent: [["reason-teal", "Reason teal"], ["indigo", "Indigo"], ["blue", "Classic blue"]],
    customerTag: [["pill", "Green pill"], ["border", "Left border"], ["tint", "Background tint"], ["ribbon", "Corner ribbon"]],
    oversight: [["amberBar", "Amber banner"], ["floating", "Floating labels"], ["ghost", "Ghost row"], ["hidden", "Hidden"]],
    dimMode: [["opacity25", "Dim to 25%"], ["desaturate", "Dim + desaturate"], ["collapse", "Collapse / hide"]],
  };
  const LABELS = {
    accent: "Accent hue",
    customerTag: "Customer tag",
    oversight: "Oversight strip",
    dimMode: "Filter dim behavior",
  };
  const set = (k, v) => setTweaks({ ...tweaks, [k]: v });

  return (
    <div className="fixed bottom-6 right-6 z-[60] w-[340px] surface-solid rounded-xl shadow-2xl no-print">
      <div className="px-4 py-3 border-b border-[color:var(--line)] flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="stage-node" />
          <span className="font-display text-[15px] font-medium text-[color:var(--ink)]">Tweaks</span>
        </div>
        <span className="eyebrow">Live</span>
      </div>
      <div className="p-4 space-y-4 max-h-[70vh] overflow-y-auto nice-scroll">
        {Object.keys(OPTIONS).map(key => (
          <div key={key}>
            <div className="eyebrow mb-2">{LABELS[key]}</div>
            <div className="flex flex-wrap gap-1">
              {OPTIONS[key].map(([val, label]) => (
                <button key={val} onClick={() => set(key, val)}
                  className={`text-[10.5px] font-mono uppercase tracking-[0.18em] px-2 py-1 rounded border ${tweaks[key] === val ? "pill-active" : "pill"}`}>
                  {label}
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.TweaksPanel = TweaksPanel;