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

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

const statusColors: Record<string, string> = {
  DRAFT: "bg-slate-100 text-slate-700",
  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-700"
};

const statusLabel: Record<string, string> = {
  DRAFT: "Draft",
  PENDING_APPROVAL: "Pending Approval",
  PENDING_PAYMENT: "Pending Payment",
  CONFIRMED: "Confirmed",
  ACTIVE: "Active",
  COMPLETED: "Completed",
  CANCELLED: "Cancelled",
  REJECTED: "Rejected",
  NO_SHOW: "No Show"
};

export default async function BookingDetailsPage({params}: BookingDetailsPageProps) {
  const {bookingNumber, locale} = await params;
  const session = await auth();

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

  const booking = await prisma.booking.findFirst({
    where: {bookingNumber, customerUserId: session.user.id},
    include: {
      vehicle: {include: {brand: true}},
      pickupBranch: true,
      dropoffBranch: true,
      tenant: true
    }
  });

  if (!booking) notFound();

  return (
    <div className="mx-auto max-w-3xl px-6 py-10">
      <div className="mb-6 flex items-center gap-3">
        <Link href="/account/bookings">
          <Button variant="ghost" size="sm">
            <ArrowLeft className="mr-1 h-4 w-4" />
            My Bookings
          </Button>
        </Link>
      </div>

      <div className="mb-6 flex items-start justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Booking Details</h1>
          <p className="mt-1 font-mono text-sm text-slate-500">{booking.bookingNumber}</p>
        </div>
        <span className={`rounded-full px-3 py-1 text-sm font-medium ${statusColors[booking.status] ?? "bg-slate-100"}`}>
          {statusLabel[booking.status] ?? booking.status}
        </span>
      </div>

      <div className="space-y-5">
        {/* Vehicle */}
        <Card>
          <CardHeader><CardTitle className="flex items-center gap-2"><Car className="h-5 w-5 text-blue-600" />Vehicle</CardTitle></CardHeader>
          <CardContent>
            <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>
          </CardContent>
        </Card>

        {/* Dates */}
        <Card>
          <CardHeader><CardTitle className="flex items-center gap-2"><Calendar className="h-5 w-5 text-blue-600" />Rental Period</CardTitle></CardHeader>
          <CardContent>
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <p className="text-sm text-slate-500">Pickup</p>
                <p className="font-semibold">{new Date(booking.pickupAt).toLocaleDateString()}</p>
                <p className="text-sm text-slate-500">{booking.pickupBranch.name}</p>
              </div>
              <div>
                <p className="text-sm text-slate-500">Return</p>
                <p className="font-semibold">{new Date(booking.dropoffAt).toLocaleDateString()}</p>
                <p className="text-sm text-slate-500">{booking.dropoffBranch.name}</p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Pricing */}
        <Card>
          <CardHeader><CardTitle className="flex items-center gap-2"><DollarSign className="h-5 w-5 text-blue-600" />Pricing</CardTitle></CardHeader>
          <CardContent className="space-y-3 text-sm">
            <div className="flex justify-between"><span className="text-slate-600">Daily Rate</span><span>${Number(booking.dailyRate).toFixed(2)}</span></div>
            <div className="flex justify-between"><span className="text-slate-600">Rental Days</span><span>{Number(booking.rentalDays)} days</span></div>
            <div className="flex justify-between"><span className="text-slate-600">Subtotal</span><span>${Number(booking.subtotal).toFixed(2)}</span></div>
            <div className="flex justify-between"><span className="text-slate-600">Security Deposit</span><span>${Number(booking.depositAmount).toFixed(2)}</span></div>
            <hr className="border-slate-100" />
            <div className="flex justify-between text-base font-bold text-slate-900">
              <span>Total</span>
              <span>${Number(booking.totalAmount).toFixed(2)} {booking.currency}</span>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}