import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { getProductByHandle } from "@/lib/medusa/products";
import { getSanityProductByHandle, listSanityProductsByCategory } from "@/lib/sanity/queries";
import { formatEuro } from "@/lib/utils/money";
import { ProductDetailDynamic } from "@/components/store/product-detail-dynamic";
import { ProductCard } from "@/components/store/product-card";
import { ProductTabs } from "@/components/store/product-tabs";
import { ProductImageGallery } from "@/components/store/product-image-gallery";
import { getResolvedSiteText } from "@/lib/site-text-server";
import { text } from "@/lib/site-text";
import { env } from "@/lib/env";
import { AnalyticsViewItemScript } from "@/components/analytics/analytics-view-item-script";

type Props = {
  params: Promise<{ handle: string }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { handle } = await params;
  const product = await getSanityProductByHandle(handle);

  if (!product) {
    return {
      title: "Produit introuvable",
      robots: { index: false, follow: false },
    };
  }

  const description = (product.shortDescription || product.description || "").slice(0, 160);
  const image = product.imageUrl || product.gallery?.[0]?.url || undefined;

  return {
    title: product.title,
    description: description || "Création personnalisée Stylunique.",
    alternates: {
      canonical: `/produits/${product.handle}`,
    },
    openGraph: {
      type: "website",
      title: product.title,
      description: description || "Création personnalisée Stylunique.",
      url: `/produits/${product.handle}`,
      images: image ? [{ url: image }] : undefined,
    },
    twitter: {
      card: "summary_large_image",
      title: product.title,
      description: description || "Création personnalisée Stylunique.",
      images: image ? [image] : undefined,
    },
  };
}

