import type { Chapter } from '../../ui/types.ts'
import type { Num, Params } from '../../engine/types.ts'
import driver from './driver.m?raw'
import script from './disk.m?raw'
import text from './text.md?raw'
import Listen, { type Clip } from '../../audio/Listen.tsx'
import { NumTable, Row, SeriesPlot, fmtCents, fmtMs, fmtNum } from '../common/panels.tsx'
import { faded, ink, method } from '../../plot/palette.ts'

interface HearOut {
  f: number[]
  adb: number[]
  m: number[]
  k: number[]
  ratio: number[]
  fr: number[]
  db: number[]
  clipRound: Clip
  clipSquare: Clip
  tm: number[]
  tk: number[]
  tratio: number[]
}

interface GridOut {
  Ns: number[]
  methods: string[]
  modes: number[][]
  cents: Num[][]
  worst: Num[][]
  lam: Num[][]
  ms: Num[][]
  orders: Num[][]
}

const RIM: Record<string, { label: string; color: string; shape: 'circle' | 'cross' }> = {
  staircase: { label: 'staircase rim', color: method.fd2, shape: 'circle' },
  sw: { label: 'Shortley–Weller rim', color: method.boundary, shape: 'cross' },
}

function HearPanels({ d }: { d: HearOut }) {
  const harm = Array.from({ length: 27 }, (_, i) => i + 1)
  return (
    <>
      <SeriesPlot
        title="every partial the blow excites, placed by its frequency as a multiple of the fundamental; faint lines are the whole-number multiples a string would have"
        height={220}
        xDomain={[0, 27]}
        yDomain={[-60, 3]}
        xLabel="frequency / fundamental"
        yLabel="dB"
        vlines={[{ x: harm, color: faded(ink.muted, 0.5) }]}
        series={[
          {
            x: d.ratio,
            y: d.adb,
            color: method.modal,
            stems: true,
            base: -60,
            shape: 'circle',
            line: false,
            tip: (i) => [`mode (m, k) = (${d.m[i]}, ${d.k[i]})`, `${d.f[i].toFixed(1)} Hz, ratio ${d.ratio[i].toFixed(3)}`, `${d.adb[i].toFixed(1)} dB`],
          },
        ]}
        legend={false}
      />
      <Row>
        <SeriesPlot
          title="spectrum of the sound"
          height={200}
          xLabel="Hz"
          yLabel="dB"
          yDomain={[-80, 3]}
          series={[{ x: d.fr, y: d.db, color: method.modal, width: 1.2 }]}
          legend={false}
        />
        <NumTable
          caption="the lowest twelve modes of any round membrane"
          head={['m', 'k', 'f / f₀₁']}
          rows={d.tm.map((m, i) => [m, d.tk[i], d.tratio[i].toFixed(4)])}
        />
      </Row>
      <Listen
        items={[
          { label: 'round drum', clip: d.clipRound },
          { label: 'square drum, same fundamental', clip: d.clipSquare },
        ]}
        note="both exact, each normalised to its own peak"
      />
    </>
  )
}

