const Tweaks = ({ active, state, setState }) => {
  if (!active) return null;
  const setKey = (key, val) => {
    const next = { ...state, [key]: val };
    setState(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*');
  };
  const Seg = ({ k, opts }) => (
    <div className="tw-seg">
      {opts.map(o => (
        <button key={o.v} className={state[k] === o.v ? 'active' : ''} onClick={() => setKey(k, o.v)}>{o.l}</button>
      ))}
    </div>
  );
  const Swatch = ({ k, opts }) => (
    <div className="tw-swatch">
      {opts.map(o => (
        <button key={o.v} className={state[k] === o.v ? 'active' : ''}
                style={{ background: o.bg }} onClick={() => setKey(k, o.v)} title={o.l}/>
      ))}
    </div>
  );
  return (
    <div className="tweaks-panel">
      <div className="tw-head">
        <h4>Tweaks</h4>
        <span className="kb">Design Knobs</span>
      </div>
      <div className="tw-row">
        <label>Theme</label>
        <Seg k="theme" opts={[{v:'light',l:'Light'},{v:'dark',l:'Dark'}]}/>
      </div>
      <div className="tw-row">
        <label>Accent</label>
        <Swatch k="accent" opts={[
          {v:'claude', l:'Warm', bg:'#c96442'},
          {v:'blue',   l:'Blue', bg:'#3759c4'},
          {v:'green',  l:'Green', bg:'#4a7a4f'},
          {v:'ink',    l:'Ink', bg:'#14110e'},
        ]}/>
      </div>
      <div className="tw-row">
        <label>Density</label>
        <Seg k="density" opts={[{v:'roomy',l:'Roomy'},{v:'tight',l:'Tight'}]}/>
      </div>
    </div>
  );
};
window.Tweaks = Tweaks;