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

type Preset = { name: string; prediction: string; sigmaMs: number; map: PhaseMapSpec }

const randomMap = (timeScaleMs: number | null): PhaseMapSpec => ({ kind: 'random', smoothBands: 8, timeScaleMs, seed: 1, strength: 1 })

const PRESETS: Preset[] = [
  { name: 'Fixed map, sigma 0.5 ms', prediction: 'Group delay below 0.3 ms, under the reported threshold. Predicted inaudible.', sigmaMs: 0.5, map: randomMap(null) },
  { name: 'Fixed map, sigma 5 ms', prediction: 'Group delay of a few ms, near the reported threshold. Predicted borderline on transients, inaudible on steady sounds.', sigmaMs: 5, map: randomMap(null) },
  { name: 'Fixed map, sigma 20 ms', prediction: 'Group delay around 10 ms. Predicted audible on transients as smearing, inaudible on steady sounds.', sigmaMs: 20, map: randomMap(null) },
  { name: 'Time scale 500 ms', prediction: 'Frequency shifts of about 0.6 Hz, below the pitch threshold. Predicted inaudible or nearly so.', sigmaMs: 5, map: randomMap(500) },
  { name: 'Time scale 20 ms', prediction: 'Frequency shifts of about 14 Hz. Predicted audible as frequency modulation.', sigmaMs: 5, map: randomMap(20) },
  { name: 'Delay 1.25 ms (control)', prediction: 'B is A delayed by 1.25 ms with 0.3 dB attenuation. Must be inaudible.', sigmaMs: 5, map: { kind: 'delay', delayMs: 1.25 } },
]

const sameSpec = (a: PhaseMapSpec, b: PhaseMapSpec) => JSON.stringify(a) === JSON.stringify(b)

/** 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(randomMap(null))
    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
  const active = PRESETS.find((q) => q.sigmaMs === sigmaMs && sameSpec(q.map, map))

  return (
    <section className="card">
      <h2>2. Window and phase map</h2>
      <p className="hint">
        Bands are Gaussian with width sigma in time and sigma_f = 1 / (2 pi sigma) in frequency, spaced by sigma_f, normalized to sum to
        one. A map fixed in time is an all-pass filter whose group delay, minus the slope of the phase across frequency, smears transients;
        peaks beyond about {THRESHOLD_MS} ms are reported audible on impulsive sounds (Blauert and Laws, 1978). A map varying in time
        shifts each band's frequency by (d phi / dt) / 2 pi. The map must change by less than about a radian between neighbouring bands,
        otherwise the bands partly cancel and the magnitude response deviates from 0 dB.
      </p>
      <div className="quick-start">
        <span className="quick-label">Presets:</span>
        {PRESETS.map((q) => (
          <button key={q.name} className={active?.name === q.name ? 'selected' : ''} title={q.prediction} onClick={() => { setSigmaMs(q.sigmaMs); setMap(q.map) }}>
            {q.name}
          </button>
        ))}
      </div>
      <div className="expect">{active ? active.prediction : ''}</div>

      <div className="global-controls">
        <label title="Gaussian window width sigma. The band width is 1 / (2 pi sigma) and the achievable group delay scales with sigma.">
          <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">
            sigma_f = {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 title="Gaussian smoothing width of the map across bands. Below about 6 bands neighbouring bands cancel and the magnitude response develops notches.">
              <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 title="Scale factor of the map. 1 gives the standard deviation of uniform random phases, pi / sqrt(3).">
              <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 title="phi(f) = -2 pi f tau. The magnitude is exp(-tau^2 / 2 sigma^2), so tau must stay well below sigma.">
            <span>Delay tau</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 title="Group delay tau(f) = tau_N f / f_Nyquist, so phi(f) = -pi tau_N f^2 / f_Nyquist.">
            <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 title="A fixed map is a linear time-invariant all-pass filter. A time-varying map is applied by subband synthesis.">
            <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 title="Gaussian smoothing width of the map in time. The typical frequency shift is strength * pi / sqrt(3) / (2 pi T).">
              <span>Time scale T</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</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 a pure phase change of A. The map
          changes too quickly between 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">
              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 |G(f)|{timeVarying ? ' at mid-clip' : ''}</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>
  )
}