import { Card } from "@/components/ui/card";
import { Phone, Calendar, Clock, Timer, 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-4 gap-6">
        {[...Array(4)].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-4 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.allTime'),
      icon: Phone,
      iconColor: "text-blue-500",
    },
    {
      title: t('dashboard.kpi.todayCalls'),
      value: stats.todayCalls.value.toString(),
      change: stats.todayCalls.change,
      changeType: stats.todayCalls.changeType,
      subtitle: t('dashboard.kpi.vsYesterday'),
      icon: Calendar,
      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.totalDuration'),
      value: stats.totalDuration.formatted,
      change: stats.totalDuration.change,
      changeType: stats.totalDuration.changeType,
      subtitle: t('dashboard.kpi.allTime'),
      icon: Timer,
      iconColor: "text-purple-500",
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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' :
                kpi.changeType === 'negative' ? 'text-red-500' : 'text-slate-400'
              }`}>
                {kpi.change}
              </span>
              <span className="text-slate-400">{kpi.subtitle}</span>
            </div>
          </div>
        </Card>
      ))}
    </div>
  );
}
