"use client";

import { useState, useMemo } from "react";

import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  useReactTable,
  getSortedRowModel,
  SortingState,
  getFilteredRowModel,
  ColumnFiltersState,
} from "@tanstack/react-table";

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

import { useUsers, useDeleteUser, useActivateUser, useDeactivateUser } from "@/hooks/users/use-users-queries";
import { cn } from "@/lib/utils";
import { User, UserType } from "@/types/auth";
import { UserListParams, UserTableFilters } from "@/types/users";
import {
  ChevronLeft,
  ChevronRight,
  Download,
  Edit,
  Eye,
  Filter,
  Key,
  Mail,
  MoreHorizontal,
  Plus,
  RefreshCw,
  Search,
  Trash2,
  UserMinus,
  UserPlus,
  Users,
} from "lucide-react";

import { BulkActionsBar } from "./bulk-actions-bar";
import { UserDialog } from "./user-dialog";
import { UserProfileModal } from "./user-profile-modal";

// Types for table components
interface TableProps {
  getIsAllPageRowsSelected: () => boolean;
  toggleAllPageRowsSelected: (value: boolean) => void;
}

interface RowProps {
  getIsSelected: () => boolean;
  toggleSelected: (value: boolean) => void;
  original: User;
}

// Component: Status Badge with Amifond Green theme
const StatusBadge = ({ user }: { user: User }) => {
  if (user.is_active && user.is_verified) {
    return (
      <Badge variant="default" className="bg-primary text-primary-foreground border-0 font-medium">
        Actif et vérifié
      </Badge>
    );
  }
  if (user.is_active && !user.is_verified) {
    return (
      <Badge variant="secondary" className="border-amber-200 bg-amber-100 font-medium text-amber-800">
        Actif non vérifié
      </Badge>
    );
  }
  if (!user.is_active) {
    return (
      <Badge variant="destructive" className="border-red-200 bg-red-100 font-medium text-red-800">
        Inactif
      </Badge>
    );
  }
  return (
    <Badge variant="secondary" className="bg-muted text-muted-foreground font-medium">
      Statut inconnu
    </Badge>
  );
};

// Component: User Type Badge with enhanced Amifond Green color scheme
const UserTypeBadge = ({ userType }: { userType: UserType }) => {
  const typeLabels: Record<UserType, string> = {
    client: "Client",
    super_admin: "Administrateur",
    ca_member: "Membre CA",
    manager: "Manager",
    account_manager: "Gestionnaire",
    cashier: "Caissier",
    it_staff: "Personnel IT",
    other_staff: "Autres Personnel",
    agency_agent: "Agent d'agence",
    community_leader: "Chef de communauté",
  };

  const typeColors: Record<UserType, string> = {
    client: "border-emerald-200 bg-emerald-600 font-medium text-emerald-50",
    // client: "border-blue-200 bg-blue-600 font-medium text-blue-50",

    super_admin: "border-red-200 bg-red-600 font-medium text-red-50",
    ca_member: "border-primary/20 bg-primary font-medium text-primary-foreground",
    manager: "border-blue-200 bg-blue-600 font-medium text-blue-50",
    account_manager: "border-primary/20 bg-primary font-medium text-primary-foreground",
    cashier: "border-amber-200 bg-amber-600 font-medium text-amber-50",
    it_staff: "border-cyan-200 bg-cyan-600 font-medium text-cyan-50",
    other_staff: "border-slate-200 bg-slate-600 font-medium text-slate-50",
    agency_agent: "border-yellow-200 bg-yellow-600 font-medium text-yellow-50",
    community_leader: "border-pink-200 bg-pink-600 font-medium text-pink-50",
  };

  const colorClass = typeColors[userType];
  return <Badge className={cn("border", colorClass)}>{typeLabels[userType]}</Badge>;
};

// Component: Header Checkbox
const HeaderCheckbox = ({ table }: { table: TableProps }) => (
  <Checkbox
    checked={table.getIsAllPageRowsSelected()}
    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
    aria-label="Sélectionner tout"
  />
);

// Component: Row Checkbox
const RowCheckbox = ({ row }: { row: RowProps }) => (
  <Checkbox
    checked={row.getIsSelected()}
    onCheckedChange={(value) => row.toggleSelected(!!value)}
    aria-label="Sélectionner la ligne"
  />
);

