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

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

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

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

  const favorites = await prisma.favoriteVehicle.findMany({
    where: {userId: session.user.id},
    include: {vehicle: {include: {brand: true, tenant: true}}},
    orderBy: {createdAt: "desc"}
  });

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-slate-900">Saved Cars</h1>
        <p className="mt-1 text-slate-500">{favorites.length} saved vehicle{favorites.length !== 1 ? "s" : ""}</p>
      </div>

      {favorites.length === 0 ? (
        <div className="rounded-2xl border border-dashed border-slate-300 py-20 text-center">
          <Heart className="mx-auto h-12 w-12 text-slate-300" />
          <p className="mt-3 text-slate-500">No saved cars yet</p>
          <Link href="/cars" className="mt-4 inline-block">
            <Button size="sm">Browse Cars</Button>
          </Link>
        </div>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {favorites.map(({vehicle}) => (
            <Link key={vehicle.id} href={`/cars/${vehicle.slug}`}>
              <Card className="group overflow-hidden border-slate-200 transition hover:-translate-y-0.5 hover:shadow-md">
                <div className="relative h-40 overflow-hidden bg-slate-100">
                  {vehicle.primaryImageUrl ? (
                    <Image src={vehicle.primaryImageUrl} alt={vehicle.name} fill className="object-cover transition group-hover:scale-105" unoptimized />
                  ) : (
                    <div className="flex h-full items-center justify-center">
                      <Car className="h-12 w-12 text-slate-300" />
                    </div>
                  )}
                </div>
                <CardContent className="p-4">
                  <p className="text-xs text-blue-600 font-medium">{vehicle.brand.name}</p>
                  <p className="font-semibold text-slate-900">{vehicle.name}</p>
                  <div className="mt-2 flex items-center justify-between">
                    <p className="text-sm text-slate-500">{vehicle.tenant.name}</p>
                    <p className="font-bold text-slate-900">${Number(vehicle.dailyRate).toFixed(0)}/day</p>
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}