"use client"

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

export type BookLoan = {
  id: string
  borrowedAt: Date
  dueDate: Date
  status: "ACTIVE" | "RETURNED" | "OVERDUE"
  user: { id: string; name: string | null; email: string } | null
}

const fmt = (d: Date) =>
  new Date(d).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })

export const bookLoanColumns: ColumnDef<BookLoan>[] = [
  {
    accessorKey: "user",
    header: "Borrower",
    filterFn: (row, _id, filterValue: string) => {
      const user = row.original.user
      if (!user) return false
      const q = filterValue.toLowerCase()
      return (
        (user.name?.toLowerCase().includes(q) ?? false) ||
        user.email.toLowerCase().includes(q)
      )
    },
    cell: ({ row }) => {
      const user = row.original.user
      return (
        <div className="space-y-0.5">
          <p className="font-medium">{user?.name ?? "—"}</p>
          <p className="text-xs text-muted-foreground">{user?.email}</p>
        </div>
      )
    },
  },
  {
    accessorKey: "borrowedAt",
    header: ({ column }) => (
      <Button
        variant="ghost"
        size="sm"
        className="-ml-3"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Borrowed
        <ArrowUpDown className="ml-2 h-3.5 w-3.5" />
      </Button>
    ),
    cell: ({ row }) => (
      <span className="text-muted-foreground text-sm">
        {fmt(row.original.borrowedAt)}
      </span>
    ),
  },
  {
    accessorKey: "dueDate",
    header: ({ column }) => (
      <Button
        variant="ghost"
        size="sm"
        className="-ml-3"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Due Date
        <ArrowUpDown className="ml-2 h-3.5 w-3.5" />
      </Button>
    ),
    cell: ({ row }) => {
      const dueDate = new Date(row.original.dueDate)
      const isOverdue = dueDate < new Date() && row.original.status === "ACTIVE"
      return (
        <div className={`flex items-center gap-1.5 text-sm ${isOverdue ? "text-red-600 font-medium" : "text-muted-foreground"}`}>
          {isOverdue && <AlertCircle className="h-3.5 w-3.5" />}
          {fmt(dueDate)}
        </div>
      )
    },
  },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => {
      const isOverdue =
        new Date(row.original.dueDate) < new Date() &&
        row.original.status === "ACTIVE"
      const display = isOverdue ? "OVERDUE" : row.original.status
      return (
        <Badge
          variant="outline"
          className={
            row.original.status === "RETURNED"
              ? "bg-green-100 text-green-700 border-green-200"
              : isOverdue
              ? "bg-red-100 text-red-700 border-red-200"
              : "bg-blue-100 text-blue-700 border-blue-200"
          }
        >
          {display}
        </Badge>
      )
    },
  },
]