import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { Container } from "@/components/Container";
import { ProductLanding } from "@/components/products/ProductLanding";
import { getProductPageWithFallback } from "@/lib/product-pages/queries";
import { listPublishedProducts, formatPrice } from "@/lib/store/queries";

export const dynamic = "force-dynamic";

export async function generateMetadata(): Promise<Metadata> {
  const data = await getProductPageWithFallback("store");
  return {
    title: data.heroTitle || "OrthoGlobe Store",
    description: data.heroDescription,
    openGraph: {
      title: data.heroTitle || "OrthoGlobe Store",
      description: data.heroDescription,
    },
  };
}

export default async function StorePage() {
  const [data, products] = await Promise.all([
    getProductPageWithFallback("store"),
    listPublishedProducts(),
  ]);
  const hasProducts = products.length > 0;

  // When the catalogue is populated, hide the placeholder feature tiles so the
  // real product grid takes centre stage. Pre-launch, keep the shelves.
  const landingData = hasProducts ? { ...data, features: [] } : data;

  return (
    <ProductLanding data={landingData}>
      {hasProducts ? (
        <section className="border-t border-[var(--color-line)] bg-white py-16 md:py-20">
          <Container className="max-w-7xl">
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              {products.map((p) => (
                <Link
                  key={p.id}
                  href={`/products/store/${p.slug}`}
                  className="group flex flex-col overflow-hidden rounded-2xl border border-[var(--color-line)] bg-white transition-[border-color,box-shadow] hover:border-[var(--color-blue)] hover:shadow-[0_20px_48px_rgba(30,64,255,0.08)]"
                >
                  <div className="relative aspect-[4/3] w-full bg-[var(--color-mist)]">
                    {p.coverImage && (
                      <Image
                        src={p.coverImage}
                        alt={p.coverImageAlt ?? p.title}
                        fill
                        sizes="(min-width: 1024px) 360px, (min-width: 768px) 50vw, 100vw"
                        className="object-cover"
                      />
                    )}
                  </div>
                  <div className="flex flex-1 flex-col p-6">
                    <h3 className="font-display text-[20px] font-extrabold leading-tight tracking-[-0.01em] text-[var(--color-ink)] group-hover:text-[var(--color-blue)]">
                      {p.title}
                    </h3>
                    {p.shortDescription && (
                      <p className="mt-3 line-clamp-3 text-[14px] leading-relaxed text-[var(--color-slate)]">
                        {p.shortDescription}
                      </p>
                    )}
                    <div className="mt-auto flex items-center justify-between pt-5 text-[14px]">
                      <span className="font-semibold text-[var(--color-ink)]">
                        {formatPrice(p.priceMinor, p.currency)}
                      </span>
                      <span className="text-[var(--color-slate)]">
                        {labelForStock(p.stockStatus)}
                      </span>
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          </Container>
        </section>
      ) : null}
    </ProductLanding>
  );
}

function labelForStock(s: string): string {
  switch (s) {
    case "in_stock":
      return "In stock";
    case "out_of_stock":
      return "Out of stock";
    case "preorder":
      return "Pre-order";
    case "coming_soon":
    default:
      return "Coming soon";
  }
}
