"use client"

import { ColumnDef } from "@tanstack/react-table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ArrowUpDown } from "lucide-react"

export type PhysicalCopy = {
  id: string
  copyCode: string | null
  status: "AVAILABLE" | "ON_LOAN" | "RESERVED"
}

const statusStyles = {
  AVAILABLE: "bg-green-100 text-green-700 border-green-200",
  ON_LOAN:   "bg-red-100 text-red-700 border-red-200",
  RESERVED:  "bg-yellow-100 text-yellow-700 border-yellow-200",
}

export const bookCopiesColumns: ColumnDef<PhysicalCopy>[] = [
  {
    accessorKey: "copyCode",
    header: "Copy Code",
    filterFn: (row, _id, filterValue: string) =>
      (row.original.copyCode ?? row.original.id.slice(-6))
        .toLowerCase()
        .includes(filterValue.toLowerCase()),
    cell: ({ row }) => (
      <span className="font-mono text-sm">
        {row.original.copyCode ?? row.original.id.slice(-6)}
      </span>
    ),
  },
  {
    accessorKey: "status",
    header: ({ column }) => (
      <Button
        variant="ghost"
        size="sm"
        className="-ml-3"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Status
        <ArrowUpDown className="ml-2 h-3.5 w-3.5" />
      </Button>
    ),
    cell: ({ row }) => (
      <Badge variant="outline" className={statusStyles[row.original.status]}>
        {row.original.status.replace("_", " ")}
      </Badge>
    ),
  },
]