'use client';

import Link from 'next/link';
import type { Column, ColumnDef } from '@tanstack/react-table';
import { DataTableColumnHeader } from '@/components/ui/table/data-table-column-header';
import { Icons } from '@/components/icons';
import type { ApprovalListItem } from '../types';
import { ApprovalStatusBadge } from './approval-status-badge';

export function getApprovalColumns(): ColumnDef<ApprovalListItem>[] {
  return [
    {
      id: 'entityCode',
      accessorFn: (row) => row.entityCode ?? row.entityId,
      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
        <DataTableColumnHeader column={column} title='คำขอ' />
      ),
      cell: ({ row }) => (
        <div className='flex flex-col'>
          <Link href={`/dashboard/crm/approvals/${row.original.id}`} className='font-medium hover:underline'>
            {row.original.entityCode ?? row.original.entityId}
          </Link>
          <span className='text-muted-foreground text-xs'>
            {row.original.workflowName}
            {row.original.entityTitle ? ` - ${row.original.entityTitle}` : ''}
          </span>
        </div>
      ),
      meta: {
        label: 'คำขอ',
        placeholder: 'ค้นหางานอนุมัติ...',
        variant: 'text' as const,
        icon: Icons.search
      },
      enableColumnFilter: true
    },
    {
      id: 'status',
      accessorKey: 'status',
      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
        <DataTableColumnHeader column={column} title='Status' />
      ),
      cell: ({ row }) => <ApprovalStatusBadge status={row.original.status} />,
      meta: {
        label: 'Status',
        variant: 'multiSelect' as const,
        options: [
          { value: 'pending', label: 'รออนุมัติ' },
          { value: 'approved', label: 'อนุมัติแล้ว' },
          { value: 'rejected', label: 'ไม่อนุมัติ' },
          { value: 'returned', label: 'ตีกลับ' },
          { value: 'cancelled', label: 'ยกเลิก' }
        ]
      },
      enableColumnFilter: true
    },
    {
      id: 'entityType',
      accessorKey: 'entityType',
      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
        <DataTableColumnHeader column={column} title='เอกสาร' />
      ),
      cell: ({ row }) => row.original.entityType.replaceAll('_', ' '),
      meta: {
        label: 'เอกสาร',
        variant: 'multiSelect' as const,
        options: [{ value: 'quotation', label: 'ใบเสนอราคา' }]
      },
      enableColumnFilter: true
    },
    {
      id: 'currentStep',
      accessorKey: 'currentStep',
      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
        <DataTableColumnHeader column={column} title='ขั้นตอนปัจจุบัน' />
      ),
      cell: ({ row }) => (
        <div className='flex flex-col'>
          <span>ขั้น {row.original.currentStep}</span>
          <span className='text-muted-foreground text-xs'>
            {row.original.currentStepRoleName ?? '-'}
          </span>
        </div>
      )
    },
    {
      id: 'requestedBy',
      accessorFn: (row) => row.requestedByName ?? row.requestedBy,
      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
        <DataTableColumnHeader column={column} title='ผู้ส่งอนุมัติ' />
      ),
      cell: ({ row }) => row.original.requestedByName ?? row.original.requestedBy
    },
    {
      id: 'requestedAt',
      accessorKey: 'requestedAt',
      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
        <DataTableColumnHeader column={column} title='วันที่ส่งอนุมัติ' />
      ),
      cell: ({ row }) => new Date(row.original.requestedAt).toLocaleString()
    }
  ];
}
