'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='Request' />
      ),
      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: 'Request',
        placeholder: 'Search approvals...',
        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: 'Pending' },
          { value: 'approved', label: 'Approved' },
          { value: 'rejected', label: 'Rejected' },
          { value: 'returned', label: 'Returned' },
          { value: 'cancelled', label: 'Cancelled' }
        ]
      },
      enableColumnFilter: true
    },
    {
      id: 'entityType',
      accessorKey: 'entityType',
      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
        <DataTableColumnHeader column={column} title='Entity' />
      ),
      cell: ({ row }) => row.original.entityType.replaceAll('_', ' '),
      meta: {
        label: 'Entity',
        variant: 'multiSelect' as const,
        options: [{ value: 'quotation', label: 'Quotation' }]
      },
      enableColumnFilter: true
    },
    {
      id: 'currentStep',
      accessorKey: 'currentStep',
      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
        <DataTableColumnHeader column={column} title='Current Step' />
      ),
      cell: ({ row }) => (
        <div className='flex flex-col'>
          <span>Step {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='Requested By' />
      ),
      cell: ({ row }) => row.original.requestedByName ?? row.original.requestedBy
    },
    {
      id: 'requestedAt',
      accessorKey: 'requestedAt',
      header: ({ column }: { column: Column<ApprovalListItem, unknown> }) => (
        <DataTableColumnHeader column={column} title='Requested At' />
      ),
      cell: ({ row }) => new Date(row.original.requestedAt).toLocaleString()
    }
  ];
}