import { notFound } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { Link } from "@/i18n/navigation";
import { ProductAddToCart } from "@/components/ProductAddToCart";
import { ProductGallery } from "@/components/ProductGallery";
import { formatThicknessMm } from "@/lib/format-thickness";
import { getProductBySlug, products } from "@/lib/products";

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

export function generateStaticParams() {
  return products.map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({ params }: Props) {
  const { slug } = await params;
  const p = getProductBySlug(slug);
  if (!p) return { title: "TrustWin" };
  const t = await getTranslations("products");
  return {
    title: `${t(`${slug}.name`)} — TrustWin`,
    description: t(`${slug}.short`),
  };
}

export default async function ProductPage({ params }: Props) {
  const { slug } = await params;
  const product = getProductBySlug(slug);
  if (!product) notFound();

  const t = await getTranslations("product");
  const tc = await getTranslations("catalog");
  const tp = await getTranslations("products");
  const tu = await getTranslations("units");
  const tcl = await getTranslations("catalogLine");
  const tn = await getTranslations("nav");

  return (
    <div className="mx-auto max-w-[1440px] px-4 py-10 sm:px-6 lg:px-8">
      <Link
        href="/catalog"
        className="text-sm font-medium text-neutral-500 transition hover:text-neutral-900"
      >
        ← {t("back")}
      </Link>

      <div className="mt-8 grid gap-10 lg:grid-cols-2 lg:gap-16">
        <div>
          <ProductGallery slug={slug} sources={product.gallery} />
          <div className="mt-6">
            <p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
              {t("thicknessLabel")}
            </p>
            <div
              className="mt-2 flex flex-wrap gap-2"
              role="list"
              aria-label={tc("thicknessList")}
            >
              {product.thicknessesMm.map((mm) => (
                <span
                  key={mm}
                  role="listitem"
                  className="inline-flex rounded-md border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-sm font-semibold tabular-nums text-neutral-800"
                >
                  {t("thicknessValue", {
                    value: formatThicknessMm(mm),
                  })}
                </span>
              ))}
            </div>
          </div>
        </div>

        <div>
          <p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
            {tcl(product.catalogLineKey)}
          </p>
          <p className="mt-2 text-sm font-semibold text-neutral-900">
            {tn("supplier")}
          </p>
          <h1 className="mt-1 text-2xl font-semibold leading-tight tracking-tight text-neutral-900 sm:text-3xl lg:text-4xl">
            {tp(`${slug}.name`)}
          </h1>
          <p className="mt-4 text-base leading-relaxed text-neutral-600">
            {tp(`${slug}.short`)}
          </p>
          <p className="mt-6 text-xl font-semibold text-neutral-900">
            {product.pricePerUnit.toFixed(2)}{" "}
            <span className="text-sm font-medium text-neutral-500">
              {tu(product.unitKey)}
            </span>
          </p>

          <div className="mt-8">
            <ProductAddToCart product={product} />
          </div>

          <div className="mt-8 rounded-lg border border-neutral-100 bg-neutral-50/80 p-5">
            <h2 className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
              {t("details")}
            </h2>
            <p className="mt-2 text-sm leading-relaxed text-neutral-600">
              {tp(`${slug}.short`)}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}