import { UNIFORM_STD, type PhaseMapSpec } from '../phasemap'
import { phaseColor } from '../plot'
import type { RenderResult } from '../types'
import { ImagePlot } from './ImagePlot'
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 TIME_LOG_MIN = 0 // 1 ms
const TIME_LOG_MAX = Math.log10(3000)
const sig3 = (x: number) => Number(x.toPrecision(3))
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, timeScaleMs: null, seed: 1, strength: 1 })
    else if (kind === 'delay') setMap({ kind, delayMs: sig3(sigmaMs / 4) })
    else setMap({ kind, delayAtNyquistMs: sig3(sigmaMs / 4) })
  }
  const timeVarying = map.kind === 'random' && map.timeScaleMs !== null
  // a Gaussian-smoothed field with std s and time scale T has a derivative of std s / T
  const fmHz = map.kind === 'random' && map.timeScaleMs !== null ? (map.strength * UNIFORM_STD) / (2 * Math.PI * (map.timeScaleMs / 1000)) : 0

  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, t) and adding the bands back together, which leaves every band's envelope unchanged. A map
        that is fixed in time is an all-pass filter; its group delay, minus the slope of the phase in frequency, is what smears transients,
        and peaks beyond about {THRESHOLD_MS} ms are reported to be audible on impulsive sounds. A map that changes in time shifts the
        frequency of each band by the rate of change of its phase, which is audible on steady sounds once the shift approaches the pitch
        threshold. 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.
      </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 in frequency</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>
      {map.kind === 'random' && (
        <div className="global-controls">
          <label>
            <input type="checkbox" checked={map.timeScaleMs === null} onChange={(e) => setMap({ ...map, timeScaleMs: e.target.checked ? null : 200 })} />
            <span>Fixed in time</span>
          </label>
          {map.timeScaleMs !== null && (
            <label>
              <span>Smoothing in time</span>
              <input
                type="range"
                className="wide-range"
                min={TIME_LOG_MIN}
                max={TIME_LOG_MAX}
                step={0.01}
                value={Math.min(TIME_LOG_MAX, Math.max(TIME_LOG_MIN, Math.log10(map.timeScaleMs)))}
                onChange={(e) => setMap({ ...map, timeScaleMs: sig3(10 ** Number(e.target.value)) })}
              />
              <input
                type="number"
                className="slider-value"
                min={0.1}
                step="any"
                value={map.timeScaleMs}
                onChange={(e) => {
                  const v = Number(e.target.value)
                  if (Number.isFinite(v) && v > 0) setMap({ ...map, timeScaleMs: v })
                }}
              />
              <span className="slider-unit">ms</span>
              <span className="info">typical frequency shift {sig3(fmHz)} Hz; the window is {sigmaMs} 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, t){result.timeVarying ? '' : ', fixed in time'} <span className="phase-legend" /> -180° to 180°
            </div>
            <ImagePlot image={result.phaseField} color={phaseColor} label="" labelColor="#000" />
          </div>
          <div>
            <div className="plot-label">Magnitude response of the equivalent filter{timeVarying ? ' at mid-clip' : ''} (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{timeVarying ? ' at mid-clip' : ''} (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>
  )
}