import { useId } from "react"

import type { HistoryPoint } from "@/client"
import { cn, si } from "@/lib/utils"

/** Room above and below the curve for the stroke, in viewBox units. */
const PAD = 8

/** Above this ratio a linear series is all baseline and one spike. */
const LOG_RATIO = 100

/** How far the left end fades over, in viewBox units. */
const FADE = 40

/** Enough digits to tell two neighbouring readings apart. */
const READOUT_DIGITS = 4

/**
 * Curve and area for a series, in a 0–100 box.
 *
 * The awkward series are the point: one reading has no line to draw, a series
 * that never moved has no span to divide by, and one spanning decades is only
 * legible once the exponent is what varies.
 */
function shape(points: HistoryPoint[]) {
  const values = points.map((point) => point.value)
  const low = Math.min(...values)
  const high = Math.max(...values)
  // Logs need every reading on the same side of zero.
  const logged = low > 0 && high / low >= LOG_RATIO
  const project = (value: number) => (logged ? Math.log10(value) : value)
  const floor = project(low)
  const span = project(high) - floor

  const y = (value: number) =>
    span === 0
      ? 50
      : 100 - PAD - ((project(value) - floor) / span) * (100 - 2 * PAD)
  const x = (index: number) =>
    points.length === 1 ? 100 : (index / (points.length - 1)) * 100

  const line = points
    .map(
      (point, index) =>
        `${index ? "L" : "M"}${x(index).toFixed(2)},${y(point.value).toFixed(2)}`,
    )
    .join(" ")

  return {
    low,
    high,
    line,
    area: `${line} L100,100 L0,100 Z`,
    end: y(values[values.length - 1]),
  }
}

/**
 * How a series has been moving — the one trend curve, drawn the same way in
 * the node panel, on an edge and in the flow table.
 *
 * The left end fades out, so the oldest readings read as the tail they are
 * rather than as an edge the series was cut at. The fade masks the curve and
 * its area together; the live dot sits outside the mask, since the newest
 * reading is the one thing that must stay solid.
 *
 * Needs at least one point: an empty series has no story, and what to say
 * instead is the caller's to decide.
 */
export function Sparkline({
  points,
  color = "var(--primary)",
  height = "h-8",
  dot = true,
  readout = true,
}: {
  points: HistoryPoint[]
  /** The token the curve, its area and the dot are drawn in. */
  color?: string
  /** Tailwind height of the curve's box. */
  height?: string
  /** A dot on the newest reading; only honest where the series is live. */
  dot?: boolean
  /** The current value and the range, beside the curve. */
  readout?: boolean
}) {
  const id = useId()
  const { low, high, line, area, end } = shape(points)

  return (
    // The gap leaves the live dot room to sit on the last reading without
    // touching the labels.
    <div className="flex items-center gap-3">
      <div className={cn("relative min-w-0 flex-1", height)}>
        <svg
          viewBox="0 0 100 100"
          preserveAspectRatio="none"
          className="h-full w-full overflow-visible"
          aria-hidden="true"
        >
          <defs>
            <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={color} stopOpacity="0.28" />
              <stop offset="100%" stopColor={color} stopOpacity="0" />
            </linearGradient>
            {/* A mask reads luminance, so white here is "keep this", not a
                colour the design system has anything to say about. */}
            <linearGradient
              id={`${id}-ramp`}
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2={FADE}
              y2="0"
            >
              <stop offset="0%" stopColor="white" stopOpacity="0" />
              <stop offset="100%" stopColor="white" stopOpacity="1" />
            </linearGradient>
            {/* Wider than the box, so a round cap or a stroke leaning past the
                viewBox is faded rather than cut. */}
            <mask
              id={`${id}-fade`}
              maskUnits="userSpaceOnUse"
              x="-10"
              y="-10"
              width="120"
              height="120"
            >
              <rect
                x="-10"
                y="-10"
                width="120"
                height="120"
                fill={`url(#${id}-ramp)`}
              />
            </mask>
          </defs>
          {points.length > 1 ? (
            <g mask={`url(#${id}-fade)`}>
              <path d={area} fill={`url(#${id})`} />
              <path
                d={line}
                fill="none"
                stroke={color}
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                // Keeps the stroke even, though the box is far wider than tall.
                vectorEffect="non-scaling-stroke"
              />
            </g>
          ) : null}
        </svg>
        {/* The newest reading is always the right edge, so the dot only needs to
            know how high it sits. */}
        {dot ? (
          <>
            <span
              className="pointer-events-none absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full"
              style={{
                left: "100%",
                top: `${end}%`,
                background: color,
                opacity: 0.2,
              }}
            />
            <span
              className="pointer-events-none absolute size-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full"
              style={{ left: "100%", top: `${end}%`, background: color }}
            />
          </>
        ) : null}
      </div>
      {/* A shared minimum width, so the curves all end on the same line. */}
      {readout ? (
        <div className="min-w-24 shrink-0 whitespace-nowrap text-right font-mono text-xs leading-tight">
          <div className="font-medium">
            {si(points[points.length - 1].value, READOUT_DIGITS)}
          </div>
          {/* A series that never moved has no range worth repeating. */}
          {low === high ? null : (
            <div className="text-muted-foreground">
              {si(low, READOUT_DIGITS)}–{si(high, READOUT_DIGITS)}
            </div>
          )}
        </div>
      ) : null}
    </div>
  )
}