import { notFound } from "next/navigation";
import { ShopGallery } from "@/components/shop-gallery";
import { ShopOrderForm } from "@/components/shop-order-form";
import { ShopShell } from "@/components/shop-shell";
import { getProduct, getShopBySlug } from "@/lib/shop";
import { shopCopy } from "@/lib/shop-ui";

export default async function ProductPage({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string; productId: string }>;
  searchParams: Promise<{ err?: string; ok?: string }>;
}) {
  const { slug, productId } = await params;
  const query = await searchParams;
  const shop = await getShopBySlug(slug);
  if (!shop) notFound();
  const product = await getProduct(productId);
  if (!product || product.shopId !== shop.id) notFound();
  const copy = shopCopy(shop.locale);

  return (
    <ShopShell shop={shop}>
      <a href={`/shop/${shop.slug}`} className="mb-6 inline-block text-sm opacity-80">
        ← {copy.shopAll}
      </a>
      {query.ok ? (
        <p className="mb-6 rounded-2xl bg-emerald-700 px-4 py-3 text-white">{copy.thanks}</p>
      ) : null}
      <div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-2">
        <ShopGallery photos={product.photos} alt={product.title} />
        <div className="min-w-0 space-y-4">
          <h1 className="text-3xl font-bold">{product.title}</h1>
          <p className="text-xl font-semibold">
            {copy.unit}: {product.price} {shop.currency}
          </p>
          {product.weightFrom || product.weightTo ? (
            <p className="text-sm opacity-80">
              {copy.weight}: {product.weightFrom} – {product.weightTo}
            </p>
          ) : null}
          <p className="whitespace-pre-wrap leading-7 opacity-90">{product.details}</p>
          <ShopOrderForm shop={shop} product={product} error={query.err} />
        </div>
      </div>
    </ShopShell>
  );
}