import Link from "next/link";
import {redirect} from "next/navigation";
import {auth} from "@/auth";
import {prisma} from "@/lib/db/prisma";
import {Card, CardContent} from "@/components/ui/card";
import {Badge} from "@/components/ui/badge";
import {Button} from "@/components/ui/button";
import {Car, Calendar} from "lucide-react";

type AccountBookingsPageProps = {
  params: Promise<{locale: string}>;
};

const statusColors: Record<string, string> = {
  DRAFT: "bg-slate-100 text-slate-600",
  PENDING_APPROVAL: "bg-yellow-100 text-yellow-700",
  PENDING_PAYMENT: "bg-orange-100 text-orange-700",
  CONFIRMED: "bg-blue-100 text-blue-700",
  ACTIVE: "bg-green-100 text-green-700",
  COMPLETED: "bg-slate-100 text-slate-600",
  CANCELLED: "bg-red-100 text-red-700",
  REJECTED: "bg-red-100 text-red-700",
  NO_SHOW: "bg-gray-100 text-gray-600"
};

export default async function AccountBookingsPage({params}: AccountBookingsPageProps) {
  const {locale} = await params;
  const session = await auth();

  if (!session?.user?.id) {
    redirect(`/${locale}/auth/sign-in`);
  }

  const bookings = await prisma.booking.findMany({
    where: {customerUserId: session.user.id},
    include: {vehicle: {include: {brand: true}}, tenant: true, pickupBranch: true},
    orderBy: {createdAt: "desc"}
  });

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-slate-900">My Bookings</h1>
        <p className="mt-1 text-slate-500">{bookings.length} booking{bookings.length !== 1 ? "s" : ""} total</p>
      </div>

      {bookings.length === 0 ? (
        <div className="rounded-2xl border border-dashed border-slate-300 py-20 text-center">
          <Calendar className="mx-auto h-12 w-12 text-slate-300" />
          <p className="mt-3 text-slate-500">No bookings yet</p>
          <Link href="/cars" className="mt-4 inline-block">
            <Button size="sm">Browse Cars</Button>
          </Link>
        </div>
      ) : (
        <div className="space-y-4">
          {bookings.map((booking) => (
            <Link key={booking.id} href={`/bookings/${booking.bookingNumber}`}>
              <Card className="border-slate-200 transition hover:border-blue-200 hover:shadow-sm">
                <CardContent className="p-4">
                  <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div className="flex items-center gap-4">
                      <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-blue-50">
                        <Car className="h-6 w-6 text-blue-600" />
                      </div>
                      <div>
                        <p className="font-semibold text-slate-900">{booking.vehicle.brand.name} {booking.vehicle.name}</p>
                        <p className="text-sm text-slate-500">{booking.tenant.name}</p>
                        <p className="mt-0.5 font-mono text-xs text-slate-400">{booking.bookingNumber}</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-3">
                      <div className="text-sm text-slate-500">
                        <p>{new Date(booking.pickupAt).toLocaleDateString()} →</p>
                        <p>{new Date(booking.dropoffAt).toLocaleDateString()}</p>
                      </div>
                      <span className={`rounded-full px-2.5 py-1 text-xs font-medium ${statusColors[booking.status] ?? "bg-slate-100 text-slate-600"}`}>
                        {booking.status.replace(/_/g, " ")}
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}