import React from "react";
import { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface StatCardProps {
  title: string;
  value: string | number;
  icon: LucideIcon;
  description?: string;
  subtitle?: string;
  trend?: {
    value: string;
    isPositive?: boolean;
  } | string;
  trendType?: "up" | "down" | "neutral" | string;
  iconColor?: "blue" | "navy" | "success" | "warning" | "danger" | "purple";
  iconBg?: string;
  variant?:
    | "primary"
    | "secondary"
    | "outline"
    | "default"
    | "success"
    | "warning"
    | "danger"
    | "navy"
    | "blue"
    | "purple"
    | string;
  className?: string;
}

export const StatCard: React.FC<StatCardProps> = ({
  title,
  value,
  icon: Icon,
  description,
  subtitle,
  trend,
  trendType,
  iconColor = "blue",
  iconBg,
  variant,
  className,
}) => {
  // Resolve effective icon color
  let effectiveColor: "blue" | "navy" | "success" | "warning" | "danger" | "purple" = iconColor;
  if (variant) {
    if (variant === "primary" || variant === "blue") effectiveColor = "blue";
    else if (variant === "secondary" || variant === "navy" || variant === "dark") effectiveColor = "navy";
    else if (variant === "success") effectiveColor = "success";
    else if (variant === "warning" || variant === "accent") effectiveColor = "warning";
    else if (variant === "danger" || variant === "red") effectiveColor = "danger";
    else if (variant === "purple") effectiveColor = "purple";
  }

  const effectiveDescription = description || subtitle;

  const trendObj =
    typeof trend === "string"
      ? { value: trend, isPositive: trendType === "up" || !trendType || trendType === "neutral" }
      : trend;

  const iconVariants = {
    blue: "bg-blue-50 text-blue-600 border-blue-200",
    navy: "bg-slate-100 text-slate-700 border-slate-200",
    success: "bg-emerald-50 text-emerald-600 border-emerald-200",
    warning: "bg-amber-50 text-amber-600 border-amber-200",
    danger: "bg-rose-50 text-rose-600 border-rose-200",
    purple: "bg-purple-50 text-purple-600 border-purple-200",
  };

  return (
    <div
      className={cn(
        "p-3.5 sm:p-4 bg-white rounded-xl border border-slate-200 shadow-sm flex items-start justify-between gap-2.5 sm:gap-3 transition-all duration-150 hover:border-slate-300 hover:shadow-md",
        className
      )}
    >
      <div className="space-y-1 min-w-0 flex-1">
        <p className="text-[11px] sm:text-xs font-bold uppercase tracking-wider text-slate-500 leading-snug break-words">
          {title}
        </p>
        <div className="flex flex-wrap items-baseline gap-1.5 sm:gap-2 pt-0.5">
          <span className="text-xl sm:text-2xl font-extrabold tracking-tight text-slate-900 leading-none">
            {value}
          </span>
          {trendObj && (
            <span
              className={cn(
                "text-[10px] sm:text-[11px] font-semibold inline-flex items-center px-1.5 py-0.5 rounded-full whitespace-nowrap",
                trendObj.isPositive
                  ? "bg-emerald-50 text-emerald-700 border border-emerald-200/60"
                  : "bg-rose-50 text-rose-700 border border-rose-200/60"
              )}
            >
              {trendObj.value}
            </span>
          )}
        </div>
        {effectiveDescription && (
          <p className="text-[11px] text-slate-500 leading-relaxed break-words pt-0.5">
            {effectiveDescription}
          </p>
        )}
      </div>

      <div
        className={cn(
          "w-9 h-9 sm:w-10 sm:h-10 rounded-lg border flex items-center justify-center shrink-0 mt-0.5",
          iconBg ? iconBg : iconVariants[effectiveColor] || iconVariants.blue
        )}
      >
        <Icon className="w-4 h-4 sm:w-5 sm:h-5" />
      </div>
    </div>
  );
};