import * as React from "react"
import { type LucideIcon, TrendingDown, TrendingUp } from "lucide-react"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export interface StatCardProps extends React.ComponentProps<typeof Card> {
  /** Metric label, e.g. "Total revenue". */
  label: string
  /** Big value, e.g. "$48,120". */
  value: React.ReactNode
  /** Optional period / context line under the value. */
  hint?: string
  /** Signed percentage change. Positive renders up + accent, negative down + destructive. */
  delta?: number
  /** Icon shown top-right. */
  icon?: LucideIcon
}

/**
 * StatCard — a dashboard KPI tile composed from Card + Badge.
 * Purely var-driven, so it adopts whatever `data-theme` is active.
 */
export function StatCard({
  label,
  value,
  hint,
  delta,
  icon: Icon,
  className,
  ...props
}: StatCardProps) {
  const up = (delta ?? 0) >= 0
  return (
    <Card className={cn("gap-3", className)} {...props}>
      <CardHeader>
        <CardDescription>{label}</CardDescription>
        <CardTitle className="text-3xl font-semibold tabular-nums tracking-tight">
          {value}
        </CardTitle>
        {Icon ? (
          <CardAction>
            <span className="bg-muted text-muted-foreground flex size-9 items-center justify-center rounded-md">
              <Icon className="size-4" />
            </span>
          </CardAction>
        ) : null}
      </CardHeader>
      {(delta !== undefined || hint) && (
        <CardContent className="flex items-center gap-2">
          {delta !== undefined && (
            <Badge variant={up ? "default" : "destructive"}>
              {up ? <TrendingUp /> : <TrendingDown />}
              {up ? "+" : ""}
              {delta}%
            </Badge>
          )}
          {hint && (
            <span className="text-muted-foreground text-xs">{hint}</span>
          )}
        </CardContent>
      )}
    </Card>
  )
}