import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import Container from "@/components/Container";
import PageBanner from "@/components/PageBanner";
import ProductCard from "@/components/ProductCard";
import {
  getProductBySlug,
  getRelatedProducts,
  products,
} from "@/data/products";

export function generateStaticParams() {
  return products.map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const product = getProductBySlug(slug);
  if (!product) return {};
  return {
    title: `${product.title} | آراد آریسمان`,
    description: product.shortDesc,
  };
}

export default async function ProductDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const product = getProductBySlug(slug);
  if (!product) notFound();

  const related = getRelatedProducts(product);

  return (
    <>
      <PageBanner
        title={product.title}
        subtitle={product.shortDesc}
        breadcrumb={product.title}
      />

      <section className="py-16 sm:py-20">
        <Container>
          <Link
            href="/products"
            className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-primary-dark transition-colors"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path
                d="M10.7 18.7a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.4l6-6a1 1 0 1 1 1.4 1.4L6 11.3h14a1 1 0 1 1 0 2H6l4.7 4.3a1 1 0 0 1 0 1.4Z"
                fill="currentColor"
              />
            </svg>
            بازگشت به محصولات
          </Link>

          <div className="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div className="relative aspect-square rounded-3xl overflow-hidden shadow-xl bg-surface">
              <Image
                src={product.image}
                alt={product.title}
                fill
                priority
                className="object-cover"
                sizes="(min-width: 1024px) 45vw, 90vw"
              />
              <span className="absolute top-4 right-4 rounded-full bg-white/90 backdrop-blur px-4 py-1.5 text-sm font-semibold text-primary">
                {product.category}
              </span>
            </div>

            <div>
              <h1 className="text-2xl sm:text-3xl font-extrabold text-primary">
                {product.title}
              </h1>
              <p className="mt-3 text-foreground leading-8">
                {product.shortDesc}
              </p>

              <div className="mt-6 flex items-center gap-3">
                <span className="text-xl font-extrabold text-primary">
                  تماس بگیرید
                </span>
                <span className="text-sm text-foreground/60">
                  ({product.packaging})
                </span>
              </div>

              <div className="mt-6 flex flex-wrap gap-3">
                <a
                  href="tel:09104067935"
                  dir="ltr"
                  className="rounded-full bg-primary px-7 py-3.5 text-white font-semibold hover:bg-primary-dark transition-colors"
                >
                  09104067935
                </a>
                <Link
                  href="/contact"
                  className="rounded-full border border-primary/30 px-7 py-3.5 text-primary font-semibold hover:bg-primary/5 transition-colors"
                >
                  استعلام قیمت
                </Link>
              </div>

              <div className="mt-8 rounded-2xl border border-black/5 bg-white p-6">
                <h2 className="font-bold text-secondary">نحوه مصرف</h2>
                <p className="mt-2 text-sm leading-7 text-foreground">
                  {product.usage}
                </p>
              </div>

              <div className="mt-6">
                <h2 className="font-bold text-secondary">مزایای محصول</h2>
                <ul className="mt-3 space-y-2">
                  {product.benefits.map((b) => (
                    <li key={b} className="flex items-start gap-2 text-sm text-foreground">
                      <span className="mt-1 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none">
                          <path
                            d="M5 13l4 4L19 7"
                            stroke="currentColor"
                            strokeWidth="3"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </span>
                      {b}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>

          <div className="mt-14 rounded-2xl border border-black/5 bg-white p-6 sm:p-8">
            <h2 className="text-lg font-bold text-secondary">معرفی محصول</h2>
            <div className="mt-4 space-y-4">
              {product.description.map((paragraph) => (
                <p key={paragraph} className="leading-8 text-foreground">
                  {paragraph}
                </p>
              ))}
            </div>
          </div>
        </Container>
      </section>

      {related.length > 0 && (
        <section className="pb-16 sm:pb-20">
          <Container>
            <h2 className="text-2xl font-extrabold text-primary">
              محصولات مرتبط
            </h2>
            <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {related.map((p) => (
                <ProductCard key={p.id} product={p} />
              ))}
            </div>
          </Container>
        </section>
      )}
    </>
  );
}
