"use client"

import { useEffect, useMemo, useState, type PointerEvent } from "react"
import { scaleLinear, scalePoint } from "@visx/scale"
import { curveMonotoneX } from "@visx/curve"
import { line } from "@visx/shape"
import { AxisBottom, AxisLeft } from "@visx/axis"
import { GridRows } from "@visx/grid"
import { Group } from "@visx/group"
import { useParentSize } from "@visx/responsive"
import { useTooltipInPortal } from "@visx/tooltip"
import { localPoint } from "@visx/event"

import { cn } from "@/lib/utils"

export interface LineChartSeries<T> {
  key: string
  label: string
  data: T[]
  color?: string
  dashArray?: string
}

export interface LineChartMargin {
  top: number
  right: number
  bottom: number
  left: number
}

export interface LineChartProps<T> {
  series: LineChartSeries<T>[]
  x: (point: T) => string
  y: (point: T) => number | null
  formatX?: (value: string) => string
  formatY?: (value: number) => string
  height?: number
  margin?: LineChartMargin
  numTicksY?: number
  numTicksX?: number
  palette?: string[]
  showMarkers?: boolean
  highlightedKey?: string
  emphasizedKey?: string
  onSelect?: (key: string) => void
  className?: string
}

const defaultMargin: LineChartMargin = { top: 12, right: 16, bottom: 28, left: 48 }
const drawDuration = 1100
const drawEasing = "cubic-bezier(0.22, 1, 0.36, 1)"
const markerDuration = 400
const crosshairGlide = 180
const seriesStagger = 120
const coincidentEps = 2
const emphasisGlide = 180
const dimmedOpacity = 0.25
const defaultPalette = [
  "var(--chart-1)",
  "var(--chart-2)",
  "var(--chart-3)",
  "var(--chart-4)",
  "var(--chart-5)",
]
const dashFallback = ["6,4", "2,3", "1,4"]

function seriesStyle(index: number, s: { color?: string; dashArray?: string }, palette: string[]) {
  const color = s.color ?? palette[index % palette.length]
  const cycle = Math.floor(index / palette.length)
  const dashArray = s.dashArray ?? (cycle > 0 ? dashFallback[(cycle - 1) % dashFallback.length] : undefined)
  return { color, dashArray }
}

function thinnedTicks(values: string[], maxTicks: number) {
  if (values.length <= maxTicks) return values
  const step = Math.ceil(values.length / maxTicks)
  return values.filter((_, i) => i % step === 0)
}

interface Focus {
  xKey: string
  value: number
  color: string
  points: { key: string; label: string; color: string; value: number }[]
}

