import Image from "next/image";
import { notFound } from "next/navigation";
import { getDictionary } from "@/content";
import { isLocale } from "@/content/types";
import { destinations } from "@/content/destinations";
import { getGalleryPhotos } from "@/lib/actions/gallery";
import { getPublishedOffers } from "@/lib/actions/offers";
import { FallbackArt } from "@/components/ui/FallbackArt";
import { Button } from "@/components/ui/Button";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { GalleryGrid } from "@/components/sections/GalleryGrid";
import { OfferCard } from "@/components/sections/OfferCard";

export default async function DestinationDetailPage({
  params,
}: {
  params: Promise<{ locale: string; slug: string }>;
}) {
  const { locale: rawLocale, slug } = await params;
  const locale = isLocale(rawLocale) ? rawLocale : "en";
  const dict = getDictionary(locale);

  const destination = destinations.find((d) => d.slug === slug);
  if (!destination) notFound();

  const name = locale === "ar" ? destination.nameAr : destination.nameEn;
  const description = locale === "ar" ? destination.descriptionAr : destination.descriptionEn;

  const [allPhotos, allOffers] = await Promise.all([getGalleryPhotos(), getPublishedOffers()]);
  const photos = allPhotos.filter((p) => p.destinationSlug === slug);
  const heroPhoto = photos[0] ?? null;
  const offers = allOffers.filter((o) => o.destinationSlug === slug);

  return (
    <div>
      <div className="relative flex h-[50vh] min-h-[320px] items-end overflow-hidden bg-charcoal-950">
        {heroPhoto ? (
          <Image
            src={heroPhoto.imageUrl}
            alt={name}
            fill
            priority
            sizes="100vw"
            className="object-cover opacity-80"
          />
        ) : (
          <FallbackArt />
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-charcoal-950 via-charcoal-950/30 to-transparent" />
        <h1 className="relative z-10 px-4 pb-10 text-3xl font-bold text-white sm:px-6 sm:text-5xl lg:px-8">
          {name}
        </h1>
      </div>

      <div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8">
        <p className="text-lg leading-relaxed text-charcoal-700">{description}</p>
        <div className="mt-8">
          <Button href={`/${locale}#booking`}>{dict.hero.ctaPrimary}</Button>
        </div>
      </div>

      {photos.length > 0 ? (
        <div className="mx-auto max-w-6xl px-4 pb-16 sm:px-6 lg:px-8">
          <SectionHeading
            align="start"
            eyebrow={dict.gallery.eyebrow}
            title={name}
            className="max-w-none"
          />
          <div className="mt-8">
            <GalleryGrid photos={photos} locale={locale} />
          </div>
        </div>
      ) : null}

      {offers.length > 0 ? (
        <div className="mx-auto max-w-6xl px-4 pb-24 sm:px-6 lg:px-8">
          <SectionHeading
            align="start"
            eyebrow={dict.offers.eyebrow}
            title={dict.offers.title}
            titleAccent={dict.offers.titleAccent}
            className="max-w-none"
          />
          <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {offers.map((offer) => (
              <OfferCard key={offer.id} offer={offer} dict={dict} locale={locale} />
            ))}
          </div>
        </div>
      ) : null}
    </div>
  );
}