// Figures for the introduction: what the problem is, on what domains, and
// what the spread in accuracy-against-cost looks like before any of it is
// measured.
import type { ReactNode } from 'react'
import { Arrowheads, Figure, Label, Node, arrow } from './svg.tsx'
import { ink, method, seqColor } from '../plot/palette.ts'

/** A closed wobbly curve, so that "a region" does not read as "a disc". */
function blob(cx: number, cy: number, rx: number, ry: number, phase: number): string {
  const pts: string[] = []
  for (let i = 0; i < 72; i++) {
    const t = (2 * Math.PI * i) / 72
    const r = 1 + 0.1 * Math.cos(3 * t + phase) + 0.045 * Math.sin(5 * t + 1.3)
    pts.push(`${(cx + rx * r * Math.cos(t)).toFixed(1)} ${(cy + ry * r * Math.sin(t)).toFixed(1)}`)
  }
  return `M ${pts.join(' L ')} Z`
}

/** Outward normal of the blob at parameter t, for the Neumann panel. */
function blobPoint(cx: number, cy: number, rx: number, ry: number, phase: number, t: number) {
  const r = 1 + 0.1 * Math.cos(3 * t + phase) + 0.045 * Math.sin(5 * t + 1.3)
  const dr = -0.3 * Math.sin(3 * t + phase) + 0.225 * Math.cos(5 * t + 1.3)
  const x = cx + rx * r * Math.cos(t)
  const y = cy + ry * r * Math.sin(t)
  const dx = rx * (dr * Math.cos(t) - r * Math.sin(t))
  const dy = ry * (dr * Math.sin(t) + r * Math.cos(t))
  const n = Math.hypot(dx, dy)
  return { x, y, nx: dy / n, ny: -dx / n }
}

const PANEL_W = 232
const CY = 108

function Panel({
  x,
  heading,
  interior,
  sub,
  muted,
  children,
}: {
  x: number
  heading: string
  interior: string
  sub: string
  muted?: boolean
  children?: ReactNode
}) {
  return (
    <g transform={`translate(${x} 0)`}>
      <Label x={PANEL_W / 2} y={16} size={13} weight={600} fill={muted ? ink.muted : ink.primary}>
        {heading}
      </Label>
      {children}
      <Label x={PANEL_W / 2} y={CY} size={14} fill={muted ? ink.muted : ink.primary}>
        {interior}
      </Label>
      <Label x={PANEL_W / 2} y={214} size={12} fill={ink.muted}>
        {sub}
      </Label>
    </g>
  )
}

/** Laplace against Poisson, Dirichlet against Neumann, in one row. */
export function DirichletProblem() {
  const cx = PANEL_W / 2
  const rx = 74
  const ry = 54
  const normals = [0.4, 1.5, 2.6, 3.7, 4.8, 5.9].map((t) => blobPoint(cx, CY, rx, ry, 0.7, t))
  return (
    <Figure
      width={716}
      height={232}
      caption="The interior condition and the boundary condition are chosen independently. This tutorial takes the first two panels: Laplace and Poisson with data prescribed on the whole boundary."
    >
      <Arrowheads id="dp" colors={[ink.muted]} />

      <Panel x={0} heading="Laplace, Dirichlet" interior="Δu = 0" sub="Chapters 5–10">
        <path d={blob(cx, CY, rx, ry, 0.7)} fill="#20242c" stroke={method.fd2} strokeWidth={2.4} />
        <Label x={cx} y={CY + 22} size={11.5} fill={ink.muted}>
          no source
        </Label>
        <Label x={cx} y={CY + ry + 26} size={12} fill={method.fd2}>
          u = g on ∂Ω
        </Label>
      </Panel>

      <Panel x={242} heading="Poisson, Dirichlet" interior="−Δu = f" sub="Chapters 1–4">
        <path d={blob(cx, CY, rx, ry, 0.7)} fill="#20242c" stroke={method.fd2} strokeWidth={2.4} />
        <ellipse cx={cx - 44} cy={CY - 24} rx={17} ry={13} fill={seqColor(0.75)} opacity={0.5} />
        <ellipse cx={cx + 46} cy={CY + 26} rx={12} ry={10} fill={seqColor(0.5)} opacity={0.45} />
        <Label x={cx} y={CY + 22} size={11.5} fill={ink.muted}>
          a source f inside
        </Label>
        <Label x={cx} y={CY + ry + 26} size={12} fill={method.fd2}>
          u = g on ∂Ω
        </Label>
      </Panel>

      <Panel x={484} heading="Neumann" interior="Δu = 0" sub="not treated here" muted>
        <path d={blob(cx, CY, rx, ry, 0.7)} fill="#1e1e1c" stroke={ink.axis} strokeWidth={2.4} />
        {normals.map((p, i) => (
          <line
            key={i}
            x1={p.x}
            y1={p.y}
            x2={p.x + 15 * p.nx}
            y2={p.y + 15 * p.ny}
            stroke={ink.muted}
            strokeWidth={1.3}
            markerEnd={arrow('dp', 0)}
          />
        ))}
        <Label x={cx} y={CY + ry + 26} size={12} fill={ink.muted}>
          ∂u/∂n = g on ∂Ω
        </Label>
      </Panel>
    </Figure>
  )
}

