'use client';

import type { ColumnDef } from '@tanstack/react-table';
import { Icons } from '@/components/icons';
import { Badge } from '@/components/ui/badge';
import { DataTableColumnHeader } from '@/components/ui/table/data-table-column-header';
import {
  buildEmployeeSearchPlaceholder,
  EMPLOYEE_CODE_LABEL,
  EMPLOYEE_NAME_LABEL
} from '@/lib/employee-information';
import type { Option } from '@/types/data-table';
import type { EmployeeDirectoryListItem } from '../api/types';
import { EmployeeDirectoryActionMenu } from './employee-directory-action-menu';

export function getEmployeeDirectoryColumns({
  companies,
  departments,
  positions,
  statuses
}: {
  companies: Option[];
  departments: Option[];
  positions: Option[];
  statuses: Option[];
}): ColumnDef<EmployeeDirectoryListItem>[] {
  return [
    {
      id: 'employee_code',
      accessorKey: 'employee_code',
      header: ({ column }) => <DataTableColumnHeader column={column} title={EMPLOYEE_CODE_LABEL} />,
      cell: ({ row }) => (
        <span className='block truncate font-medium whitespace-nowrap'>
          {row.original.employee_code}
        </span>
      ),
      meta: {
        label: EMPLOYEE_CODE_LABEL
      },
      enableHiding: false,
      size: 140,
      minSize: 140,
      maxSize: 140
    },
    {
      id: 'search',
      accessorKey: 'full_name',
      header: ({ column }) => (
        <DataTableColumnHeader
          column={column}
          title={EMPLOYEE_NAME_LABEL}
          className='w-full justify-start'
        />
      ),
      cell: ({ row }) => (
        <div className='flex min-w-0 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.search
      },
      enableHiding: false,
      size: 260,
      minSize: 260,
      maxSize: 260
    },
    {
      id: 'company',
      accessorKey: 'company_name',
      header: ({ column }) => <DataTableColumnHeader column={column} title='บริษัท' />,
      cell: ({ row }) => (
        <span className='block max-w-[220px] truncate'>{row.original.company_name ?? '-'}</span>
      ),
      meta: {
        label: 'บริษัท',
        variant: 'select' as const,
        options: companies
      },
      size: 180,
      minSize: 180,
      maxSize: 180
    },
    {
      id: 'position',
      accessorKey: 'position_name',
      header: ({ column }) => <DataTableColumnHeader column={column} title='ตำแหน่ง' />,
      cell: ({ row }) => (
        <span className='block max-w-[220px] truncate'>{row.original.position_name ?? '-'}</span>
      ),
      meta: {
        label: 'ตำแหน่ง',
        variant: 'select' as const,
        options: positions
      },
      size: 220,
      minSize: 220,
      maxSize: 220
    },
    {
      id: 'department',
      accessorKey: 'department_name',
      header: ({ column }) => <DataTableColumnHeader column={column} title='ฝ่าย' />,
      cell: ({ row }) => (
        <span className='block max-w-[220px] truncate'>{row.original.department_name ?? '-'}</span>
      ),
      meta: {
        label: 'ฝ่าย',
        variant: 'select' as const,
        options: departments
      },
      size: 220,
      minSize: 220,
      maxSize: 220
    },
    {
      id: 'status',
      accessorFn: (row) => (row.is_active ? 'active' : 'inactive'),
      header: ({ column }) => <DataTableColumnHeader column={column} title='สถานะ' />,
      cell: ({ row }) => (
        <div className='min-w-[112px]'>
          <Badge variant={row.original.is_active ? 'default' : 'secondary'}>
            {row.original.is_active ? 'ใช้งาน' : 'ปิดใช้งาน'}
          </Badge>
        </div>
      ),
      meta: {
        label: 'สถานะ',
        variant: 'select' as const,
        options: statuses
      },
      size: 132,
      minSize: 132,
      maxSize: 132
    },
    {
      id: 'actions',
      header: () => <span className='sr-only'>จัดการ</span>,
      cell: ({ row }) => (
        <div className='flex justify-end'>
          <EmployeeDirectoryActionMenu employeeId={row.original.id} />
        </div>
      ),
      meta: {
        label: 'จัดการ',
        headerClassName: 'w-[60px] px-3 text-right',
        cellClassName: 'w-[60px] px-3 text-right'
      },
      enableSorting: false,
      enableHiding: false,
      size: 60,
      minSize: 60,
      maxSize: 60
    }
  ];
}
