'use client';

import React, { useEffect, useMemo, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import {
  ColumnDef,
  SortingState,
  PaginationState,
  ColumnFiltersState,
  RowSelectionState,
  VisibilityState,
  TableOptions,
} from '@tanstack/react-table';
import {
  DataGrid,
  DataGridColumnHeader,
  DataGridPagination,
  DataGridRowSelect,
  DataGridRowSelectAll,
  DataGridTable,
} from '@/components/ui/data-grid';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

import { Ellipsis, Plus, Search, X } from 'lucide-react';
import { toast } from 'sonner';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import PermissionEditDialog from './PermissionEditDialog';
import PermissionDeleteDialog from './PermissionDeleteDialog';
import PermissionGroupDeleteDialog from './PermissionGroupDeleteDialog';
import Spinner from "@/components/ui/spinner";
import { ContentLoader } from '@/app/components/layouts/default/loaders/ContentLoader';
import EmptyAddAction from '@/app/components/common/EmptyAddAction';
import { useRoleSelectQuery } from '../../roles/hooks/useRoleSelectQuery';
import { IUserPermission, IUserRole } from '@/app/shared/types/models';
import { TDataApiFetchParams, TDataApiResponse } from '@/app/shared/types/api';
import { Card, CardContent, CardFooter, CardHeader, CardHeading, CardTable, CardToolbar } from '@/components/ui/card';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';

const PermissionList = () => {
  const { t } = useTranslation();

  // Initialization state management
  const [isInitialized, setIsInitialized] = useState(false);

  // List state management
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });
  const [sorting, setSorting] = useState<SortingState>([
    { id: 'createdAt', desc: true },
  ]);
  const [filters, setFilters] = useState<ColumnFiltersState>([]);
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>();

  // Form state management
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [groupDeleteDialogOpen, setGroupDeleteDialogOpen] = useState(false);
  const [editPermission, setEditPermission] = useState<IUserPermission | null>(
    null,
  );
  const [deletePermission, setDeletePermission] =
    useState<IUserPermission | null>(null);
  const [deletePermissionIds, setDeletePermissionIds] = useState<string[]>([]);
  const [selectedRole, setSelectedRole] = useState<string | null>(null);

  // Query state management
  const [searchQuery, setSearchQuery] = useState('');

  // Role select query
  const { data: roleList } = useRoleSelectQuery();

  // Fetch permissions from the server API
  const fetchPermissions = async ({
    pageIndex,
    pageSize,
    sorting,
    filters,
    searchQuery,
  }: TDataApiFetchParams): Promise<TDataApiResponse<IUserPermission>> => {
    const sortField = sorting?.[0]?.id || 'createdAt';
    const sortDirection = sorting?.[0]?.desc ? 'desc' : 'asc';

    const params = new URLSearchParams({
      page: String(pageIndex + 1),
      limit: String(pageSize),
      ...(sortField ? { sort: sortField, dir: sortDirection } : {}),
      ...(searchQuery ? { query: searchQuery } : {}),
      ...(selectedRole && selectedRole !== 'all'
        ? { roleId: selectedRole }
        : {}),
    });

    const response = await fetch(
      `/api/user-management/permissions?${params.toString()}`,
    );

    if (!response.ok) {
      throw new Error(t('common.messages.system_error'));
    }

    setIsInitialized(true);

    return response.json();
  };

  // Permissions query
  const { data, isLoading } = useQuery({
    queryKey: ['permissions', pagination, sorting, searchQuery, selectedRole],
    queryFn: () =>
      fetchPermissions({
        pageIndex: pagination.pageIndex,
        pageSize: pagination.pageSize,
        sorting,
        filters: [
          ...filters,
          ...(selectedRole ? [{ id: 'role', value: selectedRole }] : []),
        ],
        searchQuery,
      }),
    staleTime: 1000 * 1, // 1 minute
  });

  const handlePaginationChange = (newPagination: PaginationState) => {
    setPagination(newPagination);
  };

  // Handle sorting change
  const handleSortingChange = (newSorting: SortingState) => {
    setSorting(newSorting);
  };

  // Handle filter change
  const handleFilterChange = (columnId: string, filterValue: unknown) => {
    setFilters((prev) => {
      const existingFilterIndex = prev.findIndex((f) => f.id === columnId);
      if (existingFilterIndex > -1) {
        const newFilters = [...prev];
        newFilters[existingFilterIndex].value = filterValue;
        return newFilters;
      } else {
        return [...prev, { id: columnId, value: filterValue }];
      }
    });
  };

  // Handle row selection
  const handleRoleSelection = (roleId: string) => {
    setSelectedRole(roleId);
    setPagination({ ...pagination, pageIndex: 0 }); // Reset to first page when filtering
  };

  useEffect(() => {
    const selectedRowIds = Object.keys(rowSelection);
    if (selectedRowIds.length > 0) {
      setDeletePermissionIds(selectedRowIds);
    } else {
      setDeletePermissionIds([]);
    }
  }, [rowSelection]);

  // Layout elements
  const DataGridToolbar = () => {
    const [inputValue, setInputValue] = useState(searchQuery);

    const handleSearch = () => {
      setSearchQuery(inputValue);
      setPagination({ ...pagination, pageIndex: 0 });
    };

    return (
      <CardHeader className="py-5">
        <div className="flex items-center gap-2.5">
          <div className="relative">
            <Search className="size-4 text-muted-foreground absolute start-3 top-1/2 -translate-y-1/2" />
            <Input
              placeholder={t(
                'modules.permissions.list.filter.search.placeholder',
              )}
              value={inputValue}
              size="sm"
              onChange={(e) => setInputValue(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
              disabled={isLoading && true}
              className="ps-9 w-64"
            />
            {searchQuery.length > 0 && (
              <Button
                mode="icon"
                size="xs"
                variant="ghost"
                className="absolute end-1.5 top-1/2 -translate-y-1/2 h-6 w-6"
                onClick={() => setSearchQuery('')}
              >
                <X />
              </Button>
            )}
          </div>
          <Select
            onValueChange={handleRoleSelection}
            value={selectedRole || 'all'}
            defaultValue="all"
          >
            <SelectTrigger size="sm" className="w-36">
              <SelectValue
                placeholder={t(
                  'modules.permissions.list.filter.role.placeholder',
                )}
              />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">
                {t('modules.permissions.list.filter.role.label')}
              </SelectItem>
              {roleList?.map((role: IUserRole) => (
                <SelectItem key={role.id} value={role.id}>
                  {role.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <CardToolbar>
          {deletePermissionIds.length > 0 && (
            <Button
              variant="destructive"
              size="sm"
              onClick={() => {
                setGroupDeleteDialogOpen(true);
              }}
            >
              {t('modules.permissions.list.actions.delete', {
                count: deletePermissionIds.length,
              })}
            </Button>
          )}
          <Button
            disabled={isLoading && true}
            size="sm"
            onClick={() => {
              setEditPermission(null);
              setEditDialogOpen(true);
            }}
          >
            <Plus />
            {t('modules.permissions.list.actions.add')}
          </Button>
        </CardToolbar>
      </CardHeader>
    );
  };

  const EditDialog = () => {
    return (
      <PermissionEditDialog
        open={editDialogOpen}
        closeDialog={() => setEditDialogOpen(false)}
        permission={editPermission}
      />
    );
  };

  const Empty = () => {
    return (
      <EmptyAddAction
        title={t('modules.permissions.list.empty.title')}
        description={t('modules.permissions.list.empty.description')}
        buttonLabel={t('modules.permissions.list.empty.button')}
        illustrationPath="/illustrations/empty-permissions.svg"
        onClick={() => {
          setEditDialogOpen(true);
        }}
      />
    );
  };

  // Column definitions
  const columns = useMemo<ColumnDef<IUserPermission>[]>(
    () => [
      {
        accessorKey: 'id',
        header: () => <DataGridRowSelectAll />,
        cell: ({ row }) => <DataGridRowSelect row={row} />,
        enableSorting: false,
        meta: {
          headerClassName: 'w-0',
          skeleton: <Skeleton className="size-5" />,
        },
      },
      {
        accessorKey: 'name',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('modules.permissions.list.columns.name')}
            column={column}
          />
        ),
        cell: (info) => info.getValue(),
        enableSorting: true,
        enableHiding: false,
        meta: {
          headerClassName: 'min-w-[200px]',
          skeleton: <Skeleton className="w-28 h-7" />,
        },
      },
      {
        accessorKey: 'slug',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('modules.permissions.list.columns.slug')}
            column={column}
          />
        ),
        cell: (info) => {
          const value = info.getValue() as string;

          return <Badge variant="secondary" appearance="outline">{value}</Badge>;
        },
        enableSorting: true,
        enableHiding: false,
        meta: {
          headerClassName: 'min-w-[200px]',
          skeleton: <Skeleton className="w-14 h-7" />,
        },
      },
      {
        accessorKey: 'description',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('modules.permissions.list.columns.description')}
            column={column}
          />
        ),
        cell: (info) => {
          const value = info.getValue() as string;

          return <div className="truncate w-[275px]">{value}</div>;
        },
        enableSorting: false,
        enableHiding: false,
        meta: {
          headerClassName: 'w-full',
          skeleton: <Skeleton className="w-28 h-7" />,
        },
      },
      {
        accessorKey: 'createdAt',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('modules.permissions.list.columns.createdAt')}
            column={column}
          />
        ),
        cell: (info) => {
          const value = info.getValue() as string;
          return new Date(value).toLocaleString();
        },
        enableSorting: true,
        enableHiding: false,
        meta: {
          headerClassName: 'min-w-60',
          skeleton: <Skeleton className="w-20 h-7" />,
        },
      },
      {
        id: 'actions',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('modules.permissions.list.columns.actions')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button mode="icon" size="xs" variant="ghost">
                <Ellipsis />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent side="bottom" align="start">
              <DropdownMenuItem
                onClick={() => {
                  setEditPermission(row.original);
                  setEditDialogOpen(true);
                }}
              >
                {t('modules.permissions.list.dropdown.edit')}
              </DropdownMenuItem>
              <DropdownMenuItem
                variant="destructive"
                onClick={() => {
                  setDeletePermission(row.original);
                  setDeleteDialogOpen(true);
                }}
              >
                {t('modules.permissions.list.dropdown.delete')}
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        ),
        enableSorting: false,
        enableHiding: false,
        meta: {
          headerClassName: 'min-w-36',
          skeleton: <Skeleton className="size-5" />,
        },
      },
    ],
    [],
  );

  const tableOptions: Partial<TableOptions<IUserPermission>> = {
    columns,
    data: data?.data || [],
    getRowId: (row: any) => row.id,
    state: {
      pagination,
      sorting,
      rowSelection,
      columnVisibility,
    },
    onPaginationChange: setPagination,
    onSortingChange: setSorting,
    enableRowSelection: true,
    onRowSelectionChange: setRowSelection,
  };

  const List = () => {
    return (
      <>
        <DataGrid
          tableOptions={tableOptions}
          recordCount={data?.pagination.total || 0}
          isLoading={isLoading}
          serverSide={true}
        >
          <Card>
            <DataGridToolbar />
            <CardTable>
              <ScrollArea>
                <DataGridTable cellBorder={false} cellSpacing="sm" edgeCellClassName="px-5"/>
                <ScrollBar orientation="horizontal" />
              </ScrollArea>
            </CardTable>
            <CardFooter>
              <DataGridPagination />
            </CardFooter>
          </Card>          
        </DataGrid>

        {deletePermission && (
          <PermissionDeleteDialog
            open={deleteDialogOpen}
            closeDialog={() => setDeleteDialogOpen(false)}
            permission={deletePermission}
          />
        )}

        {deletePermissionIds && (
          <PermissionGroupDeleteDialog
            open={groupDeleteDialogOpen}
            closeDialog={() => {
              setDeletePermissionIds([]);
              setRowSelection({});
              setGroupDeleteDialogOpen(false);
            }}
            permissionIds={deletePermissionIds}
          />
        )}
      </>
    );
  };

  // Rendering
  if (!isInitialized && isLoading) {
    return <ContentLoader className="mt-[10%]" />;
  } else if (data?.empty) {
    return (
      <>
        <EditDialog />
        <Empty />
      </>
    );
  } else {
    return (
      <>
        <EditDialog />
        <List />
      </>
    );
  }
};

export default PermissionList;
Plug & Play CRUDs for Next.js

User management

User management

User management

User management

User management
