"use client";

import { useState } from "react";

import { Plus } 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, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { useClients } from "@/hooks/clients/use-clients-queries";
import { useDataTableInstance } from "@/hooks/use-data-table-instance";
import type { Client, ClientListParams } from "@/types/clients";

import { ClientDetailDialog } from "./client-detail-dialog";
import { ClientDialog } from "./client-dialog";
import { recentClientsColumns } from "./columns.clients";
import { ConvertToMemberDialog } from "./convert-to-member-dialog";
import { DeleteClientDialog } from "./delete-client-dialog";

export function ClientsTableCrud() {
  const [showClientDialog, setShowClientDialog] = useState(false);
  const [selectedClient, setSelectedClient] = useState<Client | null>(null);
  const [showDetailDialog, setShowDetailDialog] = useState(false);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [showConvertDialog, setShowConvertDialog] = useState(false);
  const [clientParams] = useState<ClientListParams>({
    page: 1,
    page_size: 10,
  });

  const {
    data: clientsResponse,
    isLoading,
    error,
  } = useClients({
    page: clientParams.page,
    page_size: clientParams.page_size,
  });

  const clients = clientsResponse?.results ?? [];

  // Configuration de la table avec les actions
  const table = useDataTableInstance({
    data: clients,
    columns: recentClientsColumns,
    getRowId: (row) => row.id.toString(),
    defaultPageSize: clientParams.page_size,
  });

  function handleEditClient(client: Client) {
    setSelectedClient(client);
    setShowClientDialog(true);
  }

  function handleConvertToMember(client: Client) {
    setSelectedClient(client);
    setShowConvertDialog(true);
  }

  if (error) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Clients</CardTitle>
          <CardDescription>Gérez et suivez vos clients et leur statut.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-center p-8">
            <div className="text-center">
              <p className="text-muted-foreground">Erreur lors du chargement des clients</p>
              <p className="text-muted-foreground mt-2 text-sm">{error.message || "Veuillez réessayer plus tard"}</p>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <>
      <Card>
        <CardHeader>
          <CardTitle>Clients</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 onClick={() => setShowClientDialog(true)}>
                <Plus className="h-4 w-4" />
                Nouveau client
              </Button>
            </div>
          </CardAction>
        </CardHeader>
        <CardContent className="flex size-full flex-col gap-4">
          {isLoading ? (
            <div className="flex justify-center p-8">
              <div className="border-primary h-8 w-8 animate-spin rounded-full border-b-2"></div>
            </div>
          ) : (
            <>
              <div className="overflow-hidden rounded-md border">
                <DataTable table={table} columns={recentClientsColumns} />
              </div>
              <DataTablePagination table={table} />
            </>
          )}
        </CardContent>
      </Card>

      {/* Dialogues */}
      <ClientDialog open={showClientDialog} onOpenChange={setShowClientDialog} client={selectedClient} />

      <ClientDetailDialog
        open={showDetailDialog}
        onOpenChange={setShowDetailDialog}
        clientId={selectedClient?.id ?? null}
        onEdit={handleEditClient}
        onConvertToMember={handleConvertToMember}
      />

      <DeleteClientDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog} client={selectedClient} />

      <ConvertToMemberDialog open={showConvertDialog} onOpenChange={setShowConvertDialog} client={selectedClient} />
    </>
  );
}