import { useState } from 'react'
import { formatSeconds } from '../plot'
import type { RenderResult, Source } from '../types'
import { SpectrogramPlot } from './SpectrogramPlot'
import { WaveformPlot } from './WaveformPlot'

type Props = {
  source: Source
  result: RenderResult
  stale: boolean
  playing: string | null
  play: (label: string, which: ('A' | 'B')[]) => void
  stop: () => void
}

const COLOR_A = '#1f5fa8'
const COLOR_B = '#d9641e'
const SPANS: { label: string; sec: number | null }[] = [
  { label: 'full clip', sec: null },
  { label: '500 ms', sec: 0.5 },
  { label: '100 ms', sec: 0.1 },
  { label: '20 ms', sec: 0.02 },
  { label: '5 ms', sec: 0.005 },
]
const DB_RANGE = 70

/** Play A and B, and compare their waveforms and spectrograms. */
export function PlaybackPanel({ source, result, stale, playing, play, stop }: Props) {
  const [spanIdx, setSpanIdx] = useState(0)
  const [center, setCenter] = useState(0.5)
  const fs = source.fs
  const duration = source.samples.length / fs
  const span = SPANS[spanIdx].sec ?? duration
  const start = SPANS[spanIdx].sec ? Math.min(Math.max(0, center * duration - span / 2), Math.max(0, duration - span)) : 0
  let yMax = 0
  for (let i = 0; i < source.samples.length; i++) yMax = Math.max(yMax, Math.abs(source.samples[i]))
  for (let i = 0; i < result.y.length; i++) yMax = Math.max(yMax, Math.abs(result.y[i]))
  yMax = Number(yMax.toPrecision(2)) || 1
  const busy = playing !== null

  return (
    <section className="card">
      <h2>Listen and compare</h2>
      <p className="hint">
        A is the source; B has the phase map applied. Both are played with the same gain{stale ? ' (B is being re-rendered)' : ''}. The
        waveforms differ by {Math.round(100 * result.relDiff)}% of A's RMS, while the spectrograms below, computed at the analysis
        resolution, should look the same.
      </p>
      <div className="button-row">
        <button className="primary" onClick={() => play('A', ['A'])} disabled={busy || stale}>
          Play A
        </button>
        <button className="primary" onClick={() => play('B', ['B'])} disabled={busy || stale}>
          Play B
        </button>
        <button className="primary" onClick={() => play('A then B', ['A', 'B'])} disabled={busy || stale}>
          Play A then B
        </button>
        <button className="primary" onClick={() => play('B then A', ['B', 'A'])} disabled={busy || stale}>
          Play B then A
        </button>
        <button onClick={stop} disabled={!busy}>
          Stop
        </button>
        <span className="playing-indicator">{playing ? `Playing ${playing}…` : ''}</span>
      </div>

      <div className="zoom-controls">
        <label>
          <span>Waveform window</span>
          <select value={spanIdx} onChange={(e) => setSpanIdx(Number(e.target.value))}>
            {SPANS.map((s, i) => (
              <option key={s.label} value={i}>
                {s.label}
              </option>
            ))}
          </select>
        </label>
        {SPANS[spanIdx].sec !== null && (
          <label className="grow">
            <span>Position</span>
            <input type="range" min={0} max={1} step={0.0005} value={center} onChange={(e) => setCenter(Number(e.target.value))} />
            <span className="slider-unit">{formatSeconds(start)}</span>
          </label>
        )}
      </div>
      <WaveformPlot samples={source.samples} fs={fs} startSec={start} spanSec={span} yMax={yMax} label="A" color={COLOR_A} />
      <WaveformPlot samples={result.y} fs={fs} startSec={start} spanSec={span} yMax={yMax} label="B" color={COLOR_B} />

      <div className="plot-label">Spectrograms at the analysis resolution, {DB_RANGE} dB range, shared scale</div>
      <div className="spectrograms">
        <SpectrogramPlot spec={result.specA} dbRange={DB_RANGE} label="A" color="#fff" />
        <SpectrogramPlot spec={result.specB} dbRange={DB_RANGE} label="B" color="#fff" />
      </div>
    </section>
  )
}