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 QuickStart = { name: string; expect: string; sigmaMs: number; map: PhaseMapSpec }

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

const QUICK: QuickStart[] = [
  { name: 'Fixed scramble, short window', expect: 'Expected inaudible: transients can only smear by a fraction of a millisecond.', sigmaMs: 0.5, map: randomMap(null) },
  { name: 'Fixed scramble, medium window', expect: 'Borderline: attacks smear by a few milliseconds, near the reported threshold. Steady parts should sound the same.', sigmaMs: 5, map: randomMap(null) },
  { name: 'Fixed scramble, long window', expect: 'Expected audible on attacks: they smear over tens of milliseconds. Steady parts should sound the same.', sigmaMs: 20, map: randomMap(null) },
  { name: 'Slowly changing scramble', expect: 'Expected inaudible or nearly so: each frequency drifts by about 1 Hz.', sigmaMs: 5, map: randomMap(500) },
  { name: 'Quickly changing scramble', expect: 'Expected audible: each frequency wobbles by tens of Hz, heard as warble or roughness.', sigmaMs: 5, map: randomMap(20) },
  { name: 'Pure delay (control)', expect: 'B is A delayed by a little over a millisecond. Must be inaudible; a check on the pipeline and the listener.', 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 = QUICK.find((q) => q.sigmaMs === sigmaMs && sameSpec(q.map, map))

  return (
    <section className="card">
      <h2>2. Choose how the phases are scrambled</h2>
      <p className="hint">
        The sound is split into overlapping frequency bands. Each band keeps its loudness over time but its phase is shifted by an amount
        that depends on the band and, optionally, on time. The bands are then added back together to make B.
      </p>
      <div className="quick-start">
        <span className="quick-label">Quick start:</span>
        {QUICK.map((q) => (
          <button key={q.name} className={active?.name === q.name ? 'selected' : ''} title={q.expect} onClick={() => { setSigmaMs(q.sigmaMs); setMap(q.map) }}>
            {q.name}
          </button>
        ))}
      </div>
      <div className="expect">{active ? active.expect : 'Custom settings.'}</div>

      <div className="global-controls">
        <label title="Width of the time window, and so of each frequency band. Longer windows mean narrower bands and allow attacks to smear more.">
          <span>Time window</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">
            bands {sig3(sigmaF)} Hz wide{result ? `, ${result.bands} of them` : ''}
          </span>
        </label>
      </div>
      <div className="global-controls">
        <label>
          <span>Scramble pattern</span>
          <select value={map.kind} onChange={(e) => setKind(e.target.value as PhaseMapSpec['kind'])}>
            <option value="random">Random, smoothed across bands</option>
            <option value="delay">Pure delay (control: must be inaudible)</option>
            <option value="chirp">Chirp: delay growing with frequency</option>
          </select>
        </label>
        {map.kind === 'random' && (
          <>
            <label title="How many neighbouring bands share a similar phase. Too little smoothing and neighbouring bands cancel each other (see the warning).">
              <span>Smoothness across bands</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="Size of the phase shifts. 0 makes B identical to A.">
              <span>Amount</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 pattern</button>
          </>
        )}
        {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>Delay at the highest frequency</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 pattern is an all-pass filter. A changing pattern shifts each band's frequency by the rate of change of its phase.">
            <input type="checkbox" checked={map.timeScaleMs === null} onChange={(e) => setMap({ ...map, timeScaleMs: e.target.checked ? null : 200 })} />
            <span>Pattern fixed in time</span>
          </label>
          {map.timeScaleMs !== null && (
            <label title="How slowly the pattern changes. Faster change means larger frequency wobble.">
              <span>Changes over</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">frequencies wobble by about {sig3(fmHz)} Hz</span>
            </label>
          )}
        </div>
      )}

      {result && result.maxMagDeviationDb > 1 && (
        <div className="warning">
          The loudness of some frequencies changes by up to {result.maxMagDeviationDb.toFixed(1)} dB, so B is not just a phase change of A.
          The pattern changes too quickly from one band to the next for this window: lengthen the time window, increase the smoothness, or
          reduce the delay.
        </div>
      )}

      {result && (
        <details className="details">
          <summary>Show the phase pattern and the equivalent filter</summary>
          <p className="hint">
            A pattern that is fixed in time is an all-pass filter: it leaves every frequency's loudness alone and only delays each
            frequency by its <em>group delay</em>, the slope of the phase across frequency. Group delay peaks beyond about {THRESHOLD_MS} ms
            have been reported to be audible on impulsive sounds, and the achievable group delay grows with the time window. A pattern
            that changes in time shifts each band's frequency by the rate of change of its phase, which becomes audible on steady sounds
            once the shift approaches the pitch threshold, roughly 1 Hz for low tones.
          </p>
          <div className="response-plots">
            <div>
              <div className="plot-label">
                Phase shift by frequency and time{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">Loudness change by frequency{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 by frequency{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>
        </details>
      )}
    </section>
  )
}