// Tweaks panel
function TweaksPanel({ state, setState, open, setOpen }){
  const accents = [
    { key:'red',     color:'#e11d1d', color2:'#7a7a82' },
    { key:'crimson', color:'#b91c1c', color2:'#52525b' },
    { key:'scarlet', color:'#ef4444', color2:'#6b7280' },
    { key:'rose',    color:'#f43f5e', color2:'#71717a' },
    { key:'mono',    color:'#e5e5e5', color2:'#737373' },
  ];
  const active = accents.find(a=>a.key===state.accent) || accents[0];

  React.useEffect(()=>{
    document.documentElement.style.setProperty('--accent', active.color);
    document.documentElement.style.setProperty('--accent-2', active.color2);
    document.documentElement.style.setProperty('--chaos', String(state.chaos));
  }, [state, active.color, active.color2]);

  const persist = (patch) => {
    const next = { ...state, ...patch };
    setState(next);
    window.parent?.postMessage({type:'__edit_mode_set_keys', edits: patch}, '*');
  };

  if(!open) return null;

  return (
    <div className="tweaks open">
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
        <h4 style={{margin:0}}>Tweaks</h4>
        <button onClick={()=>setOpen(false)} style={{background:'none',border:'1px solid var(--line)',color:'var(--fg-dim)',borderRadius:6,padding:'3px 8px',cursor:'pointer',fontSize:11}}>close</button>
      </div>
      <div className="row">
        <label>Chaos</label>
        <input type="range" min="0" max="1" step="0.05" value={state.chaos} onChange={e=>persist({chaos: parseFloat(e.target.value)})} />
      </div>
      <div className="row">
        <label>Accent</label>
        <div className="swatches">
          {accents.map(a=>(
            <div key={a.key}
              className={'swatch '+(a.key===state.accent?'active':'')}
              style={{background:`linear-gradient(135deg, ${a.color}, ${a.color2})`}}
              onClick={()=>persist({accent:a.key})}
              title={a.key}
            />
          ))}
        </div>
      </div>
      <div className="row">
        <label>Hero font</label>
        <select value={state.heroAccent||'vt323'} onChange={e=>persist({heroAccent:e.target.value})}
          style={{background:'var(--bg-2)',color:'var(--fg)',border:'1px solid var(--line)',borderRadius:6,padding:'4px 6px',fontSize:12}}>
          <option value="vt323">VT323 (CRT)</option>
          <option value="serif">Instrument Serif (sober)</option>
        </select>
      </div>
      <div style={{marginTop:8,fontSize:10,color:'var(--fg-mute)',fontFamily:'JetBrains Mono, monospace'}}>
        chaos {Math.round(state.chaos*100)}% · {state.accent} · {state.heroAccent||'vt323'}
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });