"use client"

import { TableColumn } from "@/types/table"
import { Badge } from "@/components/ui/badge"
import { format } from "date-fns"

export interface CommissionLedger {
  id: string
  bookingId: string
  projectName: string
  unitNumber: string
  cpContactName: string
  commissionAmount: string
  paidSoFar: string
  pending: string
  status: "Pending" | "Partially Paid" | "Paid"
}

export function getCommissionLedgerColumns(): TableColumn[] {
  return [
    {
      header: "Booking",
      accessor: (row: any) => (
        <span className="font-medium">{row.bookingId}</span>
      ),
    },
    {
      header: "Project",
      accessor: (row: any) => (
        <div className="flex flex-col">
          <span className="font-medium">{row.unitNumber}</span>
          <span className="text-xs text-muted-foreground">{row.projectName}</span>
        </div>
      ),
    },
    {
      header: "CP Contact",
      accessor: (row: any) => (
        <span className="font-medium">{row.cpContactName}</span>
      ),
    },
    {
      header: "Commission Amount",
      accessor: (row: any) => (
        <span className="font-medium">{row.commissionAmount}</span>
      ),
      className: "text-right",
    },
    {
      header: "Paid So Far",
      accessor: (row: any) => (
        <span className="font-medium">{row.paidSoFar}</span>
      ),
      className: "text-right",
    },
    {
      header: "Pending",
      accessor: (row: any) => (
        <span className="font-medium">{row.pending}</span>
      ),
      className: "text-right",
    },
    {
      header: "Status",
      accessor: (row: any) => {
        let badgeColor = ""
        if (row.status === "Paid") {
          badgeColor = "bg-green-100 text-green-800 hover:bg-green-100 dark:bg-green-900 dark:text-green-100"
        } else if (row.status === "Partially Paid") {
          badgeColor = "bg-orange-100 text-orange-800 hover:bg-orange-100 dark:bg-orange-900 dark:text-orange-100"
        } else {
          badgeColor = "bg-red-100 text-red-800 hover:bg-red-100 dark:bg-red-900 dark:text-red-100"
        }
        
        return (
          <Badge variant="secondary" className={badgeColor}>
            {row.status}
          </Badge>
        )
      },
    },
  ]
}