import { useMemo } from 'react';
import { store, useApp, usePlayerVersion } from '../state/store.ts';
import { player } from '../audio/player.ts';
import { TempoMap } from '../midi/time.ts';

const SNAP_OPTIONS: { label: string; beats: number }[] = [
  { label: 'snap off', beats: 0 },
  { label: '1 bar', beats: 4 },
  { label: '1/2', beats: 2 },
  { label: '1/4', beats: 1 },
  { label: '1/8', beats: 0.5 },
  { label: '1/16', beats: 0.25 },
  { label: '1/32', beats: 0.125 },
];

export function Transport() {
  const app = useApp();
  usePlayerVersion();
  const song = app.rec?.song ?? null;
  const tm = useMemo(() => (song ? new TempoMap(song.ppq, song.tempo, song.timeSig) : null), [song]);

  if (!song || !tm) return <div className="transport" />;

  const pos = Math.max(0, player.getPositionSec());
  const tick = tm.secToTick(pos);
  const { bar, beat } = tm.barBeatAt(tick);
  const mm = Math.floor(pos / 60);
  const ss = (pos % 60).toFixed(1).padStart(4, '0');
  const singleTempo = song.tempo.length === 1;
  const bpm = Math.round(tm.bpmAt(tick));
  const state = player.state;

  return (
    <div className="transport">
      <button title="Go to start" onClick={() => store.seekTo(0)}>|◀</button>
      <button
        className={state === 'playing' ? 'toggled' : ''}
        title="Play/stop (space)"
        onClick={() => void store.togglePlay()}
        disabled={player.preparing}
      >
        {state !== 'stopped' ? '◼' : '▶'}
      </button>
      <button
        className={`rec ${state === 'recording' ? 'toggled' : ''}`}
        title="Record into the armed track, with a one-bar count-in"
        onClick={() => (state === 'recording' ? store.stopTransport() : void store.record())}
        disabled={player.preparing}
      >
        ●
      </button>
      <span className="pos" title="bar.beat">{bar}.{beat}</span>
      <span className="pos sec">{mm}:{ss}</span>
      {player.preparing && <span className="status">rendering…</span>}
      <span className="spacer" />
      <label title={singleTempo ? 'Tempo (bpm)' : 'This song has a tempo map; editing it as one bpm is not supported yet'}>
        bpm{' '}
        <input
          type="number"
          min={20}
          max={300}
          value={bpm}
          disabled={!singleTempo}
          onChange={(e) => {
            const v = Math.max(20, Math.min(300, Number(e.target.value) || 120));
            store.mutateSong((s) => { s.tempo = [{ tick: 0, usPerQuarter: Math.round(6e7 / v) }]; });
          }}
        />
      </label>
      <label title="Metronome during playback and recording">
        <input type="checkbox" checked={player.metronome} onChange={(e) => { player.metronome = e.target.checked; }} /> click
      </label>
      <select
        value={app.snapBeats}
        onChange={(e) => store.setSnapBeats(Number(e.target.value))}
        title="Snap grid for editing and quantize"
      >
        {SNAP_OPTIONS.map((o) => (
          <option key={o.label} value={o.beats}>{o.label}</option>
        ))}
      </select>
      <button onClick={() => store.quantize()} title="Quantize selected notes (or the active track) to the snap grid">Quantize</button>
      <button
        className={app.loopEnabled && app.rangeTicks ? 'toggled' : ''}
        disabled={!app.rangeTicks}
        onClick={() => store.toggleLoop()}
        title="Loop playback over the time selection (drag in the ruler to make one)"
      >Loop</button>
      {app.rangeTicks && (
        <span className="rangeops">
          <span className="pos" title="time selection (bar.beat)">
            {(() => {
              const A = tm.barBeatAt(app.rangeTicks[0]);
              const B = tm.barBeatAt(app.rangeTicks[1]);
              return `${A.bar}.${A.beat} to ${B.bar}.${B.beat}`;
            })()}
          </span>
          <button onClick={() => store.rangeSelectNotes()} title="Select the notes inside the time selection">Select</button>
          <button onClick={() => store.rangeClearNotes()} title="Delete the notes inside the time selection, keeping the time (also the delete key when no notes are selected)">Clear</button>
          <button onClick={() => store.rangeDeleteTime()} title="Delete the selected time span on every track and close the gap; the tempo map ripples too">Cut time</button>
          <button onClick={() => store.rangeInsertTime()} title="Insert that much empty time at the selection start, on every track">Insert</button>
          <button onClick={() => store.rangeDuplicateTime()} title="Insert a copy of the selection immediately after itself">Dup</button>
        </span>
      )}
    </div>
  );
}