// Component: User Info Cell with enhanced Amifond Green styling
const UserInfoCell = ({ user, onViewProfile }: { user: User; onViewProfile: (user: User) => void }) => {
  // Fonction utilitaire pour obtenir les initiales de façon sécurisée
  const getInitials = (user: User): string => {
    const firstName = user.first_name && user.first_name.trim();
    const lastName = user.last_name && user.last_name.trim();
    const username = user.username && user.username.trim();
    const email = user.email && user.email.trim();

    if (firstName && lastName) {
      return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
    } else if (firstName) {
      return firstName.charAt(0).toUpperCase();
    } else if (lastName) {
      return lastName.charAt(0).toUpperCase();
    } else if (username) {
      return username.charAt(0).toUpperCase();
    } else if (email) {
      return email.charAt(0).toUpperCase();
    }
    return "U"; // Fallback
  };

  // Fonction utilitaire pour obtenir le nom d'affichage
  const getDisplayName = (user: User): string => {
    const firstName = user.first_name && user.first_name.trim();
    const lastName = user.last_name && user.last_name.trim();
    const username = user.username && user.username.trim();

    if (firstName && lastName) {
      return `${firstName} ${lastName}`;
    } else if (firstName) {
      return firstName;
    } else if (lastName) {
      return lastName;
    } else if (username) {
      return username;
    }
    return user.email || "Utilisateur";
  };

  return (
    <div
      className="hover:bg-muted -m-2 flex cursor-pointer items-center space-x-3 rounded p-2 transition-colors"
      onClick={() => onViewProfile(user)}
      title="Cliquer pour voir le profil"
    >
      <Avatar className="h-8 w-8">
        <AvatarImage src={user.profile && user.profile.avatar} />
        <AvatarFallback>{getInitials(user)}</AvatarFallback>
      </Avatar>
      <div>
        <div className="text-primary hover:text-primary/80 font-medium">{getDisplayName(user)}</div>
        <div className="text-muted-foreground text-sm">{user.email}</div>
      </div>
    </div>
  );
};

// Component: Date Cell
const DateCell = ({ date }: { date: string }) => {
  const formattedDate = new Date(date).toLocaleDateString("fr-FR");
  return <span className="text-sm">{formattedDate}</span>;
};

// Component: Actions Dropdown
const ActionsDropdown = ({
  user,
  onEdit,
  onDelete,
  onActivate,
  onDeactivate,
  onViewProfile,
}: {
  user: User;
  onEdit: (user: User) => void;
  onDelete: (userId: number) => void;
  onActivate: (userId: number) => void;
  onDeactivate: (userId: number) => void;
  onViewProfile: (user: User) => void;
}) => (
  <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={() => onEdit(user)}>
        <Edit className="mr-2 h-4 w-4" />
        Modifier
      </DropdownMenuItem>
      <DropdownMenuItem onClick={() => onViewProfile(user)}>
        <Eye className="mr-2 h-4 w-4" />
        Voir le profil
      </DropdownMenuItem>
      <DropdownMenuSeparator />
      {user.is_active ? (
        <DropdownMenuItem onClick={() => onDeactivate(user.id)}>
          <UserMinus className="mr-2 h-4 w-4" />
          Désactiver
        </DropdownMenuItem>
      ) : (
        <DropdownMenuItem onClick={() => onActivate(user.id)}>
          <UserPlus className="mr-2 h-4 w-4" />
          Activer
        </DropdownMenuItem>
      )}
      <DropdownMenuItem>
        <Mail className="mr-2 h-4 w-4" />
        Envoyer vérification
      </DropdownMenuItem>
      <DropdownMenuItem>
        <Key className="mr-2 h-4 w-4" />
        Réinitialiser mot de passe
      </DropdownMenuItem>
      <DropdownMenuSeparator />
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
            <Trash2 className="mr-2 h-4 w-4" />
            Supprimer
          </DropdownMenuItem>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Confirmer la suppression</AlertDialogTitle>
            <AlertDialogDescription>
              Êtes-vous sûr de vouloir supprimer l&apos;utilisateur {user.email} ? Cette action ne peut pas être
              annulée.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Annuler</AlertDialogCancel>
            <AlertDialogAction onClick={() => onDelete(user.id)} className="bg-red-600 hover:bg-red-700">
              Supprimer
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </DropdownMenuContent>
  </DropdownMenu>
);

