// Panels for the square-membrane labs of Chapters 4 and 5.
import type { Num, Params } from '../../engine/types.ts'
import Listen, { type Clip } from '../../audio/Listen.tsx'
import { Row, SeriesPlot, NumTable, fmtCents, fmtErr, fmtMs, fmtNum } from '../common/panels.tsx'
import { faded, familyColor, familyShapes, ink, method, type MethodKey } from '../../plot/palette.ts'
import type { Control } from '../../ui/types.ts'

export interface StrikeOut {
  ms: number
  N: number
  lam: number
  fs: number
  rel: number
  nmodes: number
  f11: number
  fr: number[]
  dbe: number[]
  dbf: number[]
  fmodes: number[]
  tw: number[]
  yw: number[]
  yew: number[]
  clipExact: Clip
  clipFd: Clip
  clipDiff: Clip
}

export interface CentsOut {
  N: number
  lams: number[]
  m: number[]
  n: number[]
  ring: number[]
  rs: number[]
  angle: number[]
  ppw: number[]
  meas: Num[][]
  pred: Num[][]
  agree: number
}

export interface OrdersOut {
  Ns: number[]
  schemes: string[]
  lams: number[]
  modes: number[][]
  cents: Num[][]
  worst: Num[][]
  ms: Num[][]
  orders: Num[][]
}

/**
 * Which colour and shape each scheme wears, in every chapter.  Fourth order
 * in space alone borrows the waveguide's amber, since no chapter shows both;
 * the spare red is too close to fd4's orange to sit beside it.
 */
export const SCHEME: Record<string, { key: MethodKey; label: string; shape: 'circle' | 'square' | 'triangle' }> = {
  fd2: { key: 'fd2', label: 'second order (leapfrog, five-point)', shape: 'circle' },
  fd4: { key: 'waveguide', label: 'fourth order in space only', shape: 'square' },
  fd44: { key: 'fd4', label: 'fourth order in space and time', shape: 'triangle' },
}

/** The drum of Chapters 4 and 5: 150 Hz fundamental on a unit square. */
export const DRUM = { c: 150 * Math.SQRT2, kmax: 90, width: 0.03, xr: 0.77, yr: 0.63, fmax: 3000 }

export const STRIKE_CONTROL: Control = {
  kind: 'select',
  key: 'at',
  label: 'strike at',
  options: [
    { value: 'off', label: 'off centre, (0.31, 0.42)' },
    { value: 'centre', label: 'the centre' },
    { value: 'rim', label: 'near the rim, (0.12, 0.2)' },
  ],
}

export function strikeParams(p: Params, scheme: string) {
  const at = String(p.at ?? 'off')
  const [xs, ys] = at === 'centre' ? [0.5, 0.5] : at === 'rim' ? [0.12, 0.2] : [0.31, 0.42]
  return { mode: 'strike', ...DRUM, N: p.N, lam: p.lam, T: 1.0, xs, ys, scheme }
}

export function StrikePanels({ d, scheme = 'fd2' }: { d: StrikeOut; scheme?: string }) {
  const col = method[SCHEME[scheme].key]
  return (
    <>
      <SeriesPlot
        title="the recording from 0.1 s after the blow, over four periods of the fundamental"
        height={180}
        xLabel="ms"
        series={[
          { x: d.tw, y: d.yew, color: ink.reference, label: 'exact (modal sum)', width: 2.6 },
          { x: d.tw, y: d.yw, color: col, label: `N = ${d.N}, λ = ${d.lam}`, width: 1.3 },
        ]}
      />
      <SeriesPlot
        title="spectrum of the first 0.4 s; faint lines are the exact mode frequencies the blow excites"
        height={230}
        xLabel="Hz"
        yLabel="dB"
        yDomain={[-90, 3]}
        vlines={[{ x: d.fmodes, color: faded(ink.muted, 0.5) }]}
        series={[
          { x: d.fr, y: d.dbe, color: ink.reference, label: 'exact', width: 1.8 },
          { x: d.fr, y: d.dbf, color: col, label: 'simulated', width: 1.2 },
        ]}
      />
      <Listen
        items={[
          { label: 'exact', clip: d.clipExact },
          { label: 'simulated', clip: d.clipFd },
          { label: 'the difference', clip: d.clipDiff },
        ]}
        note={`all three at the same scale, at the simulation's own rate of ${(d.fs / 1000).toFixed(1)} kHz`}
      />
    </>
  )
}

