"use client"

import { useEffect, useMemo, useState, type PointerEvent } from "react"
import { arc, pie } from "@visx/shape"
import { useParentSize } from "@visx/responsive"
import { localPoint } from "@visx/event"

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

export interface PieChartProps<T> {
  data: T[]
  category: (datum: T) => string
  value: (datum: T) => number
  color?: (datum: T, index: number) => string
  formatValue?: (value: number) => string
  height?: number
  innerRadius?: number
  padAngle?: number
  cornerRadius?: number
  palette?: string[]
  showLegend?: boolean
  showTotal?: boolean
  centerCaption?: string
  activeKey?: string
  onSelect?: (key: string) => void
  className?: string
}

const bloomDuration = 700
const bloomEasing = "cubic-bezier(0.22, 1, 0.36, 1)"
const sliceStagger = 65
const popGlide = 180
const popDistance = 8
const defaultPalette = [
  "var(--chart-1)",
  "var(--chart-2)",
  "var(--chart-3)",
  "var(--chart-4)",
  "var(--chart-5)",
]

export function PieChart<T>({
  data,
  category,
  value,
  color,
  formatValue = (v) => `${v}`,
  height = 280,
  innerRadius = 0,
  padAngle = 0.012,
  cornerRadius = 3,
  palette = defaultPalette,
  showLegend = true,
  showTotal = true,
  centerCaption,
  activeKey,
  onSelect,
  className,
}: PieChartProps<T>) {
  const { parentRef, width } = useParentSize({ debounceTime: 100 })
  const [hovered, setHovered] = useState<string | null>(null)
  const active = hovered ?? activeKey ?? null

  const cx = width / 2
  const cy = height / 2
  const outerRadius = Math.max(0, Math.min(width, height) / 2 - 8)
  const inner = innerRadius > 0 && innerRadius < 1 ? outerRadius * innerRadius : innerRadius

  const slices = useMemo(() => {
    const pieLayout = pie<T>({ value, sort: null, padAngle })
    const arcShape = arc<ReturnType<typeof pieLayout>[number]>({ innerRadius: inner, outerRadius, cornerRadius })
    return pieLayout(data).map((datum, index) => {
      const [mx, my] = arcShape.centroid(datum)
      const norm = Math.hypot(mx, my) || 1
      return {
        key: category(datum.data),
        color: color?.(datum.data, index) ?? palette[index % palette.length],
        value: datum.value,
        path: arcShape(datum) ?? "",
        dir: [mx / norm, my / norm] as const,
        start: datum.startAngle,
        end: datum.endAngle,
        index,
      }
    })
  }, [data, value, category, color, palette, padAngle, inner, outerRadius, cornerRadius])

  const total = useMemo(() => data.reduce((sum, d) => sum + value(d), 0), [data, value])
  const entranceKey = `${slices.map((s) => s.key).join("|")}:${inner}:${outerRadius}`

  function handlePointerMove(event: PointerEvent<SVGRectElement>) {
    const point = localPoint(event)
    if (!point) return setHovered(null)
    const px = point.x - cx
    const py = point.y - cy
    const dist = Math.hypot(px, py)
    if (dist < inner || dist > outerRadius) return setHovered(null)
    let theta = Math.atan2(px, -py)
    if (theta < 0) theta += Math.PI * 2
    const half = padAngle / 2
    const slice = slices.find((s) => theta >= s.start - half && theta < s.end + half)
    setHovered(slice?.key ?? null)
  }

  return (
    <div ref={parentRef} className={cn("relative flex w-full flex-col items-center gap-4", className)}>
      <div className="relative w-full" style={{ height }}>
        {width > 0 && outerRadius > 0 ? (
          <svg width={width} height={height} className="overflow-visible">
            <g transform={`translate(${cx},${cy})`}>
              <SliceLayer key={entranceKey} slices={slices} active={active} />
              {inner > 0 && showTotal ? (
                <g pointerEvents="none" textAnchor="middle">
                  <text dy={centerCaption ? "-0.1em" : "0.35em"} fontSize={inner * 0.42} fontWeight={600} fill="var(--foreground)">
                    {formatValue(total)}
                  </text>
                  {centerCaption ? (
                    <text dy="1.4em" fontSize={11} fill="var(--muted-foreground)">
                      {centerCaption}
                    </text>
                  ) : null}
                </g>
              ) : null}
              <rect
                x={-cx}
                y={-cy}
                width={width}
                height={height}
                fill="transparent"
                style={{ cursor: onSelect && active ? "pointer" : "default" }}
                onPointerMove={handlePointerMove}
                onPointerLeave={() => setHovered(null)}
                onClick={() => hovered && onSelect?.(hovered)}
              />
            </g>
          </svg>
        ) : null}
      </div>
      {showLegend ? (
        <ul className="flex flex-wrap justify-center gap-x-4 gap-y-1.5 text-xs">
          {slices.map((slice) => {
            const dimmed = active != null && active !== slice.key
            return (
              <li
                key={slice.key}
                className="flex cursor-default items-center gap-1.5"
                style={{ opacity: dimmed ? 0.45 : 1, transition: `opacity ${popGlide}ms ${bloomEasing}` }}
                onMouseEnter={() => setHovered(slice.key)}
                onMouseLeave={() => setHovered(null)}
              >
                <span className="size-2.5 rounded-[3px]" style={{ background: slice.color }} />
                <span className="text-muted-foreground">{slice.key}</span>
                <span className="font-medium tabular-nums text-foreground">
                  {formatValue(slice.value)}
                  <span className="ml-1 text-muted-foreground">
                    {total > 0 ? `${Math.round((slice.value / total) * 100)}%` : ""}
                  </span>
                </span>
              </li>
            )
          })}
        </ul>
      ) : null}
    </div>
  )
}

function SliceLayer({
  slices,
  active,
}: {
  slices: {
    key: string
    color: string
    value: number
    path: string
    dir: readonly [number, number]
    index: number
  }[]
  active: string | null
}) {
  const [entered, setEntered] = useState(false)
  useEffect(() => {
    let inner = 0
    const outer = requestAnimationFrame(() => {
      inner = requestAnimationFrame(() => setEntered(true))
    })
    return () => {
      cancelAnimationFrame(outer)
      cancelAnimationFrame(inner)
    }
  }, [])

  return (
    <>
      {slices.map((slice) => {
        const dimmed = active != null && active !== slice.key
        const popped = active === slice.key
        const [dx, dy] = slice.dir
        return (
          <g
            key={slice.key}
            style={{
              transform: entered ? "scale(1) rotate(0deg)" : "scale(0.7) rotate(-10deg)",
              transformOrigin: "0 0",
              opacity: entered ? 1 : 0,
              transition: `transform ${bloomDuration}ms ${bloomEasing} ${slice.index * sliceStagger}ms, opacity ${bloomDuration}ms ${bloomEasing} ${slice.index * sliceStagger}ms`,
            }}
          >
            <path
              d={slice.path}
              fill={slice.color}
              stroke="var(--background)"
              strokeWidth={1.5}
              pointerEvents="none"
              style={{
                opacity: dimmed ? 0.45 : 1,
                transform: popped ? `translate(${dx * popDistance}px,${dy * popDistance}px)` : "none",
                transition: `transform ${popGlide}ms ${bloomEasing}, opacity ${popGlide}ms ${bloomEasing}`,
              }}
            />
          </g>
        )
      })}
    </>
  )
}
Installation
