'use client';

import type { ColumnDef, SortingState } from '@tanstack/react-table';
import type { ReactNode } from 'react';
import { Edit, ShieldCheck, ShieldX } from 'lucide-react';

import { DataTable } from '@/components/data-table';
import { PERMISSIONS } from '@/constants/permissions';
import type { Role } from '@/types';

interface RoleTableProps {
  columns: ColumnDef<Role>[];
  roles: Role[];
  isLoading: boolean;
  toolbar: ReactNode;
  skip: number;
  limit: number;
  total: number;
  sorting: SortingState;
  onPageChange: (skip: number) => void;
  onLimitChange: (limit: number) => void;
  onSortingChange: (sorting: SortingState) => void;
  onEdit: (role: Role) => void;
  onToggleStatus: (role: Role) => void;
  isStatusPending: boolean;
}

export function RoleTable({
  columns,
  roles,
  isLoading,
  toolbar,
  skip,
  limit,
  total,
  sorting,
  onPageChange,
  onLimitChange,
  onSortingChange,
  onEdit,
  onToggleStatus,
  isStatusPending,
}: RoleTableProps) {
  return (
    <DataTable
      title="Roles"
      columns={columns}
      data={roles}
      isLoading={isLoading}
      toolbar={toolbar}
      emptyTitle="No roles found."
      actions={[
        {
          label: 'Edit',
          icon: <Edit className="size-4" />,
          permission: PERMISSIONS.ROLE.UPDATE,
          onClick: onEdit,
        },
        {
          label: (role) => (role.effective_status ? 'Deactivate' : 'Activate'),
          icon: (role) =>
            role.effective_status ? (
              <ShieldX className="size-4 text-destructive" />
            ) : (
              <ShieldCheck className="size-4 text-emerald-600" />
            ),
          permission: PERMISSIONS.ROLE.DELETE,
          disabled: () => isStatusPending,
          onClick: onToggleStatus,
        },
      ]}
      pagination={{
        skip,
        limit,
        totalItems: total,
        onPageChange,
        onLimitChange,
      }}
      sorting={sorting}
      onSortingChange={onSortingChange}
      actionsSticky
    />
  );
}