/** The four domains, in the order the tutorial meets them. */
export function Domains() {
  const c = ink.node
  const box = (i: number) => 12 + i * 176
  return (
    <Figure
      width={716}
      height={196}
      caption="The four domains. Each step to the right removes a structural assumption: the second dimension, then the convexity of the corner, then the straight edge itself."
    >
      {/* 1-D interval */}
      <g transform={`translate(${box(0)} 0)`}>
        <Label x={76} y={16} size={12.5} weight={600} fill={ink.primary}>
          interval
        </Label>
        <line x1={10} y1={92} x2={142} y2={92} stroke={ink.axis} strokeWidth={1.5} />
        {Array.from({ length: 9 }, (_, i) => (
          <Node key={i} x={10 + (i * 132) / 8} y={92} r={i === 0 || i === 8 ? 4.5 : 3} fill={i === 0 || i === 8 ? method.fd2 : c} />
        ))}
        <Label x={10} y={112} size={11} fill={method.fd2}>
          u(0)=α
        </Label>
        <Label x={142} y={112} size={11} fill={method.fd2}>
          u(1)=β
        </Label>
        <Label x={76} y={168} size={11.5} fill={ink.muted}>
          Chapters 1–4
        </Label>
      </g>

      {/* unit square */}
      <g transform={`translate(${box(1)} 0)`}>
        <Label x={76} y={16} size={12.5} weight={600} fill={ink.primary}>
          square
        </Label>
        <rect x={22} y={38} width={108} height={108} fill="#20242c" stroke={method.fd2} strokeWidth={2.2} />
        {Array.from({ length: 5 }, (_, i) => (
          <g key={i}>
            <line x1={22 + (i + 1) * 18} y1={38} x2={22 + (i + 1) * 18} y2={146} stroke={ink.axis} strokeWidth={1} />
            <line x1={22} y1={38 + (i + 1) * 18} x2={130} y2={38 + (i + 1) * 18} stroke={ink.axis} strokeWidth={1} />
          </g>
        ))}
        <Label x={76} y={168} size={11.5} fill={ink.muted}>
          Chapters 5–8
        </Label>
      </g>

      {/* L-shape */}
      <g transform={`translate(${box(2)} 0)`}>
        <Label x={76} y={16} size={12.5} weight={600} fill={ink.primary}>
          L-shape
        </Label>
        <path
          d="M 22 38 H 130 V 92 H 76 V 146 H 22 Z"
          fill="#20242c"
          stroke={method.iterative}
          strokeWidth={2.2}
          strokeLinejoin="round"
        />
        <circle cx={76} cy={92} r={5} fill="none" stroke={method.mps} strokeWidth={2} />
        <Label x={95} y={106} size={11} anchor="start" fill={method.mps}>
          3π/2
        </Label>
        <Label x={76} y={168} size={11.5} fill={ink.muted}>
          Chapter 9
        </Label>
      </g>

      {/* smooth curve */}
      <g transform={`translate(${box(3)} 0)`}>
        <Label x={76} y={16} size={12.5} weight={600} fill={ink.primary}>
          smooth curve
        </Label>
        <path
          d={blob(76, 92, 56, 54, 2.1)}
          fill="#20242c"
          stroke={method.bie}
          strokeWidth={2.2}
        />
        {Array.from({ length: 18 }, (_, i) => {
          const p = blobPoint(76, 92, 56, 54, 2.1, (2 * Math.PI * i) / 18)
          return <Node key={i} x={p.x} y={p.y} r={2.4} fill={ink.node} />
        })}
        <Label x={76} y={168} size={11.5} fill={ink.muted}>
          Chapter 10
        </Label>
      </g>
    </Figure>
  )
}

