// Static figures: hand-drawn SVG, no data and no session behind them.
//
// A lab shows what a method does once the reader presses run; these show what
// it *is*, on first sight and in print.  They are deliberately plain: the same
// palette as the plots, unicode rather than KaTeX for the few symbols that
// appear, and one idea per picture.
import type { ReactNode } from 'react'
import { ink } from '../plot/palette.ts'

export const SANS = 'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif'
export const MONO = 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace'

/** Wrapper: a captioned, width-filling SVG with a fixed aspect ratio. */
export function Figure({
  width,
  height,
  caption,
  maxWidth,
  children,
}: {
  width: number
  height: number
  caption?: string
  /** in px; the figure never grows past this even in a wide column */
  maxWidth?: number
  children: ReactNode
}) {
  return (
    <figure className="static-figure" style={maxWidth ? { maxWidth } : undefined}>
      <svg
        viewBox={`0 0 ${width} ${height}`}
        width="100%"
        preserveAspectRatio="xMidYMid meet"
        role="img"
        aria-label={caption ?? 'diagram'}
        style={{ display: 'block', overflow: 'visible' }}
      >
        {children}
      </svg>
      {caption ? <figcaption>{caption}</figcaption> : null}
    </figure>
  )
}

/** Arrowhead markers, one set per figure so the ids never collide. */
export function Arrowheads({ id, colors }: { id: string; colors: string[] }) {
  return (
    <defs>
      {colors.map((c, i) => (
        <marker
          key={i}
          id={`${id}-ah-${i}`}
          viewBox="0 0 8 8"
          refX="7"
          refY="4"
          markerWidth="6"
          markerHeight="6"
          orient="auto-start-reverse"
        >
          <path d="M 0 0.7 L 8 4 L 0 7.3 z" fill={c} />
        </marker>
      ))}
    </defs>
  )
}

export const arrow = (id: string, i: number) => `url(#${id}-ah-${i})`

/** A text label.  `anchor` and `baseline` are the usual SVG values. */
export function Label({
  x,
  y,
  children,
  fill = ink.secondary,
  size = 12,
  anchor = 'middle',
  baseline = 'middle',
  italic = false,
  mono = false,
  weight,
}: {
  x: number
  y: number
  children: ReactNode
  fill?: string
  size?: number
  anchor?: 'start' | 'middle' | 'end'
  baseline?: 'middle' | 'hanging' | 'auto' | 'central'
  italic?: boolean
  mono?: boolean
  weight?: number
}) {
  return (
    <text
      x={x}
      y={y}
      fill={fill}
      fontSize={size}
      fontFamily={mono ? MONO : SANS}
      fontStyle={italic ? 'italic' : undefined}
      fontWeight={weight}
      textAnchor={anchor}
      dominantBaseline={baseline}
    >
      {children}
    </text>
  )
}

/** A grid node. */
export function Node({ x, y, r = 3.2, fill = ink.node, stroke }: { x: number; y: number; r?: number; fill?: string; stroke?: string }) {
  return <circle cx={x} cy={y} r={r} fill={fill} stroke={stroke} strokeWidth={stroke ? 1.2 : undefined} />
}