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[0], 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 rendererRef = useRef<Renderer | null>(null)
  const resultSource = useRef<Source | null>(null)

  // The worker is created on demand and terminated on unmount. React StrictMode unmounts and
  // remounts in development, so a terminated worker must be replaced rather than kept.
  useEffect(
    () => () => {
      rendererRef.current?.terminate()
      rendererRef.current = null
    },
    [],
  )

  // 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(() => {
      const renderer = rendererRef.current ?? (rendererRef.current = new Renderer())
      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])

  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>
          Take a sound and keep how strong each frequency is at each moment, but scramble the timing (the phase) of the frequency
          components. Does it still sound the same? Sound A is the original and sound B is the scrambled version.
        </p>
        <ol className="steps">
          <li>Choose a sound.</li>
          <li>Choose how the phases are scrambled. The quick-start buttons cover the main cases.</li>
          <li>Play A and B and listen for a difference.</li>
        </ol>
      </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. Headphones make small differences easier to hear.
      </footer>
    </div>
  )
}