export function LineChart<T>({
  series,
  x,
  y,
  formatX = (value) => value,
  formatY = (value) => `${value}`,
  height = 280,
  margin = defaultMargin,
  numTicksY = 4,
  numTicksX,
  palette = defaultPalette,
  showMarkers = true,
  highlightedKey,
  emphasizedKey,
  onSelect,
  className,
}: LineChartProps<T>) {
  const { parentRef, width } = useParentSize({ debounceTime: 100 })
  const { containerRef, TooltipInPortal } = useTooltipInPortal({ detectBounds: false, scroll: true })
  const innerWidth = Math.max(0, width - margin.left - margin.right)
  const innerHeight = Math.max(0, height - margin.top - margin.bottom)

  const xDomain = useMemo(
    () => Array.from(new Set(series.flatMap((s) => s.data.map(x)))),
    [series, x],
  )

  const yDomain = useMemo(() => {
    const values = series.flatMap((s) => s.data.map(y)).filter((v): v is number => v != null)
    const lo = values.length ? Math.min(...values) : 0
    const hi = values.length ? Math.max(...values) : 1
    return [Math.min(0, lo), hi * 1.1] as [number, number]
  }, [series, y])

  const xScale = useMemo(
    () => scalePoint({ domain: xDomain, range: [0, innerWidth], padding: 0.5 }),
    [xDomain, innerWidth],
  )
  const yScale = useMemo(
    () => scaleLinear({ domain: yDomain, range: [innerHeight, 0], nice: true }),
    [yDomain, innerHeight],
  )
  const xTicks = useMemo(
    () => thinnedTicks(xDomain, numTicksX ?? Math.max(2, Math.floor(innerWidth / 64))),
    [xDomain, numTicksX, innerWidth],
  )

  const entranceKey = `${xDomain.join("|")}::${series.map((s) => s.key).join(",")}`
  const [focus, setFocus] = useState<Focus | null>(null)

  function handlePointerMove(event: PointerEvent<SVGRectElement>) {
    const point = localPoint(event)
    if (!point) return setFocus(null)
    const px = point.x - margin.left
    const py = point.y - margin.top

    const candidates = series.flatMap((s, index) =>
      s.data.flatMap((point) => {
        const value = y(point)
        if (value == null) return []
        const sx = xScale(x(point)) ?? 0
        const sy = yScale(value)
        return [
          {
            xKey: x(point),
            seriesKey: s.key,
            value,
            screenY: sy,
            color: seriesStyle(index, s, palette).color,
            dist: (sx - px) ** 2 + (sy - py) ** 2,
          },
        ]
      }),
    )
    if (!candidates.length) return setFocus(null)

    const hit = candidates.reduce((closest, c) => (c.dist < closest.dist ? c : closest))
    const points = series.flatMap((s, index) => {
      const point = s.data.find((d) => x(d) === hit.xKey)
      if (!point) return []
      const value = y(point)
      if (value == null || Math.abs(yScale(value) - hit.screenY) > coincidentEps) return []
      return [{ key: s.key, label: s.label, color: seriesStyle(index, s, palette).color, value }]
    })
    points.sort((a, b) => (a.key === hit.seriesKey ? -1 : b.key === hit.seriesKey ? 1 : 0))

    setFocus({ xKey: hit.xKey, value: hit.value, color: hit.color, points })
  }

  function handleClick(event: PointerEvent<SVGRectElement>) {
    if (!onSelect || !xDomain.length) return
    const point = localPoint(event)
    if (!point) return
    const px = point.x - margin.left
    const index = Math.min(
      xDomain.length - 1,
      Math.max(0, Math.round(px / xScale.step())),
    )
    onSelect(xDomain[index])
  }

  const focusX = focus ? xScale(focus.xKey) ?? 0 : 0
  const focusY = focus ? yScale(focus.value) : 0
  const tooltipOnRight = focusX + margin.left < width / 2

  return (
    <div
      ref={(node) => {
        parentRef(node)
        containerRef(node)
      }}
      className={cn("relative w-full", className)}
      style={{ height }}
    >
      {width > 0 ? (
        <svg width={width} height={height} className="overflow-visible">
          <Group left={margin.left} top={margin.top}>
            <GridRows scale={yScale} width={innerWidth} numTicks={numTicksY} stroke="var(--border)" strokeDasharray="2,3" />
            <AxisLeft
              scale={yScale}
              numTicks={numTicksY}
              hideAxisLine
              hideTicks
              tickFormat={(v) => formatY(Number(v))}
              tickLabelProps={() => ({ fontSize: 11, fill: "var(--muted-foreground)", textAnchor: "end", dx: -4, dy: "0.32em" })}
            />
            <AxisBottom
              top={innerHeight}
              scale={xScale}
              tickValues={xTicks}
              hideAxisLine
              hideTicks
              tickFormat={(v) => formatX(String(v))}
              tickLabelProps={() => ({ fontSize: 11, fill: "var(--muted-foreground)", textAnchor: "middle" })}
            />
            {highlightedKey && xScale(highlightedKey) !== undefined ? (
              <line
                x1={xScale(highlightedKey) ?? 0}
                x2={xScale(highlightedKey) ?? 0}
                y1={0}
                y2={innerHeight}
                stroke={palette[0]}
                strokeWidth={2}
                strokeOpacity={0.5}
                pointerEvents="none"
              />
            ) : null}
            <SeriesLayer
              key={entranceKey}
              series={series}
              palette={palette}
              xScale={xScale}
              yScale={yScale}
              x={x}
              y={y}
              showMarkers={showMarkers}
              emphasizedKey={emphasizedKey}
            />
            {focus ? (
              <>
                <g style={{ transform: `translateX(${focusX}px)`, transition: `transform ${crosshairGlide}ms ${drawEasing}` }}>
                  <line y1={0} y2={innerHeight} stroke="var(--border)" strokeDasharray="3,3" pointerEvents="none" />
                </g>
                <g style={{ transform: `translateY(${focusY}px)`, transition: `transform ${crosshairGlide}ms ${drawEasing}` }}>
                  <line x1={0} x2={innerWidth} stroke="var(--border)" strokeDasharray="3,3" pointerEvents="none" />
                </g>
                <g
                  style={{
                    transform: `translate(${focusX}px,${focusY}px)`,
                    transition: `transform ${crosshairGlide}ms ${drawEasing}`,
                  }}
                >
                  <circle r={8} fill={focus.color} opacity={0.16} pointerEvents="none" />
                  <circle r={4.5} fill={focus.color} stroke="var(--background)" strokeWidth={2} pointerEvents="none" />
                </g>
              </>
            ) : null}
            <rect
              width={innerWidth}
              height={innerHeight}
              fill="transparent"
              style={{ cursor: onSelect ? "pointer" : "default" }}
              onPointerMove={handlePointerMove}
              onPointerLeave={() => setFocus(null)}
              onClick={handleClick}
            />
          </Group>
        </svg>
      ) : null}
      {focus && focus.points.length > 0 ? (
        <TooltipInPortal
          left={focusX + margin.left}
          top={focusY + margin.top}
          offsetLeft={0}
          offsetTop={0}
          className="pointer-events-none flex flex-col gap-1 rounded-md border bg-popover px-2.5 py-2 text-xs shadow-md"
          style={{
            position: "absolute",
            transform: tooltipOnRight ? "translate(12px,-50%)" : "translate(calc(-100% - 12px),-50%)",
            transition: `left ${crosshairGlide}ms ${drawEasing}, top ${crosshairGlide}ms ${drawEasing}`,
          }}
        >
          <span className="font-medium text-popover-foreground">{formatX(focus.xKey)}</span>
          {focus.points.map((point) => (
            <div key={point.key} className="flex items-center gap-1.5">
              <span className="size-2 rounded-full" style={{ background: point.color }} />
              <span className="text-muted-foreground">{point.label}</span>
              <span className="ml-auto font-medium tabular-nums text-popover-foreground">
                {formatY(point.value)}
              </span>
            </div>
          ))}
        </TooltipInPortal>
      ) : null}
    </div>
  )
}

