'use client';

import type { Column, ColumnDef } from '@tanstack/react-table';
import { DataTableColumnHeader } from '@/components/ui/table/data-table-column-header';
import { Icons } from '@/components/icons';
import {
  buildEmployeeSearchPlaceholder,
  EMPLOYEE_CODE_LABEL,
  EMPLOYEE_NAME_LABEL
} from '@/lib/employee-information';
import type { UserPermissionAssignmentListItem } from '../api/types';
import { UserPermissionRowActions } from './user-permission-row-actions';

export const userPermissionColumns: ColumnDef<UserPermissionAssignmentListItem>[] = [
  {
    id: 'employee_code',
    accessorKey: 'employee_code',
    header: ({ column }: { column: Column<UserPermissionAssignmentListItem, unknown> }) => (
      <DataTableColumnHeader column={column} title={EMPLOYEE_CODE_LABEL} />
    ),
    cell: ({ row }) => (
      <span className='block truncate font-medium whitespace-nowrap'>
        {row.original.employee_code ?? '-'}
      </span>
    ),
    size: 140,
    minSize: 140,
    maxSize: 140
  },
  {
    id: 'full_name',
    accessorKey: 'full_name',
    header: ({ column }: { column: Column<UserPermissionAssignmentListItem, unknown> }) => (
      <DataTableColumnHeader column={column} title={EMPLOYEE_NAME_LABEL} />
    ),
    cell: ({ row }) => (
      <div className='flex flex-col'>
        <span className='font-medium'>{row.original.full_name}</span>
        <span className='text-muted-foreground text-xs'>{row.original.email}</span>
      </div>
    ),
    meta: {
      label: EMPLOYEE_NAME_LABEL,
      placeholder: buildEmployeeSearchPlaceholder(),
      variant: 'text' as const,
      icon: Icons.search
    },
    enableColumnFilter: true
  },
  {
    accessorKey: 'department_name',
    header: ({ column }: { column: Column<UserPermissionAssignmentListItem, unknown> }) => (
      <DataTableColumnHeader column={column} title='Department' />
    ),
    cell: ({ row }) => row.original.department_name ?? '-'
  },
  {
    accessorKey: 'position_name',
    header: 'POSITION',
    cell: ({ row }) => row.original.position_name ?? '-'
  },
  {
    accessorKey: 'template_name',
    header: 'TEMPLATE',
    cell: ({ row }) => row.original.template_name ?? '-'
  },
  {
    accessorKey: 'override_count',
    header: 'OVERRIDES'
  },
  {
    id: 'actions',
    cell: ({ row }) => <UserPermissionRowActions data={row.original} />
  }
];
