import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { getSampleRate, playSequence, stopAll } from './audio'
import { AnalysisPanel } from './components/AnalysisPanel'
import { PlaybackPanel } from './components/PlaybackPanel'
import { SourcePanel } from './components/SourcePanel'
import { defaultPhaseMap, type PhaseMapSpec } from './phasemap'
import { Renderer } from './renderer'
import { makePreset, presets } from './sources'
import type { RenderResult, Source } from './types'

const RENDER_DEBOUNCE_MS = 120
const MAX_COLS = 600
const MAX_ROWS = 256
const CURVE_POINTS = 1024

export default function App() {
  const fs = useMemo(() => getSampleRate(), [])
  const fmax = Math.min(10000, fs / 2)
  const [source, setSource] = useState<Source | null>(() => makePreset(presets[4], fs))
  const [sigmaMs, setSigmaMs] = useState(5)
  const [map, setMap] = useState<PhaseMapSpec>(defaultPhaseMap)
  const [result, setResult] = useState<RenderResult | null>(null)
  const [rendering, setRendering] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [playing, setPlaying] = useState<string | null>(null)
  const renderer = useMemo(() => new Renderer(), [])
  const resultSource = useRef<Source | null>(null)

  useEffect(() => () => renderer.terminate(), [renderer])

  // Re-render B whenever the source, the window, or the map changes (debounced for slider drags).
  useEffect(() => {
    if (!source) return
    setRendering(true)
    const timer = setTimeout(() => {
      renderer
        .request({ samples: source.samples, fs: source.fs, sigmaMs, map, fmax, maxCols: MAX_COLS, maxRows: MAX_ROWS, curvePoints: CURVE_POINTS })
        .then((r) => {
          if (!r) return // superseded
          resultSource.current = source
          setResult(r)
          setError(null)
          setRendering(false)
        })
        .catch((err: unknown) => {
          setError(err instanceof Error ? err.message : String(err))
          setRendering(false)
        })
    }, RENDER_DEBOUNCE_MS)
    return () => clearTimeout(timer)
  }, [source, sigmaMs, map, fmax, renderer])

  const play = useCallback(
    async (label: string, which: ('A' | 'B')[]) => {
      const src = resultSource.current
      if (!src || !result) return
      const g = result.gain
      const scaled = (x: Float32Array) => x.map((v) => v * g)
      const buffers = which.map((w) => scaled(w === 'A' ? src.samples : result.y))
      setPlaying(label)
      try {
        await playSequence(buffers)
      } finally {
        setPlaying(null)
      }
    },
    [result],
  )

  // Show plots for the source the current result belongs to, even while a new render is pending.
  const shownSource = resultSource.current

  return (
    <div className="app">
      <header className="app-header">
        <h1>Phase Perception 2</h1>
        <p>
          The first app asked whether a steady tone still sounds the same when its harmonic phases change. Here the same question is asked of
          any sound. The sound is split into overlapping frequency bands, each band's phase is rotated by an amount that depends on frequency,
          and the bands are added back together. Every band keeps its envelope, so the spectrogram at that resolution is unchanged, but the
          waveform is not. The width of the bands is a free parameter: narrow bands (a long window) allow large group delays and smear
          transients, wide bands (a short window) do not.
        </p>
      </header>

      <SourcePanel fs={fs} source={source} setSource={setSource} busy={playing !== null} />
      <AnalysisPanel sigmaMs={sigmaMs} setSigmaMs={setSigmaMs} map={map} setMap={setMap} fmax={fmax} result={result} />
      {error && <div className="card error">Rendering failed: {error}</div>}
      {result && shownSource && (
        <PlaybackPanel source={shownSource} result={result} stale={rendering} playing={playing} play={(l, w) => void play(l, w)} stop={stopAll} />
      )}
      {!result && !error && <div className="card status">Rendering…</div>}

      <footer className="app-footer">
        {result && `Last render took ${result.elapsedMs.toFixed(0)} ms. `}
        Playback uses one gain for A and B, chosen from A's RMS and limited so that neither sound clips. Clips are mono, at the audio
        device's sample rate of {fs} Hz.
      </footer>
    </div>
  )
}