import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { prisma } from "@/lib/db";
import { siteConfig } from "@/lib/config";
import { formatPrice, savingsPercent } from "@/lib/format";
import { parseSpecFields, parseSpecs } from "@/lib/serialize";
import { toCardData } from "@/lib/products";
import { CONDITION_META, type Condition } from "@/lib/constants";
import { Price } from "@/components/ui/Price";
import { ConditionBadge } from "@/components/ui/ConditionBadge";
import { ProductGallery } from "@/components/product/ProductGallery";
import { AddToCartButton } from "@/components/product/AddToCartButton";
import { ProductCard } from "@/components/product/ProductCard";

async function getProduct(slug: string) {
  return prisma.product.findUnique({
    where: { slug },
    include: { images: true, category: true },
  });
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const product = await getProduct(slug);
  if (!product) return { title: "Product" };
  const image = product.images[0]?.url;
  return {
    title: product.title,
    description: product.description.slice(0, 160) || siteConfig.description,
    openGraph: image ? { images: [image] } : undefined,
  };
}

export default async function ProductPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const product = await getProduct(slug);
  if (!product || product.status === "HIDDEN") notFound();

  const images = [...product.images]
    .sort((a, b) => a.sortOrder - b.sortOrder)
    .map((i) => i.url);
  const specFields = parseSpecFields(product.category.specFields);
  const specs = parseSpecs(product.specs);
  const conditionMeta =
    CONDITION_META[product.condition as Condition] ?? CONDITION_META.GOOD;
  const soldOut = product.status === "SOLD" || product.quantity <= 0;
  const saved = savingsPercent(product.price, product.mrp);

  const related = (
    await prisma.product.findMany({
      where: {
        categoryId: product.categoryId,
        id: { not: product.id },
        status: { in: ["ACTIVE", "SOLD"] },
      },
      include: { images: true },
      take: 4,
      orderBy: { createdAt: "desc" },
    })
  ).map(toCardData);

  const waMessage = `Hi ${siteConfig.name}, I'm interested in "${product.title}" (${formatPrice(
    product.price,
  )}). Is it available?`;
  const waHref = `https://wa.me/${siteConfig.whatsapp}?text=${encodeURIComponent(waMessage)}`;

  // JSON-LD structured data for SEO / rich results.
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.title,
    description: product.description,
    brand: product.brand ?? undefined,
    image: images,
    itemCondition: "https://schema.org/UsedCondition",
    offers: {
      "@type": "Offer",
      price: product.price,
      priceCurrency: siteConfig.currency.code,
      availability: soldOut
        ? "https://schema.org/OutOfStock"
        : "https://schema.org/InStock",
    },
  };

  return (
    <div className="mx-auto max-w-7xl px-4 py-8">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      <p className="mb-4 text-sm text-slate-400">
        <Link href="/products" className="hover:text-brand-600">
          All Products
        </Link>{" "}
        /{" "}
        <Link
          href={`/category/${product.category.slug}`}
          className="hover:text-brand-600"
        >
          {product.category.name}
        </Link>
      </p>

      <div className="grid gap-8 lg:grid-cols-2">
        <ProductGallery images={images} alt={product.title} />

        <div>
          {product.brand ? (
            <p className="text-sm font-medium uppercase tracking-wide text-slate-400">
              {product.brand}
            </p>
          ) : null}
          <h1 className="mt-1 text-2xl font-bold text-slate-900">
            {product.title}
          </h1>

          <div className="mt-3 flex items-center gap-3">
            <ConditionBadge condition={product.condition} />
            {soldOut ? (
              <span className="rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-semibold text-rose-700">
                Sold
              </span>
            ) : product.quantity <= 3 ? (
              <span className="text-xs font-medium text-orange-600">
                Only {product.quantity} left
              </span>
            ) : null}
          </div>

          <div className="mt-4">
            <Price price={product.price} mrp={product.mrp} size="lg" />
            {saved > 0 ? (
              <p className="mt-1 text-sm font-medium text-emerald-700">
                You save {formatPrice((product.mrp ?? 0) - product.price)} ({saved}%)
              </p>
            ) : null}
          </div>

          {/* Trust row */}
          <div className="mt-5 grid grid-cols-3 gap-2 rounded-xl border border-slate-200 bg-white p-3 text-center text-xs">
            <div>
              <p className="text-lg">🛡</p>
              <p className="mt-0.5 font-semibold text-slate-700">
                {product.warrantyMonths > 0
                  ? `${product.warrantyMonths}-mo warranty`
                  : "Checked"}
              </p>
            </div>
            <div>
              <p className="text-lg">✅</p>
              <p className="mt-0.5 font-semibold text-slate-700">Fully tested</p>
            </div>
            <div>
              <p className="text-lg">💵</p>
              <p className="mt-0.5 font-semibold text-slate-700">Cash on delivery</p>
            </div>
          </div>

          {/* Actions */}
          <div className="mt-6 flex flex-wrap items-center gap-3">
            <AddToCartButton
              showQuantity
              item={{
                productId: product.id,
                slug: product.slug,
                title: product.title,
                price: product.price,
                image: images[0] ?? "/placeholders/generic.svg",
                maxQty: soldOut ? 0 : product.quantity,
              }}
            />
            <a
              href={waHref}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 rounded-lg border border-[#25D366] px-4 py-2.5 text-sm font-semibold text-[#1a8f4a] hover:bg-[#25D366]/10"
            >
              💬 Ask on WhatsApp
            </a>
          </div>

          <p className="mt-3 text-xs text-slate-500">
            Condition <strong>{conditionMeta.label}</strong>:{" "}
            {conditionMeta.description}
          </p>
        </div>
      </div>

      {/* Description + specs */}
      <div className="mt-12 grid gap-8 lg:grid-cols-2">
        <div>
          <h2 className="text-lg font-bold text-slate-900">Description</h2>
          <p className="mt-3 whitespace-pre-line text-sm leading-relaxed text-slate-600">
            {product.description || "No description provided."}
          </p>
        </div>

        {specFields.length > 0 && Object.keys(specs).length > 0 ? (
          <div>
            <h2 className="text-lg font-bold text-slate-900">Specifications</h2>
            <dl className="mt-3 divide-y divide-slate-100 overflow-hidden rounded-xl border border-slate-200 bg-white text-sm">
              {specFields
                .filter((f) => specs[f.key])
                .map((f) => (
                  <div key={f.key} className="grid grid-cols-3 gap-2 px-4 py-2.5">
                    <dt className="col-span-1 font-medium text-slate-500">
                      {f.label}
                    </dt>
                    <dd className="col-span-2 text-slate-800">{specs[f.key]}</dd>
                  </div>
                ))}
            </dl>
          </div>
        ) : null}
      </div>

      {/* Related */}
      {related.length > 0 ? (
        <div className="mt-14">
          <h2 className="mb-4 text-lg font-bold text-slate-900">
            More in {product.category.name}
          </h2>
          <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
            {related.map((p) => (
              <ProductCard key={p.id} product={p} />
            ))}
          </div>
        </div>
      ) : null}
    </div>
  );
}