// Main Component
export function UsersTableCrud() {
  // State
  const [sorting, setSorting] = useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
  const [rowSelection, setRowSelection] = useState({});
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
  const [editingUser, setEditingUser] = useState<User | null>(null);
  const [profileUser, setProfileUser] = useState<User | null>(null);
  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 10; // Unified page size

  const [filters, setFilters] = useState<UserTableFilters>({
    search: "",
    user_type: "all",
    status: "all",
    department: "all",
  });

  // Build query parameters
  const queryParams = useMemo((): UserListParams => {
    const params: UserListParams = {
      page: currentPage,
      page_size: pageSize,
    };

    if (filters.search) params.search = filters.search;
    if (filters.user_type !== "all") params.user_type = filters.user_type;
    if (filters.department !== "all") params.department = filters.department;

    switch (filters.status) {
      case "active":
        params.is_active = true;
        break;
      case "inactive":
        params.is_active = false;
        break;
      case "verified":
        params.is_verified = true;
        break;
      case "unverified":
        params.is_verified = false;
        break;
    }

    return params;
  }, [filters, currentPage, pageSize]);

  // Hooks for data and mutations
  const { data: usersResponse, isLoading, error, refetch } = useUsers(queryParams);
  const deleteUserMutation = useDeleteUser();
  const activateUserMutation = useActivateUser();
  const deactivateUserMutation = useDeactivateUser();

  // Direct data for the table
  const users = usersResponse?.results ?? [];
  const totalUsers = usersResponse?.count ?? 0;
  const totalPages = Math.ceil(totalUsers / pageSize);

  // Handler functions
  const handleViewProfile = (user: User) => {
    setProfileUser(user);
    setIsProfileModalOpen(true);
  };

  // Column definitions
  const columns: ColumnDef<User>[] = [
    {
      id: "select",
      header: ({ table }) => <HeaderCheckbox table={table} />,
      cell: ({ row }) => <RowCheckbox row={row} />,
      enableSorting: false,
      enableHiding: false,
    },
    {
      accessorKey: "email",
      header: "Utilisateur",
      cell: ({ row }) => <UserInfoCell user={row.original} onViewProfile={handleViewProfile} />,
    },
    {
      accessorKey: "user_type",
      header: "Type",
      cell: ({ row }) => <UserTypeBadge userType={row.original.user_type} />,
    },
    {
      accessorKey: "phone_number",
      header: "Téléphone",
      cell: ({ row }) => <span className="text-sm">{row.original.phone_number}</span>,
    },
    {
      accessorKey: "department",
      header: "Département",
      cell: ({ row }) => <span className="text-sm">{row.original.department ?? "-"}</span>,
    },
    {
      accessorKey: "employee_id",
      header: "ID Employé",
      cell: ({ row }) => <span className="font-mono text-sm">{row.original.employee_id ?? "-"}</span>,
    },
    {
      id: "status",
      header: "Statut",
      cell: ({ row }) => <StatusBadge user={row.original} />,
    },
    {
      accessorKey: "date_joined",
      header: "Date d'inscription",
      cell: ({ row }) => <DateCell date={row.original.date_joined} />,
    },
    {
      id: "actions",
      header: "Actions",
      cell: ({ row }) => (
        <ActionsDropdown
          user={row.original}
          onEdit={setEditingUser}
          onDelete={(userId) => deleteUserMutation.mutate(userId)}
          onActivate={(userId) => activateUserMutation.mutate(userId)}
          onDeactivate={(userId) => deactivateUserMutation.mutate(userId)}
          onViewProfile={handleViewProfile}
        />
      ),
    },
  ];

  // Table configuration
  const table = useReactTable({
    data: users,
    columns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    onRowSelectionChange: setRowSelection,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      sorting,
      columnFilters,
      rowSelection,
    },
    manualPagination: true,
  });

  // Filter handlers
  const handleSearchChange = (value: string) => {
    setFilters({ ...filters, search: value });
    setCurrentPage(1);
  };

  const handleFilterChange = (key: keyof UserTableFilters, value: string) => {
    setFilters({ ...filters, [key]: value });
    setCurrentPage(1);
  };

  const clearFilters = () => {
    setFilters({
      search: "",
      user_type: "all",
      status: "all",
      department: "all",
    });
    setCurrentPage(1);
  };

  // Pagination handlers
  const goToPreviousPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  const goToNextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1);
    }
  };

  if (error) {
    return (
      <div className="flex h-64 items-center justify-center">
        <div className="text-center">
          <p className="mb-4 text-red-600">Erreur lors du chargement des utilisateurs</p>
          <Button onClick={() => refetch()} variant="outline">
            <RefreshCw className="mr-2 h-4 w-4" />
            Réessayer
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Header with actions */}
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-2">
          <Users className="text-primary h-6 w-6" />
          <h1 className="text-primary text-2xl font-bold">Gestion des utilisateurs</h1>
        </div>
        <div className="flex items-center space-x-2">
          <Button onClick={() => refetch()} variant="outline" size="sm">
            <RefreshCw className="mr-2 h-4 w-4" />
            Actualiser
          </Button>
          <Button variant="outline" size="sm">
            <Download className="mr-2 h-4 w-4" />
            Exporter
          </Button>
          <Button onClick={() => setIsCreateDialogOpen(true)} size="sm">
            <Plus className="mr-2 h-4 w-4" />
            Nouvel utilisateur
          </Button>
        </div>
      </div>

      {/* Filter bar */}
      <div className="bg-muted/50 flex items-center space-x-4 rounded-lg p-4">
        <div className="flex-1">
          <div className="relative">
            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
            <Input
              placeholder="Rechercher par nom, email, téléphone..."
              value={filters.search}
              onChange={(e) => handleSearchChange(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>
        <Select value={filters.user_type} onValueChange={(value) => handleFilterChange("user_type", value)}>
          <SelectTrigger className="w-48">
            <SelectValue placeholder="Type d'utilisateur" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Tous les types</SelectItem>
            <SelectItem value="client">Client</SelectItem>
            <SelectItem value="super_admin">Administrateur</SelectItem>
            <SelectItem value="ca_member">Membre CA</SelectItem>
            <SelectItem value="manager">Manager</SelectItem>
            <SelectItem value="account_manager">Gestionnaire</SelectItem>
            <SelectItem value="cashier">Caissier</SelectItem>
            <SelectItem value="it_staff">Personnel IT</SelectItem>
            <SelectItem value="other_staff">Autres Personnel</SelectItem>
            <SelectItem value="agency_agent">Agent d&apos;agence</SelectItem>
            <SelectItem value="community_leader">Chef de communauté</SelectItem>
          </SelectContent>
        </Select>
        <Select value={filters.status} onValueChange={(value) => handleFilterChange("status", value)}>
          <SelectTrigger className="w-40">
            <SelectValue placeholder="Statut" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Tous</SelectItem>
            <SelectItem value="active">Actif</SelectItem>
            <SelectItem value="inactive">Inactif</SelectItem>
            <SelectItem value="verified">Vérifié</SelectItem>
            <SelectItem value="unverified">Non vérifié</SelectItem>
          </SelectContent>
        </Select>
        <Button variant="ghost" size="sm" onClick={clearFilters}>
          <Filter className="mr-2 h-4 w-4" />
          Effacer
        </Button>
      </div>

      {/* Bulk actions bar */}
      <BulkActionsBar selectedUsers={table.getFilteredSelectedRowModel().rows.map((row) => row.original)} />

      {/* Table */}
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <TableHead key={header.id}>
                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                  </TableHead>
                ))}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {isLoading ? (
              <TableRow>
                <TableCell colSpan={columns.length} className="h-24 text-center">
                  <div className="flex items-center justify-center">
                    <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                    Chargement des utilisateurs...
                  </div>
                </TableCell>
              </TableRow>
            ) : table.getRowModel().rows.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={columns.length} className="h-24 text-center">
                  Aucun utilisateur trouvé.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>

      {/* Server-side pagination */}
      <div className="flex items-center justify-between space-x-2 py-4">
        <div className="text-muted-foreground flex-1 text-sm">
          {table.getFilteredSelectedRowModel().rows.length} sur {users.length} ligne(s) sélectionnée(s). Total:{" "}
          {totalUsers} utilisateur(s)
        </div>
        <div className="flex items-center space-x-2">
          <p className="text-sm font-medium">
            Page {currentPage} sur {totalPages}
          </p>
          <div className="flex items-center space-x-2">
            <Button variant="outline" size="sm" onClick={goToPreviousPage} disabled={currentPage <= 1}>
              <ChevronLeft className="h-4 w-4" />
              Précédent
            </Button>
            <Button variant="outline" size="sm" onClick={goToNextPage} disabled={currentPage >= totalPages}>
              Suivant
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>

      {/* Dialogs */}
      <UserDialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen} mode="create" />

      {editingUser && (
        <UserDialog
          open={!!editingUser}
          onOpenChange={(open: boolean) => !open && setEditingUser(null)}
          mode="edit"
          userId={editingUser.id}
        />
      )}

      {/* User Profile Modal */}
      <UserProfileModal
        user={profileUser}
        open={isProfileModalOpen}
        onOpenChange={setIsProfileModalOpen}
        onEdit={(user) => {
          setEditingUser(user);
          setIsProfileModalOpen(false);
        }}
      />
    </div>
  );
}