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

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

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

  if (!flight) {
    notFound();
  }

  const orderWhatsappNumber = siteSetting?.orderWhatsappNumber;

  const defaultMessage = `Halo Ranata Tour, saya tertarik memesan tiket pesawat [AIRLINE] rute [LOCATION]. Mohon info lebih lanjut.`;
  const messageText = await getWhatsappTemplateMessage("flight", defaultMessage, {
    TITLE: flight.airline,
    AIRLINE: flight.airline,
    LOCATION: `${flight.origin} - ${flight.destination}`,
    PRICE: flight.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">
          {flight.imageUrl ? (
            <img
              src={flight.imageUrl}
              alt={flight.airline}
              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>
          )}
          {flight.badge && (
            <span className="absolute left-4 top-4 rounded-full bg-merah-ranata px-3 py-1 text-xs font-semibold text-white">
              {flight.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">
              {flight.airline}
              {flight.flightNumber ? ` · ${flight.flightNumber}` : ""}
            </h1>
            <div className="mt-3 flex flex-wrap items-center gap-4 text-sm text-muted">
              <span className="flex items-center gap-1">
                <PlaneTakeoff className="h-4 w-4" />
                {flight.origin} &rarr; {flight.destination}
              </span>
              {flight.departureInfo && (
                <span className="flex items-center gap-1">
                  <Clock className="h-4 w-4" />
                  {flight.departureInfo}
                </span>
              )}
            </div>
          </div>

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

        {flight.description ? (
          <p className="mt-8 whitespace-pre-line text-body">
            {flight.description}
          </p>
        ) : flight.excerpt ? (
          <p className="mt-8 text-body">{flight.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>
  );
}