"use client"

import { useEffect, useMemo, useState, type PointerEvent } from "react"
import { scaleLinear } from "@visx/scale"
import { useParentSize } from "@visx/responsive"
import { useTooltipInPortal } from "@visx/tooltip"
import { localPoint } from "@visx/event"

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

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

export interface RadarChartProps<T> {
  series: RadarChartSeries<T>[]
  axis: (point: T) => string
  value: (point: T) => number | null
  formatAxis?: (value: string) => string
  formatValue?: (value: number) => string
  height?: number
  labelPadding?: number
  numRings?: number
  maxValue?: number
  palette?: string[]
  emphasizedKey?: string
  onSelect?: (axis: string) => void
  className?: string
}

const bloomDuration = 760
const bloomEasing = "cubic-bezier(0.22, 1, 0.36, 1)"
const seriesStagger = 110
const markerDuration = 340
const focusGlide = 150
const emphasisGlide = 180
const dimmedOpacity = 0.25
const defaultPalette = [
  "var(--chart-1)",
  "var(--chart-2)",
  "var(--chart-3)",
  "var(--chart-4)",
  "var(--chart-5)",
]

interface Spoke {
  key: string
  angle: number
  cos: number
  sin: number
}

interface Focus {
  axisKey: string
  outerX: number
  outerY: number
  points: { key: string; label: string; color: string; value: number }[]
}

export function RadarChart<T>({
  series,
  axis,
  value,
  formatAxis = (v) => v,
  formatValue = (v) => `${v}`,
  height = 320,
  labelPadding = 26,
  numRings = 4,
  maxValue,
  palette = defaultPalette,
  emphasizedKey,
  onSelect,
  className,
}: RadarChartProps<T>) {
  const { parentRef, width } = useParentSize({ debounceTime: 100 })
  const { containerRef, TooltipInPortal } = useTooltipInPortal({ detectBounds: false, scroll: true })

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

  const valueAt = useMemo(() => {
    const table = new Map<string, Map<string, number>>()
    for (const s of series) {
      const row = new Map<string, number>()
      for (const point of s.data) row.set(axis(point), value(point) ?? 0)
      table.set(s.key, row)
    }
    return (seriesKey: string, axisKey: string) => table.get(seriesKey)?.get(axisKey) ?? 0
  }, [series, axis, value])

  const domainMax = useMemo(() => {
    if (maxValue != null) return maxValue
    const values = series.flatMap((s) => s.data.map(value)).filter((v): v is number => v != null)
    const max = values.length ? Math.max(...values) : 1
    return max * 1.05
  }, [maxValue, series, value])

  const cx = width / 2
  const cy = height / 2
  const outerRadius = Math.max(0, Math.min(width, height) / 2 - labelPadding)
  const radialScale = useMemo(
    () => scaleLinear({ domain: [0, domainMax], range: [0, outerRadius] }),
    [domainMax, outerRadius],
  )

  const spokes = useMemo<Spoke[]>(() => {
    const step = (Math.PI * 2) / Math.max(1, axes.length)
    return axes.map((key, i) => {
      const angle = -Math.PI / 2 + i * step
      return { key, angle, cos: Math.cos(angle), sin: Math.sin(angle) }
    })
  }, [axes])

  const rings = useMemo(
    () => radialScale.ticks(numRings).filter((t) => t > 0),
    [radialScale, numRings],
  )

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

  function ringPath(r: number) {
    return spokes.map((s, i) => `${i ? "L" : "M"}${r * s.cos},${r * s.sin}`).join(" ") + "Z"
  }

  function seriesPath(seriesKey: string) {
    return (
      spokes
        .map((s, i) => {
          const r = radialScale(valueAt(seriesKey, s.key))
          return `${i ? "L" : "M"}${r * s.cos},${r * s.sin}`
        })
        .join(" ") + "Z"
    )
  }

  function handlePointerMove(event: PointerEvent<SVGRectElement>) {
    if (!spokes.length) return
    const point = localPoint(event)
    if (!point) return
    const dx = point.x - cx
    const dy = point.y - cy
    if (Math.hypot(dx, dy) < 6) return setFocus(null)
    const step = (Math.PI * 2) / spokes.length
    const raw = Math.round((Math.atan2(dy, dx) + Math.PI / 2) / step)
    const spoke = spokes[((raw % spokes.length) + spokes.length) % spokes.length]
    const points = series.flatMap((s, i) => {
      const raw = s.data.find((d) => axis(d) === spoke.key)
      if (!raw) return []
      const v = value(raw)
      if (v == null) return []
      return [{ key: s.key, label: s.label, color: s.color ?? palette[i % palette.length], value: v }]
    })
    points.sort((a, b) => b.value - a.value)
    setFocus({
      axisKey: spoke.key,
      outerX: cx + outerRadius * spoke.cos,
      outerY: cy + outerRadius * spoke.sin,
      points,
    })
  }

  const tooltipOnRight = focus ? focus.outerX < width / 2 : true

  return (
    <div
      ref={(node) => {
        parentRef(node)
        containerRef(node)
      }}
      className={cn("relative w-full", className)}
      style={{ height }}
    >
      {width > 0 && outerRadius > 0 ? (
        <svg width={width} height={height} className="overflow-visible">
          <g transform={`translate(${cx},${cy})`}>
            {rings.map((tick) => (
              <path key={tick} d={ringPath(radialScale(tick))} fill="none" stroke="var(--border)" strokeDasharray="2,3" />
            ))}
            {spokes.map((s) => {
              const focused = focus?.axisKey === s.key
              return (
                <line
                  key={s.key}
                  x2={outerRadius * s.cos}
                  y2={outerRadius * s.sin}
                  stroke={focused ? "var(--muted-foreground)" : "var(--border)"}
                  strokeWidth={focused ? 1.5 : 1}
                  style={{ transition: `stroke ${focusGlide}ms ${bloomEasing}` }}
                />
              )
            })}
            {spokes.map((s) => {
              const lx = (outerRadius + labelPadding * 0.55) * s.cos
              const ly = (outerRadius + labelPadding * 0.55) * s.sin
              const anchor = Math.abs(s.cos) < 0.3 ? "middle" : s.cos > 0 ? "start" : "end"
              return (
                <text key={s.key} x={lx} y={ly} dy="0.32em" textAnchor={anchor} fontSize={11} fill="var(--muted-foreground)">
                  {formatAxis(s.key)}
                </text>
              )
            })}
            <SeriesLayer
              key={entranceKey}
              series={series}
              palette={palette}
              spokes={spokes}
              radialScale={radialScale}
              valueAt={valueAt}
              seriesPath={seriesPath}
              focusKey={focus?.axisKey}
              emphasizedKey={emphasizedKey}
            />
            <rect
              x={-cx}
              y={-cy}
              width={width}
              height={height}
              fill="transparent"
              style={{ cursor: onSelect ? "pointer" : "default" }}
              onPointerMove={handlePointerMove}
              onPointerLeave={() => setFocus(null)}
              onClick={() => focus && onSelect?.(focus.axisKey)}
            />
          </g>
        </svg>
      ) : null}
      {focus && focus.points.length > 0 ? (
        <TooltipInPortal
          left={focus.outerX}
          top={focus.outerY}
          offsetLeft={0}
          offsetTop={0}
          className="pointer-events-none z-10 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 ${focusGlide}ms ${bloomEasing}, top ${focusGlide}ms ${bloomEasing}`,
          }}
        >
          <span className="font-medium text-popover-foreground">{formatAxis(focus.axisKey)}</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">{formatValue(point.value)}</span>
            </div>
          ))}
        </TooltipInPortal>
      ) : null}
    </div>
  )
}

