import { store, useApp } from '../state/store.ts';
import { listInstruments } from '../instruments/registry.ts';
import { trackColor } from './colors.ts';

export function TrackList() {
  const app = useApp();
  const song = app.rec?.song ?? null;
  if (!song) return <div className="tracklist" />;
  const instruments = listInstruments();
  return (
    <div className="tracklist">
      {song.tracks.map((t, i) => {
        const active = t.id === app.activeTrackId;
        const armed = t.id === app.armedTrackId;
        return (
          <div key={t.id} className={`trackrow ${active ? 'active' : ''}`} onClick={() => store.setActiveTrack(t.id)}>
            <div className="trackrow-top">
              <span className="chip" style={{ background: trackColor(i) }} />
              <input
                className="trackname"
                value={t.name}
                onChange={(e) => store.updateTrack(t.id, { name: e.target.value }, false)}
                onBlur={() => store.endEdit()}
                onClick={(e) => e.stopPropagation()}
              />
              <button
                className="mini danger"
                title="Delete track"
                onClick={(e) => { e.stopPropagation(); store.removeTrack(t.id); }}
              >✕</button>
            </div>
            <div className="trackrow-bottom">
              <select
                value={t.instrumentId}
                onChange={(e) => store.updateTrack(t.id, { instrumentId: e.target.value })}
                onClick={(e) => e.stopPropagation()}
                title="Instrument"
              >
                {instruments.map((ins) => (
                  <option key={ins.id} value={ins.id}>{ins.name}</option>
                ))}
              </select>
              <button
                className={`mini ${t.mute ? 'toggled' : ''}`}
                title="Mute"
                onClick={(e) => { e.stopPropagation(); store.updateTrack(t.id, { mute: !t.mute }, false); store.endEdit(); }}
              >M</button>
              <button
                className={`mini ${t.solo ? 'toggled' : ''}`}
                title="Solo"
                onClick={(e) => { e.stopPropagation(); store.updateTrack(t.id, { solo: !t.solo }, false); store.endEdit(); }}
              >S</button>
              <button
                className={`mini rec ${armed ? 'toggled' : ''}`}
                title="Arm for recording"
                onClick={(e) => { e.stopPropagation(); store.setArmedTrack(armed ? null : t.id); }}
              >R</button>
            </div>
            <div className="trackrow-vol">
              <input
                type="range"
                min={0}
                max={1.5}
                step={0.01}
                value={t.volume}
                title={`Volume ${(t.volume * 100).toFixed(0)}%`}
                onChange={(e) => store.updateTrack(t.id, { volume: Number(e.target.value) }, false)}
                onClick={(e) => e.stopPropagation()}
              />
              <span className="notecount">{t.notes.length} notes</span>
            </div>
          </div>
        );
      })}
      <button className="addtrack" onClick={() => store.addTrack()}>+ Add track</button>
    </div>
  );
}