// Figures for Part II: the square's modes, the anisotropy of the grid, the
// three stencils of Chapter 5, and the two rims of Chapter 6.
import type { ReactElement } from 'react'
import { Figure, Label, Node } from './svg.tsx'
import { faded, familyColor, ink, method } from '../plot/palette.ts'

const pts = (xy: [number, number][]) => xy.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(1)} ${y.toFixed(1)}`).join('')

/** Six modes of the square membrane, with their frequencies relative to the lowest. */
export function Modes() {
  const modes: [number, number][] = [
    [1, 1],
    [2, 1],
    [2, 2],
    [3, 1],
    [3, 2],
    [3, 3],
  ]
  const s = 92
  const gap = 22
  const x0 = (716 - (6 * s + 5 * gap)) / 2
  const y0 = 18
  const n = 18
  return (
    <Figure
      width={716}
      height={176}
      caption="Six modes of a square membrane, shaded by the sign of the displacement, with their frequencies as multiples of the lowest. Modes (m, n) and (n, m) have the same frequency, so the square's spectrum is full of coincident pairs, and none of the ratios but (2, 2) is a whole number."
    >
      {modes.map(([m, k], q) => {
        const ox = x0 + q * (s + gap)
        const cells: ReactElement[] = []
        for (let i = 0; i < n; i++) {
          for (let j = 0; j < n; j++) {
            const v = Math.sin((m * Math.PI * (j + 0.5)) / n) * Math.sin((k * Math.PI * (i + 0.5)) / n)
            const c = v > 0 ? method.boundary : method.fd2
            cells.push(
              <rect
                key={`${i}-${j}`}
                x={ox + (j * s) / n}
                y={y0 + (i * s) / n}
                width={s / n + 0.4}
                height={s / n + 0.4}
                fill={faded(c, 1 - Math.abs(v) * 0.8)}
              />,
            )
          }
        }
        return (
          <g key={q}>
            {cells}
            <rect x={ox} y={y0} width={s} height={s} fill="none" stroke={ink.secondary} strokeWidth={1.6} />
            <Label x={ox + s / 2} y={y0 + s + 18} size={12} fill={ink.primary}>
              {`(${m}, ${k})`}
            </Label>
            <Label x={ox + s / 2} y={y0 + s + 35} size={11.5} fill={ink.muted}>
              {`× ${(Math.sqrt(m * m + k * k) / Math.SQRT2).toFixed(3)}`}
            </Label>
          </g>
        )
      })}
    </Figure>
  )
}

/** Where a circular wavefront ends up on the grid, for a short wavelength. */
export function Anisotropy() {
  const cx = 250
  const cy = 200
  const R = 170
  const P = 3
  const kh = (2 * Math.PI) / P
  const speed = (th: number, lam: number) => {
    const s2 = Math.sin((kh * Math.cos(th)) / 2) ** 2 + Math.sin((kh * Math.sin(th)) / 2) ** 2
    return (2 * Math.asin(lam * Math.sqrt(s2))) / (lam * kh)
  }
  const lams = [0.3, 0.5, Math.SQRT1_2]
  const front = (lam: number) => {
    const out: [number, number][] = []
    for (let i = 0; i <= 90; i++) {
      const th = (Math.PI / 2) * (i / 90)
      const r = R * speed(th, lam)
      out.push([cx + r * Math.cos(th), cy - r * Math.sin(th)])
    }
    return pts(out)
  }
  return (
    <Figure
      width={716}
      height={228}
      caption="A quarter of a circular wavefront at three points per wavelength: where the exact wave has reached (grey), and where the grid's waves of the same length have reached in the same time, for three Courant numbers. Waves along the grid's axes are slowest; along the diagonal, at λ = 1/√2, the grid is exact. At twenty points per wavelength the same picture would be indistinguishable from a circle."
    >
      <line x1={cx} y1={cy} x2={cx + R + 20} y2={cy} stroke={ink.axis} />
      <line x1={cx} y1={cy} x2={cx} y2={cy - R - 14} stroke={ink.axis} />
      <line x1={cx} y1={cy} x2={cx + (R + 10) * Math.SQRT1_2} y2={cy - (R + 10) * Math.SQRT1_2} stroke={ink.axis} strokeDasharray="3 3" />
      <path d={`M${cx + R} ${cy}A${R} ${R} 0 0 0 ${cx} ${cy - R}`} fill="none" stroke={ink.reference} strokeWidth={2.4} />
      {lams.map((l, k) => (
        <path key={l} d={front(l)} fill="none" stroke={familyColor(k, lams.length)} strokeWidth={2} />
      ))}
      <Label x={cx + R + 24} y={cy} size={11} fill={ink.muted} anchor="start">
        along an axis
      </Label>
      <Label x={cx + (R + 16) * Math.SQRT1_2} y={cy - (R + 16) * Math.SQRT1_2} size={11} fill={ink.muted} anchor="start">
        along the diagonal
      </Label>
      <Label x={cx - 6} y={cy + 14} size={11} fill={ink.muted} anchor="end">
        start
      </Label>
      {lams.map((l, k) => (
        <g key={l}>
          <line x1={500} x2={526} y1={70 + 22 * k} y2={70 + 22 * k} stroke={familyColor(k, lams.length)} strokeWidth={2} />
          <Label x={534} y={70 + 22 * k} size={11.5} fill={ink.secondary} anchor="start">
            {k === 2 ? 'λ = 1/√2' : `λ = ${l}`}
          </Label>
        </g>
      ))}
      <line x1={500} x2={526} y1={70 + 22 * 3} y2={70 + 22 * 3} stroke={ink.reference} strokeWidth={2.4} />
      <Label x={534} y={70 + 22 * 3} size={11.5} fill={ink.secondary} anchor="start">
        exact
      </Label>
    </Figure>
  )
}

/** The nodes each of Chapter 5's schemes reads to update one node. */
export function Stencils() {
  const g = 22
  const panel = (ox: number, title: string, sub: string, set: [number, number, string][]) => {
    const cy = 100
    const grid: ReactElement[] = []
    for (let i = -2; i <= 2; i++) {
      for (let j = -2; j <= 2; j++) {
        grid.push(<Node key={`g${i}${j}`} x={ox + j * g} y={cy + i * g} r={2.2} fill={ink.axis} />)
      }
    }
    return (
      <g>
        {grid}
        {set.map(([i, j, c]) => (
          <Node key={`${i}${j}`} x={ox + j * g} y={cy + i * g} r={i === 0 && j === 0 ? 7 : 5.5} fill={c} />
        ))}
        <Label x={ox} y={172} size={12} fill={ink.primary}>
          {title}
        </Label>
        <Label x={ox} y={190} size={11} fill={ink.muted}>
          {sub}
        </Label>
      </g>
    )
  }
  const five: [number, number, string][] = [
    [0, 0, method.fd2],
    [0, 1, method.fd2],
    [0, -1, method.fd2],
    [1, 0, method.fd2],
    [-1, 0, method.fd2],
  ]
  const cross = (c: string): [number, number, string][] => [
    [0, 0, c],
    [0, 1, c],
    [0, -1, c],
    [1, 0, c],
    [-1, 0, c],
    [0, 2, c],
    [0, -2, c],
    [2, 0, c],
    [-2, 0, c],
  ]
  const both: [number, number, string][] = [
    ...cross(method.fd4),
    [1, 1, faded(method.fd4, 0.35)],
    [1, -1, faded(method.fd4, 0.35)],
    [-1, 1, faded(method.fd4, 0.35)],
    [-1, -1, faded(method.fd4, 0.35)],
  ]
  return (
    <Figure
      width={716}
      height={206}
      caption="The nodes each scheme reads at the current step to update the centre node. The fourth-order Laplacian widens the five-point cross to nine nodes; the fully fourth-order scheme also applies the five-point Laplacian twice, which reaches the four diagonal neighbours (lighter) as well."
    >
      {panel(130, 'second order', 'five-point cross', five)}
      {panel(358, 'fourth order in space', 'nine-point cross', cross(method.waveguide))}
      {panel(586, 'fourth order in both', 'thirteen nodes', both)}
    </Figure>
  )
}

/** A curved rim on a square grid: staircase against Shortley-Weller. */
export function Rim() {
  const g = 34
  const panel = (ox: number, sw: boolean) => {
    // a circle of radius R centred below-left of the panel, so that its arc
    // runs diagonally across it
    const R = 7.3
    const cxg = -2.2
    const cyg = -2.6
    const inside = (i: number, j: number) => (j - cxg) ** 2 + (i - cyg) ** 2 < R * R
    const X = (j: number) => ox + j * g
    const Y = (i: number) => 206 - i * g
    const arc: [number, number][] = []
    for (let k = 0; k <= 60; k++) {
      const t = (Math.PI / 2) * (k / 60)
      const j = cxg + R * Math.cos(t)
      const i = cyg + R * Math.sin(t)
      if (j >= -0.4 && j <= 6.4 && i >= -0.4 && i <= 5.4) arc.push([X(j), Y(i)])
    }
    const els: ReactElement[] = []
    for (let i = 0; i <= 5; i++) {
      for (let j = 0; j <= 6; j++) {
        const inn = inside(i, j)
        els.push(
          <circle
            key={`n${i}${j}`}
            cx={X(j)}
            cy={Y(i)}
            r={4}
            fill={inn ? ink.node : 'none'}
            stroke={inn ? 'none' : ink.muted}
            strokeWidth={1.2}
          />,
        )
        if (inn && sw) {
          // where the rim crosses the grid line to an outside neighbour
          if (!inside(i, j + 1) && j + 1 <= 6.4) {
            const jc = cxg + Math.sqrt(R * R - (i - cyg) ** 2)
            els.push(<line key={`e${i}${j}`} x1={X(j)} y1={Y(i)} x2={X(jc)} y2={Y(i)} stroke={method.boundary} strokeWidth={2} />)
            els.push(<circle key={`c${i}${j}`} cx={X(jc)} cy={Y(i)} r={3} fill={method.boundary} />)
          }
          if (!inside(i + 1, j) && i + 1 <= 5.4) {
            const ic = cyg + Math.sqrt(R * R - (j - cxg) ** 2)
            els.push(<line key={`u${i}${j}`} x1={X(j)} y1={Y(i)} x2={X(j)} y2={Y(ic)} stroke={method.boundary} strokeWidth={2} />)
            els.push(<circle key={`d${i}${j}`} cx={X(j)} cy={Y(ic)} r={3} fill={method.boundary} />)
          }
        }
      }
    }
    // the staircase: the stencil reaches outside neighbours, which are held
    // at zero as if the rim ran through them
    const stair: ReactElement[] = []
    if (!sw) {
      for (let i = 0; i <= 5; i++) {
        for (let j = 0; j <= 6; j++) {
          if (!inside(i, j)) continue
          const nb: [number, number][] = [
            [i, j + 1],
            [i + 1, j],
          ]
          for (const [a, b] of nb) {
            if (a > 5 || b > 6 || inside(a, b)) continue
            stair.push(<line key={`s${i}${j}${a}${b}`} x1={X(j)} y1={Y(i)} x2={X(b)} y2={Y(a)} stroke={method.fd2} strokeWidth={2} />)
            stair.push(<circle key={`z${a}${b}${i}${j}`} cx={X(b)} cy={Y(a)} r={4} fill={method.fd2} />)
          }
        }
      }
    }
    return (
      <g>
        <path d={pts(arc)} fill="none" stroke={ink.reference} strokeWidth={2} />
        {stair}
        {els}
      </g>
    )
  }
  return (
    <Figure
      width={716}
      height={262}
      caption="The rim of a drum crossing a square grid. Filled nodes are inside and are unknowns; open ones are outside and held at zero. Left, the staircase: the stencil reaches outside neighbours (blue), which are held at zero as if the rim passed through them, so the drum the grid sees extends up to one spacing beyond the true rim (grey), by an amount that varies irregularly along it. Right, Shortley–Weller: the true crossing points (pink) are kept, at a fraction θ of a spacing from the node, and the stencil uses the unequal spacing."
    >
      {panel(70, false)}
      {panel(430, true)}
      <Label x={172} y={248} size={12} fill={ink.primary}>
        staircase
      </Label>
      <Label x={532} y={248} size={12} fill={ink.primary}>
        Shortley–Weller
      </Label>
    </Figure>
  )
}