import type { Metadata } from "next";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { auth } from "@/lib/auth"
import { prisma } from "@/lib/prisma"
import { headers } from "next/headers"
import { redirect } from "next/navigation"
import { DataTable } from "./_components/data-table"
import { reservationColumns } from "./_components/reservations-columns"
import { columns } from "./_components/loans-columns"

export const metadata: Metadata = {
  title: "Loans & Reservations | Admin | E-Library",
  description: "Manage library loans and reservations in the admin portal.",
};

export default async function AdminLoansPage() {
  const session = await auth.api.getSession({ headers: await headers() })
  if (!session) redirect("/login")

  const user = await prisma.user.findUnique({ where: { id: session.user.id } })
  if (!user || (user.role !== "ADMIN" && user.role !== "STAFF")) redirect("/")

  const [loans, reservations] = await Promise.all([
    prisma.loan.findMany({
      include: {
        book: true,
        user: { select: { id: true, name: true, email: true, studentId: true } },
        physicalCopy: { select: { copyCode: true } },
        reservation: true,
      },
      orderBy: { borrowedAt: "desc" },
    }),
    prisma.reservation.findMany({
      include: {
        book: true,
        user: { select: { id: true, name: true, email: true, studentId: true } },
        physicalCopy: { select: { copyCode: true } },
      },
      orderBy: { reservedAt: "desc" },
    }),
  ])

  const pendingCount = reservations.filter(r => r.status === "PENDING").length

  return (
    <main className="flex-1 space-y-6 p-4 md:p-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Library Management</h1>
        <p className="text-muted-foreground">
          Manage loans and reservations
        </p>
      </div>

      <Tabs defaultValue="loans">
        <TabsList>
          <TabsTrigger value="loans">
            Loans
            <span className="ml-2 text-xs bg-muted px-1.5 py-0.5 rounded-full">
              {loans.length}
            </span>
          </TabsTrigger>
          <TabsTrigger value="reservations">
            Reservations
            {pendingCount > 0 && (
              <span className="ml-2 text-xs bg-destructive text-destructive-foreground px-1.5 py-0.5 rounded-full">
                {pendingCount}
              </span>
            )}
          </TabsTrigger>
        </TabsList>

        <TabsContent value="loans" className="mt-6">
          <DataTable columns={columns} data={loans} searchKey="book" />
        </TabsContent>

        <TabsContent value="reservations" className="mt-6">
          <DataTable columns={reservationColumns} data={reservations} searchKey="book" />
        </TabsContent>
      </Tabs>
    </main>
  )
}