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>
  )
}