// Marks drawn inside a Plot frame: polylines, markers, reference slopes and
// direct end-labels.  Every mark is thin (2px lines, >=8px markers) and every
// marker carries a shape as well as a colour.
import type { ReactNode } from 'react'
import type { Num } from '../engine/types.ts'
import { ink, surface } from './palette.ts'
import { linePath, type Frame } from './scales.ts'

export type Shape = 'circle' | 'square' | 'triangle' | 'diamond' | 'cross' | 'plus' | 'star'

export function Line({
  x,
  y,
  f,
  color,
  dash,
  width = 2,
  opacity = 1,
}: {
  x: readonly number[]
  y: readonly Num[]
  f: Frame
  color: string
  dash?: string
  width?: number
  opacity?: number
}) {
  return (
    <path
      d={linePath(x, y, f)}
      fill="none"
      stroke={color}
      strokeWidth={width}
      strokeDasharray={dash}
      strokeLinejoin="round"
      strokeLinecap="round"
      opacity={opacity}
    />
  )
}

/** One marker, centred on (cx, cy) in pixels, about 9px across. */
export function markerPath(shape: Shape, cx: number, cy: number, r = 4.5): string {
  switch (shape) {
    case 'square':
      return `M${cx - r} ${cy - r}h${2 * r}v${2 * r}h${-2 * r}z`
    case 'triangle':
      return `M${cx} ${cy - r * 1.15}L${cx + r} ${cy + r * 0.8}L${cx - r} ${cy + r * 0.8}z`
    case 'diamond':
      return `M${cx} ${cy - r * 1.2}L${cx + r * 1.2} ${cy}L${cx} ${cy + r * 1.2}L${cx - r * 1.2} ${cy}z`
    case 'cross':
      return `M${cx - r} ${cy - r}L${cx + r} ${cy + r}M${cx + r} ${cy - r}L${cx - r} ${cy + r}`
    case 'plus':
      return `M${cx - r * 1.2} ${cy}h${2.4 * r}M${cx} ${cy - r * 1.2}v${2.4 * r}`
    case 'star': {
      let d = ''
      for (let k = 0; k < 3; k++) {
        const a = (Math.PI * k) / 3
        d += `M${cx - r * Math.cos(a)} ${cy - r * Math.sin(a)}L${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`
      }
      return d
    }
    default:
      return `M${cx - r} ${cy}a${r} ${r} 0 1 0 ${2 * r} 0a${r} ${r} 0 1 0 ${-2 * r} 0z`
  }
}

export function Markers({
  x,
  y,
  f,
  color,
  shape = 'circle',
  r = 4.5,
}: {
  x: readonly number[]
  y: readonly Num[]
  f: Frame
  color: string
  shape?: Shape
  r?: number
}) {
  const stroked = shape === 'cross' || shape === 'plus' || shape === 'star'
  const out: ReactNode[] = []
  for (let i = 0; i < x.length && i < y.length; i++) {
    const v = y[i]
    if (v == null || !isFinite(v) || !isFinite(x[i])) continue
    const px = f.sx(x[i])
    const py = f.sy(v)
    if (py < -20 || py > f.ih + 20) continue
    out.push(
      <path
        key={i}
        d={markerPath(shape, px, py, r)}
        fill={stroked ? 'none' : color}
        stroke={stroked ? color : surface}
        strokeWidth={stroked ? 2 : 1.5}
      />,
    )
  }
  return <g>{out}</g>
}

/**
 * A dashed reference line of slope p through a chosen point, for log-log
 * convergence plots: the eye reads "is the data parallel to this?" much better
 * than it reads a printed rate.
 */
