"use client";

import { Download, UserPlus, Loader2 } from "lucide-react";

import { DataTable } from "@/components/data-table/data-table";
import { DataTablePagination } from "@/components/data-table/data-table-pagination";
import { DataTableViewOptions } from "@/components/data-table/data-table-view-options";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent, CardDescription, CardAction } from "@/components/ui/card";
import { useRecentClients } from "@/hooks/clients/use-client-dashboard";
import { useDataTableInstance } from "@/hooks/use-data-table-instance";

import { recentClientsColumns } from "./columns.clients";

export function TableCards() {
  const { data: clients = [], isLoading, error } = useRecentClients(10);

  const table = useDataTableInstance({
    data: clients,
    columns: recentClientsColumns,
    getRowId: (row) => row.id.toString(),
  });

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:shadow-xs">
        <Card>
          <CardHeader>
            <CardTitle>Clients Récents</CardTitle>
            <CardDescription>Gérez et suivez vos clients et leur statut.</CardDescription>
          </CardHeader>
          <CardContent className="flex min-h-48 items-center justify-center">
            <Loader2 className="h-6 w-6 animate-spin" />
          </CardContent>
        </Card>
      </div>
    );
  }

  if (error) {
    return (
      <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:shadow-xs">
        <Card>
          <CardHeader>
            <CardTitle>Clients Récents</CardTitle>
            <CardDescription>Gérez et suivez vos clients et leur statut.</CardDescription>
          </CardHeader>
          <CardContent className="flex min-h-48 items-center justify-center">
            <p className="text-muted-foreground">Erreur lors du chargement des clients</p>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:shadow-xs">
      <Card>
        <CardHeader>
          <CardTitle>Clients Récents</CardTitle>
          <CardDescription>
            Gérez et suivez vos clients et leur statut. {clients.length} clients affichés.
          </CardDescription>
          <CardAction>
            <div className="flex items-center gap-2">
              <DataTableViewOptions table={table} />
              <Button variant="outline" size="sm">
                <Download />
                <span className="hidden lg:inline">Exporter</span>
              </Button>
              <Button size="sm">
                <UserPlus />
                <span className="hidden lg:inline">Nouveau Client</span>
              </Button>
            </div>
          </CardAction>
        </CardHeader>
        <CardContent className="flex size-full flex-col gap-4">
          <div className="overflow-hidden rounded-md border">
            <DataTable table={table} columns={recentClientsColumns} />
          </div>
          <DataTablePagination table={table} />
        </CardContent>
      </Card>
    </div>
  );
}