export function strikeSummary(d: StrikeOut) {
  return [
    { label: 'sample rate 1/dt', value: `${(d.fs / 1000).toFixed(2)} kHz` },
    { label: 'modes in the exact sum', value: String(d.nmodes) },
    { label: 'relative rms error', value: fmtErr(d.rel) },
  ]
}

export function CentsPanels({ d }: { d: CentsOut }) {
  const nl = d.lams.length
  return (
    <Row>
      {d.rs.map((R, r) => {
        const idx = d.ring.map((g, i) => (g === r + 1 ? i : -1)).filter((i) => i >= 0)
        const ppw = (2 * d.N) / R
        return (
          <SeriesPlot
            key={R}
            title={`|k| ≈ ${R}π: about ${fmtNum(ppw, 2)} points per wavelength`}
            height={220}
            xDomain={[0, 90]}
            xTicks={[0, 15, 30, 45, 60, 75, 90]}
            xLabel="direction, degrees from the x axis"
            yLabel="cents"
            series={d.lams.flatMap((l, k) => [
              {
                x: idx.map((i) => d.angle[i]),
                y: idx.map((i) => d.pred[k][i]),
                color: familyColor(k, nl),
                width: 1.1,
                noLegend: true,
              },
              {
                x: idx.map((i) => d.angle[i]),
                y: idx.map((i) => d.meas[k][i]),
                color: familyColor(k, nl),
                shape: familyShapes[k],
                line: false,
                label: `λ = ${fmtNum(l, 3)}`,
                tip: (j: number) => {
                  const i = idx[j]
                  return [`mode (${d.m[i]}, ${d.n[i]}), ${d.angle[i].toFixed(1)}°`, `measured ${fmtCents(d.meas[k][i])}`]
                },
              },
            ])}
          />
        )
      })}
    </Row>
  )
}

export function OrdersPanels({ d }: { d: OrdersOut }) {
  const sc = d.schemes.map((s) => SCHEME[s])
  const nm = d.modes.length
  const tip = (s: number) => (j: number) => [
    `N = ${d.Ns[j]}, run ${fmtMs(d.ms[s][j])}`,
    ...d.modes.map((m, q) => `mode (${m[0]},${m[1]}): ${fmtCents(d.cents[s * nm + q][j])}`),
  ]
  return (
    <>
      <Row>
        <SeriesPlot
          title="worst pitch error of the three test modes, against the grid"
          height={250}
          xLog
          yLog
          yDomain={[1e-3, 3000]}
          xLabel="grid intervals N"
          xTicks={d.Ns}
          yLabel="|cents|"
          hlines={[{ y: 5, label: '5 cents' }]}
          refs={[
            { p: -2, through: [40, 150], label: 'slope −2', span: 0.35, labelAt: 'end' },
            { p: -4, through: [40, 12], label: 'slope −4', span: 0.35 },
          ]}
          series={sc.map((s, k) => ({
            x: d.Ns,
            y: d.worst[k],
            color: method[s.key],
            shape: s.shape,
            label: s.label,
            tip: tip(k),
          }))}
        />
        <SeriesPlot
          title="the same errors against the time each run took"
          height={250}
          xLog
          yLog
          yDomain={[1e-3, 3000]}
          xLabel="ms"
          yLabel="|cents|"
          hlines={[{ y: 5, label: '5 cents' }]}
          series={sc.map((s, k) => ({
            x: d.ms[k],
            y: d.worst[k],
            color: method[s.key],
            shape: s.shape,
            label: s.label,
            tip: tip(k),
          }))}
          legend={false}
        />
      </Row>
      <NumTable
        caption="worst pitch error in cents, and its observed order between successive grids"
        head={['N', ...d.schemes.map((s) => `${s} error`), ...d.schemes.map((s) => `${s} order`)]}
        rows={d.Ns.map((N, j) => [
          N,
          ...d.schemes.map((_, s) => fmtNum(d.worst[s][j], 3)),
          ...d.schemes.map((_, s) => fmtNum(d.orders[s][j], 3)),
        ])}
      />
    </>
  )
}