"use client";

import { cn } from "@/shared/lib/utils";
import { TrendingUp, TrendingDown, Minus } from "lucide-react";

interface StatsCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  trend?: number;
  trendLabel?: string;
  accent?: "blue" | "green" | "amber" | "red" | "purple" | "cyan";
  icon?: React.ComponentType<{ className?: string }>;
  className?: string;
  mono?: boolean;
}

const accentMap = {
  blue: "border-l-blue-500",
  green: "border-l-emerald-500",
  amber: "border-l-amber-500",
  red: "border-l-red-500",
  purple: "border-l-purple-500",
  cyan: "border-l-cyan-500",
};

const iconBgMap = {
  blue: "bg-blue-50 text-blue-600",
  green: "bg-emerald-50 text-emerald-600",
  amber: "bg-amber-50 text-amber-600",
  red: "bg-red-50 text-red-600",
  purple: "bg-purple-50 text-purple-600",
  cyan: "bg-cyan-50 text-cyan-600",
};

export default function StatsCard({
  title,
  value,
  subtitle,
  trend,
  trendLabel,
  accent = "blue",
  icon: Icon,
  className,
  mono = false,
}: StatsCardProps) {
  const isPositive = trend !== undefined && trend > 0;
  const isNegative = trend !== undefined && trend < 0;
  const isNeutral = trend !== undefined && trend === 0;

  return (
    <div className={cn(
      "bg-card rounded-xl border border-border shadow-sm hover:shadow-md transition-shadow duration-200",
      "border-l-4",
      accentMap[accent],
      "p-5",
      className
    )}>
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">
            {title}
          </p>
          <p className={cn(
            "text-3xl font-bold text-foreground leading-none mb-1",
            mono && "font-mono"
          )}>
            {value}
          </p>
          {subtitle && (
            <p className="text-xs text-muted-foreground mt-1.5">{subtitle}</p>
          )}
          {trend !== undefined && (
            <div className={cn(
              "flex items-center gap-1 mt-2 text-xs font-semibold",
              isPositive && "text-emerald-600",
              isNegative && "text-red-500",
              isNeutral && "text-muted-foreground"
            )}>
              {isPositive && <TrendingUp className="w-3 h-3" />}
              {isNegative && <TrendingDown className="w-3 h-3" />}
              {isNeutral && <Minus className="w-3 h-3" />}
              <span>
                {isPositive ? "+" : ""}{trend}%
                {trendLabel && <span className="font-normal text-muted-foreground ml-1">{trendLabel}</span>}
              </span>
            </div>
          )}
        </div>
        {Icon && (
          <div className={cn(
            "w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0",
            iconBgMap[accent]
          )}>
            <Icon className="w-5 h-5" />
          </div>
        )}
      </div>
    </div>
  );
}