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 { getPublishedOfferById } from "@/lib/actions/offers";
import { Badge } from "@/components/ui/Badge";
import { FallbackArt } from "@/components/ui/FallbackArt";
import { Button } from "@/components/ui/Button";

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

  const offerId = Number(id);
  if (Number.isNaN(offerId)) notFound();

  const offer = await getPublishedOfferById(offerId);
  if (!offer) notFound();

  const title = locale === "ar" ? offer.titleAr : offer.titleEn;
  const description = locale === "ar" ? offer.descriptionAr : offer.descriptionEn;
  const destination = destinations.find((d) => d.slug === offer.destinationSlug);
  const destinationName = destination
    ? locale === "ar"
      ? destination.nameAr
      : destination.nameEn
    : offer.destinationSlug;

  return (
    <div className="mx-auto max-w-4xl px-4 pb-24 pt-32 sm:px-6 lg:px-8">
      <div className="relative aspect-[16/9] overflow-hidden rounded-3xl">
        {offer.imageUrl ? (
          <Image
            src={offer.imageUrl}
            alt={title}
            fill
            sizes="(min-width: 768px) 768px, 100vw"
            className="object-cover"
          />
        ) : (
          <FallbackArt />
        )}
      </div>

      <div className="mt-8 flex flex-wrap items-center gap-3">
        <Badge>{offer.category}</Badge>
        {offer.featured ? (
          <Badge className="bg-charcoal-950/10 text-charcoal-700">{dict.offers.featured}</Badge>
        ) : null}
      </div>

      <h1 className="mt-4 text-3xl font-bold text-charcoal-950 sm:text-4xl">{title}</h1>

      <div className="mt-4 flex flex-wrap gap-6 text-sm text-charcoal-400">
        <span>
          {dict.offers.from}{" "}
          <span className="font-semibold text-charcoal-950">
            {offer.price} {offer.currency}
          </span>
        </span>
        <span>{offer.duration}</span>
        {destinationName ? <span>{destinationName}</span> : null}
      </div>

      <p className="mt-8 whitespace-pre-line text-base leading-relaxed text-charcoal-700">
        {description}
      </p>

      <div className="mt-10">
        <Button href={`/${locale}#booking`}>{dict.hero.ctaPrimary}</Button>
      </div>
    </div>
  );
}