"use client"

import { useEffect, useMemo, useState, type PointerEvent } from "react"
import { scaleBand, scaleLinear } from "@visx/scale"
import { AxisBottom, AxisLeft } from "@visx/axis"
import { GridRows, GridColumns } 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 BarChartSeries<T> {
  key: string
  label: string
  data: T[]
  color?: string
}

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

export interface BarChartProps<T> {
  series: BarChartSeries<T>[]
  x: (point: T) => string
  y: (point: T) => number | null
  orientation?: "vertical" | "horizontal"
  layout?: "grouped" | "stacked"
  formatCategory?: (value: string) => string
  formatValue?: (value: number) => string
  height?: number
  margin?: BarChartMargin
  numTicks?: number
  radius?: number
  palette?: string[]
  highlightedKey?: string
  emphasizedKey?: string
  onSelect?: (key: string) => void
  className?: string
}

const defaultMargin: BarChartMargin = { top: 12, right: 16, bottom: 28, left: 48 }
const growDuration = 820
const growEasing = "cubic-bezier(0.22, 1, 0.36, 1)"
const focusGlide = 160
const categoryStagger = 70
const seriesStagger = 45
const dimmedOpacity = 0.35
const defaultPalette = [
  "var(--chart-1)",
  "var(--chart-2)",
  "var(--chart-3)",
  "var(--chart-4)",
  "var(--chart-5)",
]

function colorOf(index: number, color: string | undefined, palette: string[]) {
  return color ?? palette[index % palette.length]
}

interface Bar {
  categoryKey: string
  seriesKey: string
  seriesLabel: string
  color: string
  value: number
  x: number
  y: number
  width: number
  height: number
  categoryIndex: number
  seriesIndex: number
}

type FocusPoint = { key: string; label: string; color: string; value: number }

type Focus =
  | {
      kind: "segment"
      categoryKey: string
      barKey: string
      anchorX: number
      anchorY: number
      points: [FocusPoint]
    }
  | {
      kind: "category"
      categoryKey: string
      anchorX: number
      anchorY: number
      points: FocusPoint[]
    }

