// Static figures for Chapters 9 and 10.
import { Arrowheads, Figure, Label, Node, arrow } from './svg.tsx'
import { ink, method, seqColor } from '../plot/palette.ts'

/** The L-shaped domain, its re-entrant corner, and the profile of r^(2/3). */
export function ReentrantCorner() {
  const S = 62 // half-width of the square, in px
  const CX = 150
  const CY = 112
  return (
    <Figure
      width={716}
      height={236}
      caption="The re-entrant corner and what it does to the solution. A convex corner of angle π/2 gives r², which is harmless; the 3π/2 corner gives r²ᐟ³, whose gradient is infinite at the origin. No difference scheme recovers second order from that."
    >
      <Arrowheads id="rc" colors={[method.mps, ink.muted]} />

      {/* the domain */}
      <path
        d={`M ${CX - S} ${CY - S} H ${CX + S} V ${CY} H ${CX} V ${CY + S} H ${CX - S} Z`}
        fill="#20242c"
        stroke={method.iterative}
        strokeWidth={2.2}
        strokeLinejoin="round"
      />
      <Label x={CX - 30} y={CY - 34} size={13} fill={ink.secondary}>
        Ω
      </Label>
      <Label x={CX} y={18} size={12.5} weight={600} fill={ink.primary}>
        the L-shaped domain
      </Label>

      {/* the corner angle */}
      <path
        d={`M ${CX + 26} ${CY} A 26 26 0 1 0 ${CX} ${CY + 26}`}
        fill="none"
        stroke={method.mps}
        strokeWidth={1.6}
        markerEnd={arrow('rc', 0)}
      />
      <Label x={CX - 32} y={CY + 54} size={12} anchor="middle" fill={method.mps}>
        α = 3π/2
      </Label>
      <Node x={CX} y={CY} r={3.6} fill={method.mps} />

      <Label x={CX} y={CY + S + 26} size={11.5} fill={ink.muted}>
        π/2 at every other corner
      </Label>

      {/* the profile */}
      <g transform="translate(354 0)">
        <Label x={160} y={18} size={12.5} weight={600} fill={ink.primary}>
          radial profile at the corner
        </Label>
        <line x1={20} y1={186} x2={300} y2={186} stroke={ink.axis} strokeWidth={1.2} />
        <line x1={20} y1={186} x2={20} y2={38} stroke={ink.axis} strokeWidth={1.2} />
        <Label x={160} y={206} size={11.5} fill={ink.muted} italic>
          distance r from the corner
        </Label>
        {(
          [
            { p: 2 / 3, c: method.mps, l: 'r²ᐟ³ at the re-entrant corner' },
            { p: 2, c: ink.muted, l: 'r² at a convex corner' },
          ] as const
        ).map((s, k) => {
          const pts: string[] = []
          for (let i = 0; i <= 100; i++) {
            const t = i / 100
            pts.push(`${(20 + t * 280).toFixed(1)} ${(186 - 140 * Math.pow(t, s.p)).toFixed(1)}`)
          }
          return (
            <g key={k}>
              <path d={'M ' + pts.join(' L ')} fill="none" stroke={s.c} strokeWidth={2.2} />
              <line x1={34} y1={52 + k * 19} x2={52} y2={52 + k * 19} stroke={s.c} strokeWidth={2.2} />
              <Label x={60} y={52 + k * 19} size={11.5} anchor="start" fill={s.c}>
                {s.l}
              </Label>
            </g>
          )
        })}

      </g>
    </Figure>
  )
}

