import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { setRequestLocale, getTranslations } from "next-intl/server";
import { ArrowLeft, MessageCircle, Package } from "lucide-react";
import { FadeIn } from "@/components/magicui/fade-in";
import { ButtonLink } from "@/components/ui/button";
import { CONTACT_INFO, SOHEALTHY_PRODUCTS } from "@/data/site-data";
import { getLocalizedSoHealthyProducts } from "@/data/localized-data";

import { soHealthyProductJsonLd, breadcrumbJsonLd } from "@/lib/jsonld";
import { JsonLd } from "@/components/seo/json-ld";
import { SITE_URL } from "@/lib/seo";
import type { SoHealthyVariant } from "@/data/localized-data";

export function generateStaticParams() {
  return SOHEALTHY_PRODUCTS.map((p) => ({ slug: p.id }));
}
export const dynamicParams = false;

/* ── Variant card ────────────────────────────────────── */
function VariantCard({
  variant,
  index,
  locale,
}: {
  variant: SoHealthyVariant;
  index: number;
  locale: string;
}) {
  return (
    <FadeIn delay={index * 80}>
      <div className="group overflow-hidden rounded-2xl border border-gold/10 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-gold/25 hover:shadow-md">
        {/* Image */}
        <div className="relative aspect-[4/3] overflow-hidden bg-cream">
          <Image
            src={variant.image}
            alt={variant.nameEn}
            fill
            className="object-cover transition-transform duration-500 group-hover:scale-105"
            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
          />
        </div>

        {/* Info */}
        <div className="p-5">
          <div className="mb-3 border-b border-gold/10 pb-3">
            <h3 className="font-serif text-base font-bold text-ink">{variant.nameEn}</h3>
          </div>
          <div className="space-y-2">
            {Object.entries(variant.specs).map(([key, val]) => {
              const isPackageSpec = key.includes("Package") || key.includes("Kemasan") || key.includes("包装") || key.includes("Specifications");
              return (
                <div key={key} className={isPackageSpec ? "flex flex-col gap-1 pt-1" : "flex justify-between gap-2"}>
                  {key !== "Specifications" && <span className="text-xs text-muted">{key}</span>}
                  <span className={`text-xs font-semibold text-ink ${isPackageSpec && key !== "Specifications" ? "text-left leading-relaxed" : key === "Specifications" ? "text-center w-full leading-relaxed" : "text-right"}`}>{val as string}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </FadeIn>
  );
}

/* ── Page ────────────────────────────────────────────── */
export default async function SoHealthyProductPage({
  params,
}: {
  params: Promise<{ locale: string; slug: string }>;
}) {
  const { locale, slug } = await params;
  setRequestLocale(locale);
  const t = await getTranslations("sohealthy");
  const l = (href: string) => `/${locale}${href}`;

  const products = getLocalizedSoHealthyProducts(locale);
  const product = products.find((p) => p.id === slug);
  if (!product) notFound();

  const otherProducts = products.filter((p) => p.id !== slug);

  return (
    <main>
      <JsonLd
        data={soHealthyProductJsonLd({
          name: product.nameEn,
          description: product.description,
          image: product.image,
          slug: product.id,
          locale,
        })}
      />
      <JsonLd
        data={breadcrumbJsonLd([
          { name: "Home", url: `${SITE_URL}/${locale}` },
          { name: "SoHealthy", url: `${SITE_URL}/${locale}/sohealthy` },
          { name: product.nameEn, url: `${SITE_URL}/${locale}/sohealthy/${product.id}` },
        ])}
      />

      {/* ── BREADCRUMB ───────────────────────────────────── */}
      <div className="border-b border-black/5 bg-white">
        <div className="mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8">
          <div className="flex items-center gap-2 text-[11px] text-muted">
            <Link href={l("/sohealthy")} className="transition-colors hover:text-gold">
              SoHealthy
            </Link>
            <span>/</span>
            <span className="font-semibold text-ink">{product.nameEn}</span>
          </div>
        </div>
      </div>

      {/* ── HERO DETAIL ──────────────────────────────────── */}
      <section className="bg-gold-bg py-12 sm:py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 items-start gap-10 lg:grid-cols-2">

            {/* Left — Main image */}
            <FadeIn direction="left">
              <div className="group relative aspect-[4/3] overflow-hidden rounded-2xl bg-cream shadow-lg">
                <Image
                  src={product.image}
                  alt={product.nameEn}
                  fill
                  className="object-cover transition-transform duration-700 group-hover:scale-105"
                  sizes="(max-width: 1024px) 100vw, 50vw"
                  priority
                />
                {/* SoHealthy badge */}
                <div className="absolute left-4 top-4">
                  <span className="rounded-full bg-white/90 px-3 py-1 text-[10px] font-bold tracking-widest text-gold backdrop-blur-sm">
                    SoHealthy
                  </span>
                </div>
              </div>
            </FadeIn>

            {/* Right — Info */}
            <FadeIn direction="right" delay={150}>
              <div className="space-y-6">
                {/* Back link */}
                <Link
                  href={l("/sohealthy")}
                  className="inline-flex items-center gap-1.5 text-xs font-bold tracking-wider text-muted transition-colors hover:text-gold"
                >
                  <ArrowLeft className="h-3.5 w-3.5" />
                  {t("backToSoHealthy")}
                </Link>

                {/* Name */}
                <div>
                  <h1 className="font-serif text-5xl font-bold text-ink sm:text-6xl">
                    {product.nameEn}
                  </h1>

                </div>

                {/* Description */}
                <p className="text-sm leading-relaxed text-muted">{product.description}</p>

                {/* Specs */}
                <div className="rounded-2xl border border-gold/10 bg-white p-5 shadow-sm">
                  <p className="mb-3 text-[10px] font-bold uppercase tracking-widest text-muted">
                    {t("specifications")}
                  </p>
                  {Object.entries(product.specs).map(([key, val], i, arr) => {
                    const isPackageSpec = key.includes("Package") || key.includes("Kemasan") || key.includes("包装") || key.includes("Specifications");
                    return (
                      <div
                        key={key}
                        className={`flex ${isPackageSpec ? "flex-col items-start gap-1.5" : "items-center justify-between gap-4"} py-3 ${i !== arr.length - 1 ? "border-b border-black/5" : ""}`}
                      >
                        {key !== "Specifications" && (
                          <div className="flex items-center gap-2.5">
                            <span className="text-[11px] font-bold text-ink">{key}</span>
                          </div>
                        )}
                        <span className={`font-serif text-base font-bold text-gold ${isPackageSpec && key !== "Specifications" ? "text-left leading-snug" : key === "Specifications" ? "text-center w-full leading-snug" : "text-right"}`}>{val as string}</span>
                      </div>
                    );
                  })}
                </div>

                {/* CTA */}
                <div className="flex flex-wrap gap-3">
                  <ButtonLink
                    href={CONTACT_INFO.whatsapp}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <MessageCircle className="h-3.5 w-3.5" />
                    {t("contactUs")}
                  </ButtonLink>
                  <ButtonLink href={`/${locale}/#contact`} variant="outline">
                    {t("requestCatalog")}
                  </ButtonLink>
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>
      {/* ── VARIANTS ─────────────────────────────────────── */}
      {product.variants && product.variants.length > 0 && (
        <section className="bg-white py-14 sm:py-20">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <FadeIn>
              <div className="mb-10 text-center">
                <p className="text-xs font-bold uppercase tracking-[0.25em] text-gold">
                  {t("alsoAvailable")}
                </p>
                <h2 className="mt-2 font-serif text-2xl font-bold text-ink sm:text-3xl">
                  {product.nameEn} {t("variants")}
                </h2>
                <div className="mx-auto mt-3 h-px w-16 bg-gold/30" />
              </div>
            </FadeIn>
            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
              {product.variants.map((variant, i) => (
                <VariantCard key={variant.id} variant={variant} index={i} locale={locale} />
              ))}
            </div>
          </div>
        </section>
      )}
      {/* ── OTHER PRODUCTS ───────────────────────────────── */}
      <section className="bg-gold-bg py-14 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <FadeIn>
            <div className="mb-10 text-center">
              <p className="text-xs font-bold uppercase tracking-[0.25em] text-gold">
                {t("exploreMore")}
              </p>
              <h2 className="mt-2 font-serif text-2xl font-bold text-ink sm:text-3xl">
                {t("otherProducts")}
              </h2>
              <div className="mx-auto mt-3 h-px w-16 bg-gold/30" />
            </div>
          </FadeIn>

          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
            {otherProducts.map((p, i) => (
              <FadeIn key={p.id} delay={i * 60}>
                <Link href={l(`/sohealthy/${p.id}`)} className="group block">
                  <div className="overflow-hidden rounded-xl border border-gold/10 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-md">
                    <div className="relative aspect-square overflow-hidden bg-cream">
                      <Image
                        src={p.image}
                        alt={p.nameEn}
                        fill
                        className="object-cover transition-transform duration-500 group-hover:scale-105"
                        sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 16vw"
                      />
                    </div>
                    <div className="p-3 text-center">
                      <p className="text-xs font-bold text-ink group-hover:text-gold">
                        {p.nameEn}
                      </p>

                    </div>
                  </div>
                </Link>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

    </main>
  );
}