export function BarChart<T>({
  series,
  x,
  y,
  orientation = "vertical",
  layout = "grouped",
  formatCategory = (value) => value,
  formatValue = (value) => `${value}`,
  height = 280,
  margin = defaultMargin,
  numTicks = 4,
  radius = 4,
  palette = defaultPalette,
  highlightedKey,
  emphasizedKey,
  onSelect,
  className,
}: BarChartProps<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 vertical = orientation === "vertical"

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

  const valueAt = useMemo(() => {
    const table = new Map<string, Map<string, number | null>>()
    for (const s of series) {
      const row = new Map<string, number | null>()
      for (const point of s.data) row.set(x(point), y(point))
      table.set(s.key, row)
    }
    return (seriesKey: string, categoryKey: string) => table.get(seriesKey)?.get(categoryKey) ?? null
  }, [series, x, y])

  const valueDomain = useMemo(() => {
    if (layout === "stacked") {
      const totals = categories.map((c) =>
        series.reduce((sum, s) => sum + Math.max(0, valueAt(s.key, c) ?? 0), 0),
      )
      const max = totals.length ? Math.max(...totals) : 1
      return [0, max * 1.05] as [number, number]
    }
    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.05] as [number, number]
  }, [layout, categories, series, valueAt, y])

  const categoryScale = useMemo(
    () =>
      scaleBand({
        domain: categories,
        range: [0, vertical ? innerWidth : innerHeight],
        paddingInner: 0.28,
        paddingOuter: 0.14,
      }),
    [categories, vertical, innerWidth, innerHeight],
  )
  const valueScale = useMemo(
    () => scaleLinear({ domain: valueDomain, range: vertical ? [innerHeight, 0] : [0, innerWidth], nice: true }),
    [valueDomain, vertical, innerHeight, innerWidth],
  )
  const groupScale = useMemo(
    () => scaleBand({ domain: series.map((s) => s.key), range: [0, categoryScale.bandwidth()], paddingInner: 0.18 }),
    [series, categoryScale],
  )

  const bars = useMemo(() => {
    const baseline = valueScale(0)
    const out: Bar[] = []
    categories.forEach((categoryKey, categoryIndex) => {
      let acc = 0
      series.forEach((s, seriesIndex) => {
        const raw = valueAt(s.key, categoryKey)
        if (raw == null) return
        const color = colorOf(seriesIndex, s.color, palette)
        const shared = { categoryKey, seriesKey: s.key, seriesLabel: s.label, color, value: raw, categoryIndex, seriesIndex }
        if (layout === "stacked") {
          const value = Math.max(0, raw)
          const from = valueScale(acc)
          const to = valueScale(acc + value)
          acc += value
          if (value === 0) return
          out.push(
            vertical
              ? { ...shared, x: categoryScale(categoryKey) ?? 0, y: to, width: categoryScale.bandwidth(), height: from - to }
              : { ...shared, x: from, y: categoryScale(categoryKey) ?? 0, width: to - from, height: categoryScale.bandwidth() },
          )
        } else {
          const start = valueScale(raw)
          const bandStart = (categoryScale(categoryKey) ?? 0) + (groupScale(s.key) ?? 0)
          out.push(
            vertical
              ? {
                  ...shared,
                  x: bandStart,
                  y: Math.min(start, baseline),
                  width: groupScale.bandwidth(),
                  height: Math.abs(start - baseline),
                }
              : {
                  ...shared,
                  x: Math.min(start, baseline),
                  y: bandStart,
                  width: Math.abs(start - baseline),
                  height: groupScale.bandwidth(),
                },
          )
        }
      })
    })
    return out
  }, [categories, series, valueAt, layout, vertical, valueScale, categoryScale, groupScale, palette])

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

  function categoryAt(position: number) {
    const step = categoryScale.step()
    const outer = categoryScale.paddingOuter() * step
    const index = Math.floor((position - outer) / step)
    return categories[Math.min(categories.length - 1, Math.max(0, index))]
  }

  function categoryPoints(categoryKey: string) {
    return series
      .flatMap((s, seriesIndex) => {
        const value = valueAt(s.key, categoryKey)
        if (value == null) return []
        return [{ key: s.key, label: s.label, color: colorOf(seriesIndex, s.color, palette), value }]
      })
      .sort((a, b) => b.value - a.value)
  }

  function handlePointerMove(event: PointerEvent<SVGRectElement>) {
    const point = localPoint(event)
    if (!point) return
    const px = point.x - margin.left
    const py = point.y - margin.top
    const segment = bars.find((b) => px >= b.x && px <= b.x + b.width && py >= b.y && py <= b.y + b.height)
    if (segment) {
      setFocus({
        kind: "segment",
        categoryKey: segment.categoryKey,
        barKey: `${segment.categoryKey}-${segment.seriesKey}`,
        anchorX: vertical ? segment.x + segment.width / 2 : segment.x + segment.width,
        anchorY: vertical ? segment.y : segment.y + segment.height / 2,
        points: [{ key: segment.seriesKey, label: segment.seriesLabel, color: segment.color, value: segment.value }],
      })
      return
    }
    const categoryKey = categoryAt(vertical ? px : py)
    const inCategory = bars.filter((b) => b.categoryKey === categoryKey)
    if (!inCategory.length) return setFocus(null)
    setFocus({
      kind: "category",
      categoryKey,
      anchorX: vertical
        ? (categoryScale(categoryKey) ?? 0) + categoryScale.bandwidth() / 2
        : Math.max(...inCategory.map((b) => b.x + b.width)),
      anchorY: vertical
        ? Math.min(...inCategory.map((b) => b.y))
        : (categoryScale(categoryKey) ?? 0) + categoryScale.bandwidth() / 2,
      points: categoryPoints(categoryKey),
    })
  }

  const tooltipLeft = focus ? focus.anchorX + margin.left : 0
  const tooltipTop = focus ? focus.anchorY + margin.top : 0
  const tooltipOnRight = focus ? tooltipLeft < width / 2 : true
  const ticks = valueScale.ticks(numTicks)

  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}>
            {vertical ? (
              <GridRows scale={valueScale} width={innerWidth} tickValues={ticks} stroke="var(--border)" strokeDasharray="2,3" />
            ) : (
              <GridColumns scale={valueScale} height={innerHeight} tickValues={ticks} stroke="var(--border)" strokeDasharray="2,3" />
            )}
            {vertical ? (
              <AxisLeft
                scale={valueScale}
                tickValues={ticks}
                hideAxisLine
                hideTicks
                tickFormat={(v) => formatValue(Number(v))}
                tickLabelProps={() => ({ fontSize: 11, fill: "var(--muted-foreground)", textAnchor: "end", dx: -4, dy: "0.32em" })}
              />
            ) : (
              <AxisBottom
                top={innerHeight}
                scale={valueScale}
                tickValues={ticks}
                hideAxisLine
                hideTicks
                tickFormat={(v) => formatValue(Number(v))}
                tickLabelProps={() => ({ fontSize: 11, fill: "var(--muted-foreground)", textAnchor: "middle" })}
              />
            )}
            {vertical ? (
              <AxisBottom
                top={innerHeight}
                scale={categoryScale}
                hideAxisLine
                hideTicks
                tickFormat={(v) => formatCategory(String(v))}
                tickLabelProps={() => ({ fontSize: 11, fill: "var(--muted-foreground)", textAnchor: "middle" })}
              />
            ) : (
              <AxisLeft
                scale={categoryScale}
                hideAxisLine
                hideTicks
                tickFormat={(v) => formatCategory(String(v))}
                tickLabelProps={() => ({ fontSize: 11, fill: "var(--muted-foreground)", textAnchor: "end", dx: -4, dy: "0.32em" })}
              />
            )}
            {(focus?.categoryKey ?? highlightedKey) && categoryScale(focus?.categoryKey ?? highlightedKey ?? "") !== undefined ? (
              <rect
                x={vertical ? (categoryScale(focus?.categoryKey ?? highlightedKey ?? "") ?? 0) - categoryScale.step() * categoryScale.paddingInner() * 0.5 : 0}
                y={vertical ? 0 : (categoryScale(focus?.categoryKey ?? highlightedKey ?? "") ?? 0) - categoryScale.step() * categoryScale.paddingInner() * 0.5}
                width={vertical ? categoryScale.step() : innerWidth}
                height={vertical ? innerHeight : categoryScale.step()}
                fill="var(--muted)"
                opacity={0.5}
                rx={6}
                pointerEvents="none"
                style={{ transition: `x ${focusGlide}ms ${growEasing}, y ${focusGlide}ms ${growEasing}` }}
              />
            ) : null}
            <BarLayer
              key={entranceKey}
              bars={bars}
              vertical={vertical}
              radius={radius}
              focusBarKey={focus?.kind === "segment" ? focus.barKey : undefined}
              focusCategoryKey={focus?.kind === "category" ? focus.categoryKey : undefined}
              emphasizedKey={emphasizedKey}
            />
            <rect
              width={innerWidth}
              height={innerHeight}
              fill="transparent"
              style={{ cursor: onSelect ? "pointer" : "default" }}
              onPointerMove={handlePointerMove}
              onPointerLeave={() => setFocus(null)}
              onClick={() => focus && onSelect?.(focus.categoryKey)}
            />
          </Group>
        </svg>
      ) : null}
      {focus ? (
        <TooltipInPortal
          left={tooltipLeft}
          top={tooltipTop}
          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 ${growEasing}, top ${focusGlide}ms ${growEasing}`,
          }}
        >
          <span className="font-medium text-popover-foreground">{formatCategory(focus.categoryKey)}</span>
          {focus.points.map((point) => (
            <div key={point.key} className="flex items-center gap-1.5">
              <span className="size-2 rounded-[3px]" 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 BarLayer({
  bars,
  vertical,
  radius,
  focusBarKey,
  focusCategoryKey,
  emphasizedKey,
}: {
  bars: Bar[]
  vertical: boolean
  radius: number
  focusBarKey?: string
  focusCategoryKey?: 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 (
    <>
      {bars.map((bar) => {
        const delay = bar.categoryIndex * categoryStagger + bar.seriesIndex * seriesStagger
        const dimmed =
          (focusBarKey != null
            ? focusBarKey !== `${bar.categoryKey}-${bar.seriesKey}`
            : focusCategoryKey != null && focusCategoryKey !== bar.categoryKey) ||
          (emphasizedKey != null && emphasizedKey !== bar.seriesKey)
        return (
          <rect
            key={`${bar.categoryKey}-${bar.seriesKey}`}
            x={bar.x}
            y={bar.y}
            width={bar.width}
            height={bar.height}
            rx={Math.min(radius, bar.width / 2, bar.height / 2)}
            fill={bar.color}
            style={{
              transform: entered ? "scale(1)" : vertical ? "scaleY(0)" : "scaleX(0)",
              transformBox: "fill-box",
              transformOrigin: vertical ? "bottom" : "left",
              opacity: dimmed ? dimmedOpacity : 1,
              transition: `transform ${growDuration}ms ${growEasing} ${delay}ms, opacity ${focusGlide}ms ${growEasing}`,
            }}
          />
        )
      })}
    </>
  )
}
Installation
