import React, { cache } from "react";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { ChevronRight, CheckCircle2, Circle, MessageSquare } from "lucide-react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import ProductGallery from "@/components/ProductGallery";
import ProductTechnicalProfile from "@/components/ProductTechnicalProfile";
import IntentLink from "@/components/IntentLink";
import JsonLdScript from "@/components/JsonLdScript";
import { prisma } from "@/lib/db";
import { getTranslations } from "next-intl/server";
import {
  asPublicLocale,
  localizeProductList,
  localizeProductDescription,
  localizeProductName,
  localizeSeriesName,
  localizeSurface,
} from "@/lib/product-i18n";
import { getPublishedCollections } from "@/lib/admin-content";
import {
  buildProductStructuredData,
  productAlternateUrls,
  productPageUrl,
  productShareImage,
} from "@/lib/product-seo";

interface ProductPageProps {
  params: Promise<{
    locale: string;
    productSlug: string;
  }>;
}

export const revalidate = 0;

const getPublishedProduct = cache((productSlug: string) =>
  prisma.product.findUnique({
    where: { slug: productSlug, status: "published" },
    include: {
      images: { orderBy: { order: "asc" } },
      category: true,
      series: true,
    },
  }),
);

export async function generateMetadata({ params }: ProductPageProps): Promise<Metadata> {
  const { locale, productSlug } = await params;
  const t = await getTranslations({ locale, namespace: "catalog" });
  const product = await getPublishedProduct(productSlug);

  if (!product) {
    return { title: t("not_found_metadata") };
  }

  const selectedLocale = asPublicLocale(locale);
  const localizedName = localizeProductName(product, locale);
  const description = localizeProductDescription(product, locale) || t("metadata_description", { product: localizedName });
  const canonicalUrl = productPageUrl(selectedLocale, productSlug);
  const shareImage = productShareImage(product.images[0], localizedName, selectedLocale);
  const openGraphLocales = {
    tr: "tr_TR",
    en: "en_GB",
    ru: "ru_RU",
  } as const;
  const alternateLocale = Object.entries(openGraphLocales)
    .filter(([key]) => key !== selectedLocale)
    .map(([, value]) => value);

  return {
    title: { absolute: `${localizedName} | Norden` },
    description,
    openGraph: {
      type: "website",
      siteName: "Norden",
      url: canonicalUrl,
      locale: openGraphLocales[selectedLocale],
      alternateLocale,
      title: `${localizedName} | Norden`,
      description,
      ...(shareImage ? { images: [shareImage] } : {}),
    },
    twitter: {
      card: "summary_large_image",
      title: `${localizedName} | Norden`,
      description,
      ...(shareImage ? { images: [shareImage] } : {}),
    },
    alternates: {
      canonical: canonicalUrl,
      languages: productAlternateUrls(productSlug),
    },
  };
}

