// Mixer.jsx — per-lane channel strip: mute, vertical fader, level meter.
// Fader + mute drive the real Web Audio lane gain (audio.js).
function Channel({ lane, playing, step, grid }) {
  const [vol, setVol] = React.useState(72);
  const [mute, setMute] = React.useState(false);
  React.useEffect(() => {
    if (window.STUDIO_AUDIO) STUDIO_AUDIO.setLane(lane.id, vol / 100, mute);
  }, [vol, mute]);
  // a cheap "level" from whether this lane hits near the playhead
  const hot = playing && grid[lane.id] && grid[lane.id][step] && !mute;
  return (
    <div className={'mx-ch' + (mute ? ' muted' : '')}>
      <div className="mx-name"><span className="sq-glyph">{lane.glyph}</span></div>
      <div className="mx-meter">
        <div className={'mx-fill fill-' + lane.accent} style={{ height: (hot ? 100 : vol * 0.55) + '%' }} />
      </div>
      <input className="mx-fader" type="range" min="0" max="100" value={vol}
        onChange={e => setVol(+e.target.value)} aria-label={lane.label + ' volume'} />
      <button className={'mx-mute' + (mute ? ' on' : '')} onClick={() => setMute(m => !m)}>
        {mute ? 'M' : '·'}
      </button>
    </div>
  );
}

function Mixer({ playing, step, grid }) {
  const setMaster = (v) => { if (window.STUDIO_AUDIO) STUDIO_AUDIO.setMaster(v / 100); };
  return (
    <div className="mx">
      <div className="mx-head t-eyebrow">// xone · mixer</div>
      <div className="mx-strips">
        {STUDIO_LANES.map(lane => (
          <Channel key={lane.id} lane={lane} playing={playing} step={step} grid={grid} />
        ))}
        <div className="mx-ch mx-master">
          <div className="mx-name">MAIN</div>
          <div className="mx-meter"><div className="mx-fill fill-cyan" style={{ height: playing ? '88%' : '20%' }} /></div>
          <input className="mx-fader" type="range" min="0" max="100" defaultValue="84"
            onChange={e => setMaster(+e.target.value)} aria-label="Master" />
          <button className="mx-mute">∞</button>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Mixer });