import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { notFound } from "next/navigation";
import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import ProductFaqs from "@/components/shop/product-faqs";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  effectivePrice,
  getPublicCategoryBySlug,
  getPublicProducts,
  resolvePublicMediaUrl,
} from "@/lib/public-product";
import { resolveProductFaqs } from "@/lib/content-faqs";
import { DEFAULT_OG_IMAGE } from "@/lib/site-og-image";

const SITE_URL = (process.env.NEXT_PUBLIC_SITE_URL || "https://nizamify.com").replace(/\/$/, "");

function getDescription(raw?: string | null) {
  const text = String(raw || "")
    .replace(/<[^>]+>/g, " ")
    .replace(/&nbsp;/gi, " ")
    .replace(/\s+/g, " ")
    .trim();
  return text;
}

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const category = await getPublicCategoryBySlug(params.slug);
  if (!category) {
    return { title: "Category Not Found", robots: { index: false, follow: false } };
  }

  const title = category.metaTitle?.trim() || `${category.name} Price in Pakistan | Nizamify`;
  const fallbackDescription = `Shop ${category.name} in Pakistan — genuine Tuya/Smart Life compatible devices with cash on delivery and fast delivery across Rawalpindi & Islamabad.`;
  const description =
    category.metaDescription?.trim() || getDescription(category.description).slice(0, 180) || fallbackDescription;
  const canonical = `/products/category/${category.slug}`;
  const image = resolvePublicMediaUrl(category.banner);
  const keywords =
    Array.isArray(category.metaKeywords) && category.metaKeywords.length > 0
      ? category.metaKeywords
      : [category.name, `${category.name} price in pakistan`, "nizamify"];

  return {
    title,
    description,
    keywords,
    alternates: { canonical },
    openGraph: {
      title,
      description,
      type: "website",
      url: `${SITE_URL}${canonical}`,
      images: [{ url: image || DEFAULT_OG_IMAGE, alt: category.name }],
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [image || DEFAULT_OG_IMAGE],
    },
  };
}

export default async function ProductCategoryPage({
  params,
}: {
  params: { slug: string };
}) {
  const category = await getPublicCategoryBySlug(params.slug);
  if (!category) notFound();

  const products = await getPublicProducts({ category: category.slug, limit: 60 });
  const pageUrl = `${SITE_URL}/products/category/${category.slug}`;

  const { faqs, content } = resolveProductFaqs(category);

  const breadcrumbSchema = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home", item: `${SITE_URL}/` },
      { "@type": "ListItem", position: 2, name: "Products", item: `${SITE_URL}/products` },
      { "@type": "ListItem", position: 3, name: category.name, item: pageUrl },
    ],
  };

  const collectionSchema = {
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    name: category.name,
    description: getDescription(category.description) || undefined,
    url: pageUrl,
    mainEntity: {
      "@type": "ItemList",
      itemListElement: products.map((p, i) => ({
        "@type": "ListItem",
        position: i + 1,
        url: `${SITE_URL}/products/${p.slug}`,
      })),
    },
  };

  const faqSchema =
    faqs.length > 0
      ? {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          mainEntity: faqs.map((faq) => ({
            "@type": "Question",
            name: faq.question,
            acceptedAnswer: { "@type": "Answer", text: faq.answerText },
          })),
        }
      : null;

  return (
    <div className="flex flex-col">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionSchema) }}
      />
      {faqSchema ? (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
        />
      ) : null}

      <div className="container space-y-8 py-8">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/">Home</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/products">Products</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>{category.name}</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>

        <h1 className="text-3xl font-bold text-slate-900 md:text-4xl">{category.name}</h1>

        {products.length > 0 ? (
          <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {products.map((p) => {
              const img = resolvePublicMediaUrl(p.images?.[0]);
              const price = effectivePrice(p);
              const showStrike = p.salePrice != null && p.salePrice >= 0;
              return (
                <li
                  key={p._id}
                  className="flex flex-col overflow-hidden rounded-lg border bg-white shadow-sm transition hover:shadow-md"
                >
                  <Link href={`/products/${p.slug}`} className="block">
                    <div className="relative aspect-[4/3] bg-gray-100">
                      {img ? (
                        <Image
                          src={img}
                          alt={p.title}
                          fill
                          className="object-cover"
                          sizes="(max-width: 768px) 100vw, 33vw"
                        />
                      ) : (
                        <div className="flex h-full items-center justify-center text-sm text-gray-400">
                          No image
                        </div>
                      )}
                    </div>
                    <div className="space-y-1 p-4">
                      <h2 className="line-clamp-2 font-semibold text-slate-900">{p.title}</h2>
                      <p className="text-lg">
                        <span className="font-bold text-primary">{price.toFixed(2)}</span>
                        {showStrike ? (
                          <span className="ml-2 text-sm text-gray-400 line-through">
                            {p.price.toFixed(2)}
                          </span>
                        ) : null}
                      </p>
                    </div>
                  </Link>
                </li>
              );
            })}
          </ul>
        ) : (
          <p className="rounded-lg border border-dashed bg-slate-50 px-6 py-10 text-center text-slate-500">
            No products in this category yet — check back soon.
          </p>
        )}

        {content ? (
          <div
            className="prose max-w-none text-slate-700 prose-headings:text-slate-900"
            dangerouslySetInnerHTML={{ __html: content }}
          />
        ) : null}

        {faqs.length > 0 ? (
          <div className="max-w-3xl">
            <ProductFaqs faqs={faqs} />
          </div>
        ) : null}

        <div className="rounded-2xl bg-primary px-6 py-10 text-center text-white">
          <h2 className="text-2xl font-bold text-white md:text-3xl">Browse the full Nizamify catalog</h2>
          <p className="mx-auto mt-2 max-w-xl text-white/90">
            Genuine smart devices, cash on delivery, fast delivery across Rawalpindi & Islamabad.
          </p>
          <div className="mt-5 flex flex-wrap items-center justify-center gap-3">
            <Button asChild variant="secondary">
              <Link href="/products">
                Shop All Products <ArrowRight className="ml-1 size-4" />
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}