/** Schematic of the spread the tutorial measures.  Not data. */
export function AccuracyCost() {
  const L = 66
  const R = 470
  const T = 26
  const B = 176
  // log10 time from -1 to 3.5 ms across; log10 error from 0 at the top to -16
  const sx = (v: number) => L + ((v + 1) / 4.5) * (R - L)
  const sy = (v: number) => T + (-v / 16) * (B - T)
  const curve = (pts: [number, number][]) =>
    'M ' + pts.map(([t, e]) => `${sx(t).toFixed(1)} ${sy(e).toFixed(1)}`).join(' L ')

  const series: { key: keyof typeof method; label: string; pts: [number, number][] }[] = [
    { key: 'fd2', label: 'second order', pts: [[-0.9, -1.0], [0.0, -2.6], [1.2, -4.4], [2.4, -6.0], [3.4, -7.3]] },
    { key: 'fd4', label: 'sixth order', pts: [[-0.5, -1.4], [0.1, -5.0], [0.7, -9.0], [1.3, -13.0], [2.6, -13.4]] },
    { key: 'spectral', label: 'spectral', pts: [[-0.2, -2.0], [0.15, -6.5], [0.5, -11.5], [0.9, -14.0], [2.0, -14.0]] },
    { key: 'bie', label: 'boundary integral', pts: [[0.0, -3.0], [0.35, -9.0], [0.8, -15.4], [1.9, -15.6]] },
  ]

  return (
    <Figure
      width={716}
      height={214}
      caption="Schematic, not measured data: the shape of the comparison every chapter returns to. Higher order changes the slope, and structure changes which curve is available at all. The labs produce the real numbers."
    >
      <line x1={L} y1={T} x2={L} y2={B} stroke={ink.axis} strokeWidth={1.2} />
      <line x1={L} y1={B} x2={R} y2={B} stroke={ink.axis} strokeWidth={1.2} />
      {[0, -4, -8, -12, -16].map((e) => (
        <g key={e}>
          <line x1={L} y1={sy(e)} x2={R} y2={sy(e)} stroke={ink.grid} strokeWidth={1} />
          <Label x={L - 8} y={sy(e)} size={10.5} anchor="end" fill={ink.muted} mono>
            {e === 0 ? '1' : `1e${e}`}
          </Label>
        </g>
      ))}
      <g transform={`translate(${L - 46} ${(T + B) / 2}) rotate(-90)`}>
        <Label x={0} y={0} size={11.5} fill={ink.muted}>
          error
        </Label>
      </g>
      <Label x={(L + R) / 2} y={B + 22} size={11.5} fill={ink.muted}>
        time for one solve →
      </Label>

      {series.map((s, i) => {
        const last = s.pts[s.pts.length - 1]
        const ly = T + 16 + i * 22
        return (
          <g key={s.key}>
            <path d={curve(s.pts)} fill="none" stroke={method[s.key]} strokeWidth={2.2} strokeLinecap="round" />
            <Node x={sx(last[0])} y={sy(last[1])} r={3.4} fill={method[s.key]} />
            <line x1={R + 26} y1={ly} x2={R + 40} y2={ly} stroke={method[s.key]} strokeWidth={2.4} />
            <Label x={R + 48} y={ly} size={12} anchor="start" fill={method[s.key]}>
              {s.label}
            </Label>
          </g>
        )
      })}
      <Label x={R + 26} y={T + 16 + 4 * 22 + 6} size={11} anchor="start" fill={ink.muted}>
        each curve stops at
      </Label>
      <Label x={R + 26} y={T + 16 + 4 * 22 + 22} size={11} anchor="start" fill={ink.muted}>
        its own roundoff floor
      </Label>
    </Figure>
  )
}