function SeriesLayer<T>({
  series,
  palette,
  xScale,
  yScale,
  x,
  y,
  showMarkers,
  emphasizedKey,
}: {
  series: LineChartSeries<T>[]
  palette: string[]
  xScale: ReturnType<typeof scalePoint<string>>
  yScale: ReturnType<typeof scaleLinear<number>>
  x: (point: T) => string
  y: (point: T) => number | null
  showMarkers: boolean
  emphasizedKey?: string
}) {
  const [entered, setEntered] = useState(false)
  useEffect(() => {
    let inner = 0
    const outer = requestAnimationFrame(() => {
      inner = requestAnimationFrame(() => setEntered(true))
    })
    return () => {
      cancelAnimationFrame(outer)
      cancelAnimationFrame(inner)
    }
  }, [])

  const linePath = useMemo(
    () =>
      line<T>({
        x: (point) => xScale(x(point)) ?? 0,
        y: (point) => yScale(y(point) ?? 0),
        defined: (point) => y(point) != null,
        curve: curveMonotoneX,
      }),
    [xScale, yScale, x, y],
  )

  return (
    <>
      {series.map((s, index) => {
        const { color, dashArray } = seriesStyle(index, s, palette)
        const seriesDelay = index * seriesStagger
        const path = linePath(s.data) ?? undefined
        const dimmed = emphasizedKey != null && emphasizedKey !== s.key
        return (
          <g key={s.key} style={{ opacity: dimmed ? dimmedOpacity : 1, transition: `opacity ${emphasisGlide}ms ${drawEasing}` }}>
            {dashArray ? (
              <path
                d={path}
                fill="none"
                stroke={color}
                strokeWidth={2}
                strokeDasharray={dashArray}
                opacity={entered ? 1 : 0}
                style={{ transition: `opacity ${drawDuration}ms ${drawEasing} ${seriesDelay}ms` }}
              />
            ) : (
              <path
                d={path}
                fill="none"
                stroke={color}
                strokeWidth={2}
                pathLength={1}
                strokeDasharray={1}
                strokeDashoffset={entered ? 0 : 1}
                style={{ transition: `stroke-dashoffset ${drawDuration}ms ${drawEasing} ${seriesDelay}ms` }}
              />
            )}
            {showMarkers
              ? s.data.map((point, pointIndex) => {
                  const value = y(point)
                  if (value == null) return null
                  const total = Math.max(1, s.data.length - 1)
                  const delay = seriesDelay + Math.round((pointIndex / total) * drawDuration * 0.85)
                  return (
                    <circle
                      key={`${s.key}-${x(point)}`}
                      cx={xScale(x(point)) ?? 0}
                      cy={yScale(value)}
                      r={3}
                      fill={color}
                      stroke="var(--background)"
                      strokeWidth={1.5}
                      opacity={entered ? 1 : 0}
                      style={{ transition: `opacity ${markerDuration}ms ${drawEasing} ${delay}ms` }}
                    />
                  )
                })
              : null}
          </g>
        )
      })}
    </>
  )
}
Installation
