"use client";

import { CheckCircle2, DollarSign, Package, Truck, Wrench } from "lucide-react";
import { Card } from "@/components/ui/card";
import { currency } from "@/lib/utils";
import { EquipmentStats } from "@/types/equipment";

interface EquipmentStatsCardsProps {
  stats: EquipmentStats;
  activeFilter: string;
  onFilterClick: (filter: string) => void;
}

export function EquipmentStatsCards({ stats, activeFilter, onFilterClick }: EquipmentStatsCardsProps) {
  const cards = [
    {
      id: "ALL",
      title: "Total de Ativos",
      value: stats.total,
      subtext: "Máquinas e equipamentos cadastrados",
      icon: Package,
      iconBg: "bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400",
      activeRing: activeFilter === "ALL" ? "ring-2 ring-blue-500/50" : "",
    },
    {
      id: "AVAILABLE",
      title: "Disponíveis",
      value: stats.available,
      subtext: "Prontos no pátio para locação",
      icon: CheckCircle2,
      iconBg: "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400",
      activeRing: activeFilter === "AVAILABLE" ? "ring-2 ring-emerald-500/50" : "",
    },
    {
      id: "RENTED",
      title: "Em Locação",
      value: stats.rented,
      subtext: "Em contrato de locação ativo",
      icon: Truck,
      iconBg: "bg-purple-500/10 text-purple-600 dark:bg-purple-500/20 dark:text-purple-400",
      activeRing: activeFilter === "RENTED" ? "ring-2 ring-purple-500/50" : "",
    },
    {
      id: "MAINTENANCE",
      title: "Em Manutenção",
      value: stats.maintenance,
      subtext: "Revisão preventiva ou preventiva em oficina",
      icon: Wrench,
      iconBg: "bg-amber-500/10 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400",
      activeRing: activeFilter === "MAINTENANCE" ? "ring-2 ring-amber-500/50" : "",
    },
    {
      id: "VALUE",
      title: "Valor da Frota",
      value: currency(stats.totalAcquisitionValue),
      subtext: "Patrimônio global de aquisição",
      icon: DollarSign,
      iconBg: "bg-indigo-500/10 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-400",
      activeRing: "",
      isCurrency: true,
    },
  ];

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
      {cards.map((card) => {
        const Icon = card.icon;
        return (
          <Card
            key={card.title}
            onClick={() => !card.isCurrency && onFilterClick(card.id)}
            className={`group relative overflow-hidden p-4 transition-all duration-200 hover:shadow-md ${
              !card.isCurrency ? "cursor-pointer" : ""
            } ${card.activeRing}`}
          >
            <div className="flex items-start justify-between">
              <div>
                <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                  {card.title}
                </p>
                <h3 className="mt-2 text-xl font-bold tracking-tight">
                  {card.value}
                </h3>
              </div>
              <div className={`rounded-xl p-2 transition-transform group-hover:scale-110 ${card.iconBg}`}>
                <Icon className="h-4 w-4" />
              </div>
            </div>
            <p className="mt-3 text-xs text-muted-foreground">{card.subtext}</p>
          </Card>
        );
      })}
    </div>
  );
}