"use client";

import { useState } from "react";

import { Download, Loader2, UserPlus } 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";

interface ClientsTableCrudProps {
  initialParams?: ClientListParams;
}

export function ClientsTableCrud({ initialParams }: ClientsTableCrudProps) {
  // États pour les dialogues
  const [createEditDialog, setCreateEditDialog] = useState({
    open: false,
    client: null as Client | null,
  });
  const [detailDialog, setDetailDialog] = useState({
    open: false,
    clientId: null as number | null,
  });
  const [deleteDialog, setDeleteDialog] = useState({
    open: false,
    client: null as Client | null,
  });
  const [memberDialog, setMemberDialog] = useState({
    open: false,
    client: null as Client | null,
  });

  // Récupération des données
  const {
    data: clientsResponse,
    isLoading,
    error,
  } = useClients({
    page: 1,
    page_size: 50,
    ...initialParams,
  });

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

  // Configuration de la table avec actions
  const table = useDataTableInstance({
    data: clients,
    columns: recentClientsColumns,
    getRowId: (row) => row.id.toString(),
    // @ts-expect-error - Extension personnalisée pour les actions
    meta: {
      onViewClient: (client: Client) => {
        setDetailDialog({ open: true, clientId: client.id });
      },
      onEditClient: (client: Client) => {
        setCreateEditDialog({ open: true, client });
      },
      onDeleteClient: (client: Client) => {
        setDeleteDialog({ open: true, client });
      },
    },
  });

  // Gestionnaires d'événements
  const handleCreateClient = () => {
    setCreateEditDialog({ open: true, client: null });
  };

  // Mock des gestionnaires (à remplacer par de vraies données)
  const mockManagers = [
    { id: 1, name: "Jean Dupont" },
    { id: 2, name: "Marie Martin" },
    { id: 3, name: "Pierre Durand" },
  ];

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 gap-4 *:data-[slot=card]:shadow-xs">
        <Card>
          <CardHeader>
            <CardTitle>Gestion des Clients</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>Gestion des Clients</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>Gestion des 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 variant="outline" size="sm">
                  <Download />
                  <span className="hidden lg:inline">Exporter</span>
                </Button>
                <Button size="sm" onClick={handleCreateClient}>
                  <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>

      {/* Dialogues CRUD */}
      <ClientDialog
        open={createEditDialog.open}
        onOpenChange={(open) => setCreateEditDialog({ open, client: null })}
        client={createEditDialog.client}
        managers={mockManagers}
      />

      <ClientDetailDialog
        open={detailDialog.open}
        onOpenChange={(open) => setDetailDialog({ open, clientId: null })}
        clientId={detailDialog.clientId}
        onEdit={(client) => {
          setDetailDialog({ open: false, clientId: null });
          setCreateEditDialog({ open: true, client });
        }}
        onConvertToMember={(client) => {
          setDetailDialog({ open: false, clientId: null });
          setMemberDialog({ open: true, client });
        }}
      />

      <DeleteClientDialog
        open={deleteDialog.open}
        onOpenChange={(open) => setDeleteDialog({ open, client: null })}
        client={deleteDialog.client}
      />

      <ConvertToMemberDialog
        open={memberDialog.open}
        onOpenChange={(open) => setMemberDialog({ open, client: null })}
        client={memberDialog.client}
      />
    </>
  );
}