"use client"

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

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

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

const growDuration = 720
const growEasing = "cubic-bezier(0.22, 1, 0.36, 1)"
const stageStagger = 70
const popGlide = 180
const popScale = 1.02
const dimmedOpacity = 0.4
const edgeSamples = 14
const defaultPalette = [
  "var(--chart-1)",
  "var(--chart-2)",
  "var(--chart-3)",
  "var(--chart-4)",
  "var(--chart-5)",
]

function easeInOutCubic(t: number) {
  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
}

// Eased (not straight-line) tapering between stage widths is what makes a funnel
// read as a funnel rather than a stack of trapezoids: it gives each waist a soft,
// flowing edge instead of a sharp kink where two stage widths meet.
//
// The eased samples must start/end where the corner arcs end (tStart/tEnd), not
// at t=0/t=1: sampling the full range and only slicing off the endpoints leaves
// a stretch of path between the corner's arc-end and the first easing sample
// that runs backward in y, folding the outline into the blobby double-bulge you
// get from a naive corner-radius-agnostic taper.
function stagePath(cx: number, y0: number, y1: number, topHalf: number, bottomHalf: number, topRadius: number, bottomRadius: number) {
  const h = y1 - y0
  const rt = Math.max(0, Math.min(topRadius, topHalf, h))
  const rb = Math.max(0, Math.min(bottomRadius, bottomHalf, h))
  const tStart = h > 0 ? rt / h : 0
  const tEnd = h > 0 ? 1 - rb / h : 1
  const halfAt = (t: number) => topHalf + (bottomHalf - topHalf) * easeInOutCubic(t)
  const side = (dir: 1 | -1) =>
    Array.from({ length: edgeSamples + 1 }, (_, i) => {
      const t = tStart + (tEnd - tStart) * (i / edgeSamples)
      return `${cx + dir * halfAt(t)},${y0 + h * t}`
    })

  return [
    `M ${cx - topHalf + rt},${y0}`,
    `L ${cx + topHalf - rt},${y0}`,
    `Q ${cx + topHalf},${y0} ${cx + topHalf},${y0 + rt}`,
    ...side(1).slice(1, -1).map((p) => `L ${p}`),
    `L ${cx + bottomHalf},${y1 - rb}`,
    `Q ${cx + bottomHalf},${y1} ${cx + bottomHalf - rb},${y1}`,
    `L ${cx - bottomHalf + rb},${y1}`,
    `Q ${cx - bottomHalf},${y1} ${cx - bottomHalf},${y1 - rb}`,
    ...side(-1).slice(1, -1).reverse().map((p) => `L ${p}`),
    `L ${cx - topHalf},${y0 + rt}`,
    `Q ${cx - topHalf},${y0} ${cx - topHalf + rt},${y0}`,
    "Z",
  ].join(" ")
}

interface Stage {
  key: string
  value: number
  color: string
  path: string
  labelY: number
  y0: number
  y1: number
  index: number
}

