import { LucideIcon } from "lucide-react";
import { Skeleton } from "../ui/Skeleton";

interface MetricCardProps {
  title: string;
  value: string | number;
  icon: LucideIcon;
  description?: string;
  trend?: {
    value: number;
    isPositive: boolean;
  };
  isLoading?: boolean;
  colorScheme?: "blue" | "green" | "purple" | "orange" | "red" | "indigo";
}

const colorClasses = {
  blue: {
    iconBg: "bg-blue-100 dark:bg-blue-900/30",
    iconText: "text-blue-600 dark:text-blue-400",
    trendPositive: "text-green-600 dark:text-green-400",
    trendNegative: "text-red-600 dark:text-red-400",
  },
  green: {
    iconBg: "bg-green-100 dark:bg-green-900/30",
    iconText: "text-green-600 dark:text-green-400",
    trendPositive: "text-green-600 dark:text-green-400",
    trendNegative: "text-red-600 dark:text-red-400",
  },
  purple: {
    iconBg: "bg-purple-100 dark:bg-purple-900/30",
    iconText: "text-purple-600 dark:text-purple-400",
    trendPositive: "text-green-600 dark:text-green-400",
    trendNegative: "text-red-600 dark:text-red-400",
  },
  orange: {
    iconBg: "bg-orange-100 dark:bg-orange-900/30",
    iconText: "text-orange-600 dark:text-orange-400",
    trendPositive: "text-green-600 dark:text-green-400",
    trendNegative: "text-red-600 dark:text-red-400",
  },
  red: {
    iconBg: "bg-red-100 dark:bg-red-900/30",
    iconText: "text-red-600 dark:text-red-400",
    trendPositive: "text-green-600 dark:text-green-400",
    trendNegative: "text-red-600 dark:text-red-400",
  },
  indigo: {
    iconBg: "bg-indigo-100 dark:bg-indigo-900/30",
    iconText: "text-indigo-600 dark:text-indigo-400",
    trendPositive: "text-green-600 dark:text-green-400",
    trendNegative: "text-red-600 dark:text-red-400",
  },
};

export function MetricCard({
  title,
  value,
  icon: Icon,
  description,
  trend,
  isLoading = false,
  colorScheme = "blue",
}: MetricCardProps) {
  const colors = colorClasses[colorScheme];

  if (isLoading) {
    return (
      <div className="bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-700 p-6">
        <div className="flex items-center justify-between mb-4">
          <Skeleton className="h-4 w-32" />
          <Skeleton className="h-10 w-10 rounded-lg" />
        </div>
        <Skeleton className="h-8 w-24 mb-2" />
        <Skeleton className="h-4 w-full" />
      </div>
    );
  }

  return (
    <div className="bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-700 p-6 hover:shadow-lg transition-shadow duration-200">
      <div className="flex items-center justify-between mb-4">
        <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
          {title}
        </p>
        <div className={`p-2.5 rounded-lg ${colors.iconBg}`}>
          <Icon className={`h-5 w-5 ${colors.iconText}`} />
        </div>
      </div>

      <div className="flex items-baseline gap-3">
        <div className="text-3xl font-bold text-gray-900 dark:text-white">
          {value}
        </div>

        {trend && (
          <div
            className={`flex items-center gap-1 text-sm font-semibold ${
              trend.isPositive ? colors.trendPositive : colors.trendNegative
            }`}
          >
            <span>{trend.isPositive ? "↑" : "↓"}</span>
            <span>{Math.abs(trend.value)}%</span>
          </div>
        )}
      </div>

      {description && (
        <p className="text-sm text-gray-600 dark:text-gray-400 mt-2">
          {description}
        </p>
      )}
    </div>
  );
}

// Skeleton específico para loading de múltiplos cards
export function MetricCardSkeleton() {
  return (
    <div className="bg-white dark:bg-slate-900 rounded-lg border border-gray-200 dark:border-slate-700 p-6">
      <div className="flex items-center justify-between mb-4">
        <Skeleton className="h-4 w-32" />
        <Skeleton className="h-10 w-10 rounded-lg" />
      </div>
      <Skeleton className="h-8 w-24 mb-2" />
      <Skeleton className="h-4 w-full" />
    </div>
  );
}

// Exemplo de uso:
// import { MetricCard } from '@/components/dashboard/MetricCard';
// import { Users, Calendar, TrendingUp } from 'lucide-react';
//
// <MetricCard
//   title="Total de Pacientes"
//   value={145}
//   icon={Users}
//   description="Pacientes ativos"
//   trend={{ value: 12, isPositive: true }}
//   colorScheme="blue"
// />
