import Image from "next/image";
import type { Metadata } from "next";
import { redirect } from "next/navigation";
import { PromoCodeCopy } from "@/components/campaign/promo-code-copy";
import { ProductCard } from "@/components/store/product-card";
import { getActiveCampaign } from "@/lib/campaign";
import { listSanityProductsByThemeKeyword, listSanityThemesByKeyword } from "@/lib/sanity/queries";
import { shouldSkipImageOptimization } from "@/lib/utils/image";

export const metadata: Metadata = {
  title: "Halloween : créations personnalisées",
  description:
    "Sachets de bonbons, étiquettes, coloriages et gourmandises personnalisés pour Halloween. -10 % avec le code HALLOWEEN10.",
  alternates: {
    canonical: "/halloween",
  },
};

export default async function HalloweenPage() {
  const campaign = getActiveCampaign();

  if (campaign?.slug !== "halloween") {
    redirect("/boutique");
  }

  const [themes, products] = await Promise.all([
    listSanityThemesByKeyword(campaign.themeKeyword),
    listSanityProductsByThemeKeyword(campaign.themeKeyword),
  ]);

  return (
    <div className="space-y-14 pb-10 md:space-y-16">
      <div className="relative overflow-hidden rounded-[2.3rem] bg-[radial-gradient(circle_at_80%_0%,#4a1f5c_0%,#241030_45%,#140a1c_100%)] px-6 py-12 text-white shadow-[0_26px_56px_rgba(20,10,28,0.35)] md:px-12 md:py-16">
        <div className="pointer-events-none absolute -left-16 -top-16 h-64 w-64 rounded-full bg-[#ff8a1f33] blur-3xl" />
        <div className="pointer-events-none absolute -bottom-24 right-10 h-56 w-56 rounded-full bg-[#8b3fd933] blur-3xl" />

        <div className="relative max-w-2xl space-y-6">
          <p className="inline-flex rounded-full border border-[#ff8a1f80] bg-[#ff8a1f1a] px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-[#ffb15c]">
            🎃 {campaign.eyebrow}
          </p>
          <h1 className="whitespace-pre-line font-serif text-5xl leading-[0.95] md:text-7xl">{campaign.title}</h1>
          <p className="text-[15px] leading-relaxed text-[#e9dcf2]">{campaign.subtitle}</p>

          <div className="space-y-2">
            <p className="text-sm font-semibold text-white">
              {campaign.discountLabel} sur votre commande {campaign.endsLabel} avec le code :
            </p>
            <PromoCodeCopy code={campaign.promoCode} />
          </div>
        </div>
      </div>

      {themes.length > 0 ? (
        <div className="space-y-6">
          <div className="space-y-2">
            <h2 className="font-serif text-4xl text-[var(--foreground)] md:text-5xl">Nos thèmes Halloween</h2>
            <p className="text-sm text-[var(--muted)]">Choisissez votre ambiance, puis personnalisez chaque création au prénom de votre choix.</p>
          </div>
          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
            {themes.map((theme) => (
              <div key={theme.title} className="overflow-hidden rounded-[1.5rem] border border-[#ffe0e0]">
                <div className="relative aspect-square bg-[#f7f2ee]">
                  {theme.imageUrl ? (
                    <Image src={theme.imageUrl} alt={theme.title} fill unoptimized={shouldSkipImageOptimization(theme.imageUrl)} sizes="(max-width: 768px) 50vw, 25vw" className="object-cover" />
                  ) : null}
                </div>
                <p className="px-4 py-3 text-sm font-semibold text-[var(--foreground)]">{theme.title}</p>
              </div>
            ))}
          </div>
        </div>
      ) : null}

      <div className="space-y-6">
        <div className="space-y-2">
          <h2 className="font-serif text-4xl text-[var(--foreground)] md:text-5xl">À personnaliser pour Halloween</h2>
          <p className="text-sm text-[var(--muted)]">
            {products.length} création{products.length > 1 ? "s" : ""} disponible{products.length > 1 ? "s" : ""} en thème Halloween.
          </p>
        </div>

        {products.length > 0 ? (
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {products.map((product, index) => (
              <ProductCard
                key={product._id}
                product={product}
                index={index}
                href={
                  product.matchingTheme
                    ? `/produits/${product.handle}?theme=${encodeURIComponent(product.matchingTheme)}`
                    : undefined
                }
              />
            ))}
          </div>
        ) : (
          <p className="text-sm text-[var(--muted)]">Les créations Halloween arrivent très bientôt.</p>
        )}
      </div>
    </div>
  );
}