import { useCallback, useEffect, useState } from 'react'
import type { View } from '../hooks/useZoomPan'
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 DB_RANGE = 70

/** Play A and B, and compare their waveforms and spectrograms. */
export function PlaybackPanel({ source, result, stale, playing, play, stop }: Props) {
  const fs = source.fs
  const duration = source.samples.length / fs
  const [view, setView] = useState<View>({ start: 0, span: duration })
  // A new clip resets the view; the same clip re-rendered with a new map keeps it.
  useEffect(() => {
    setView({ start: 0, span: source.samples.length / source.fs })
  }, [source])
  const onView = useCallback((v: View) => setView(v), [])

  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
  const zoomed = view.span < duration
  const highlight: [number, number] | undefined = zoomed ? [view.start, view.start + view.span] : undefined

  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="view-controls">
        <span className="info">Scroll to zoom, drag to pan, double-click to reset. Both waveforms share the view.</span>
        <span className="spacer" />
        <span className="info">
          {zoomed ? `showing ${formatSeconds(view.span)} from ${formatSeconds(view.start)}` : `full clip, ${formatSeconds(duration)}`}
        </span>
        <button className="small" onClick={() => setView({ start: 0, span: duration })} disabled={!zoomed}>
          Reset zoom
        </button>
      </div>
      <WaveformPlot samples={source.samples} fs={fs} view={view} onView={onView} yMax={yMax} label="A" color={COLOR_A} />
      <WaveformPlot samples={result.y} fs={fs} view={view} onView={onView} yMax={yMax} label="B" color={COLOR_B} />

      <div className="plot-label">Spectrograms at the analysis resolution, {DB_RANGE} dB range, shared scale{zoomed ? '; the box marks the waveform view' : ''}</div>
      <div className="spectrograms">
        <SpectrogramPlot spec={result.specA} dbRange={DB_RANGE} label="A" color="#fff" highlight={highlight} />
        <SpectrogramPlot spec={result.specB} dbRange={DB_RANGE} label="B" color="#fff" highlight={highlight} />
      </div>
    </section>
  )
}