import { Header } from "@/components/server/Header";
import { DimensionsTable } from "@/components/server/DimensionsTable";
import { CrossSell } from "@/components/server/CrossSell";
import { PdpGallery, PdpPanel } from "@/components/client/PdpInteractive";
import { fetchProduct, fetchAllProducts } from "@/lib/api";
import { products as allProductsMock } from "@/lib/master-json";
import { SHOP_ENABLED } from "@/lib/shop-config";

export async function generateStaticParams() {
  return allProductsMock.map((p) => ({ sku: p.sku }));
}

export default async function V2ProductPage({
  params,
}: PageProps<"/v2/produkt/[sku]">) {
  const { sku } = await params;
  const product = await fetchProduct(sku);

  if (!product) {
    return (
      <>
        <Header variant="light" version="v2" />
        <div className="flex min-h-[60vh] flex-col items-center justify-center px-6 pt-20">
          <p className="text-sm text-ash">Produkt nie znaleziony</p>
        </div>
      </>
    );
  }

  const allProducts = await fetchAllProducts();

  return (
    <>
      <Header variant="light" version="v2" />

      <nav className="mx-auto max-w-[1600px] px-6 pt-28 md:px-16 md:pt-36" aria-label="Breadcrumb">
        <p className="text-[11px] uppercase tracking-[0.2em] text-ash">
          <span>Strona główna</span>
          <span className="mx-3 text-line">/</span>
          <span>{product.category_name}</span>
          <span className="mx-3 text-line">/</span>
          <span className="text-ink">{product.collection}</span>
        </p>
      </nav>

      <div className="mx-auto max-w-[1600px] px-6 py-8 md:px-16 md:py-12">
        <div className="grid grid-cols-1 gap-8 lg:grid-cols-[1.3fr_1fr] lg:gap-16">
          <div className="lg:order-1">
            <PdpGallery product={product} />
          </div>
          <div className="lg:order-2">
            <div className="lg:sticky lg:top-32">
              <p className="text-[11px] font-bold uppercase tracking-[0.4em] text-ash">{product.collection}</p>
              <h1 className="mt-4 text-[clamp(2rem,5vw,3.5rem)] font-extrabold leading-[0.95] tracking-[-0.02em] text-ink">{product.name}</h1>

              <div className="mt-4 flex flex-wrap items-center gap-4">
                {SHOP_ENABLED && product.badge && (
                  <span className="bg-ink px-3 py-1.5 text-[10px] font-bold uppercase tracking-[0.2em] text-paper">{product.badge}</span>
                )}
                {SHOP_ENABLED && product.rating && product.reviews_count && (
                  <span className="text-xs text-ash">
                    {"★".repeat(Math.round(product.rating))}{"☆".repeat(5 - Math.round(product.rating))}{" "}
                    <span className="ml-1">{product.rating} ({product.reviews_count})</span>
                  </span>
                )}
              </div>

              {SHOP_ENABLED && (
                <div className="mt-8 border-y border-line py-6">
                  <div className="flex items-baseline gap-4">
                    <span className="text-[clamp(2rem,4vw,3rem)] font-extrabold tabular-nums leading-none text-ink">
                      {product.base_price.toLocaleString("pl-PL")}<span className="text-lg font-medium"> zł</span>
                    </span>
                    {product.compare_at_price && (
                      <span className="text-lg tabular-nums text-promo line-through">{product.compare_at_price.toLocaleString("pl-PL")} zł</span>
                    )}
                  </div>
                  <p className="mt-3 text-xs text-ash">
                    lub <span className="font-semibold text-ink">
                      {(product.base_price / 3).toLocaleString("pl-PL", { maximumFractionDigits: 0 })} zł × 3
                    </span> — Raty 3x0%
                  </p>
                </div>
              )}

              <p className="mt-8 text-[15px] leading-[1.7] text-graphite">{product.description}</p>

              <PdpPanel product={product} />

              <div className="mt-12 border-t border-line pt-8">
                <h3 className="mb-6 text-[11px] font-bold uppercase tracking-[0.3em] text-ink">Specyfikacja</h3>
                <ul className="space-y-0">
                  {product.tech_specs.map((spec, i) => (
                    <li key={spec} className="flex items-start gap-4 border-b border-line py-3 text-sm last:border-0">
                      <span className="text-[10px] font-bold tabular-nums text-ash">{String(i + 1).padStart(2, "0")}</span>
                      <span className="text-graphite">{spec}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div className="mt-12">
                <DimensionsTable product={product} />
              </div>
            </div>
          </div>
        </div>
      </div>

      <section className="bg-offwhite px-6 py-24 md:px-16 md:py-32">
        <div className="mx-auto max-w-[1600px]">
          <div className="grid grid-cols-1 gap-12 md:grid-cols-12 md:gap-8">
            <div className="md:col-span-5">
              <p className="text-[11px] font-bold uppercase tracking-[0.4em] text-ash">Make-to-Order</p>
              <h2 className="mt-6 text-[clamp(1.5rem,4vw,3rem)] font-extrabold leading-[0.95] tracking-[-0.02em] text-ink">
                Szyty<br /><span className="font-light italic">dla Ciebie</span>
              </h2>
            </div>
            <div className="md:col-span-6 md:col-start-7 md:pt-6">
              <p className="text-[15px] leading-[1.7] text-graphite">
                Produkcja rozpoczyna się po złożeniu zamówienia. Wybierz tkaninę,
                kolor i konfigurację — każdy mebel powstaje od zera w naszej
                manufakturze. Dostawa z umówionym terminem, 30 dni na próbę
                we własnym salonie.
              </p>
              <div className="mt-10 grid grid-cols-2 gap-6 border-t border-line pt-8">
                <div>
                  <p className="text-[clamp(1.5rem,3vw,2.5rem)] font-extrabold tabular-nums leading-none text-ink">30d</p>
                  <p className="mt-2 text-[10px] uppercase tracking-[0.2em] text-ash">Na próbę</p>
                </div>
                <div>
                  <p className="text-[clamp(1.5rem,3vw,2.5rem)] font-extrabold tabular-nums leading-none text-ink">2l</p>
                  <p className="mt-2 text-[10px] uppercase tracking-[0.2em] text-ash">Gwarancja</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CrossSell currentProduct={product} allProducts={allProducts} version="v2" />
    </>
  );
}