import {
  useDeleteMutation,
  useGetAllUsersQuery,
} from '@/app/backend/endpoints/auth';
import { DataTable } from '@/components/Dashboard/DataTable';
import { ColumnDef } from '@tanstack/react-table';
import Loading from '@/components/Fallback';
import { Edit, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/formsButton';
import AlertDialogDemo from '@/components/AlertDialogDemo';
import { toast } from 'sonner';
import AlertDialogForm from '@/components/AlertDialogForm';
import CreateUserForm from '@/components/CreateUserForm';
import UpdateUserForm from '@/components/UpdateUserForm';

function UsersList() {
  const { data, isLoading } = useGetAllUsersQuery();
  const usersList: UserI[] | null = data?.data ?? null;
  const [deleteUser] = useDeleteMutation();

  const users: UsersListI[] | null =
    usersList?.map((user) => {
      return {
        _id: user._id,
        email: user.email,
        name: `${user.firstName} ${user.lastName}`,
        role: user.role,
      };
    }) ?? null;

  const columns: ColumnDef<UsersListI>[] = [
    {
      accessorKey: 'name',
      header: 'Name',
    },
    {
      accessorKey: 'email',
      header: 'Email',
    },
    {
      accessorKey: 'role',
      header: 'Role',
    },
    {
      id: 'actions',
      cell: ({ row }: any) => {
        const userId = row.original._id;

        return (
          <div className="flex flex-row gap-2">
            <AlertDialogForm
              Form={
                <UpdateUserForm
                  initialValues={
                    {
                      firstName: row.original.name.split(' ')[0],
                      lastName: row.original.name.split(' ')[1],
                      email: row.original.email,
                      role: row.original.role,
                    } as UserUpdateI
                  }
                  userId={userId}
                />
              }
            >
              <Button variant="secondary" className="h-8 w-8 p-0  xl">
                <Edit className="h-4 w-4" />
              </Button>
            </AlertDialogForm>

            <AlertDialogDemo
              title="Are you absolutely sure?"
              description="This action cannot be undone. This will permanently delete the account and remove the data from our servers."
              action="Delete"
              onClick={() => {
                deleteUser(userId)
                  .unwrap()
                  .then((response) => {
                    toast.success(response.message);
                  })
                  .catch((error: any) => {
                    toast.error(
                      error?.data?.message ?? error?.error.toString()
                    );
                  });
              }}
            >
              <Button variant="destructive" className="h-8 w-8 p-0">
                <Trash2 className="h-4 w-4" />
              </Button>
            </AlertDialogDemo>
          </div>
        );
      },
    },
  ];
  return (
    <div className="flex flex-col gap-3 w-full py-12">
      <span className="text-slate-600 text-[25px] font-semibold">Users</span>
      {/* <PageTitle title="Users" /> */}
      {isLoading ? (
        <>
          <Loading />
        </>
      ) : (
        <>
          <AlertDialogForm Form={<CreateUserForm />}>
            <Button variant="default" className="h-8 w-fit ml-auto">
              Create User
            </Button>
          </AlertDialogForm>
          <DataTable columns={columns} data={users ?? []} />
        </>
      )}
    </div>
  );
}

export default UsersList;