'use client';

import { Badge } from '@/components/ui/badge';
import { DataTableColumnHeader } from '@/components/ui/table/data-table-column-header';
import type { Employee } from '../../api/types';
import { Column, ColumnDef } from '@tanstack/react-table';
import { Icons } from '@/components/icons';
import {
  buildEmployeeSearchPlaceholder,
  EMPLOYEE_CODE_LABEL,
  EMPLOYEE_NAME_LABEL
} from '@/lib/employee-information';
import { CellAction } from './cell-action';
import { EMPLOYEE_STATUS_OPTIONS } from './options';

export const columns: ColumnDef<Employee>[] = [
  {
    id: 'employee_code',
    accessorKey: 'employee_code',
    header: ({ column }: { column: Column<Employee, 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<Employee, unknown> }) => (
      <DataTableColumnHeader column={column} title={EMPLOYEE_NAME_LABEL} />
    ),
    cell: ({ row }) => (
      <div className='flex min-w-[220px] max-w-[320px] flex-col'>
        <span className='truncate font-medium'>{row.original.full_name}</span>
        <span className='text-muted-foreground truncate text-xs'>{row.original.email ?? '-'}</span>
      </div>
    ),
    meta: {
      label: EMPLOYEE_NAME_LABEL,
      placeholder: buildEmployeeSearchPlaceholder(),
      variant: 'text' as const,
      icon: Icons.text
    },
    enableColumnFilter: true
  },
  {
    accessorKey: 'department_name',
    header: 'DEPARTMENT',
    cell: ({ cell }) => (
      <span className='block min-w-[160px] max-w-[220px] truncate'>
        {cell.getValue<Employee['department_name']>() ?? 'Unassigned'}
      </span>
    )
  },
  {
    accessorKey: 'position_name',
    header: 'POSITION',
    cell: ({ cell }) => (
      <span className='block min-w-[160px] max-w-[220px] truncate'>
        {cell.getValue<Employee['position_name']>() ?? 'Unassigned'}
      </span>
    )
  },
  {
    accessorKey: 'company',
    header: 'COMPANY',
    cell: ({ cell }) => (
      <span className='block min-w-[160px] max-w-[220px] truncate'>
        {cell.getValue<Employee['company']>() ?? '-'}
      </span>
    )
  },
  {
    id: 'status',
    accessorFn: (row) => (row.is_active ? 'active' : 'inactive'),
    enableSorting: false,
    header: ({ column }: { column: Column<Employee, unknown> }) => (
      <DataTableColumnHeader column={column} title='Status' />
    ),
    cell: ({ row }) => (
      <div className='min-w-[96px]'>
        <Badge variant={row.original.is_active ? 'default' : 'secondary'}>
          {row.original.is_active ? 'Active' : 'Inactive'}
        </Badge>
      </div>
    ),
    enableColumnFilter: true,
    meta: {
      label: 'status',
      variant: 'multiSelect' as const,
      options: EMPLOYEE_STATUS_OPTIONS
    }
  },
  {
    id: 'actions',
    cell: ({ row }) => (
      <div className='min-w-[52px]'>
        <CellAction data={row.original} />
      </div>
    )
  }
];
