"use client";

import { Users, UserPlus, UserCheck, Clock, Building, CreditCard, DollarSign, TrendingUp, Loader2 } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { useClientDashboardStats } from "@/hooks/clients/use-client-dashboard";

const formatCurrency = (amount: number) => {
  return new Intl.NumberFormat("fr-CA", {
    style: "currency",
    currency: "CAD",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(amount);
};

export function OperationalCards() {
  const { data: stats, isLoading, error } = useClientDashboardStats();

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:shadow-xs md:grid-cols-2 lg:grid-cols-3">
        {["operational-loading-1", "operational-loading-2", "operational-loading-3"].map((key) => (
          <Card key={key} className="flex min-h-48 items-center justify-center">
            <Loader2 className="h-6 w-6 animate-spin" />
          </Card>
        ))}
      </div>
    );
  }

  if (error) {
    return (
      <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:shadow-xs md:grid-cols-2 lg:grid-cols-3">
        <Card className="col-span-full">
          <CardContent className="flex min-h-48 items-center justify-center">
            <p className="text-muted-foreground">Erreur lors du chargement des outils opérationnels</p>
          </CardContent>
        </Card>
      </div>
    );
  }

  const {
    totalClients = 0,
    activeClients = 0,
    pendingClients = 0,
    newClientsThisMonth = 0,
    averageAccountBalance = 0,
    activationRate = 0,
  } = stats ?? {};

  return (
    <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:shadow-xs md:grid-cols-2 lg:grid-cols-3">
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-blue-100">
                <Users className="size-5 text-blue-600" />
              </div>
              <div>
                <CardTitle className="text-base">Gestion des Clients</CardTitle>
                <CardDescription>Outils de gestion</CardDescription>
              </div>
            </div>
          </div>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="flex justify-between text-sm">
            <span>Total clients:</span>
            <span className="font-medium">{totalClients.toLocaleString()}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span>Clients actifs:</span>
            <span className="font-medium text-green-600">{activeClients.toLocaleString()}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span>En attente:</span>
            <span className="font-medium text-orange-600">{pendingClients}</span>
          </div>
          <div className="pt-2">
            <Button size="sm" className="w-full">
              <UserPlus className="mr-2 size-4" />
              Nouveau Client
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-green-100">
                <UserCheck className="size-5 text-green-600" />
              </div>
              <div>
                <CardTitle className="text-base">Actions Rapides</CardTitle>
                <CardDescription>Tâches courantes</CardDescription>
              </div>
            </div>
            <Badge variant="secondary">{newClientsThisMonth}</Badge>
          </div>
        </CardHeader>
        <CardContent className="space-y-2">
          <Button variant="outline" size="sm" className="w-full justify-start">
            <Clock className="mr-2 size-4" />
            Validation KYC ({pendingClients})
          </Button>
          <Button variant="outline" size="sm" className="w-full justify-start">
            <CreditCard className="mr-2 size-4" />
            Activation Comptes
          </Button>
          <Button variant="outline" size="sm" className="w-full justify-start">
            <Building className="mr-2 size-4" />
            Conversion Membres
          </Button>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-purple-100">
                <TrendingUp className="size-5 text-purple-600" />
              </div>
              <div>
                <CardTitle className="text-base">Métriques Clés</CardTitle>
                <CardDescription>Performances</CardDescription>
              </div>
            </div>
          </div>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="flex justify-between text-sm">
            <span>Solde moyen:</span>
            <span className="font-medium">{formatCurrency(averageAccountBalance)}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span>Taux activation:</span>
            <span className="font-medium text-blue-600">{activationRate.toFixed(1)}%</span>
          </div>
          <div className="flex justify-between text-sm">
            <span>Nouveaux ce mois:</span>
            <span className="font-medium text-green-600">+{newClientsThisMonth}</span>
          </div>
          <div className="pt-2">
            <Button variant="outline" size="sm" className="w-full">
              <DollarSign className="mr-2 size-4" />
              Rapport Détaillé
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}