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

export interface ChannelPartner {
  id: string
  firmName: string
  address: string
  city: string
  primaryContactName: string
  primaryContactPhone: string
  teamCount: number
  bookingsTillNow: number
  lastBookingDate: string | null
  status: "Active" | "Inactive"
  addedBy: string
  addedOn: string
  baseCommissionRate: string
  // For security: Don't send actual rate to client unless user has permission
  hasRatePermission?: boolean
}

interface GetChannelPartnerColumnsProps {
  selectedRows: string[]
  onSelectRow: (id: string) => void
  onSelectAll: (checked: boolean) => void
  hoveredRow?: string | null
}

export const getChannelPartnerColumns = ({
  selectedRows,
  onSelectRow,
  onSelectAll,
  hoveredRow,
}: GetChannelPartnerColumnsProps): TableColumn<ChannelPartner>[] => [
  {
    id: "select",
    header: () => (
      <Checkbox
        checked={selectedRows.length > 0}
        onCheckedChange={onSelectAll}
        aria-label="Select all"
      />
    ),
    accessor: (row) => (
      <Checkbox
        checked={selectedRows.includes(row.id)}
        onCheckedChange={() => onSelectRow(row.id)}
        aria-label={`Select ${row.firmName}`}
        onClick={(e) => e.stopPropagation()}
      />
    ),
  },
  {
    id: "firmName",
    header: "CP Firm Name",
    accessor: (row) => (
      <div className="flex flex-col">
        <span className="font-medium">{row.firmName}</span>
        <span className="text-xs text-muted-foreground">
          {row.address}, {row.city}
        </span>
      </div>
    ),
  },
  {
    id: "primaryContact",
    header: "Primary Contact",
    accessor: (row) => (
      <div className="flex flex-col">
        <span className="font-medium">{row.primaryContactName}</span>
        <span className="text-xs text-muted-foreground">{row.primaryContactPhone}</span>
      </div>
    ),
  },
  {
    id: "teamCount",
    header: "Contacts",
    accessor: (row) => (
      <div className="text-center">
        {row.teamCount} {row.teamCount === 1 ? "Contact" : "Contacts"}
      </div>
    ),
  },
  {
    id: "baseCommissionRate",
    header: "Base Rate",
    accessor: (row) => {
      const isHovered = hoveredRow === row.id
      
      return (
        <div className="text-center transition-all duration-200 select-none">
          {isHovered ? row.baseCommissionRate : '•••'}
        </div>
      )
    },
  },
  {
    id: "bookingsTillNow",
    header: "Bookings Till Now",
    accessor: (row) => <div className="text-center font-medium">{row.bookingsTillNow}</div>,
  },
  {
    id: "lastBookingDate",
    header: "Last Booking Date",
    accessor: (row) => (
      <div className="text-center">
        {row.lastBookingDate ? format(new Date(row.lastBookingDate), "dd/MM/yyyy") : "-"}
      </div>
    ),
  },
  {
    id: "status",
    header: "Status",
    accessor: (row) => (
      <Badge 
        variant={row.status === "Active" ? "default" : "secondary"}
        className={
          row.status === "Active" 
            ? "bg-green-100 text-green-800 hover:bg-green-100 dark:bg-green-900 dark:text-green-100" 
            : "bg-red-100 text-red-800 hover:bg-red-100 dark:bg-red-900 dark:text-red-100"
        }
      >
        {row.status}
      </Badge>
    ),
  },
  {
    id: "addedBy",
    header: "Added By",
    accessor: (row) => (
      <div className="flex flex-col">
        <span className="font-medium">{row.addedBy}</span>
        <span className="text-xs text-muted-foreground">
          {format(new Date(row.addedOn), "dd/MM/yyyy")}
        </span>
      </div>
    ),
  },
]