'use client';

import { Badge } from '@/components/ui/badge';
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 { Column, ColumnDef } from '@tanstack/react-table';
import type { User } from '../../api/types';
import { CellAction } from './cell-action';
import { ROLE_OPTIONS } from './options';

export const columns: ColumnDef<User>[] = [
  {
    id: 'employee_code',
    accessorKey: 'employee_code',
    header: ({ column }: { column: Column<User, 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<User, 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.text
    },
    enableColumnFilter: true
  },
  {
    accessorKey: 'organization_name',
    header: 'ORGANIZER',
    cell: ({ row }) => row.original.organization_name || '-'
  },
  {
    accessorKey: 'department_name',
    header: 'DEPARTMENT',
    cell: ({ row }) => row.original.department_name || '-'
  },
  {
    accessorKey: 'position_name',
    header: 'POSITION',
    cell: ({ row }) => row.original.position_name || '-'
  },
  {
    id: 'role',
    accessorKey: 'organization_role',
    enableSorting: false,
    header: ({ column }: { column: Column<User, unknown> }) => (
      <DataTableColumnHeader column={column} title='Role' />
    ),
    cell: ({ row }) => (
      <Badge variant='outline' className='capitalize'>
        {row.original.organization_role ?? 'user'}
      </Badge>
    ),
    enableColumnFilter: true,
    meta: {
      label: 'roles',
      variant: 'multiSelect' as const,
      options: ROLE_OPTIONS
    }
  },
  {
    accessorKey: 'status',
    header: 'STATUS',
    cell: ({ row }) => {
      const variant = row.original.status === 'Active' ? 'default' : 'secondary';
      return <Badge variant={variant}>{row.original.status}</Badge>;
    }
  },
  {
    id: 'actions',
    cell: ({ row }) => <CellAction data={row.original} />
  }
];
