import { notFound } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import type { Metadata } from "next";
import { getProducts, getProduct } from "@/lib/db";
import { getCategory } from "@/lib/categories";
import { PriceTag } from "@/components/PriceTag";
import { StockBadge } from "@/components/StockBadge";
import { ProductDetailActions } from "@/components/ProductDetailActions";
import { ProductGrid } from "@/components/ProductGrid";
import { siteConfig } from "@/lib/siteConfig";

// Product data can change at runtime, see app/page.tsx for why this
// page always renders fresh instead of using a cached build snapshot.
// Also matters here because stock/price edits need to show up instantly.
export const dynamic = "force-dynamic";

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const product = getProduct(params.slug);
  if (!product) return {};
  return {
    title: product.name,
    description: product.shortDescription,
    alternates: { canonical: `/product/${product.slug}` },
    openGraph: {
      title: product.name,
      description: product.shortDescription,
      images: [product.images[0] ?? "/images/brand/logo-stacked.jpg"],
    },
  };
}

export default function ProductPage({ params }: { params: { slug: string } }) {
  const product = getProduct(params.slug);
  if (!product) notFound();

  const category = getCategory(product.category);
  const related = getProducts()
    .filter((p) => p.category === product.category && p.id !== product.id)
    .slice(0, 4);

  const productJsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.name,
    image: product.images.map((i) => `${siteConfig.url}${i}`),
    description: product.description,
    sku: product.sku,
    brand: { "@type": "Brand", name: product.brand },
    offers: {
      "@type": "Offer",
      url: `${siteConfig.url}/product/${product.slug}`,
      priceCurrency: siteConfig.currency,
      price: product.price,
      availability:
        product.stock > 0
          ? "https://schema.org/InStock"
          : "https://schema.org/OutOfStock",
    },
  };

  return (
    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(productJsonLd) }}
      />
      <nav aria-label="Breadcrumb" className="mb-6 flex flex-wrap items-center text-sm text-black/50">
        <Link href="/" className="hover:text-brand-ink">Home</Link>
        <span className="mx-1.5">/</span>
        {category && (
          <>
            <Link href={`/category/${category.slug}`} className="hover:text-brand-ink">
              {category.name}
            </Link>
            <span className="mx-1.5">/</span>
          </>
        )}
        <span className="text-brand-ink">{product.name}</span>
      </nav>

      <div className="grid gap-10 lg:grid-cols-2">
        <div className="relative aspect-square overflow-hidden rounded-2xl bg-brand-cream">
          <Image
            src={product.images[0] ?? "/images/products/placeholder.webp"}
            alt={product.name}
            fill
            priority
            sizes="(max-width: 1024px) 100vw, 50vw"
            className="object-cover"
          />
        </div>

        <div>
          <p className="text-xs font-medium uppercase tracking-wide text-black/40">
            {product.brand}
          </p>
          <h1 className="mt-1 font-display text-2xl font-bold text-brand-ink sm:text-3xl">
            {product.name}
          </h1>
          {product.variant && (
            <p className="mt-1 text-sm text-black/55">{product.variant}</p>
          )}

          <div className="mt-4 flex items-center gap-3">
            <PriceTag price={product.price} compareAtPrice={product.compareAtPrice} size="lg" />
            <StockBadge stock={product.stock} />
          </div>

          <p className="mt-5 max-w-lg text-sm leading-relaxed text-black/65">
            {product.description}
          </p>

          <ProductDetailActions
            productId={product.id}
            productName={product.name}
            stock={product.stock}
          />

          <dl className="mt-8 grid grid-cols-2 gap-x-6 gap-y-2 border-t border-black/[0.06] pt-6 text-sm">
            <dt className="text-black/45">SKU</dt>
            <dd className="text-brand-ink">{product.sku}</dd>
            <dt className="text-black/45">Category</dt>
            <dd className="text-brand-ink">{category?.name}</dd>
            <dt className="text-black/45">Delivery</dt>
            <dd className="text-brand-ink">{siteConfig.deliveryNote}</dd>
          </dl>
        </div>
      </div>

      {related.length > 0 && (
        <section className="mt-16">
          <h2 className="font-display text-xl font-bold text-brand-ink">
            You may also like
          </h2>
          <div className="mt-5">
            <ProductGrid products={related} />
          </div>
        </section>
      )}
    </div>
  );
}