import { Card } from "@/components/ui/card";
import { Phone, CheckCircle, Clock, TrendingUp, DollarSign, UserX, Loader2 } from "lucide-react";
import { useDashboard } from "./context/DashboardContext";
import { useTranslation } from "react-i18next";

export function KPICards() {
  const { t } = useTranslation();
  const { stats, loading, error } = useDashboard();

  if (loading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {[...Array(6)].map((_, i) => (
          <Card key={i} className="bg-slate-800 border-slate-700 p-6">
            <div className="flex items-center justify-center h-32">
              <Loader2 className="w-8 h-8 text-slate-400 animate-spin" />
            </div>
          </Card>
        ))}
      </div>
    );
  }

  if (error || !stats) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <Card className="bg-slate-800 border-slate-700 p-6 col-span-full">
          <div className="text-center text-slate-400">
            {error || t('dashboard.kpi.noData')}
          </div>
        </Card>
      </div>
    );
  }

  const kpiData = [
    {
      title: t('dashboard.kpi.totalCalls'),
      value: stats.totalCalls.value.toString(),
      change: stats.totalCalls.change,
      changeType: stats.totalCalls.changeType,
      subtitle: t('dashboard.kpi.vsYesterday'),
      icon: Phone,
      iconColor: "text-blue-500",
    },
    {
      title: t('dashboard.kpi.resolvedCalls'),
      value: stats.resolvedCalls.value.toString(),
      change: stats.resolvedCalls.change,
      changeType: stats.resolvedCalls.changeType,
      subtitle: t('dashboard.kpi.vsYesterday'),
      icon: CheckCircle,
      iconColor: "text-green-500",
    },
    {
      title: t('dashboard.kpi.avgCallDuration'),
      value: stats.avgDuration.formatted,
      change: stats.avgDuration.change,
      changeType: stats.avgDuration.changeType,
      subtitle: t('dashboard.kpi.vsYesterday'),
      icon: Clock,
      iconColor: "text-orange-500",
    },
    {
      title: t('dashboard.kpi.totalCost'),
      value: stats.totalCost.formatted,
      change: stats.totalCost.change,
      changeType: stats.totalCost.changeType,
      subtitle: t('dashboard.kpi.vsYesterday'),
      icon: DollarSign,
      iconColor: "text-green-500",
    },
    {
      title: t('dashboard.kpi.timeSaved'),
      value: stats.timeSaved.formatted,
      change: stats.timeSaved.change,
      changeType: stats.timeSaved.changeType,
      subtitle: t('dashboard.kpi.vsYesterday'),
      icon: TrendingUp,
      iconColor: "text-purple-500",
    },
    {
      title: t('dashboard.kpi.savedOnHumanCosts'),
      value: stats.humanCostSaved.formatted,
      change: stats.humanCostSaved.change,
      changeType: stats.humanCostSaved.changeType,
      subtitle: t('dashboard.kpi.vsYesterday'),
      icon: UserX,
      iconColor: "text-green-500",
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {kpiData.map((kpi) => (
        <Card key={kpi.title} className="bg-slate-800 border-slate-700 p-6">
          <div className="flex items-center justify-between mb-4">
            <div className="text-slate-400 text-sm font-medium">{kpi.title}</div>
            <kpi.icon className={`w-5 h-5 ${kpi.iconColor}`} />
          </div>

          <div className="space-y-2">
            <div className="text-3xl font-bold text-white">{kpi.value}</div>

            <div className="flex items-center gap-2 text-sm">
              <span className={`font-medium ${
                kpi.changeType === 'positive' ? 'text-green-500' : 'text-red-500'
              }`}>
                {kpi.change}
              </span>
              <span className="text-slate-400">{kpi.subtitle}</span>
            </div>
          </div>
        </Card>
      ))}
    </div>
  );
}
