"use client"

/**
 * Extracted sparkline / micro-bar chart for KeyMetrics tiles.
 * Loaded lazily — only pulled when a metric has chart data.
 */

import * as React from "react"
import { Area, AreaChart, Bar, BarChart, XAxis } from "recharts"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "./chart"
import { cn } from "../../lib/utils"
import type { MetricChart, MetricProgressTone } from "./key-metrics"
import { normalizeMetricChartSeries } from "./key-metrics"

function metricChartStroke(tone: MetricProgressTone = "brand"): string {
  switch (tone) {
    case "success":
      return "var(--chart-2)"
    case "warning":
      return "var(--chart-4)"
    case "danger":
      return "var(--destructive)"
    case "info":
      return "var(--primary)"
    case "auto":
      return "var(--primary)"
    case "brand":
    default:
      return "var(--brand-color)"
  }
}

export type MetricMiniChartProps = {
  chart: MetricChart
  height: number
  metricLabel: string
  className?: string
}

/** Breathing room between a mini chart's plot and its tooltip. */
const MINI_CHART_TOOLTIP_GAP = 8

const MINI_CHART_TOOLTIP_WRAPPER: React.CSSProperties = {
  zIndex: 70,
  outline: "none",
  pointerEvents: "none",
}

/**
 * Recharts sparkline / micro-bars (ChartContainer).
 * Uses the shared ChartTooltipContent popover on hover.
 * Keep overflow visible on ancestors so the tooltip is not clipped; clip only
 * the SVG surface for md/lg bottom radius.
 * `sm` height (~28px): thinner stroke, no idle dots (activeDot on hover only).
 */
export function MetricMiniChart({ chart, height, metricLabel, className }: MetricMiniChartProps) {
  const points = React.useMemo(
    () => normalizeMetricChartSeries(chart.series).slice(0, 12),
    [chart.series],
  )
  const gradientId = React.useId().replace(/:/g, "")
  const stroke = metricChartStroke(chart.tone ?? "brand")
  const compact = height <= 32

  const data = React.useMemo(
    () => points.map((point) => ({ label: point.label ?? "", value: point.value })),
    [points],
  )

  const config = React.useMemo<ChartConfig>(
    () => ({
      value: { label: metricLabel, color: stroke },
    }),
    [metricLabel, stroke],
  )

  if (points.length < 2) return null

  const margin = compact
    ? { top: 2, right: 1, left: 1, bottom: 1 }
    : { top: 4, right: 0, left: 0, bottom: 0 }

  const tooltip = (
    <ChartTooltip
      cursor={
        chart.kind === "bars"
          ? { fill: "color-mix(in oklch, var(--foreground) 6%, transparent)" }
          : { stroke: "var(--border)", strokeWidth: 1 }
      }
      // Every mini chart is shorter than its own tooltip, so letting Recharts
      // keep the tooltip inside the plot buries the thing the user is pointing
      // at. Sit it below the plot instead: a numeric `position.y` short-circuits
      // the clamp, and ancestors stay `overflow-visible` so it can leave the card.
      //
      // Horizontally, a wide plot can hold the tooltip, so let it track the
      // cursor there. The inline `sm` chart is narrower than the tooltip, which
      // would push the right edge past the card and off-screen for the last card
      // in a row, so that one is anchored to the plot's trailing edge instead.
      allowEscapeViewBox={{ x: false, y: true }}
      position={
        compact
          ? { x: 0, y: height + MINI_CHART_TOOLTIP_GAP }
          : { y: height + MINI_CHART_TOOLTIP_GAP }
      }
      offset={MINI_CHART_TOOLTIP_GAP}
      wrapperStyle={
        compact
          ? // Spread after Recharts' own `left: 0`, so these win.
            { ...MINI_CHART_TOOLTIP_WRAPPER, left: "auto", right: 0 }
          : MINI_CHART_TOOLTIP_WRAPPER
      }
      content={<ChartTooltipContent indicator="dot" className="shadow-lg" />}
    />
  )

  return (
    <div
      className={cn("relative z-20 w-full min-w-0 overflow-visible", className)}
      style={{ height }}
      role="img"
      aria-label={`${metricLabel} ${chart.kind === "bars" ? "bar" : "trend"} chart`}
    >
      <ChartContainer
        config={config}
        className={cn(
          "aspect-auto! h-full w-full overflow-visible justify-stretch [&_.recharts-responsive-container]:h-full!",
          "[&_.recharts-wrapper]:overflow-visible!",
          "[&_.recharts-dot]:stroke-[var(--card)] [&_.recharts-active-dot]:stroke-[var(--card)]",
          /* Round the plot only — do not overflow-hidden the wrapper (clips tooltip). */
          !compact && "[&_.recharts-surface]:[clip-path:inset(0_round_0_0_0.75rem_0.75rem)]",
        )}
        debounce={80}
      >
        {chart.kind === "sparkline" ? (
          <AreaChart data={data} margin={margin}>
            <defs>
              <linearGradient id={`km-fill-${gradientId}`} x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="var(--color-value)" stopOpacity={compact ? 0.2 : 0.28} />
                <stop offset="100%" stopColor="var(--color-value)" stopOpacity={0.02} />
              </linearGradient>
            </defs>
            <XAxis dataKey="label" hide />
            {tooltip}
            <Area
              type="monotone"
              dataKey="value"
              name={metricLabel}
              stroke="var(--color-value)"
              fill={`url(#km-fill-${gradientId})`}
              strokeWidth={compact ? 1.5 : 2}
              dot={
                compact
                  ? false
                  : {
                      r: 3,
                      fill: "var(--color-value)",
                      stroke: "var(--card)",
                      strokeWidth: 2,
                    }
              }
              activeDot={{
                r: compact ? 3 : 4.5,
                fill: "var(--color-value)",
                stroke: "var(--card)",
                strokeWidth: 2,
              }}
              isAnimationActive={false}
            />
          </AreaChart>
        ) : (
          <BarChart data={data} margin={margin}>
            <XAxis dataKey="label" hide />
            {tooltip}
            <Bar
              dataKey="value"
              name={metricLabel}
              fill="var(--color-value)"
              radius={compact ? [2, 2, 0, 0] : [3, 3, 0, 0]}
              maxBarSize={compact ? 10 : 18}
              isAnimationActive={false}
            />
          </BarChart>
        )}
      </ChartContainer>
    </div>
  )
}