function SeriesLayer<T>({
  series,
  palette,
  spokes,
  radialScale,
  valueAt,
  seriesPath,
  focusKey,
  emphasizedKey,
}: {
  series: RadarChartSeries<T>[]
  palette: string[]
  spokes: Spoke[]
  radialScale: (v: number) => number
  valueAt: (seriesKey: string, axisKey: string) => number
  seriesPath: (seriesKey: string) => string
  focusKey?: string
  emphasizedKey?: string
}) {
  const [entered, setEntered] = useState(false)
  useEffect(() => {
    let inner = 0
    const outer = requestAnimationFrame(() => {
      inner = requestAnimationFrame(() => setEntered(true))
    })
    return () => {
      cancelAnimationFrame(outer)
      cancelAnimationFrame(inner)
    }
  }, [])

  return (
    <>
      {series.map((s, index) => {
        const color = s.color ?? palette[index % palette.length]
        const delay = index * seriesStagger
        const dimmed = emphasizedKey != null && emphasizedKey !== s.key
        return (
          <g
            key={s.key}
            style={{
              transform: entered ? "scale(1)" : "scale(0)",
              transformOrigin: "0 0",
              opacity: entered ? (dimmed ? dimmedOpacity : 1) : 0,
              transition: `transform ${bloomDuration}ms ${bloomEasing} ${delay}ms, opacity ${bloomDuration}ms ${bloomEasing} ${delay}ms, opacity ${emphasisGlide}ms ${bloomEasing}`,
            }}
          >
            <path d={seriesPath(s.key)} fill={color} fillOpacity={0.14} stroke={color} strokeWidth={2} strokeLinejoin="round" />
            {spokes.map((spoke) => {
              const r = radialScale(valueAt(s.key, spoke.key))
              const focused = focusKey === spoke.key
              return (
                <circle
                  key={spoke.key}
                  cx={r * spoke.cos}
                  cy={r * spoke.sin}
                  r={focused ? 4.5 : 3}
                  fill={color}
                  stroke="var(--background)"
                  strokeWidth={1.5}
                  style={{ transition: `r ${markerDuration}ms ${bloomEasing}` }}
                />
              )
            })}
          </g>
        )
      })}
    </>
  )
}
Installation
