"use client"

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

export interface Sale {
  id: string
  bookingId: string
  unitNumber: string
  projectName: string
  customerName: string
  customerPhone: string
  bookingValue: string
  commissionAmount: string
  commissionPercentage: string
  paymentReceived: string
  paymentReceivedPercentage: string
  bookingDate: string
  cpContactName: string
  soldBy: string
}

interface GetSaleColumnsParams {
  // No selection needed for sales table
}

export function getSaleColumns({}: GetSaleColumnsParams = {}): TableColumn[] {
  return [
    {
      header: "Booking ID",
      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: "Customer",
      accessor: (row: any) => (
        <div className="flex flex-col">
          <span className="font-medium">{row.customerName}</span>
          <span className="text-xs text-muted-foreground">{row.customerPhone}</span>
        </div>
      ),
    },
    {
      header: "Booking Value",
      accessor: (row: any) => (
        <span className="font-medium">{row.bookingValue}</span>
      ),
      className: "text-right",
    },
    {
      header: "Commission Amount",
      accessor: (row: any) => (
        <div className="text-right">
          <span className="font-medium">{row.commissionAmount}</span>
          <span className="text-xs text-muted-foreground ml-1">({row.commissionPercentage})</span>
        </div>
      ),
      className: "text-right",
    },
    {
      header: "Payment Received",
      accessor: (row: any) => (
        <div className="text-right">
          <span className="font-medium">{row.paymentReceived}</span>
          <span className="text-xs text-muted-foreground ml-1">({row.paymentReceivedPercentage})</span>
        </div>
      ),
      className: "text-right",
    },
    {
      header: "Booking Date",
      accessor: (row: any) => (
        <span>
          {row.bookingDate
            ? format(new Date(row.bookingDate), "dd MMM yyyy")
            : "-"}
        </span>
      ),
    },
    {
      header: "CP Contact",
      accessor: (row: any) => (
        <span className="font-medium">{row.cpContactName}</span>
      ),
    },
    {
      header: "Sold By",
      accessor: (row: any) => (
        <span className="font-medium">{row.soldBy}</span>
      ),
    },
  ]
}