/** Discretising the area against discretising the boundary. */
export function AreaAgainstBoundary() {
  const blobPts = (cx: number, cy: number, rr: number, m: number) =>
    Array.from({ length: m }, (_, i) => {
      const t = (2 * Math.PI * i) / m
      const r = rr * (1 + 0.18 * Math.cos(3 * t))
      return { x: cx + r * Math.cos(t), y: cy + r * Math.sin(t) * 0.92, t }
    })
  const path = (cx: number, cy: number, rr: number) =>
    'M ' + blobPts(cx, cy, rr, 160).map((p) => `${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(' L ') + ' Z'

  const cx1 = 168
  const cx2 = 548
  const cy = 118
  const rr = 78

  return (
    <Figure
      width={716}
      height={258}
      caption="Two ways to spend unknowns on the same problem. Filling the area needs a grid the curve does not fit; putting the unknown on the curve itself needs a few hundred points, and the equation is then satisfied exactly in the interior by construction."
    >
      {/* area discretisation */}
      <Label x={cx1} y={18} size={12.5} weight={600} fill={ink.primary}>
        unknowns in the area
      </Label>
      <clipPath id="ab-clip">
        <path d={path(cx1, cy, rr)} />
      </clipPath>
      <path d={path(cx1, cy, rr)} fill="#20242c" stroke={ink.axis} strokeWidth={1.6} />
      <g clipPath="url(#ab-clip)">
        {Array.from({ length: 19 }, (_, i) => (
          <line key={`v${i}`} x1={cx1 - 96 + i * 11} y1={cy - 92} x2={cx1 - 96 + i * 11} y2={cy + 96} stroke={ink.axis} strokeWidth={1} />
        ))}
        {Array.from({ length: 18 }, (_, j) => (
          <line key={`h${j}`} x1={cx1 - 100} y1={cy - 88 + j * 11} x2={cx1 + 100} y2={cy - 88 + j * 11} stroke={ink.axis} strokeWidth={1} />
        ))}
        {Array.from({ length: 19 }, (_, i) =>
          Array.from({ length: 17 }, (_, j) => (
            <Node key={`${i}-${j}`} x={cx1 - 96 + i * 11} y={cy - 88 + j * 11} r={1.9} fill={seqColor(0.55)} />
          )),
        )}
      </g>
      <Label x={cx1} y={cy + rr + 44} size={11.5} fill={ink.muted}>
        O(N²) unknowns, and the boundary falls between nodes
      </Label>

      {/* boundary discretisation */}
      <Label x={cx2} y={18} size={12.5} weight={600} fill={ink.primary}>
        unknowns on the boundary
      </Label>
      <path d={path(cx2, cy, rr)} fill="#1e1e1c" stroke={method.bie} strokeWidth={2.2} />
      {blobPts(cx2, cy, rr, 36).map((p, i) => (
        <Node key={i} x={p.x} y={p.y} r={3} fill={method.bie} />
      ))}
      <Label x={cx2} y={cy} size={12} fill={ink.secondary}>
        Δu = 0 exactly
      </Label>
      <Label x={cx2} y={cy + rr + 44} size={11.5} fill={ink.muted}>
        O(n) unknowns, placed where the data is
      </Label>
    </Figure>
  )
}

/** Why evaluation near the curve is the hard part. */
export function CloseEvaluation() {
  const cx = 200
  const cy = 116
  const rr = 86
  const pts = (m: number) =>
    Array.from({ length: m }, (_, i) => {
      const t = (2 * Math.PI * i) / m
      const r = rr * (1 + 0.16 * Math.cos(3 * t))
      return { x: cx + r * Math.cos(t), y: cy + r * Math.sin(t) * 0.94 }
    })
  const d = 'M ' + pts(180).map((p) => `${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(' L ') + ' Z'
  const far = { x: cx - 12, y: cy + 6 }
  const near = { x: cx + 74, y: cy - 26 }

  // the integrand along the curve, seen from each target
  const K = (spread: number, amp: number) => {
    const out: string[] = []
    for (let i = 0; i <= 200; i++) {
      const t = -1 + (2 * i) / 200
      const v = amp / (1 + (t / spread) ** 2)
      out.push(`${(420 + (t + 1) * 140).toFixed(1)} ${(186 - v).toFixed(1)}`)
    }
    return 'M ' + out.join(' L ')
  }

  return (
    <Figure
      width={716}
      height={256}
      caption="Close evaluation. The density on the curve is accurate in both cases; what fails is the quadrature used to evaluate the potential. Seen from a target well inside, the integrand is a gentle periodic function; seen from a target one grid spacing away, it is a spike the trapezoid rule cannot resolve."
    >
      <Arrowheads id="ce" colors={[ink.muted]} />
      <path d={d} fill="#20242c" stroke={method.bie} strokeWidth={2.2} />
      {pts(40).map((p, i) => (
        <Node key={i} x={p.x} y={p.y} r={2.6} fill={method.bie} />
      ))}
      <Node x={far.x} y={far.y} r={4.4} fill={method.spectral} />
      <Label x={far.x} y={far.y + 20} size={11.5} fill={method.spectral}>
        target well inside
      </Label>
      <Node x={near.x} y={near.y} r={4.4} fill={method.iterative} />
      <line x1={near.x + 6} y1={near.y - 4} x2={near.x + 40} y2={near.y - 28} stroke={method.iterative} strokeWidth={1} />
      <Label x={near.x + 44} y={near.y - 32} size={11.5} anchor="start" fill={method.iterative}>
        target one grid
      </Label>
      <Label x={near.x + 44} y={near.y - 17} size={11.5} anchor="start" fill={method.iterative}>
        spacing away
      </Label>

      <line x1={332} y1={130} x2={382} y2={130} stroke={ink.muted} strokeWidth={1.3} markerEnd={arrow('ce', 0)} />
      <Label x={357} y={114} size={11} fill={ink.muted}>
        integrand
      </Label>

      <line x1={420} y1={186} x2={700} y2={186} stroke={ink.axis} strokeWidth={1.2} />
      <Label x={560} y={206} size={11.5} fill={ink.muted} italic>
        arclength around the curve
      </Label>
      <path d={K(0.55, 42)} fill="none" stroke={method.spectral} strokeWidth={2.2} />
      <path d={K(0.035, 138)} fill="none" stroke={method.iterative} strokeWidth={2.2} />
      {Array.from({ length: 21 }, (_, i) => (
        <Node key={i} x={420 + i * 14} y={186} r={2.2} fill={ink.family} />
      ))}
      <line x1={424} y1={228} x2={442} y2={228} stroke={method.spectral} strokeWidth={2.2} />
      <Label x={450} y={228} size={11.5} anchor="start" fill={method.spectral}>
        from the far target: smooth
      </Label>
      <line x1={424} y1={246} x2={442} y2={246} stroke={method.iterative} strokeWidth={2.2} />
      <Label x={450} y={246} size={11.5} anchor="start" fill={method.iterative}>
        from the near target: a spike
      </Label>

    </Figure>
  )
}

/** The Pac-Man domain, and its image as a rectangle in polar coordinates. */
export function PacmanDomain() {
  const CX = 158
  const CY = 128
  const R = 88
  // the rectangle: theta across, r up
  const RX = 430
  const RY = 48
  const RW = 240
  const RH = 150
  return (
    <Figure
      width={716}
      height={252}
      caption="The benchmark domain: the unit disk with the quadrant x > 0, y < 0 removed. The boundary is one smooth arc and two straight edges, with right-angle corners where they meet the arc and a re-entrant corner of angle 3π/2 at the origin. In polar coordinates the same domain is a rectangle, on which the whole side r = 0 is the single corner point; that is the rectangle the fourth method collocates on, and the reason the corner singularity sits on the edge of its expansion domain."
    >
      {/* the domain */}
      <path
        d={`M ${CX} ${CY} L ${CX + R} ${CY} A ${R} ${R} 0 1 0 ${CX} ${CY + R} Z`}
        fill="#20242c"
        stroke="none"
      />
      <line x1={CX} y1={CY} x2={CX + R} y2={CY} stroke={method.fd2} strokeWidth={2.4} />
      <path d={`M ${CX + R} ${CY} A ${R} ${R} 0 1 0 ${CX} ${CY + R}`} fill="none" stroke={method.bie} strokeWidth={2.4} />
      <line x1={CX} y1={CY + R} x2={CX} y2={CY} stroke={method.fast} strokeWidth={2.4} />
      <Label x={CX - 34} y={CY - 40} size={13} fill={ink.secondary}>
        Ω
      </Label>
      <Label x={CX} y={16} size={12.5} weight={600} fill={ink.primary}>
        the Pac-Man domain
      </Label>

      {/* the interior angle at the corner */}
      <path d={`M ${CX + 22} ${CY} A 22 22 0 1 0 ${CX} ${CY + 22}`} fill="none" stroke={method.mps} strokeWidth={1.6} />
      <Node x={CX} y={CY} r={3.6} fill={method.mps} />
      <Label x={CX - 36} y={CY + 40} size={12} fill={method.mps}>
        3π/2
      </Label>

      {/* right-angle marks where the edges meet the arc */}
      <path
        d={`M ${CX + R - 11} ${CY} v 11 h 11`}
        fill="none"
        stroke={ink.muted}
        strokeWidth={1.2}
      />
      <path
        d={`M ${CX} ${CY + R - 11} h 11 v 11`}
        fill="none"
        stroke={ink.muted}
        strokeWidth={1.2}
      />
      <Label x={CX + R + 14} y={CY + 16} size={11.5} anchor="start" fill={ink.muted}>
        π/2
      </Label>
      <Label x={CX + 16} y={CY + R + 14} size={11.5} anchor="start" fill={ink.muted}>
        π/2
      </Label>

      {/* the polar rectangle */}
      <Label x={RX + RW / 2} y={16} size={12.5} weight={600} fill={ink.primary}>
        the same domain in (θ, r)
      </Label>
      <rect x={RX} y={RY} width={RW} height={RH} fill="#20242c" stroke="none" />
      <line x1={RX} y1={RY} x2={RX + RW} y2={RY} stroke={method.bie} strokeWidth={2.4} />
      <line x1={RX + RW} y1={RY} x2={RX + RW} y2={RY + RH} stroke={method.fd2} strokeWidth={2.4} />
      <line x1={RX} y1={RY + RH} x2={RX} y2={RY} stroke={method.fast} strokeWidth={2.4} />
      <line x1={RX} y1={RY + RH} x2={RX + RW} y2={RY + RH} stroke={method.mps} strokeWidth={2.4} strokeDasharray="3 4" />
      <Node x={RX + RW / 2} y={RY + RH} r={3.6} fill={method.mps} />
      <Label x={RX + RW / 2} y={RY - 10} size={11.5} fill={method.bie}>
        r = 1: the arc
      </Label>
      <Label x={RX + RW + 10} y={RY + RH / 2} size={11.5} anchor="start" fill={method.fd2}>
        θ = 0
      </Label>
      <Label x={RX - 10} y={RY + RH / 2} size={11.5} anchor="end" fill={method.fast}>
        θ = 3π/2
      </Label>
      <Label x={RX + RW / 2} y={RY + RH + 16} size={11.5} fill={method.mps}>
        r = 0: the whole side is the corner
      </Label>
      <Label x={RX + RW / 2} y={RY + RH + 34} size={11.5} fill={ink.muted} italic>
        u here is one known number, g(0, 0)
      </Label>
    </Figure>
  )
}