import {notFound} from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import {getTranslations} from "next-intl/server";
import {prisma} from "@/lib/db/prisma";
import {Badge} from "@/components/ui/badge";
import {Button} from "@/components/ui/button";
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {Car, MapPin, Fuel, Users, Settings2, Check, X, Building2, Calendar} from "lucide-react";

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

export async function generateMetadata({params}: CarDetailsPageProps) {
  const {slug} = await params;
  const vehicle = await prisma.vehicle.findFirst({where: {slug, isPublic: true}});
  return {
    title: vehicle ? `${vehicle.name} - Car Rental` : "Car Not Found"
  };
}

export default async function CarDetailsPage({params}: CarDetailsPageProps) {
  const {slug, locale} = await params;
  const t = await getTranslations("cars.details");

  const vehicle = await prisma.vehicle.findFirst({
    where: {slug, isPublic: true},
    include: {
      brand: true,
      model: true,
      tenant: {include: {branches: {where: {isActive: true}}}},
      branch: true,
      images: {orderBy: {sortOrder: "asc"}}
    }
  });

  if (!vehicle) notFound();

  const isAr = locale === "ar";
  const description = isAr ? vehicle.descriptionAr : vehicle.descriptionEn;

  const allImages = [
    ...(vehicle.primaryImageUrl ? [{fileUrl: vehicle.primaryImageUrl, id: "primary"}] : []),
    ...vehicle.images.filter((img) => img.fileUrl !== vehicle.primaryImageUrl)
  ];

  const categoryLabel: Record<string, string> = {
    ECONOMY: "Economy", SEDAN: "Sedan", SUV: "SUV",
    LUXURY: "Luxury", SPORT: "Sport", VAN: "Van", PICKUP: "Pickup"
  };

  const fuelLabel: Record<string, string> = {
    PETROL: "Petrol", DIESEL: "Diesel", HYBRID: "Hybrid", ELECTRIC: "Electric"
  };

  return (
    <div className="mx-auto max-w-7xl px-6 py-10">
      <div className="mb-6">
        <nav className="flex items-center gap-2 text-sm text-slate-500">
          <Link href="/" className="hover:text-slate-700">Home</Link>
          <span>/</span>
          <Link href="/cars" className="hover:text-slate-700">Cars</Link>
          <span>/</span>
          <span className="text-slate-900">{vehicle.name}</span>
        </nav>
      </div>

      <div className="grid gap-8 lg:grid-cols-3">
        {/* Left: Images + Details */}
        <div className="lg:col-span-2 space-y-6">
          {/* Image Gallery */}
          <div className="overflow-hidden rounded-2xl border border-slate-200 bg-slate-100">
            {allImages.length > 0 ? (
              <div>
                <div className="relative h-72 sm:h-96">
                  <Image
                    src={allImages[0].fileUrl}
                    alt={vehicle.name}
                    fill
                    className="object-cover"
                    unoptimized
                    priority
                  />
                  <div className="absolute start-4 top-4 flex gap-2">
                    <Badge className="bg-blue-600 text-white">{categoryLabel[vehicle.category]}</Badge>
                    {vehicle.featured && <Badge className="bg-yellow-500 text-white">Featured</Badge>}
                  </div>
                </div>
                {allImages.length > 1 && (
                  <div className="flex gap-2 overflow-x-auto p-3">
                    {allImages.slice(1, 6).map((img) => (
                      <div key={img.id} className="relative h-20 w-28 shrink-0 overflow-hidden rounded-lg border border-slate-200 bg-slate-50">
                        <Image src={img.fileUrl} alt={vehicle.name} fill className="object-cover" unoptimized />
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ) : (
              <div className="flex h-72 items-center justify-center">
                <Car className="h-24 w-24 text-slate-300" />
              </div>
            )}
          </div>

          {/* Title */}
          <div>
            <div className="flex items-start justify-between gap-4">
              <div>
                <p className="text-sm font-medium text-blue-600">{vehicle.brand.name} · {vehicle.year}</p>
                <h1 className="text-3xl font-bold text-slate-900">{vehicle.name}</h1>
              </div>
              <div className="text-end">
                <p className="text-3xl font-bold text-slate-900">${Number(vehicle.dailyRate).toFixed(0)}</p>
                <p className="text-sm text-slate-500">{t("dailyRate")}</p>
              </div>
            </div>
          </div>

          {/* Specs */}
          <Card>
            <CardHeader><CardTitle>{t("specs")}</CardTitle></CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
                {[
                  {icon: Calendar, label: t("year"), value: vehicle.year},
                  {icon: Users, label: t("seats"), value: `${vehicle.seats}`},
                  {icon: Settings2, label: t("transmission"), value: vehicle.transmission === "AUTOMATIC" ? "Automatic" : "Manual"},
                  {icon: Fuel, label: t("fuelType"), value: fuelLabel[vehicle.fuelType]},
                  ...(vehicle.doors ? [{icon: Car, label: t("doors"), value: `${vehicle.doors}`}] : []),
                  ...(vehicle.color ? [{icon: Car, label: t("color"), value: vehicle.color}] : []),
                  ...(vehicle.bags ? [{icon: Car, label: t("bags"), value: `${vehicle.bags}`}] : [])
                ].map(({icon: Icon, label, value}) => (
                  <div key={label} className="flex items-center gap-3 rounded-xl bg-slate-50 p-3">
                    <Icon className="h-5 w-5 text-blue-600 shrink-0" />
                    <div>
                      <p className="text-xs text-slate-500">{label}</p>
                      <p className="font-semibold text-slate-900">{value}</p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Features */}
          <Card>
            <CardHeader><CardTitle>{t("features")}</CardTitle></CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
                {[
                  {label: t("ac"), value: vehicle.airConditioning},
                  {label: t("gps"), value: vehicle.hasGps},
                  {label: t("bluetooth"), value: vehicle.hasBluetooth},
                  {label: t("insurance"), value: vehicle.insuranceIncluded}
                ].map(({label, value}) => (
                  <div key={label} className={`flex items-center gap-2 rounded-xl border p-3 text-sm ${value ? "border-green-200 bg-green-50 text-green-700" : "border-slate-200 bg-slate-50 text-slate-400"}`}>
                    {value ? <Check className="h-4 w-4 text-green-600" /> : <X className="h-4 w-4 text-slate-400" />}
                    {label}
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Description */}
          {description && (
            <Card>
              <CardHeader><CardTitle>{t("description")}</CardTitle></CardHeader>
              <CardContent>
                <p className="text-slate-600 leading-relaxed">{description}</p>
              </CardContent>
            </Card>
          )}

          {/* Company Info */}
          <Card>
            <CardHeader><CardTitle>{t("company")}</CardTitle></CardHeader>
            <CardContent>
              <div className="flex items-center gap-4">
                {vehicle.tenant.logoUrl ? (
                  <Image src={vehicle.tenant.logoUrl} alt={vehicle.tenant.name} width={64} height={64} className="rounded-xl object-contain border border-slate-200" unoptimized />
                ) : (
                  <div className="flex h-16 w-16 items-center justify-center rounded-xl border border-slate-200 bg-slate-50">
                    <Building2 className="h-8 w-8 text-slate-400" />
                  </div>
                )}
                <div>
                  <h3 className="font-semibold text-slate-900">{vehicle.tenant.name}</h3>
                  {vehicle.tenant.city && (
                    <div className="mt-1 flex items-center gap-1 text-sm text-slate-500">
                      <MapPin className="h-4 w-4" />
                      {vehicle.tenant.city}
                    </div>
                  )}
                  <Link href={`/companies/${vehicle.tenant.slug}`} className="mt-2 text-sm text-blue-600 hover:underline">
                    View Company
                  </Link>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Right: Booking Panel */}
        <div className="space-y-4">
          <div className="sticky top-24">
            <Card className="overflow-hidden">
              <div className="bg-blue-600 p-5 text-white">
                <p className="text-sm text-blue-100">{t("dailyRate")}</p>
                <p className="text-4xl font-bold">${Number(vehicle.dailyRate).toFixed(0)}<span className="text-base font-normal text-blue-200">/day</span></p>
              </div>
              <CardContent className="p-5 space-y-4">
                {vehicle.weeklyRate && (
                  <div className="flex justify-between text-sm">
                    <span className="text-slate-600">{t("weeklyRate")}</span>
                    <span className="font-semibold text-slate-900">${Number(vehicle.weeklyRate).toFixed(0)}/wk</span>
                  </div>
                )}
                {vehicle.monthlyRate && (
                  <div className="flex justify-between text-sm">
                    <span className="text-slate-600">{t("monthlyRate")}</span>
                    <span className="font-semibold text-slate-900">${Number(vehicle.monthlyRate).toFixed(0)}/mo</span>
                  </div>
                )}
                <div className="flex justify-between text-sm">
                  <span className="text-slate-600">{t("deposit")}</span>
                  <span className="font-semibold text-slate-900">${Number(vehicle.depositAmount).toFixed(0)}</span>
                </div>
                <hr className="border-slate-100" />
                <Link href={`/bookings/new?vehicleId=${vehicle.id}`} className="block">
                  <Button className="w-full bg-blue-600 py-3 text-base font-semibold hover:bg-blue-700" size="lg">
                    {t("bookNow")}
                  </Button>
                </Link>
                <p className="text-center text-xs text-slate-500">No credit card required to reserve</p>
              </CardContent>
            </Card>

            {/* Branch Info */}
            <Card className="mt-4">
              <CardContent className="p-4">
                <div className="flex items-center gap-2 text-sm font-medium text-slate-700 mb-2">
                  <MapPin className="h-4 w-4 text-blue-600" />
                  Available at
                </div>
                <p className="text-sm text-slate-600">{vehicle.branch.name}</p>
                {vehicle.branch.city && <p className="text-xs text-slate-500 mt-0.5">{vehicle.branch.city}</p>}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
}