"use client";

import { ColumnDef } from "@tanstack/react-table";
import { format } from "date-fns";
import { fr } from "date-fns/locale";
import { MoreHorizontal, Eye, Edit, Trash2 } from "lucide-react";

import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import type { Client, ClientStatus } from "@/types/clients";

const formatCurrency = (amount: string | number) => {
  // Gérer les cas où amount pourrait être undefined, null, ou NaN
  if (!amount || amount === "" || amount === "0" || amount === "0.00") {
    return "0 F.CFA";
  }

  // Convertir le string Decimal en nombre
  const numericAmount = typeof amount === "string" ? parseFloat(amount) : amount;

  // Vérifier si la conversion a échoué
  if (isNaN(numericAmount)) {
    return "0 F.CFA";
  }

  // Formatage pour le Franc CFA (Cameroun)
  return (
    new Intl.NumberFormat("fr-CM", {
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(numericAmount) + " F.CFA"
  );
};

const getStatusBadge = (status: ClientStatus) => {
  switch (status) {
    case "active":
      return (
        <Badge variant="outline" className="border-green-200 bg-green-50 text-green-700">
          Actif
        </Badge>
      );
    case "inactive":
      return (
        <Badge variant="outline" className="border-gray-200 bg-gray-50 text-gray-700">
          Inactif
        </Badge>
      );
    case "suspended":
      return (
        <Badge variant="outline" className="border-red-200 bg-red-50 text-red-700">
          Suspendu
        </Badge>
      );
    case "pending":
      return (
        <Badge variant="outline" className="border-orange-200 bg-orange-50 text-orange-700">
          En attente
        </Badge>
      );
    default:
      return <Badge variant="outline">{status}</Badge>;
  }
};

const getMembershipBadge = (isMember: boolean) => {
  return isMember ? (
    <Badge variant="default" className="bg-purple-100 text-purple-700">
      Membre
    </Badge>
  ) : (
    <Badge variant="secondary">Client</Badge>
  );
};

const recentClientsColumns: ColumnDef<Client>[] = [
  {
    accessorKey: "full_name",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Nom" />,
    cell: ({ row }) => {
      const client = row.original;
      return (
        <div className="flex flex-col">
          <span className="font-medium">{client.full_name}</span>
          <span className="text-muted-foreground text-xs">#{client.client_number}</span>
        </div>
      );
    },
  },
  {
    accessorKey: "email",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
    cell: ({ row }) => {
      const client = row.original;
      return (
        <div className="flex flex-col">
          <span className="text-sm">{client.email}</span>
          {client.phone_number && <span className="text-muted-foreground text-xs">{client.phone_number}</span>}
        </div>
      );
    },
  },
  {
    accessorKey: "is_member",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
    cell: ({ row }) => getMembershipBadge(row.getValue("is_member")),
  },
  {
    accessorKey: "status",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Statut" />,
    cell: ({ row }) => getStatusBadge(row.getValue("status")),
  },
  {
    accessorKey: "kyc_status",
    header: ({ column }) => <DataTableColumnHeader column={column} title="KYC" />,
    cell: ({ row }) => {
      const kycStatusDisplay = row.original.kyc_status_display;
      const kycStatus = row.getValue("kyc_status");

      if (kycStatusDisplay) {
        let badgeClass = "border-gray-200 bg-gray-50 text-gray-700";

        if (kycStatus === "completed") {
          badgeClass = "border-green-200 bg-green-50 text-green-700";
        } else if (kycStatus === "in_progress") {
          badgeClass = "border-blue-200 bg-blue-50 text-blue-700";
        } else if (kycStatus === "rejected") {
          badgeClass = "border-red-200 bg-red-50 text-red-700";
        } else if (kycStatus === "pending") {
          badgeClass = "border-orange-200 bg-orange-50 text-orange-700";
        }

        return (
          <Badge variant="outline" className={badgeClass}>
            {kycStatusDisplay}
          </Badge>
        );
      }

      return (
        <Badge variant="outline" className="border-gray-200 bg-gray-50 text-gray-700">
          Non défini
        </Badge>
      );
    },
  },
  {
    accessorKey: "total_deposits",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Dépôts" />,
    cell: ({ row }) => {
      const amount = row.getValue("total_deposits");
      return <div className="text-right font-medium tabular-nums">{formatCurrency(amount as string | number)}</div>;
    },
  },
  {
    accessorKey: "account_manager",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Gestionnaire" />,
    cell: ({ row }) => {
      const managerName = row.original.account_manager_name;
      return managerName ? (
        <span className="text-sm">{managerName}</span>
      ) : (
        <span className="text-muted-foreground text-sm">Non assigné</span>
      );
    },
  },
  {
    accessorKey: "created_at",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Date d'inscription" />,
    cell: ({ row }) => {
      const date = new Date(row.getValue("created_at"));
      return <div className="text-sm">{format(date, "dd MMM yyyy", { locale: fr })}</div>;
    },
  },
  {
    id: "actions",
    enableHiding: false,
    cell: ({ row, table }) => {
      const client = row.original;
      // @ts-expect-error - Accès aux méthodes du table parent
      const { onViewClient, onEditClient, onDeleteClient } = table.options.meta ?? {};

      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0">
              <span className="sr-only">Ouvrir le menu</span>
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>
            <DropdownMenuItem
              onClick={() => client.email && navigator.clipboard.writeText(client.email)}
              disabled={!client.email}
            >
              Copier l&apos;email
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={() => onViewClient?.(client)}>
              <Eye className="mr-2 h-4 w-4" />
              Voir le profil
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onEditClient?.(client)}>
              <Edit className="mr-2 h-4 w-4" />
              Modifier
            </DropdownMenuItem>
            <DropdownMenuItem className="text-destructive" onClick={() => onDeleteClient?.(client)}>
              <Trash2 className="mr-2 h-4 w-4" />
              Supprimer
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      );
    },
  },
];

// Export principal pour la compatibilité
const clientsColumns = recentClientsColumns;

export { recentClientsColumns, clientsColumns };