import Link from "next/link";
import { notFound } from "next/navigation";
import { ApiError } from "@/lib/api/server";
import { getEventBySlug } from "@/lib/api/events";
import { formatCurrency, formatDate } from "@/lib/format";
import { toGoogleMapsEmbedSrc } from "@/lib/maps";
import { signatureeClasses } from "@/lib/theme";
import { SignatureEventPage } from "@/components/events/signature/SignatureEventPage";
import { cardClasses } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

/** FR-121/122/123/124: meta title/description/OG image, with sensible fallbacks. */
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;

  try {
    const { data: event } = await getEventBySlug(slug);
    const title = event.meta_title || event.title;
    const description = event.meta_description || event.description || undefined;
    const image = event.og_image || event.banner || event.thumbnail || undefined;

    return {
      title,
      description,
      openGraph: {
        title,
        description,
        images: image ? [image] : undefined,
      },
      twitter: {
        card: "summary_large_image",
        title,
        description,
        images: image ? [image] : undefined,
      },
    };
  } catch {
    return {};
  }
}

export default async function EventDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;

  const event = await getEventBySlug(slug)
    .then((res) => res.data)
    .catch((error) => {
      if (error instanceof ApiError && error.status === 404) {
        notFound();
      }
      throw error;
    });

  // FR-SIG-002/003/004: Signature Event gets its own dedicated page template
  // entirely (not just a themed hero within this one) — see SignatureEventPage.
  if (event.is_signature_event) {
    return <SignatureEventPage event={event} accent={signatureeClasses()} />;
  }

  // FR-024: embed only for recognized Google Maps links; anything else falls back to a plain link.
  const mapsEmbedSrc = event.gmaps_url ? toGoogleMapsEmbedSrc(event.gmaps_url) : null;

  return (
    <div>
      <div className="mx-auto max-w-4xl px-6 py-10">
        {/* FR-111/112: plain thumbnail/banner display. */}
        {(event.banner || event.thumbnail) && (
          // eslint-disable-next-line @next/next/no-img-element -- organizer-uploaded file, not on next/image allowlist
          <img
            src={event.banner ?? event.thumbnail!}
            alt={event.title}
            className="mb-6 h-64 w-full rounded-2xl object-cover"
          />
        )}
        {event.category && (
          <span className="w-fit rounded-full bg-kolabora-tertiary/15 px-2.5 py-0.5 text-xs font-medium text-kolabora-tertiary">
            {event.category.name}
          </span>
        )}
        <h1 className="mt-3 text-3xl font-semibold">{event.title}</h1>

        <dl className="mt-4 flex flex-col gap-1 text-sm text-kolabora-neutral-dark/70">
          <div className="flex gap-2">
            <dt className="font-medium">Date</dt>
            <dd>
              {formatDate(event.start_date)} &mdash; {formatDate(event.end_date)}
            </dd>
          </div>
          {event.location && (
            <div className="flex gap-2">
              <dt className="font-medium">Location</dt>
              <dd>{event.location}</dd>
            </div>
          )}
          {event.organizer && (
            <div className="flex gap-2">
              <dt className="font-medium">Organizer</dt>
              <dd>{event.organizer.name}</dd>
            </div>
          )}
        </dl>

        {event.description && (
          <p className="mt-6 whitespace-pre-line text-kolabora-neutral-dark/80">
            {event.description}
          </p>
        )}

        {/* FR-024: Google Maps embed, only when a gmaps_url is set. */}
        {event.gmaps_url && (
          <section className="mt-8">
            <h2 className="text-lg font-semibold">Location on Map</h2>
            {mapsEmbedSrc ? (
              <iframe
                src={mapsEmbedSrc}
                title={`Map location for ${event.title}`}
                loading="lazy"
                className={cn("mt-3 h-72 w-full", cardClasses())}
              />
            ) : null}
            <a
              href={event.gmaps_url}
              target="_blank"
              rel="noreferrer"
              className="mt-2 inline-block text-sm font-medium text-kolabora-primary"
            >
              Open in Google Maps &rarr;
            </a>
          </section>
        )}

        {/* FR-113: gallery images, additional to thumbnail/banner. */}
        {event.galleries && event.galleries.length > 0 && (
          <section className="mt-8">
            <h2 className="text-lg font-semibold">Gallery</h2>
            <div className="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-3">
              {event.galleries.map((image) => (
                // eslint-disable-next-line @next/next/no-img-element -- organizer-uploaded file, not on next/image allowlist
                <img
                  key={image.id}
                  src={image.image_path}
                  alt={`${event.title} gallery`}
                  className="aspect-video w-full rounded-xl object-cover"
                />
              ))}
            </div>
          </section>
        )}

        <section className="mt-10">
          <h2 className="text-lg font-semibold">Tickets</h2>

          {!event.ticket_types || event.ticket_types.length === 0 ? (
            <p className="mt-2 text-sm text-kolabora-neutral-dark/70">
              No tickets available for this event yet.
            </p>
          ) : (
            <ul className="mt-4 flex flex-col gap-3">
              {event.ticket_types.map((ticketType) => (
                <li key={ticketType.id} className={cardClasses("px-4 py-3")}>
                  <p className="font-medium">{ticketType.name}</p>
                  {!ticketType.phases || ticketType.phases.length === 0 ? (
                    <p className="mt-1 text-sm text-kolabora-neutral-dark/70">No sales phase yet.</p>
                  ) : (
                    <ul className="mt-2 flex flex-col gap-1.5">
                      {ticketType.phases.map((phase) => (
                        <li key={phase.id} className="flex items-center justify-between gap-3 text-sm">
                          <span className="min-w-0 truncate text-kolabora-neutral-dark/70">
                            {phase.name} &middot;{" "}
                            {phase.quota === null ? "Unlimited quota" : `Quota ${phase.quota}`}
                          </span>
                          <span className="shrink-0 font-semibold text-kolabora-primary">
                            {formatCurrency(phase.price)}
                          </span>
                        </li>
                      ))}
                    </ul>
                  )}
                </li>
              ))}
            </ul>
          )}

          {event.ticket_types?.some((tt) => tt.phases?.some((p) => p.status === "available")) && (
            <Link
              href={`/checkout/${event.slug}`}
              className="mt-4 inline-block rounded-full bg-kolabora-primary px-6 py-3 font-medium text-kolabora-neutral-white hover:opacity-90"
            >
              Buy Ticket
            </Link>
          )}
        </section>
      </div>
    </div>
  );
}