import { notFound } from "next/navigation";
import { Car, Users, MessageCircle } from "lucide-react";
import { getSiteSettings } from "@/lib/site-settings";
import { prisma } from "@/lib/prisma";
import { buildWhatsAppUrl } from "@/lib/whatsapp";

import { getWhatsappTemplateMessage } from "@/lib/whatsapp-template";

export default async function CarRentalDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const carRentalId = Number(id);

  if (Number.isNaN(carRentalId)) {
    notFound();
  }

  const [carRental, siteSetting] = await Promise.all([
    prisma.carRental.findUnique({ where: { id: carRentalId } }),
    getSiteSettings(),
  ]);

  if (!carRental) {
    notFound();
  }

  const orderWhatsappNumber = siteSetting?.orderWhatsappNumber;
  
  const defaultMessage = `Halo Ranata Tour, saya tertarik memesan Rental Mobil [TITLE]. Mohon info lebih lanjut.`;
  const messageText = await getWhatsappTemplateMessage("car-rental", defaultMessage, {
    TITLE: carRental.name,
    CAPACITY: carRental.capacity,
    PRICE: carRental.price,
  });

  const whatsappUrl = orderWhatsappNumber
    ? buildWhatsAppUrl(orderWhatsappNumber, messageText)
    : null;

  return (
    <section className="bg-bg-white py-24">
      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
        <div className="relative aspect-[16/9] overflow-hidden rounded-2xl">
          {carRental.imageUrl ? (
            <img
              src={carRental.imageUrl}
              alt={carRental.name}
              className="h-full w-full object-cover"
            />
          ) : (
            <div className="flex h-full w-full items-center justify-center bg-gray-50 text-sm text-gray-400">
              Tidak ada gambar
            </div>
          )}
        </div>

        <div className="mt-8 flex flex-wrap items-start justify-between gap-6">
          <div>
            <h1 className="text-3xl font-semibold text-heading md:text-4xl">
              {carRental.name}
            </h1>
            <div className="mt-3 flex flex-wrap items-center gap-4 text-sm text-muted">
              {carRental.type && (
                <span className="flex items-center gap-1">
                  <Car className="h-4 w-4" />
                  {carRental.type}
                </span>
              )}
              {carRental.capacity && (
                <span className="flex items-center gap-1">
                  <Users className="h-4 w-4" />
                  {carRental.capacity}
                </span>
              )}
              <span className={`px-2 py-1 rounded-full text-xs ${carRental.includeDriver ? 'bg-green-50 text-green-600' : 'bg-gray-100 text-gray-600'}`}>
                {carRental.includeDriver ? 'Termasuk Supir' : 'Lepas Kunci'}
              </span>
            </div>
          </div>

          {carRental.price && (
            <p className="text-2xl font-semibold text-merah-ranata">
              {carRental.price}
            </p>
          )}
        </div>

        {carRental.description && (
          <p className="mt-8 whitespace-pre-line text-body">
            {carRental.description}
          </p>
        )}

        {whatsappUrl && (
          <a
            href={whatsappUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="mt-10 inline-flex items-center gap-2 rounded-full bg-merah-ranata px-6 py-3 text-sm font-semibold text-white transition hover:bg-merah-hover"
          >
            <MessageCircle className="h-5 w-5" />
            Pesan Sekarang
          </a>
        )}
      </div>
    </section>
  );
}