function GridPanels({ d }: { d: GridOut }) {
  const nq = d.modes.length
  const rim = d.methods.map((m) => RIM[m])
  const tip = (s: number) => (j: number) => [
    `N = ${d.Ns[j]}, λ = ${fmtNum(d.lam[s][j], 3)}, ${fmtMs(d.ms[s][j])}`,
    ...d.modes.map((m, q) => `mode (${m[0]},${m[1]}): ${fmtCents(d.cents[s * nq + q][j])}`),
  ]
  return (
    <>
      <Row>
        <SeriesPlot
          title="worst pitch error of the two lowest modes"
          height={240}
          xLog
          yLog
          yDomain={[0.05, 200]}
          xLabel="grid intervals N"
          xTicks={d.Ns}
          yLabel="|cents|"
          hlines={[{ y: 5, label: '5 cents' }]}
          refs={[
            { p: -1, through: [30, 60], label: 'slope −1', span: 0.4, labelAt: 'end' },
            { p: -2, through: [30, 1.2], label: 'slope −2', span: 0.4 },
          ]}
          series={rim.map((r, s) => ({ x: d.Ns, y: d.worst[s], color: r.color, shape: r.shape, label: r.label, tip: tip(s) }))}
        />
        <SeriesPlot
          title="the Courant number each rim allows"
          height={240}
          xLog
          yDomain={[0, 0.75]}
          xLabel="grid intervals N"
          xTicks={d.Ns}
          yLabel="λ"
          series={rim.map((r, s) => ({ x: d.Ns, y: d.lam[s], color: r.color, shape: r.shape, label: r.label, tip: tip(s) }))}
          legend={false}
        />
      </Row>
      <SeriesPlot
        title="the same errors against the time the runs took"
        height={220}
        xLog
        yLog
        yDomain={[0.05, 200]}
        xLabel="ms"
        yLabel="|cents|"
        hlines={[{ y: 5, label: '5 cents' }]}
        series={rim.map((r, s) => ({ x: d.ms[s], y: d.worst[s], color: r.color, shape: r.shape, label: r.label, tip: tip(s) }))}
        legend={false}
      />
      <NumTable
        caption="worst pitch error in cents, observed order, and the Courant number used"
        head={['N', ...d.methods.flatMap((m) => [`${m} error`, `${m} order`, `${m} λ`])]}
        rows={d.Ns.map((N, j) => [
          N,
          ...d.methods.flatMap((_, s) => [fmtNum(d.worst[s][j], 3), fmtNum(d.orders[s][j], 2), fmtNum(d.lam[s][j], 3)]),
        ])}
      />
    </>
  )
}

export const ch06: Chapter = {
  id: 'round',
  nav: 'A round drum',
  part: 'Drums',
  title: 'A round drum on a square grid',
  blurb:
    'Bessel modes and the sound of an inharmonic spectrum, and what a curved rim costs a grid that cannot follow it.',
  text,
  labs: [
    {
      id: 'hear',
      title: 'The partials of a round membrane',
      caption:
        'Strike at the centre and only the circularly symmetric modes sound; move outwards and the others join in. Neither set lines up with the harmonic series.',
      driver,
      script,
      controls: [
        {
          kind: 'select',
          key: 'r0',
          label: 'strike at radius',
          options: [
            { value: 0, label: 'the centre' },
            { value: 0.4, label: '0.4 of the way out' },
            { value: 0.8, label: '0.8, near the rim' },
          ],
        },
      ],
      defaults: { r0: 0.4 },
      derive: (p: Params) => ({
        mode: 'hear',
        fs: 22050,
        f01: 150,
        T: 1.5,
        width: 0.03,
        mmax: 40,
        kmax: 14,
        fmax: 4000,
        r0: p.r0,
        rr: 0.55,
        thr: 2.1,
        tau: 0.5,
      }),
      render: (d: HearOut) => <HearPanels d={d} />,
      summary: (d: HearOut) => [
        { label: 'partials below 4 kHz', value: String(d.f.length) },
        { label: 'second partial', value: `${d.ratio[1]?.toFixed(3)} × f₀₁` },
      ],
    },
    {
      id: 'grid',
      title: 'Two rims, measured',
      caption:
        'Modes (0,1) and (1,1), started exactly and measured from the simulation. This lab runs for several seconds, so it waits for the run button.',
      driver,
      script,
      controls: [],
      defaults: {},
      derive: () => ({
        mode: 'grid',
        Ns: [16, 24, 32, 40, 48, 64],
        methods: ['staircase', 'sw'],
        modes: [0, 1, 1, 1],
        periods: 10,
      }),
      manual: true,
      editorOpen: true,
      render: (d: GridOut) => <GridPanels d={d} />,
      summary: (d: GridOut) =>
        d.methods.map((m, s) => ({ label: `${RIM[m].label}, N = ${d.Ns[d.Ns.length - 1]}`, value: fmtCents(d.worst[s][d.Ns.length - 1]) })),
    },
  ],
}