import { useCallback, useEffect, useRef, useState } from 'react'
import { BlindTest } from './components/BlindTest'
import { CyclePanel } from './components/CyclePanel'
import { HarmonicSliders } from './components/HarmonicSliders'
import { ToneColumn } from './components/ToneColumn'
import { getSampleRate, playSequence, stopAll } from './audio'
import { getMorphPlayer, type MorphPlayer } from './morph'
import { amplitudePresets, degToRad, outputGain, peakBound, randomAmplitudes, randomPhasesDeg, renderTone, resized, round, zeros, type ToneParams } from './synth'

const COLOR_A = '#1f5fa8'
const COLOR_B = '#d9641e'
const HARMONIC_CHOICES = [4, 8, 12, 16]
const DURATION_CHOICES = [0.5, 1, 2]
const CYCLING = 'cycling tone'

export default function App() {
  const [f0, setF0] = useState(220)
  const [amplitudes, setAmplitudes] = useState<number[]>(() => amplitudePresets[0].make(8))
  const [phasesA, setPhasesA] = useState<number[]>(() => zeros(8))
  const [phasesB, setPhasesB] = useState<number[]>(() => randomPhasesDeg(8))
  const [duration, setDuration] = useState(1)
  const [playing, setPlaying] = useState<string | null>(null)
  const [cycleHz, setCycleHz] = useState(0.5)
  const [morph, setMorph] = useState<MorphPlayer | null>(null)
  const [morphError, setMorphError] = useState<string | null>(null)
  const morphRef = useRef<MorphPlayer | null>(null)

  const n = amplitudes.length
  const toneA: ToneParams = { f0, amplitudes, phases: phasesA.map(degToRad) }
  const toneB: ToneParams = { f0, amplitudes, phases: phasesB.map(degToRad) }
  const yMax = round(Math.max(peakBound(amplitudes), 1e-6), 2)

  const newRandomExample = () => {
    setAmplitudes(randomAmplitudes(n))
    setPhasesA(randomPhasesDeg(n))
    setPhasesB(randomPhasesDeg(n))
  }

  const setHarmonicCount = (m: number) => {
    setAmplitudes((a) => resized(a, m))
    setPhasesA((p) => resized(p, m))
    setPhasesB((p) => resized(p, m))
  }

  const cycling = playing === CYCLING
  const cycleParams = { f0, amplitudes, phasesA: toneA.phases, phasesB: toneB.phases, cycleHz, gain: outputGain(amplitudes) }

  const stopCycle = useCallback(() => {
    morphRef.current?.stop()
    setPlaying((p) => (p === CYCLING ? null : p))
  }, [])

  const startCycle = async () => {
    stopAll()
    setMorphError(null)
    let m = morphRef.current
    if (!m) {
      try {
        m = await getMorphPlayer()
      } catch (err) {
        setMorphError(`Could not start the AudioWorklet: ${err instanceof Error ? err.message : String(err)}`)
        return
      }
      morphRef.current = m
      setMorph(m)
    }
    m.start(cycleParams)
    setPlaying(CYCLING)
  }

  // Live updates while the cycling tone plays.
  useEffect(() => {
    if (cycling) morphRef.current?.update(cycleParams)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cycling, f0, amplitudes, phasesA, phasesB, cycleHz])

  const stop = () => {
    if (cycling) stopCycle()
    else stopAll()
  }

  const play = useCallback(
    async (label: string, tones: ToneParams[]) => {
      morphRef.current?.stop()
      const sr = getSampleRate()
      const buffers = tones.map((t) => renderTone(t, sr, duration))
      setPlaying(label)
      try {
        await playSequence(buffers)
      } finally {
        setPlaying(null)
      }
    },
    [duration],
  )
  const busy = playing !== null

  return (
    <div className="app">
      <header className="app-header">
        <h1>Phase Perception</h1>
        <p>
          Two tones with the same fundamental frequency and the same harmonic amplitudes, but different phases, have the same spectrum
          and (by Parseval) the same loudness. Do they sound the same? Edit the phases below, listen, then run the blind test.
        </p>
      </header>

      <section className="card shared">
        <h2>Shared by both tones</h2>
        <div className="global-controls">
          <label>
            <span>
              Fundamental f<sub>0</sub>
            </span>
            <input type="range" className="f0-range" min={55} max={880} step={1} value={f0} onChange={(e) => setF0(Number(e.target.value))} />
            <input type="number" className="slider-value" min={20} max={4000} value={f0} onChange={(e) => setF0(Math.max(20, Number(e.target.value) || 20))} />
            <span className="slider-unit">Hz</span>
          </label>
          <label>
            <span>Harmonics</span>
            <select value={n} onChange={(e) => setHarmonicCount(Number(e.target.value))}>
              {HARMONIC_CHOICES.map((m) => (
                <option key={m} value={m}>
                  {m}
                </option>
              ))}
            </select>
          </label>
          <label>
            <span>Duration</span>
            <select value={duration} onChange={(e) => setDuration(Number(e.target.value))}>
              {DURATION_CHOICES.map((d) => (
                <option key={d} value={d}>
                  {d} s
                </option>
              ))}
            </select>
          </label>
          <label>
            <span>Amplitude preset</span>
            <select value="" onChange={(e) => { const p = amplitudePresets.find((q) => q.name === e.target.value); if (p) setAmplitudes(p.make(n)) }}>
              <option value="" disabled>
                Choose…
              </option>
              {amplitudePresets.map((p) => (
                <option key={p.name} value={p.name}>
                  {p.name}
                </option>
              ))}
            </select>
          </label>
          <button onClick={newRandomExample}>New random example</button>
        </div>

        <div className="controls-header">
          <h3>Harmonic amplitudes</h3>
          <div className="button-row">
            <button className="primary" onClick={() => play('A then B', [toneA, toneB])} disabled={busy}>
              Play A then B
            </button>
            <button className="primary" onClick={() => play('B then A', [toneB, toneA])} disabled={busy}>
              Play B then A
            </button>
            <button onClick={stop} disabled={!busy}>
              Stop
            </button>
            <span className="playing-indicator">{playing ? `Playing ${playing}…` : ''}</span>
          </div>
        </div>
        <HarmonicSliders
          values={amplitudes}
          min={0}
          max={1}
          step={0.01}
          onChange={(k, v) => setAmplitudes(amplitudes.map((a, i) => (i === k ? v : a)))}
        />
      </section>

      <div className="columns">
        <ToneColumn
          name="A"
          otherName="B"
          color={COLOR_A}
          amplitudes={amplitudes}
          phasesDeg={phasesA}
          setPhasesDeg={setPhasesA}
          onCopyFromOther={() => setPhasesA([...phasesB])}
          onPlay={() => play('A', [toneA])}
          playing={busy}
          yMax={yMax}
        />
        <ToneColumn
          name="B"
          otherName="A"
          color={COLOR_B}
          amplitudes={amplitudes}
          phasesDeg={phasesB}
          setPhasesDeg={setPhasesB}
          onCopyFromOther={() => setPhasesB([...phasesA])}
          onPlay={() => play('B', [toneB])}
          playing={busy}
          yMax={yMax}
        />
      </div>

      <CyclePanel
        active={cycling}
        busy={busy}
        cycleHz={cycleHz}
        setCycleHz={setCycleHz}
        onStart={() => void startCycle()}
        onStop={stopCycle}
        player={morph}
        error={morphError}
      />

      <BlindTest toneA={toneA} toneB={toneB} play={play} busy={busy} />

      <footer className="app-footer">
        Both tones are scaled by the same gain, computed from the amplitudes alone, so they have identical RMS level and never clip.
        Tones are played monaurally with 10 ms fades.
      </footer>
    </div>
  )
}