"use client"

import { ColumnDef } from "@tanstack/react-table"
import { Badge } from "@/components/ui/badge"
import { Clock } from "lucide-react"
import ReservationActions from "@/components/web/admin/ReservationActions"

export type ReservationWithRelations = {
  id: string
  reservedAt: Date
  expiresAt: Date
  status: "PENDING" | "FULFILLED" | "CANCELLED"
  physicalCopyId?: string | null
  physicalCopy?: { copyCode: string | null } | null
  user: { id: string; name: string | null; email: string; studentId: string | null }
  book: { id: string; title: string; author: string }
}

const statusStyles = {
  PENDING:   "bg-yellow-100 text-yellow-700 border-yellow-200",
  FULFILLED: "bg-green-100 text-green-700 border-green-200",
  CANCELLED: "bg-muted text-muted-foreground border-border",
}

export const reservationColumns: ColumnDef<ReservationWithRelations>[] = [
  {
    accessorKey: "student",
    header: "Student",
    cell: ({ row }) => {
      const user = row.original.user
      return (
        <div className="space-y-1">
          <p className="font-medium">{user.name ?? "—"}</p>
          <p className="text-xs text-muted-foreground">
            {user.studentId ?? user.email}
          </p>
        </div>
      )
    },
  },
  {
    accessorKey: "book",
    header: "Book",
    filterFn: (row, _columnId, filterValue: string) => {
      const book = row.original.book
      const q = filterValue.toLowerCase()
      return (
        book.title.toLowerCase().includes(q) ||
        book.author.toLowerCase().includes(q)
      )
    },
    cell: ({ row }) => {
      const book = row.original.book
      return (
        <div className="space-y-1">
          <p className="font-medium line-clamp-1">{book.title}</p>
          <p className="text-xs text-muted-foreground">{book.author}</p>
        </div>
      )
    },
  },
  {
    id: "copy",
    header: "Copy",
    cell: ({ row }) => (
      <span className="font-mono text-amber-600 text-sm">
        {row.original.physicalCopy?.copyCode ?? "—"}
      </span>
    ),
  },
  {
    accessorKey: "reservedAt",
    header: "Reserved",
    cell: ({ row }) => (
      <span className="text-muted-foreground text-sm">
        {new Date(row.original.reservedAt).toLocaleDateString()}
      </span>
    ),
  },
  {
    accessorKey: "expiresAt",
    header: "Expires",
    cell: ({ row }) => {
      const expired = new Date(row.original.expiresAt) < new Date()
        && row.original.status === "PENDING"
      return (
        <div className={`flex items-center gap-1.5 text-sm ${expired ? "text-red-600 font-medium" : "text-muted-foreground"}`}>
          {expired && <Clock className="size-3.5" />}
          {new Date(row.original.expiresAt).toLocaleDateString()}
        </div>
      )
    },
  },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
      <Badge variant="outline" className={statusStyles[row.original.status]}>
        {row.original.status}
      </Badge>
    ),
  },
  {
    id: "actions",
    header: "Actions",
    cell: ({ row }) => (
      <ReservationActions
        reservationId={row.original.id}
        bookId={row.original.book.id}
        userId={row.original.user.id}
        physicalCopyId={row.original.physicalCopyId ?? null}
        status={row.original.status}
      />
    ),
  },
]