import { fetchAllProducts } from "@/lib/stripe/products"
import {
  PublicInset,
  PublicPageHeader,
  PublicSurface,
} from "@/components/public-surface"
import { ProductGrid } from "@/components/product-grid"
import Link from "next/link"

export const metadata = {
  title: "Products | Rocky Mountain Vending",
  description: "Shop our selection of vending machines and equipment",
}

export default async function ProductsPage() {
  let products: Awaited<ReturnType<typeof fetchAllProducts>> = []
  let error: string | null = null

  try {
    products = await fetchAllProducts()
  } catch (err) {
    if (err instanceof Error) {
      if (err.message.includes("STRIPE_SECRET_KEY")) {
        error =
          "Our product catalog is temporarily unavailable. Please contact us for current machine options."
      } else {
        error = "Failed to load products. Please try again later."
      }
    } else {
      error = "Failed to load products. Please try again later."
    }
  }

  return (
    <div className="container mx-auto px-4 py-10 md:py-14">
      <PublicPageHeader
        align="center"
        eyebrow="Machine Sales"
        title="Browse Rocky Mountain Vending equipment and machine options."
        description="Explore machines, payment hardware, and vending equipment. If you need help choosing the right setup, we can talk through new, used, and feature-specific options."
      >
        <div className="flex justify-center">
          <Link
            href="/contact-us#contact-form"
            className="inline-flex min-h-11 items-center justify-center rounded-full border border-border bg-background px-4 text-sm font-medium text-foreground transition hover:border-primary/40 hover:text-primary"
          >
            Ask About Sales
          </Link>
        </div>
      </PublicPageHeader>

      {error ? (
        <PublicSurface className="mt-10 text-center">
          <p className="text-destructive">{error}</p>
          <p className="text-sm text-muted-foreground mt-2">
            Please try again later.
          </p>
        </PublicSurface>
      ) : products.length === 0 ? (
        <PublicSurface className="mt-10 text-center">
          <div className="mb-6">
            <p className="text-lg font-medium mb-2">
              No products available yet
            </p>
            <p className="text-muted-foreground">
              Our product catalog is being prepared. Please check back soon or
              contact us directly for current offerings.
            </p>
          </div>
          <PublicInset className="mx-auto max-w-md text-sm text-muted-foreground">
            <p className="font-medium mb-1">For Vending Machine Sales:</p>
            <p>
              Call us at (435) 233-9668 or visit our contact page for immediate
              assistance.
            </p>
          </PublicInset>
        </PublicSurface>
      ) : (
        <div className="mt-10">
          <ProductGrid products={products} />
        </div>
      )}
    </div>
  )
}