export function FunnelChart<T>({
  data,
  category,
  value,
  color,
  formatValue = (v) => `${v}`,
  height = 320,
  cornerRadius = 10,
  palette = defaultPalette,
  showLegend = true,
  activeKey,
  onSelect,
  className,
}: FunnelChartProps<T>) {
  const { parentRef, width } = useParentSize({ debounceTime: 100 })
  const { containerRef, TooltipInPortal } = useTooltipInPortal({ detectBounds: false, scroll: true })
  const [hovered, setHovered] = useState<string | null>(null)
  const [pointer, setPointer] = useState<{ x: number; y: number } | null>(null)
  const active = hovered ?? activeKey ?? null

  const cx = width / 2
  const maxValue = Math.max(1, ...data.map(value))
  const maxWidth = Math.max(0, width - 48)
  const widthScale = useMemo(() => scaleLinear({ domain: [0, maxValue], range: [0, maxWidth] }), [maxValue, maxWidth])
  const stageHeight = data.length > 0 ? height / data.length : 0

  const stages = useMemo(() => {
    if (data.length === 0 || width === 0) return []
    return data.map((datum, index) => {
      const next = data[index + 1]
      const topHalf = widthScale(value(datum)) / 2
      const bottomHalf = next ? widthScale(value(next)) / 2 : topHalf
      const y0 = index * stageHeight
      const y1 = y0 + stageHeight
      return {
        key: category(datum),
        value: value(datum),
        color: color?.(datum, index) ?? palette[index % palette.length],
        path: stagePath(cx, y0, y1, topHalf, bottomHalf, index === 0 ? cornerRadius : 0, index === data.length - 1 ? cornerRadius : 0),
        labelY: y0 + stageHeight / 2,
        y0,
        y1,
        index,
      }
    })
  }, [data, value, category, color, palette, widthScale, cx, stageHeight, cornerRadius, width])

  function handlePointerMove(event: PointerEvent<SVGRectElement>) {
    const point = localPoint(event)
    const stage = point && stages.find((s) => point.y >= s.y0 && point.y < s.y1)
    if (!point || !stage) return setHovered(null)
    setHovered(stage.key)
    setPointer(point)
  }

  const hoveredStage = stages.find((s) => s.key === hovered)
  const entranceKey = `${stages.map((s) => s.key).join("|")}:${width}`
  const tooltipOnRight = pointer ? pointer.x < width / 2 : true
  const firstValue = stages[0]?.value ?? 0

  return (
    <div className={cn("relative flex w-full flex-col items-center gap-4", className)}>
      <div
        ref={(node) => {
          parentRef(node)
          containerRef(node)
        }}
        className="relative w-full"
        style={{ height }}
      >
        {width > 0 && stages.length > 0 ? (
          <svg width={width} height={height} className="overflow-visible">
            <GridRows
              scale={scaleLinear({ domain: [0, height], range: [0, height] })}
              tickValues={[...stages.map((s) => s.y0), height]}
              width={width}
              stroke="var(--border)"
              strokeDasharray="2,3"
            />
            <StageLayer key={entranceKey} stages={stages} active={active} formatValue={formatValue} />
            <rect
              width={width}
              height={height}
              fill="transparent"
              style={{ cursor: onSelect ? "pointer" : "default" }}
              onPointerMove={handlePointerMove}
              onPointerLeave={() => setHovered(null)}
              onClick={() => hovered && onSelect?.(hovered)}
            />
          </svg>
        ) : null}
        {hoveredStage && pointer ? (
          <TooltipInPortal
            left={pointer.x}
            top={pointer.y}
            offsetLeft={0}
            offsetTop={0}
            className="pointer-events-none z-10 flex items-center gap-1.5 rounded-md border bg-popover px-2.5 py-2 text-xs shadow-md"
            style={{
              position: "absolute",
              transform: tooltipOnRight ? "translate(14px,-50%)" : "translate(calc(-100% - 14px),-50%)",
            }}
          >
            <span className="size-2 rounded-[3px]" style={{ background: hoveredStage.color }} />
            <span className="text-muted-foreground">{hoveredStage.key}</span>
            <span className="font-medium tabular-nums text-popover-foreground">{formatValue(hoveredStage.value)}</span>
          </TooltipInPortal>
        ) : null}
      </div>
      {showLegend ? (
        <ul className="flex flex-wrap justify-center gap-x-4 gap-y-1.5 text-xs">
          {stages.map((stage) => {
            const dimmed = active != null && active !== stage.key
            return (
              <li
                key={stage.key}
                className="flex cursor-default items-center gap-1.5"
                style={{ opacity: dimmed ? 0.45 : 1, transition: `opacity ${popGlide}ms ${growEasing}` }}
                onMouseEnter={() => setHovered(stage.key)}
                onMouseLeave={() => setHovered(null)}
              >
                <span className="size-2.5 rounded-[3px]" style={{ background: stage.color }} />
                <span className="text-muted-foreground">{stage.key}</span>
                <span className="font-medium tabular-nums text-foreground">
                  {formatValue(stage.value)}
                  <span className="ml-1 text-muted-foreground">
                    {firstValue > 0 ? `${Math.round((stage.value / firstValue) * 100)}%` : ""}
                  </span>
                </span>
              </li>
            )
          })}
        </ul>
      ) : null}
    </div>
  )
}

function StageLayer({
  stages,
  active,
  formatValue,
}: {
  stages: Stage[]
  active: string | null
  formatValue: (value: number) => string
}) {
  const [entered, setEntered] = useState(false)
  useEffect(() => {
    let inner = 0
    const outer = requestAnimationFrame(() => {
      inner = requestAnimationFrame(() => setEntered(true))
    })
    return () => {
      cancelAnimationFrame(outer)
      cancelAnimationFrame(inner)
    }
  }, [])

  return (
    <>
      {stages.map((stage) => {
        const dimmed = active != null && active !== stage.key
        const popped = active === stage.key
        return (
          <g
            key={stage.key}
            style={{
              transform: entered ? `scale(${popped ? popScale : 1})` : "scale(0.92)",
              transformBox: "fill-box",
              transformOrigin: "center",
              opacity: entered ? (dimmed ? dimmedOpacity : 1) : 0,
              transition: entered
                ? `transform ${popGlide}ms ${growEasing}, opacity ${popGlide}ms ${growEasing}`
                : `transform ${growDuration}ms ${growEasing} ${stage.index * stageStagger}ms, opacity ${growDuration}ms ${growEasing} ${stage.index * stageStagger}ms`,
            }}
          >
            <path
              d={stage.path}
              fill={stage.color}
              stroke="var(--background)"
              strokeWidth={popped ? 2.5 : 1.5}
              style={{ transition: `stroke-width 160ms ${growEasing}` }}
            />
            <text
              x="50%"
              y={stage.labelY}
              textAnchor="middle"
              dy="0.35em"
              fontSize={12}
              fontWeight={600}
              pointerEvents="none"
              fill="var(--foreground)"
              style={{ paintOrder: "stroke", stroke: "var(--background)", strokeWidth: 4, strokeLinejoin: "round" }}
            >
              {formatValue(stage.value)}
            </text>
          </g>
        )
      })}
    </>
  )
}
Installation
