CRM_ENVR/src/components/leads/leads-table.tsx

"use client"

import { useMemo } from "react"
import Link from "next/link"
import { ColumnDef } from "@tanstack/react-table"
import { DataTable } from "@/components/shared/data-table"
import { DataTableColumnHeader } from "@/components/shared/data-table-column-header"
import { LeadStatusBadge } from "./lead-status-badge"
import { LeadActionsDropdown } from "./lead-actions-dropdown"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Checkbox } from "@/components/ui/checkbox"
import { Lead } from "@/types"

interface LeadsTableProps {
  data: Lead[]
  loading?: boolean
}

export function LeadsTable({ data, loading }: LeadsTableProps) {
  const columns: ColumnDef<Lead>[] = useMemo(
    () => [
      {
        id: "select",
        header: ({ table }) => (
          <Checkbox
            checked={table.getIsAllPageRowsSelected()}
            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
            aria-label="Select all"
          />
        ),
        cell: ({ row }) => (
          <Checkbox
            checked={row.getIsSelected()}
            onCheckedChange={(value) => row.toggleSelected(!!value)}
            aria-label="Select row"
          />
        ),
        enableSorting: false,
        enableHiding: false,
      },
      {
        accessorKey: "companyName",
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Company" />
        ),
        cell: ({ row }) => (
          <Link
            href={`/leads/${row.original.id}`}
            className="font-medium hover:text-primary transition-colors"
          >
            {row.getValue("companyName")}
          </Link>
        ),
      },
      {
        accessorKey: "contactName",
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Contact" />
        ),
        cell: ({ row }) => (
          <span className="text-muted-foreground">{row.getValue("contactName")}</span>
        ),
      },
      {
        accessorKey: "email",
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Email" />
        ),
        cell: ({ row }) => (
          <span className="text-muted-foreground">{row.getValue("email")}</span>
        ),
      },
      {
        accessorKey: "phone",
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Phone" />
        ),
        cell: ({ row }) => (
          <span className="text-muted-foreground">{row.getValue("phone")}</span>
        ),
      },
      {
        accessorKey: "status",
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Status" />
        ),
        cell: ({ row }) => <LeadStatusBadge status={row.getValue("status")} />,
      },
      {
        accessorKey: "assignedUser",
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Assigned" />
        ),
        cell: ({ row }) => {
          const user = row.original.assignedUser
          if (!user) return <span className="text-muted-foreground/50">—</span>
          return (
            <div className="flex items-center gap-2">
              <Avatar className="h-6 w-6">
                <AvatarImage src={user.avatar} />
                <AvatarFallback>{user.name[0]}</AvatarFallback>
              </Avatar>
              <span className="text-muted-foreground text-sm">{user.name}</span>
            </div>
          )
        },
      },
      {
        accessorKey: "createdAt",
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Date Added" />
        ),
        cell: ({ row }) => (
          <span className="text-muted-foreground">
            {new Date(row.getValue("createdAt")).toLocaleDateString()}
          </span>
        ),
      },
      {
        id: "actions",
        cell: ({ row }) => <LeadActionsDropdown lead={row.original} />,
      },
    ],
    []
  )

  return (
    <DataTable
      columns={columns}
      data={data}
      loading={loading}
      emptyMessage="No leads found."
    />
  )
}