import { notFound } from "next/navigation";
import { MapPin, Clock, 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 TourDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const tourId = Number(id);

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

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

  if (!tour) {
    notFound();
  }

  const orderWhatsappNumber = siteSetting?.orderWhatsappNumber;
  
  const defaultMessage = `Halo Ranata Tour, saya tertarik dengan paket tour "[TITLE]" ([LOCATION]). Mohon info lebih lanjut.`;
  const messageText = await getWhatsappTemplateMessage("tour", defaultMessage, {
    TITLE: tour.title,
    LOCATION: tour.location,
    PRICE: tour.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">
          {tour.imageUrl ? (
            <img
              src={tour.imageUrl}
              alt={tour.title}
              className="h-full w-full object-cover"
            />
          ) : (
            <div className="flex h-full w-full items-center justify-center bg-bg-light text-sm text-muted">
              Tidak ada gambar
            </div>
          )}
          {tour.badge && (
            <span className="absolute left-4 top-4 rounded-full bg-merah-ranata px-3 py-1 text-xs font-semibold text-white">
              {tour.badge}
            </span>
          )}
        </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">
              {tour.title}
            </h1>
            <div className="mt-3 flex flex-wrap items-center gap-4 text-sm text-muted">
              {tour.location && (
                <span className="flex items-center gap-1">
                  <MapPin className="h-4 w-4" />
                  {tour.location}
                </span>
              )}
              {tour.duration && (
                <span className="flex items-center gap-1">
                  <Clock className="h-4 w-4" />
                  {tour.duration}
                </span>
              )}
            </div>
          </div>

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

        {tour.description ? (
          <p className="mt-8 whitespace-pre-line text-body">
            {tour.description}
          </p>
        ) : tour.excerpt ? (
          <p className="mt-8 text-body">{tour.excerpt}</p>
        ) : null}

        {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>
  );
}