// Tweaks panel
function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;
  const set = (k, v) => setTweaks(t => ({ ...t, [k]: v }));
  return (
    <div className="tweaks">
      <div className="tweaks-head">
        <span style={{width: 6, height: 6, background:'var(--accent)', borderRadius:'50%'}}/>
        <span>Tweaks</span>
        <span style={{marginLeft:'auto', color:'var(--text-mute)'}}>live</span>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <label>View</label>
          <div className="seg">
            {[
              {k:'overview', l:'dash'},
              {k:'threed', l:'3d'},
              {k:'topology', l:'topo'},
              {k:'nodes', l:'list'},
              {k:'alerts', l:'alerts'},
              {k:'logs', l:'logs'},
              {k:'admin', l:'admin'},
              {k:'notifications', l:'notif'},
              {k:'users', l:'users'},
              {k:'history', l:'hist'},
            ].map(v => (
              <button key={v.k} className={tweaks.view === v.k ? 'on' : ''} onClick={() => set('view', v.k)}>{v.l}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label>3D style</label>
          <div className="seg">
            <button className={tweaks.threedStyle === 'cubes' ? 'on' : ''} onClick={() => set('threedStyle','cubes')}>cubes</button>
            <button className={tweaks.threedStyle === 'lattice' ? 'on' : ''} onClick={() => set('threedStyle','lattice')}>lattice</button>
            <button className={tweaks.threedStyle === 'grid' ? 'on' : ''} onClick={() => set('threedStyle','grid')}>grid</button>
          </div>
        </div>
        <div className="tweak-row">
          <label>Density · {tweaks.density}</label>
          <input type="range" min="3" max="10" step="1" value={tweaks.density}
                 onChange={e => set('density', Number(e.target.value))} />
        </div>
        <div className="tweak-row">
          <label>Live tick</label>
          <div className="seg">
            <button className={tweaks.liveTick ? 'on' : ''} onClick={() => set('liveTick', true)}>on</button>
            <button className={!tweaks.liveTick ? 'on' : ''} onClick={() => set('liveTick', false)}>off</button>
          </div>
        </div>
        <button className="btn" style={{marginTop: 4}} onClick={() => window.__simulateIncident && window.__simulateIncident()}>
          simulate incident →
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });