import { notFound } from "next/navigation";
import { getDealBySlug } from "@/lib/queries";
import Header from "@/components/header";
import Footer from "@/components/footer";
import ProductCard from "@/components/productCard";
import CountdownTimer from "@/components/countdownTimer";

type DealProductType = {
  product: {
    id: string;
    slug: string;
    name: string;
    basePrice: number;
    compareAtPrice?: number | null;
    condition?: string;
    images: { url: string; altText?: string | null }[];
    brand?: { name: string; slug: string } | null;
    variants?: { id: string; name: string; priceDelta: number; stockQty: number }[];
    isActive?: boolean;
  };
};

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

  if (!deal || !deal.isActive) {
    notFound();
  }

  return (
    <>
      <Header />
      <section className="max-w-7xl mx-auto px-4 py-12">
        <div className="flex items-center justify-between mb-6">
          <h1 className="font-display text-3xl font-bold text-ink">🔥 {deal.title}</h1>
          {deal.endsAt && <CountdownTimer endsAt={deal.endsAt} />}
        </div>

        {deal.products.length === 0 ? (
          <p className="text-ink/60">No products in this deal right now.</p>
        ) : (
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
          {deal.products.map(({ product }: { product: any }, index: number) => (
           <ProductCard key={product.slug} product={product} index={index} />
      ))}
          </div>
        )}
      </section>
      <Footer />
    </>
  );
}