export function RefSlope({
  f,
  p,
  through,
  label,
  span = 0.6,
  labelAt = 'start',
}: {
  f: Frame
  /** the exponent: error ~ n^p */
  p: number
  /** a point the line passes through, in data coordinates */
  through: [number, number]
  label: string
  /** fraction of the x range the line covers */
  span?: number
  labelAt?: 'start' | 'end'
}) {
  const [lx, hx] = f.xDomain
  const l = Math.log10(lx)
  const h = Math.log10(hx)
  const c = Math.log10(through[0])
  const x0 = Math.pow(10, Math.max(l, c - (span * (h - l)) / 2))
  const x1 = Math.pow(10, Math.min(h, c + (span * (h - l)) / 2))
  const y = (xx: number) => through[1] * Math.pow(xx / through[0], p)
  return (
    <g>
      <path
        d={`M${f.sx(x0)} ${f.sy(y(x0))}L${f.sx(x1)} ${f.sy(y(x1))}`}
        stroke={ink.muted}
        strokeWidth={1.5}
        strokeDasharray="5 4"
        fill="none"
      />
      {labelAt === 'end' ? (
        <text x={f.sx(x1) - 3} y={f.sy(y(x1)) - 6} fill={ink.muted} fontSize={11} textAnchor="end">
          {label}
        </text>
      ) : (
        <text x={f.sx(x0) + 3} y={f.sy(y(x0)) + 14} fill={ink.muted} fontSize={11} textAnchor="start">
          {label}
        </text>
      )}
    </g>
  )
}

/**
 * A ring around the data point under the cursor, and a box of its numbers.
 *
 * Drawn as SVG rather than an HTML overlay, like everything else in this
 * layer, so it needs no positioning relative to the host element.  The box
 * width is estimated from the character count, which is why the lines are kept
 * short; it flips to the other side of the point rather than leave the frame.
 */
export function PointTip({
  f,
  px,
  py,
  color,
  lines,
}: {
  f: Frame
  px: number
  py: number
  color: string
  /** first line is the series, in its own colour; the rest are the numbers */
  lines: string[]
}) {
  const size = 11.5
  const pad = 6
  const lh = 15
  const w = Math.max(...lines.map((l) => l.length)) * 6.15 + 2 * pad
  const h = lines.length * lh + 2 * pad - 3
  const right = px + 14 + w < f.iw
  const bx = Math.min(Math.max(right ? px + 14 : px - 14 - w, 2), Math.max(2, f.iw - w - 2))
  const by = Math.min(Math.max(py - h / 2, 2), Math.max(2, f.ih - h - 2))
  return (
    <g pointerEvents="none">
      <circle cx={px} cy={py} r={7} fill="none" stroke={color} strokeWidth={2} />
      <circle cx={px} cy={py} r={7} fill="none" stroke={surface} strokeWidth={1} opacity={0.7} />
      <rect
        x={bx}
        y={by}
        width={w}
        height={h}
        rx={4}
        fill={surface}
        fillOpacity={0.94}
        stroke={ink.axis}
        strokeWidth={1}
      />
      {lines.map((l, i) => (
        <text
          key={i}
          x={bx + pad}
          y={by + pad + lh * i + size}
          fill={i === 0 ? color : ink.secondary}
          fontSize={size}
          style={i === 0 ? undefined : { fontVariantNumeric: 'tabular-nums' }}
        >
          {l}
        </text>
      ))}
    </g>
  )
}

/** A label placed at the end of a curve, so the reader need not use the legend. */
export function EndLabel({
  f,
  x,
  y,
  text,
  color,
  dx = 6,
  dy = 4,
  anchor = 'start',
}: {
  f: Frame
  x: number
  y: number
  text: string
  color: string
  dx?: number
  dy?: number
  anchor?: 'start' | 'end' | 'middle'
}) {
  return (
    <text
      x={f.sx(x) + dx}
      y={f.sy(y) + dy}
      fill={color}
      fontSize={11}
      textAnchor={anchor}
      style={{ paintOrder: 'stroke', stroke: surface, strokeWidth: 3 }}
    >
      {text}
    </text>
  )
}