import Link from "next/link";
import Image from "next/image";
import {getTranslations} from "next-intl/server";
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, Fuel, Users, Settings2} from "lucide-react";

type CarsPageProps = {
  searchParams: Promise<{
    category?: string;
    transmission?: string;
    fuel?: string;
    sort?: string;
    page?: string;
  }>;
};

const PAGE_SIZE = 12;

export default async function CarsPage({searchParams}: CarsPageProps) {
  const t = await getTranslations("cars");
  const params = await searchParams;
  const page = Math.max(1, Number(params.page ?? 1));

  const where = {
    isPublic: true,
    status: "AVAILABLE" as const,
    ...(params.category && params.category !== "all" ? {category: params.category as "ECONOMY" | "SEDAN" | "SUV" | "LUXURY" | "SPORT" | "VAN" | "PICKUP"} : {}),
    ...(params.transmission && params.transmission !== "all" ? {transmission: params.transmission as "AUTOMATIC" | "MANUAL"} : {}),
    ...(params.fuel && params.fuel !== "all" ? {fuelType: params.fuel as "PETROL" | "DIESEL" | "HYBRID" | "ELECTRIC"} : {})
  };

  const orderBy = params.sort === "price_asc"
    ? {dailyRate: "asc" as const}
    : params.sort === "price_desc"
    ? {dailyRate: "desc" as const}
    : {createdAt: "desc" as const};

  const [vehicles, total] = await Promise.all([
    prisma.vehicle.findMany({
      where,
      include: {brand: true, model: true, tenant: true},
      orderBy,
      skip: (page - 1) * PAGE_SIZE,
      take: PAGE_SIZE
    }),
    prisma.vehicle.count({where})
  ]);

  const totalPages = Math.ceil(total / PAGE_SIZE);

  const categories = ["ECONOMY", "SEDAN", "SUV", "LUXURY", "SPORT", "VAN", "PICKUP"];
  const transmissions = ["AUTOMATIC", "MANUAL"];
  const fuelTypes = ["PETROL", "DIESEL", "HYBRID", "ELECTRIC"];

  function buildFilterUrl(key: string, value: string) {
    const sp = new URLSearchParams();
    if (params.category) sp.set("category", params.category);
    if (params.transmission) sp.set("transmission", params.transmission);
    if (params.fuel) sp.set("fuel", params.fuel);
    if (params.sort) sp.set("sort", params.sort);
    sp.set(key, value);
    sp.delete("page");
    return `/cars?${sp.toString()}`;
  }

  function buildPageUrl(p: number) {
    const sp = new URLSearchParams();
    if (params.category) sp.set("category", params.category);
    if (params.transmission) sp.set("transmission", params.transmission);
    if (params.fuel) sp.set("fuel", params.fuel);
    if (params.sort) sp.set("sort", params.sort);
    sp.set("page", String(p));
    return `/cars?${sp.toString()}`;
  }

  const categoryLabel: Record<string, string> = {
    ECONOMY: t("card.economy"), SEDAN: t("card.sedan"), SUV: t("card.suv"),
    LUXURY: t("card.luxury"), SPORT: t("card.sport"), VAN: t("card.van"), PICKUP: t("card.pickup")
  };

  const fuelLabel: Record<string, string> = {
    PETROL: t("card.petrol"), DIESEL: t("card.diesel"), HYBRID: t("card.hybrid"), ELECTRIC: t("card.electric")
  };

  const activeFilterClass = "bg-indigo-50 text-indigo-700 font-semibold";
  const inactiveFilterClass = "text-gray-600 hover:bg-gray-50";

  return (
    <div className="mx-auto max-w-7xl px-6 py-10">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">{t("title")}</h1>
        <p className="mt-2 text-gray-500">{t("subtitle")}</p>
      </div>

      <div className="flex flex-col gap-8 lg:flex-row">
        {/* Filters Sidebar */}
        <aside className="lg:w-64 shrink-0">
          <div className="rounded-xl border border-gray-100 bg-white p-5 shadow-sm sticky top-20">
            <h2 className="mb-5 font-semibold text-gray-900 text-base">{t("filters.title")}</h2>

            {/* Category Filter */}
            <div className="mb-5">
              <h3 className="mb-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wide">{t("filters.category")}</h3>
              <div className="space-y-0.5">
                <Link href={buildFilterUrl("category", "all")} className={`block rounded-lg px-3 py-2 text-sm transition-colors ${!params.category || params.category === "all" ? activeFilterClass : inactiveFilterClass}`}>
                  All Categories
                </Link>
                {categories.map((cat) => (
                  <Link key={cat} href={buildFilterUrl("category", cat)} className={`block rounded-lg px-3 py-2 text-sm transition-colors ${params.category === cat ? activeFilterClass : inactiveFilterClass}`}>
                    {categoryLabel[cat]}
                  </Link>
                ))}
              </div>
            </div>

            {/* Transmission Filter */}
            <div className="mb-5">
              <h3 className="mb-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wide">{t("filters.transmission")}</h3>
              <div className="space-y-0.5">
                <Link href={buildFilterUrl("transmission", "all")} className={`block rounded-lg px-3 py-2 text-sm transition-colors ${!params.transmission || params.transmission === "all" ? activeFilterClass : inactiveFilterClass}`}>
                  All
                </Link>
                {transmissions.map((t_) => (
                  <Link key={t_} href={buildFilterUrl("transmission", t_)} className={`block rounded-lg px-3 py-2 text-sm transition-colors ${params.transmission === t_ ? activeFilterClass : inactiveFilterClass}`}>
                    {t_ === "AUTOMATIC" ? "Automatic" : "Manual"}
                  </Link>
                ))}
              </div>
            </div>

            {/* Fuel Filter */}
            <div className="mb-5">
              <h3 className="mb-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wide">{t("filters.fuel")}</h3>
              <div className="space-y-0.5">
                <Link href={buildFilterUrl("fuel", "all")} className={`block rounded-lg px-3 py-2 text-sm transition-colors ${!params.fuel || params.fuel === "all" ? activeFilterClass : inactiveFilterClass}`}>
                  All
                </Link>
                {fuelTypes.map((f) => (
                  <Link key={f} href={buildFilterUrl("fuel", f)} className={`block rounded-lg px-3 py-2 text-sm transition-colors ${params.fuel === f ? activeFilterClass : inactiveFilterClass}`}>
                    {fuelLabel[f]}
                  </Link>
                ))}
              </div>
            </div>

            <Link href="/cars">
              <Button variant="outline" className="w-full text-sm rounded-lg border-gray-200 text-gray-600 hover:bg-gray-50">{t("filters.resetFilters")}</Button>
            </Link>
          </div>
        </aside>

        {/* Cars Grid */}
        <div className="flex-1">
          {/* Sort Bar */}
          <div className="mb-6 flex items-center justify-between">
            <p className="text-sm text-gray-500">
              <span className="font-semibold text-gray-900">{total}</span> vehicles found
            </p>
            <div className="flex items-center gap-2">
              <span className="text-sm text-gray-500">{t("sort.label")}:</span>
              <div className="flex gap-1.5">
                {[
                  {value: "newest", label: "Newest"},
                  {value: "price_asc", label: "Price ↑"},
                  {value: "price_desc", label: "Price ↓"}
                ].map((s) => (
                  <Link key={s.value} href={buildFilterUrl("sort", s.value)}>
                    <button className={`rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${params.sort === s.value || (!params.sort && s.value === "newest") ? "border-indigo-200 bg-indigo-50 text-indigo-700" : "border-gray-200 text-gray-600 hover:border-gray-300 bg-white"}`}>
                      {s.label}
                    </button>
                  </Link>
                ))}
              </div>
            </div>
          </div>

          {vehicles.length === 0 ? (
            <div className="rounded-2xl border border-dashed border-gray-200 py-20 text-center bg-white">
              <Car className="mx-auto h-12 w-12 text-gray-300" />
              <p className="mt-3 text-gray-500 font-medium">No vehicles found</p>
              <p className="mt-1 text-sm text-gray-400">{t("filters.resetFilters")}</p>
            </div>
          ) : (
            <div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
              {vehicles.map((vehicle) => (
                <Link key={vehicle.id} href={`/cars/${vehicle.slug}`}>
                  <Card className="group overflow-hidden rounded-xl border-gray-100 shadow-sm transition-all duration-200 hover:-translate-y-1 hover:shadow-lg hover:shadow-gray-200/80">
                    <div className="relative h-44 overflow-hidden bg-gray-100">
                      {vehicle.primaryImageUrl ? (
                        <Image src={vehicle.primaryImageUrl} alt={vehicle.name} fill className="object-cover transition-transform duration-300 group-hover:scale-105" unoptimized />
                      ) : (
                        <div className="flex h-full items-center justify-center bg-gradient-to-br from-indigo-50 to-gray-50">
                          <Car className="h-14 w-14 text-indigo-200" />
                        </div>
                      )}
                      <Badge className="absolute start-2 top-2 text-xs capitalize bg-white text-gray-700 border border-gray-200 shadow-sm font-medium">
                        {categoryLabel[vehicle.category]}
                      </Badge>
                    </div>
                    <CardContent className="p-4">
                      <div className="flex items-start justify-between gap-2">
                        <div className="min-w-0">
                          <p className="text-xs font-semibold text-indigo-600 uppercase tracking-wide">{vehicle.brand.name} · {vehicle.year}</p>
                          <h3 className="truncate font-semibold text-gray-900 mt-0.5">{vehicle.name}</h3>
                        </div>
                        <div className="shrink-0 text-end">
                          <p className="text-xl font-bold text-gray-900">${Number(vehicle.dailyRate).toFixed(0)}</p>
                          <p className="text-xs text-gray-400">{t("card.perDay")}</p>
                        </div>
                      </div>
                      <div className="mt-3 flex flex-wrap gap-2 text-xs text-gray-500">
                        <span className="flex items-center gap-1 bg-gray-50 rounded-full px-2.5 py-0.5"><Users className="h-3.5 w-3.5" />{vehicle.seats}</span>
                        <span className="flex items-center gap-1 bg-gray-50 rounded-full px-2.5 py-0.5"><Settings2 className="h-3.5 w-3.5" />{vehicle.transmission === "AUTOMATIC" ? "Auto" : "Manual"}</span>
                        <span className="flex items-center gap-1 bg-gray-50 rounded-full px-2.5 py-0.5"><Fuel className="h-3.5 w-3.5" />{fuelLabel[vehicle.fuelType]}</span>
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>
          )}

          {/* Pagination */}
          {totalPages > 1 && (
            <div className="mt-10 flex items-center justify-center gap-2">
              {page > 1 && (
                <Link href={buildPageUrl(page - 1)}>
                  <Button variant="outline" size="sm" className="rounded-lg border-gray-200">Previous</Button>
                </Link>
              )}
              {Array.from({length: Math.min(5, totalPages)}, (_, i) => {
                const p = Math.max(1, Math.min(totalPages - 4, page - 2)) + i;
                return (
                  <Link key={p} href={buildPageUrl(p)}>
                    <Button
                      variant={p === page ? "default" : "outline"}
                      size="sm"
                      className={`w-9 rounded-lg ${p === page ? "bg-indigo-600 hover:bg-indigo-700 border-indigo-600" : "border-gray-200"}`}
                    >
                      {p}
                    </Button>
                  </Link>
                );
              })}
              {page < totalPages && (
                <Link href={buildPageUrl(page + 1)}>
                  <Button variant="outline" size="sm" className="rounded-lg border-gray-200">Next</Button>
                </Link>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}