import type { PhaseMapSpec } from '../phasemap'
import type { RenderResult } from '../types'
import { LinePlot } from './LinePlot'

type Props = {
  sigmaMs: number
  setSigmaMs: (v: number) => void
  map: PhaseMapSpec
  setMap: (m: PhaseMapSpec) => void
  fmax: number
  result: RenderResult | null
}

const SIGMA_LOG_MIN = Math.log10(0.3)
const SIGMA_LOG_MAX = Math.log10(50)
const sig3 = (x: number) => Number(x.toPrecision(3))

const MAP_COLOR = '#d9641e'
const THRESHOLD_MS = 1

/** Window width, phase map choice and parameters, and the plots that describe the resulting filter. */
export function AnalysisPanel({ sigmaMs, setSigmaMs, map, setMap, fmax, result }: Props) {
  const sigmaF = 1000 / (2 * Math.PI * sigmaMs)
  const setKind = (kind: PhaseMapSpec['kind']) => {
    if (kind === map.kind) return
    if (kind === 'random') setMap({ kind, smoothBands: 8, seed: 1, strength: 1 })
    else if (kind === 'delay') setMap({ kind, delayMs: sig3(sigmaMs / 4) })
    else setMap({ kind, delayAtNyquistMs: sig3(sigmaMs / 4) })
  }

  return (
    <section className="card">
      <h2>Filter bank and phase map</h2>
      <p className="hint">
        The sound is split into overlapping Gaussian bands of width sigma in time (and 1 / (2 pi sigma) in frequency). Sound B is made by
        rotating the phase of each band by phi(f) and adding the bands back together, which leaves every band's envelope unchanged. For a
        fixed map this is an all-pass filter; its group delay, minus the slope of the phase, is what smears transients. Peaks of group delay
        beyond about {THRESHOLD_MS} ms are reported to be audible on impulsive sounds. Because the map is sampled at the band centers, it
        must change by less than about a radian from one band to the next; the magnitude plot shows when it does not. For a pure delay this
        means delays shorter than sigma, so the achievable group delay grows with the window width.
      </p>
      <div className="global-controls">
        <label>
          <span>Window sigma</span>
          <input
            type="range"
            className="wide-range"
            min={SIGMA_LOG_MIN}
            max={SIGMA_LOG_MAX}
            step={0.01}
            value={Math.min(SIGMA_LOG_MAX, Math.max(SIGMA_LOG_MIN, Math.log10(sigmaMs)))}
            onChange={(e) => setSigmaMs(sig3(10 ** Number(e.target.value)))}
          />
          <input
            type="number"
            className="slider-value"
            min={0.1}
            max={200}
            step="any"
            value={sigmaMs}
            onChange={(e) => {
              const v = Number(e.target.value)
              if (Number.isFinite(v) && v > 0) setSigmaMs(Math.min(200, Math.max(0.1, v)))
            }}
          />
          <span className="slider-unit">ms</span>
          <span className="info">
            band width {sig3(sigmaF)} Hz{result ? `, ${result.bands} bands` : ''}
          </span>
        </label>
      </div>
      <div className="global-controls">
        <label>
          <span>Phase map</span>
          <select value={map.kind} onChange={(e) => setKind(e.target.value as PhaseMapSpec['kind'])}>
            <option value="random">Smoothed random</option>
            <option value="delay">Pure delay (control)</option>
            <option value="chirp">Chirp (group delay linear in frequency)</option>
          </select>
        </label>
        {map.kind === 'random' && (
          <>
            <label>
              <span>Smoothing</span>
              <input type="range" min={1} max={40} step={1} value={map.smoothBands} onChange={(e) => setMap({ ...map, smoothBands: Number(e.target.value) })} />
              <span className="slider-unit">
                {map.smoothBands} bands ({sig3(map.smoothBands * sigmaF)} Hz)
              </span>
            </label>
            <label>
              <span>Strength</span>
              <input type="range" min={0} max={2} step={0.05} value={map.strength} onChange={(e) => setMap({ ...map, strength: Number(e.target.value) })} />
              <span className="slider-unit">{map.strength.toFixed(2)}</span>
            </label>
            <button onClick={() => setMap({ ...map, seed: (map.seed % 100000) + 1 })}>New random map</button>
            <span className="info">seed {map.seed}</span>
          </>
        )}
        {map.kind === 'delay' && (
          <label>
            <span>Delay</span>
            <input type="range" min={-20} max={20} step={0.05} value={map.delayMs} onChange={(e) => setMap({ ...map, delayMs: Number(e.target.value) })} />
            <input type="number" className="slider-value" step="any" value={map.delayMs} onChange={(e) => setMap({ ...map, delayMs: Number(e.target.value) || 0 })} />
            <span className="slider-unit">ms</span>
          </label>
        )}
        {map.kind === 'chirp' && (
          <label>
            <span>Group delay at Nyquist</span>
            <input type="range" min={-20} max={20} step={0.05} value={map.delayAtNyquistMs} onChange={(e) => setMap({ ...map, delayAtNyquistMs: Number(e.target.value) })} />
            <input type="number" className="slider-value" step="any" value={map.delayAtNyquistMs} onChange={(e) => setMap({ ...map, delayAtNyquistMs: Number(e.target.value) || 0 })} />
            <span className="slider-unit">ms</span>
          </label>
        )}
      </div>

      {result && result.maxMagDeviationDb > 1 && (
        <div className="warning">
          The magnitude response deviates by up to {result.maxMagDeviationDb.toFixed(1)} dB, so B is not just a phase change of A. The map
          changes too quickly across neighbouring bands for this window: increase sigma, increase the smoothing, or reduce the delay.
        </div>
      )}
      {result && (
        <div className="response-plots">
          <div>
            <div className="plot-label">Phase map phi(f), wrapped to (-180°, 180°]</div>
            <LinePlot
              series={[{ x: result.map.f, y: Array.from(result.map.y, (v) => (v * 180) / Math.PI), color: MAP_COLOR, dots: result.map.f.length <= 400, width: 1 }]}
              xRange={[0, fmax]}
              yRange={[-190, 190]}
              xLabel="frequency (Hz)"
              yLabel="degrees"
              zeroLine
            />
          </div>
          <div>
            <div className="plot-label">Magnitude response of the equivalent filter (should stay near 0 dB)</div>
            <LinePlot series={[{ x: result.magDb.f, y: result.magDb.y, color: '#1f5fa8' }]} xRange={[0, fmax]} yRange={[-30, 3]} xLabel="frequency (Hz)" yLabel="dB" zeroLine />
          </div>
          <div>
            <div className="plot-label">
              Group delay of the equivalent filter (largest {result.maxGroupDelayMs.toFixed(2)} ms)
            </div>
            <LinePlot
              series={[{ x: result.groupDelayMs.f, y: result.groupDelayMs.y, color: '#1f5fa8' }]}
              xRange={[0, fmax]}
              symmetric
              xLabel="frequency (Hz)"
              yLabel="ms"
              band={{ y0: -THRESHOLD_MS, y1: THRESHOLD_MS, color: 'rgba(46, 160, 67, 0.15)', label: 'approximate audibility threshold' }}
              zeroLine
            />
          </div>
        </div>
      )}
    </section>
  )
}