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

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

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

  if (!event) {
    notFound();
  }

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

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

        {event.description ? (
          <p className="mt-8 whitespace-pre-line text-body">
            {event.description}
          </p>
        ) : event.excerpt ? (
          <p className="mt-8 text-body">{event.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" />
            Ikut Event Ini
          </a>
        )}
      </div>
    </section>
  );
}