// app/(student)/loans/page.tsx
import type { Metadata } from "next";
import { auth } from "@/lib/auth"
import { headers } from "next/headers"
import { prisma } from "@/lib/prisma"
import { redirect } from "next/navigation"
import { getPublicUrl } from "@/lib/utils/storage"
import { Badge } from "@/components/ui/badge"
import { BookOpen, Clock, CheckCircle, AlertCircle } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import ShareButton from "@/components/web/books/ShareButton"

export const metadata: Metadata = {
  title: "My Loans | E-Library",
  description: "View and manage your current and past library loans.",
};

const statusConfig = {
  ACTIVE: { label: "Active", icon: BookOpen, class: "bg-blue-500/10 text-blue-500 border-blue-500/20" },
  OVERDUE: { label: "Overdue", icon: AlertCircle, class: "bg-red-500/10 text-red-500 border-red-500/20" },
  RETURNED: { label: "Returned", icon: CheckCircle, class: "bg-green-500/10 text-green-500 border-green-500/20" },
}

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

  const loans = await prisma.loan.findMany({
    where: { userId: session.user.id },
    include: {
      book: {
        include: { digitalAsset: true }
      }
    },
    orderBy: { borrowedAt: "desc" }
  })

  return (
    <main className="w-full max-w-7xl mx-auto flex flex-col gap-4 items-start py-4 px-4 md:gap-6 md:py-6 md:px-6">
      <div className="w-full mt-40 md:mt-0 pt-20 md:pt-40">
        <h1 className="text-4xl font-bold mb-2">My Loans</h1>
        <p className="text-muted-foreground mb-8">Your full borrowing history</p>
      </div>

      {loans.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-24 gap-4">
          <BookOpen className="size-12 text-muted" />
          <p className="text-sm text-muted-foreground">You have not borrowed any books yet.</p>
        </div>
      ) : (
        <div className="w-full grid grid-cols-2 md:grid-cols-3 gap-4">
          {loans.map((loan) => {
            const config = statusConfig[loan.status]
            const StatusIcon = config.icon
            const isDigital = loan.book.digitalAsset !== null;
            const isOverdue = loan.dueDate < new Date() && loan.status === "ACTIVE"

            return (
              <div
                key={loan.id}
                className="flex gap-4 p-4 rounded-xl border border-border/40 bg-accent/30 hover:bg-accent/50 transition-colors"
              >
                {/* Cover */}
                <div className="relative w-16 h-24 shrink-0 rounded-lg overflow-hidden bg-muted">
                  {loan.book.coverImage ? (
                    <Image
                      src={getPublicUrl(loan.book.coverImage)}
                      alt={loan.book.title}
                      fill
                      className="object-cover"
                    />
                  ) : (
                    <div className="flex items-center justify-center h-full">
                      <BookOpen className="size-6 text-muted-foreground" />
                    </div>
                  )}
                </div>

                {/* Details */}
                <div className="flex-1 min-w-0">
                  <div className="flex items-start justify-between gap-2">
                    <div>
                      <h3 className="font-semibold text-sm leading-tight line-clamp-2">
                        {loan.book.title}
                      </h3>
                      <p className="text-xs text-muted-foreground mt-0.5">
                        {loan.book.author}
                      </p>
                    </div>
                    <Badge className={`shrink-0 text-xs ${config.class}`}>
                      <StatusIcon className="size-3 mr-1" />
                      {isOverdue ? "Overdue" : config.label}
                    </Badge>
                  </div>

                  <div className="flex items-center gap-3 mt-3 text-xs text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <Clock className="size-3" />
                      Due {new Date(loan.dueDate).toLocaleDateString()}
                    </span>
                    {loan.returnedAt && (
                      <span className="flex items-center gap-1">
                        <CheckCircle className="size-3" />
                        Returned {new Date(loan.returnedAt).toLocaleDateString()}
                      </span>
                    )}
                  </div>

                  <div className="flex items-center gap-2 mt-3">
                    {isDigital && loan.status !== "RETURNED" && (
                      <Link
                        href={`/read/${loan.bookId}`}
                        className="text-xs font-medium text-primary hover:underline"
                      >
                        Continue Reading →
                      </Link>
                    )}
                    <ShareButton bookId={loan.bookId} title={loan.book.title} />
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      )}
    </main>
  )
}