"use client"
// Because columns rely on React state/hooks for row actions

import * as React from "react"
import { ColumnDef, Row } from "@tanstack/react-table"
import { VendorData } from "./vendor-list-table"
import { ClientDataTableColumnHeaderSimple } from "@/components/client-data-table/data-table-column-simple-header"
import { formatDate } from "@/lib/utils"
import { Checkbox } from "@/components/ui/checkbox"

export interface DataTableRowAction<TData> {
  row: Row<TData>
  type: "open" | "update" | "delete"
}

interface GetColumnsProps {
  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<VendorData> | null>>
  setSelectedVendorIds: React.Dispatch<React.SetStateAction<number[]>> // Changed to array
}

/** getColumns: return array of ColumnDef for 'vendors' data */
export function getColumns({
  setRowAction,
  setSelectedVendorIds, // Changed parameter name
}: GetColumnsProps): ColumnDef<VendorData>[] {
  return [
    // MULTIPLE SELECT COLUMN
    {
      id: "select",
      enableSorting: false,
      enableHiding: false,
      size: 40,
      // Add checkbox in header for select all functionality
      header: ({ table }) => (
        <Checkbox
          checked={
            table.getFilteredSelectedRowModel().rows.length > 0 &&
            table.getFilteredSelectedRowModel().rows.length === table.getFilteredRowModel().rows.length
          }
          onCheckedChange={(checked) => {
            table.toggleAllRowsSelected(!!checked)
            
            // Update selectedVendorIds based on all rows selection
            if (checked) {
              const allIds = table.getFilteredRowModel().rows.map(row => row.original.id)
              setSelectedVendorIds(allIds)
            } else {
              setSelectedVendorIds([])
            }
          }}
          aria-label="Select all"
        />
      ),
      cell: ({ row }) => {
        const isSelected = row.getIsSelected()
        
        return (
          <Checkbox
            checked={isSelected}
            onCheckedChange={(checked) => {
              row.toggleSelected(!!checked)
              
              // Update the selectedVendorIds state by adding or removing this ID
              setSelectedVendorIds(prevIds => {
                if (checked) {
                  // Add this ID if it doesn't exist
                  return prevIds.includes(row.original.id) 
                    ? prevIds 
                    : [...prevIds, row.original.id]
                } else {
                  // Remove this ID
                  return prevIds.filter(id => id !== row.original.id)
                }
              })
            }}
            aria-label="Select row"
          />
        )
      },
    },
    
    // Vendor Name
    {
      accessorKey: "vendorName",
      header: ({ column }) => (
        <ClientDataTableColumnHeaderSimple column={column} title="Vendor Name" />
      ),
      cell: ({ row }) => row.getValue("vendorName"),
    },
    
    // Vendor Code
    {
      accessorKey: "vendorCode",
      header: ({ column }) => (
        <ClientDataTableColumnHeaderSimple column={column} title="Vendor Code" />
      ),
      cell: ({ row }) => row.getValue("vendorCode"),
    },
    
    // Status
    {
      accessorKey: "status",
      header: ({ column }) => (
        <ClientDataTableColumnHeaderSimple column={column} title="Status" />
      ),
      cell: ({ row }) => row.getValue("status"),
    },
    
    // Country
    {
      accessorKey: "country",
      header: ({ column }) => (
        <ClientDataTableColumnHeaderSimple column={column} title="Country" />
      ),
      cell: ({ row }) => row.getValue("country"),
    },
    
    // Email
    {
      accessorKey: "email",
      header: ({ column }) => (
        <ClientDataTableColumnHeaderSimple column={column} title="Email" />
      ),
      cell: ({ row }) => row.getValue("email"),
    },
    
    // Phone
    {
      accessorKey: "phone",
      header: ({ column }) => (
        <ClientDataTableColumnHeaderSimple column={column} title="Phone" />
      ),
      cell: ({ row }) => row.getValue("phone"),
    },
    
    // Created At
    {
      accessorKey: "createdAt",
      header: ({ column }) => (
        <ClientDataTableColumnHeaderSimple column={column} title="Created At" />
      ),
      cell: ({ cell }) => formatDate(cell.getValue() as Date),
    },
    
    // Updated At
    {
      accessorKey: "updatedAt",
      header: ({ column }) => (
        <ClientDataTableColumnHeaderSimple column={column} title="Updated At" />
      ),
      cell: ({ cell }) => formatDate(cell.getValue() as Date),
    },
  ]
}