export default async function ProductPage({ params }: Props) {
  const { handle } = await params;
  const [product, siteText] = await Promise.all([getSanityProductByHandle(handle), getResolvedSiteText()]);
  const t = (key: string, fallback?: string) => text(siteText, key, fallback);

  if (!product) {
    notFound();
  }

  const categorySlug = product.categories?.[0]?.slug || "";
  const relatedProducts = categorySlug
    ? (await listSanityProductsByCategory(categorySlug, 12)).filter((item) => item.handle !== product.handle).slice(0, 4)
    : [];

  let medusaProduct = null;

  try {
    medusaProduct = await getProductByHandle(handle);
  } catch {
    medusaProduct = null;
  }

  const firstVariant = medusaProduct?.variants?.[0];
  const productImages = [
    { url: product.imageUrl, alt: product.title },
    ...((product.gallery || []).map((item) => ({ url: item?.url, alt: item?.alt || product.title }))),
  ].filter((item) => Boolean(item.url));
  const heroImage = productImages[0]?.url || "";
  const priceAmountCents = product.priceCents ?? firstVariant?.calculated_price?.calculated_amount ?? null;
  const regularPriceAmountCents =
    typeof product.regularPriceCents === "number" && typeof priceAmountCents === "number" && product.regularPriceCents > priceAmountCents
      ? product.regularPriceCents
      : null;
  const descriptionText = (product.description || product.shortDescription || t("product.defaultDescription")).trim();
  const personalizationText = (product.careText || t("product.careText")).trim();
  const formatDimension = (value: unknown) => {
    const normalizedValue = typeof value === "number" ? value : typeof value === "string" ? Number(value.replace(",", ".")) : NaN;

    return Number.isFinite(normalizedValue) && normalizedValue > 0 ? `${normalizedValue} cm` : null;
  };
  const productSize = [medusaProduct?.length ?? product.length, medusaProduct?.width ?? product.width, medusaProduct?.height ?? product.height]
    .map((value) => formatDimension(value))
    .filter((value): value is string => Boolean(value))
    .join(" × ");
  const stockLabel = product.stockStatus === "outofstock" ? "Rupture de stock" : "Disponible";
  const characteristics = [
    { label: "Catégorie", value: product.categories?.map((category) => category.title).filter(Boolean).join(", ") || "Création artisanale" },
    { label: "Disponibilité", value: stockLabel },
    ...(typeof priceAmountCents === "number" ? [{ label: "Prix", value: formatEuro(priceAmountCents) }] : []),
    ...(productSize ? [{ label: "Taille du produit", value: productSize }] : []),
    ...(medusaProduct?.variants?.length ? [{ label: "Variantes", value: `${medusaProduct.variants.length}` }] : []),
    ...(firstVariant?.sku ? [{ label: "Référence", value: firstVariant.sku }] : []),
  ];
  const breadcrumbSchema = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      {
        "@type": "ListItem",
        position: 1,
        name: "Accueil",
        item: env.siteUrl,
      },
      {
        "@type": "ListItem",
        position: 2,
        name: "Boutique",
        item: `${env.siteUrl}/boutique`,
      },
      ...(product.categories && product.categories[0]
        ? [
            {
              "@type": "ListItem",
              position: 3,
              name: product.categories[0].title || "",
              item: `${env.siteUrl}/boutique?categorie=${encodeURIComponent(product.categories[0].slug || "")}`,
            },
          ]
        : []),
      {
        "@type": "ListItem",
        position: (product.categories && product.categories[0] ? 4 : 3),
        name: product.title,
        item: `${env.siteUrl}/produits/${product.handle}`,
      },
    ],
  };
  const productSchema = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.title,
    image: productImages.map((item) => item.url).filter(Boolean),
    description: product.shortDescription || product.description || undefined,
    sku: firstVariant?.sku || undefined,
    offers:
      typeof priceAmountCents === "number"
        ? {
            "@type": "Offer",
            priceCurrency: "EUR",
            price: (priceAmountCents / 100).toFixed(2),
            availability: product.stockStatus === "outofstock" ? "https://schema.org/OutOfStock" : "https://schema.org/InStock",
            url: `/produits/${product.handle}`,
          }
        : undefined,
  };

  const relatedSection = relatedProducts.length > 0 ? (
    <section className="space-y-4 border-t border-[var(--line)] pt-8">
      <div className="space-y-1">
        <p className="text-xs font-semibold uppercase tracking-[0.16em] text-[var(--accent-3)]">Selection</p>
        <h2 className="font-serif text-3xl text-[var(--foreground)]">Susceptible de vous interesser</h2>
      </div>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {relatedProducts.map((relatedProduct, index) => (
          <ProductCard key={relatedProduct._id} product={relatedProduct} index={index} />
        ))}
      </div>
    </section>
  ) : null;

  if (medusaProduct && firstVariant) {
    return (
      <div className="space-y-10">
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }} />
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }} />
        <AnalyticsViewItemScript
          productId={medusaProduct.id}
          productTitle={product.title}
          price={product.priceCents ?? firstVariant.calculated_price?.calculated_amount}
          category={product.categories?.[0]?.title}
          image={heroImage}
        />
        <ProductDetailDynamic
          title={product.title}
          category={product.categories?.[0]?.title}
          displayBadge={product.displayBadge}
          careText={product.careText || ""}
          shortDescription={product.shortDescription || ""}
          isCustomizable={product.isCustomizable}
          sanityShowPaperFinish={product.showPaperFinish !== false}
          sanityPaperFinishRequired={product.paperFinishRequired === true}
          sanityShowThemes={product.showThemes === true}
          sanityThemeOptions={product.themeOptions || []}
          sanityThemeDetails={product.themeDetails || []}
          sanityCustomThemeRequest={product.customThemeRequest}
          sanityPersonalizationTextField={product.personalizationTextField}
          sanityPersonalizationFields={product.personalizationFields || []}
          fallbackImage={heroImage}
          galleryImages={productImages.slice(1)}
          fallbackPrice={product.priceCents ?? firstVariant.calculated_price?.calculated_amount}
          fallbackRegularPrice={product.regularPriceCents}
          medusaProduct={medusaProduct}
          descriptionText={descriptionText}
          richDescription={product.descriptionRich}
          characteristics={characteristics}
          personalizationText={personalizationText}
          showPersonalizationTab={Boolean(product.isCustomizable)}
          variantDescriptions={product.variantDescriptions || []}
        />
        {relatedSection}
      </div>
    );
  }

  const shortText = (product.shortDescription || "").trim();

  return (
    <div className="space-y-10">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }} />
      <div className="grid gap-8 md:grid-cols-[1.1fr_1fr]">
        <div className="space-y-4">
          <ProductImageGallery title={product.title} images={productImages} />
          <div className="rounded-2xl border border-[var(--line)] bg-[var(--surface)] p-4 text-sm text-[var(--muted)]">
            {product.careText?.trim() || t("product.careText")}
          </div>
        </div>

        <div className="space-y-5 md:sticky md:top-28 md:h-fit">
          {product.displayBadge?.trim() ? (
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-[var(--accent-3)]">{product.displayBadge}</p>
          ) : null}
          <h1 className="font-serif text-4xl text-[var(--foreground)]">{product.title}</h1>
          <div className="flex items-end gap-3">
            {regularPriceAmountCents ? (
              <p className="text-base font-medium text-[var(--muted)] line-through decoration-[1.5px]">
                {formatEuro(regularPriceAmountCents)}
              </p>
            ) : null}
            <p className="text-2xl font-semibold text-[var(--accent)]">
              {formatEuro(product.priceCents ?? firstVariant?.calculated_price?.calculated_amount)}
            </p>
          </div>
          {shortText ? <p className="text-lg leading-8 text-[var(--muted)]">{shortText}</p> : null}

          <div className="rounded-[1.5rem] border border-[var(--line)] bg-[var(--surface)] p-5 text-sm text-[var(--muted)] shadow-[0_12px_24px_rgba(49,18,18,0.08)]">
            {t("product.unsyncedNote")}
          </div>
        </div>
      </div>
      <ProductTabs
        descriptionText={descriptionText}
        richDescription={product.descriptionRich}
        characteristics={characteristics}
        personalizationText={personalizationText}
        showPersonalizationTab={Boolean(product.isCustomizable)}
      />
      {relatedSection}
    </div>
  );
}