export default async function ProductPage({ params }: ProductPageProps) {
  const { locale, productSlug } = await params;
  const t = await getTranslations({ locale, namespace: "catalog" });
  const product = await getPublishedProduct(productSlug);

  if (!product) {
    notFound();
  }

  const localizedName = localizeProductName(product, locale);
  const localizedDescription = localizeProductDescription(product, locale);
  const localizedSurface = localizeSurface(product.surface, locale);
  const collections = await getPublishedCollections();
  const rawSeriesSlug = product.series?.slug?.toLocaleLowerCase("en-US");
  const collection = collections.find((item) => item.slug.toLocaleLowerCase("en-US") === rawSeriesSlug);
  const structuredData = buildProductStructuredData(
    {
      slug: product.slug,
      sku: product.sku,
      name: localizedName,
      description: localizedDescription,
      widthCm: product.widthCm,
      surface: product.surface,
      burnerCount: product.burnerCount,
      series: product.series,
      images: product.images,
    },
    locale,
    {
      home: t("home"),
      products: t("products"),
      ...(collection ? { collection: { name: collection.name, slug: collection.slug } } : {}),
    },
  );
  const features = localizeProductList(product, "features", locale);
  const options = localizeProductList(product, "options", locale);
  const accessories = localizeProductList(product, "accessories", locale);

  const skuString = product.sku ? ` (${product.sku})` : "";
  const whatsappMsg = t("whatsapp_message", { product: `${localizedName}${skuString}` });
  const whatsappUrl = `https://wa.me/905394671328?text=${encodeURIComponent(whatsappMsg)}`;

  return (
    <div
      className="min-h-screen flex flex-col font-sans"
      style={{ background: "var(--surface-0)", color: "var(--fg-primary)" }}
    >
      <JsonLdScript data={structuredData} />
      <Navbar logoUrl="/brand/norden.png" locale={locale} />

      <main className="flex-grow pt-32 pb-24 w-full max-w-7xl mx-auto px-6 md:px-12 flex flex-col gap-10">
        {/* Breadcrumb Nav */}
        <nav
          className="flex items-center gap-2 font-mono text-xs uppercase tracking-wider"
          style={{ color: "var(--fg-muted)" }}
          aria-label="Breadcrumb"
        >
          <IntentLink href={`/${locale}`} className="inline-flex min-h-11 items-center transition-colors hover:text-ember">
            {t("home")}
          </IntentLink>
          <ChevronRight size={12} />
          <IntentLink href={`/${locale}/products${product.series?.slug ? `?category=hobs&series=${encodeURIComponent(product.series.slug)}` : ""}`} className="inline-flex min-h-11 items-center transition-colors hover:text-ember">
            {t("products")}
          </IntentLink>
          {collection && (
            <>
              <ChevronRight size={12} />
              <IntentLink href={`/${locale}/collections/${collection.slug}`} className="inline-flex min-h-11 items-center transition-colors hover:text-ember">
                {collection.name}
              </IntentLink>
            </>
          )}
          <ChevronRight size={12} />
          <span style={{ color: "var(--fg-primary)" }}>{localizedName}</span>
        </nav>

        {/* Product Layout Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
          {/* Left: Interactive Gallery */}
          <div className="lg:col-span-6 w-full">
            <ProductGallery images={product.images} productName={localizedName} />
          </div>

          {/* Right: Product Specs & Details */}
          <div className="lg:col-span-6 flex flex-col gap-8">
            {/* Title & Series */}
            <div className="flex flex-col gap-2">
              {product.series && (
                <span className="eyebrow">{t("series_label", { name: localizeSeriesName(product.series.name) })}</span>
              )}
              <h1 className="section-title">{localizedName}</h1>
              {product.sku && (
                <span className="text-xs font-mono tracking-widest mt-1" style={{ color: "var(--fg-muted)" }}>
                  SKU: {product.sku}
                </span>
              )}
            </div>

            {/* Spec Badges */}
            <div className="flex flex-wrap gap-2">
              {product.widthCm && (
                <span
                  className="px-3.5 py-1.5 rounded-full text-xs font-mono border"
                  style={{ background: "rgba(128,128,160,0.06)", borderColor: "var(--border)", color: "var(--fg-secondary)" }}
                >
                  {t("width_label", { width: product.widthCm })}
                </span>
              )}
              {localizedSurface && (
                <span
                  className="px-3.5 py-1.5 rounded-full text-xs font-mono border"
                  style={{ background: "rgba(128,128,160,0.06)", borderColor: "var(--border)", color: "var(--fg-secondary)" }}
                >
                  {t("surface_label", { surface: localizedSurface })}
                </span>
              )}
              {product.burnerCount && (
                <span
                  className="px-3.5 py-1.5 rounded-full text-xs font-mono border"
                  style={{ background: "rgba(128,128,160,0.06)", borderColor: "var(--border)", color: "var(--fg-secondary)" }}
                >
                  {t("gas_burners", { count: product.burnerCount })}
                </span>
              )}
            </div>

            {/* Description */}
            <p className="text-sm font-light leading-relaxed" style={{ color: "var(--fg-secondary)" }}>
              {localizedDescription}
            </p>

            <hr style={{ borderColor: "var(--border)" }} />

            {/* Feature Lists */}
            <div className="flex flex-col gap-6">
              {/* Features */}
              {features.length > 0 && (
                <div className="flex flex-col gap-3">
                  <h3 className="text-xs font-mono uppercase tracking-widest flex items-center gap-2" style={{ color: "var(--fg-primary)" }}>
                    <CheckCircle2 size={16} style={{ color: "var(--ember)" }} />
                    {t("features")}
                  </h3>
                  <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs" style={{ color: "var(--fg-secondary)" }}>
                    {features.map((item, idx) => (
                      <li key={idx} className="flex items-center gap-2">
                        <span style={{ color: "var(--ember)" }}>✓</span>
                        <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}

              {/* Options */}
              {options.length > 0 && (
                <div className="flex flex-col gap-3">
                  <h3 className="text-xs font-mono uppercase tracking-widest flex items-center gap-2" style={{ color: "var(--fg-primary)" }}>
                    <Circle size={8} style={{ fill: "var(--ember)", color: "var(--ember)" }} />
                    {t("options")}
                  </h3>
                  <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs" style={{ color: "var(--fg-secondary)" }}>
                    {options.map((item, idx) => (
                      <li key={idx} className="flex items-center gap-2">
                        <span className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--ember)" }} />
                        <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}

              {/* Accessories */}
              {accessories.length > 0 && (
                <div className="flex flex-col gap-3">
                  <h3 className="text-xs font-mono uppercase tracking-widest flex items-center gap-2" style={{ color: "var(--fg-primary)" }}>
                    <Circle size={8} style={{ fill: "var(--ember)", color: "var(--ember)" }} />
                    {t("accessories")}
                  </h3>
                  <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs" style={{ color: "var(--fg-secondary)" }}>
                    {accessories.map((item, idx) => (
                      <li key={idx} className="flex items-center gap-2">
                        <span className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--ember)" }} />
                        <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </div>

            {/* WhatsApp CTA Action */}
            <div className="pt-4">
              <a
                href={whatsappUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="w-full glass-pill py-4 rounded-full font-sans text-xs uppercase tracking-widest font-semibold flex items-center justify-center gap-3 hover:scale-[1.02] active:scale-[0.98] transition-all shadow-lg"
                style={{ color: "var(--ember)", border: "1px solid var(--border)" }}
              >
                <MessageSquare size={16} />
                {t("quote")}
              </a>
            </div>
          </div>
        </div>

        <ProductTechnicalProfile
          locale={locale}
          product={{
            name: product.name,
            widthCm: product.widthCm,
            surface: product.surface,
            burnerCount: product.burnerCount,
            series: product.series,
          }}
          features={features}
          options={options}
        />
      </main>

      <Footer />
    </div>
  );
}