import { ArrowUp, ArrowDown, LucideIcon } from "lucide-react";
import Link from "next/link";

interface MetricCardProps {
  title: string;
  value: string | number;
  change?: number;
  icon: LucideIcon;
  color: string;
  link: string;
  badge?: string;
}

const colorStyles: Record<
  string,
  {
    iconBg: string;
    iconColor: string;
    gradient: string;
    borderColor: string;
    shadow: string;
  }
> = {
  emerald: {
    iconBg: "bg-emerald-100",
    iconColor: "text-emerald-600",
    gradient: "from-emerald-500/5 via-emerald-500/0 to-transparent",
    borderColor: "hover:border-emerald-200",
    shadow: "hover:shadow-emerald-100",
  },
  orange: {
    iconBg: "bg-orange-100",
    iconColor: "text-orange-600",
    gradient: "from-orange-500/5 via-orange-500/0 to-transparent",
    borderColor: "hover:border-orange-200",
    shadow: "hover:shadow-orange-100",
  },
  purple: {
    iconBg: "bg-purple-100",
    iconColor: "text-purple-600",
    gradient: "from-purple-500/5 via-purple-500/0 to-transparent",
    borderColor: "hover:border-purple-200",
    shadow: "hover:shadow-purple-100",
  },
  green: {
    iconBg: "bg-lime-100",
    iconColor: "text-lime-700",
    gradient: "from-lime-500/5 via-lime-500/0 to-transparent",
    borderColor: "hover:border-lime-200",
    shadow: "hover:shadow-lime-100",
  },
  blue: {
    iconBg: "bg-blue-100",
    iconColor: "text-blue-600",
    gradient: "from-blue-500/5 via-blue-500/0 to-transparent",
    borderColor: "hover:border-blue-200",
    shadow: "hover:shadow-blue-100",
  },
  cyan: {
    iconBg: "bg-cyan-100",
    iconColor: "text-cyan-600",
    gradient: "from-cyan-500/5 via-cyan-500/0 to-transparent",
    borderColor: "hover:border-cyan-200",
    shadow: "hover:shadow-cyan-100",
  },
  indigo: {
    iconBg: "bg-indigo-100",
    iconColor: "text-indigo-600",
    gradient: "from-indigo-500/5 via-indigo-500/0 to-transparent",
    borderColor: "hover:border-indigo-200",
    shadow: "hover:shadow-indigo-100",
  },
};

export default function MetricCard({
  title,
  value,
  change,
  icon: Icon,
  color,
  link,
  badge,
}: MetricCardProps) {
  const styles = colorStyles[color] || colorStyles.emerald;
  const isPositive = change !== undefined && change >= 0;

  return (
    <Link href={link} className="group h-full block">
      <div
        className={`relative h-full overflow-hidden rounded-2xl border border-gray-100 bg-white p-6 transition-all duration-300 group-hover:-translate-y-1 group-hover:shadow-xl ${styles.borderColor} ${styles.shadow}`}
      >
        {/* Subtle gradient background on hover */}
        <div
          className={`absolute inset-0 bg-gradient-to-br ${styles.gradient} opacity-0 transition-opacity duration-300 group-hover:opacity-100`}
        ></div>

        <div className="relative flex items-start justify-between">
          <div
            className={`rounded-xl p-3 transition-colors duration-300 ${styles.iconBg} bg-opacity-50 group-hover:bg-opacity-100`}
          >
            <Icon className={`h-6 w-6 ${styles.iconColor}`} />
          </div>

          {badge ? (
            <div className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-bold bg-red-50 text-red-600 border border-red-100 animate-pulse">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
              </span>
              {badge}
            </div>
          ) : (
            change !== undefined && (
              <div
                className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold ${
                  isPositive
                    ? "bg-emerald-50 text-emerald-700 border border-emerald-100"
                    : "bg-rose-50 text-rose-700 border border-rose-100"
                }`}
              >
                {isPositive ? (
                  <ArrowUp className="h-3 w-3" strokeWidth={3} />
                ) : (
                  <ArrowDown className="h-3 w-3" strokeWidth={3} />
                )}
                {Math.abs(change)}%
              </div>
            )
          )}
        </div>

        <div className="relative mt-6">
          <p className="text-sm font-medium text-gray-500">{title}</p>
          <div className="mt-2 flex items-baseline gap-2">
            <span className="text-3xl font-bold tracking-tight text-gray-900 tabular-nums">
              {typeof value === "number" ? value.toLocaleString() : value}
            </span>
          </div>
        </div>
      </div>
    </Link>
  );
}