"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { ArrowDownRight, ArrowUpRight, Minus } from "lucide-react";

import { cn } from "@/lib/utils";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

const statsCardVariants = cva("overflow-hidden transition-all duration-300 hover:shadow-md hover:-translate-y-0.5", {
  variants: {
    variant: {
      default: "",
      compact: "",
      trend: "relative overflow-hidden",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export interface StatsCardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof statsCardVariants> {
  title: string;
  value: string | number;
  change?: number;
  changeType?: "increase" | "decrease" | "neutral";
  icon?: React.ReactNode;
  periodText?: string;
  /** Recent values to draw as a tiny inline trend chart, oldest first. */
  sparklineData?: number[];
}

function Sparkline({ data, colorClassName }: { data: number[]; colorClassName: string }) {
  const width = 100;
  const height = 28;
  const pad = 2;
  const min = Math.min(...data);
  const max = Math.max(...data);
  const range = max - min || 1;

  const points = data.map((d, i) => {
    const x = data.length > 1 ? (i / (data.length - 1)) * (width - pad * 2) + pad : width / 2;
    const y = height - pad - ((d - min) / range) * (height - pad * 2);
    return `${x.toFixed(2)},${y.toFixed(2)}`;
  });
  const linePath = `M ${points.join(" L ")}`;
  const areaPath = `${linePath} L ${(width - pad).toFixed(2)},${height} L ${pad},${height} Z`;

  return (
    <svg viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" className={cn("h-7 w-full", colorClassName)}>
      <path d={areaPath} fill="currentColor" fillOpacity={0.12} stroke="none" />
      <path d={linePath} fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/**
 * StatsCard — a single dashboard metric.
 *
 * `change` is a percentage; its sign picks the arrow and colour unless you set
 * `changeType` explicitly. Pass `sparklineData` (oldest value first) to draw a
 * small inline trend chart.
 *
 * @example
 * <StatsCard
 *   title="Total Revenue"
 *   value="$45,231.89"
 *   change={20.1}
 *   periodText="vs last month"
 *   sparklineData={[12, 19, 15, 27, 34, 45]}
 * />
 */
export function StatsCard({
  className,
  variant,
  title,
  value,
  change,
  changeType,
  icon,
  periodText = "from last month",
  sparklineData,
  ...props
}: StatsCardProps) {
  const isCompact = variant === "compact";
  const isTrend = variant === "trend";

  // Determine change type if not explicitly provided but change value is
  let actualChangeType = changeType;
  if (!actualChangeType && change !== undefined) {
    if (change > 0) actualChangeType = "increase";
    else if (change < 0) actualChangeType = "decrease";
    else actualChangeType = "neutral";
  }

  const renderTrendIcon = () => {
    if (actualChangeType === "increase") return <ArrowUpRight className="h-4 w-4 text-emerald-500" />;
    if (actualChangeType === "decrease") return <ArrowDownRight className="h-4 w-4 text-rose-500" />;
    return <Minus className="h-4 w-4 text-muted-foreground" />;
  };

  const getTrendColor = () => {
    if (actualChangeType === "increase") return "text-emerald-500";
    if (actualChangeType === "decrease") return "text-rose-500";
    return "text-muted-foreground";
  };
  
  const getGradientBackground = () => {
    if (variant !== "default") return "";
    if (actualChangeType === "increase") return "bg-gradient-to-br from-emerald-500/5 to-transparent";
    if (actualChangeType === "decrease") return "bg-gradient-to-br from-rose-500/5 to-transparent";
    return "";
  };

  return (
    <Card className={cn(statsCardVariants({ variant }), getGradientBackground(), className)} {...props}>
      <CardHeader className={cn("flex flex-row items-center justify-between space-y-0", isCompact ? "p-4 pb-2" : "p-6 pb-2")}>
        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
        {icon && <div className="text-muted-foreground/80">{icon}</div>}
      </CardHeader>
      <CardContent className={cn(isCompact ? "p-4 pt-0" : "p-6 pt-0")}>
        <div className="text-2xl font-bold tracking-tight sm:text-3xl">{value}</div>
        
        {change !== undefined && (
          <div className="mt-1 flex items-center gap-1 text-xs sm:text-sm">
            {renderTrendIcon()}
            <span className={cn("font-medium", getTrendColor())}>
              {Math.abs(change)}%
            </span>
            <span className="text-muted-foreground ml-1">{periodText}</span>
          </div>
        )}

        {sparklineData && sparklineData.length > 1 && !isCompact && (
          <div className="mt-3">
            <Sparkline data={sparklineData} colorClassName={getTrendColor()} />
          </div>
        )}
      </CardContent>
      {isTrend && change !== undefined && (
        <div 
          className={cn(
            "absolute bottom-0 left-0 right-0 h-1", 
            actualChangeType === "increase" ? "bg-emerald-500/20" : 
            actualChangeType === "decrease" ? "bg-rose-500/20" : "bg-muted"
          )}
        >
          <div 
            className={cn(
              "h-full rounded-full transition-all duration-500",
              actualChangeType === "increase" ? "bg-emerald-500" : 
              actualChangeType === "decrease" ? "bg-rose-500" : "bg-muted-foreground"
            )}
            style={{ width: `${Math.min(Math.abs(change), 100)}%` }}
          />
        </div>
      )}
    </Card>
  );
}
Stats Card

Total Revenue

Total Revenue
