import { notFound } from "next/navigation"
import { loadImageMapping } from "@/lib/wordpress-content"
import { generateRegistryMetadata, generateRegistryStructuredData } from "@/lib/seo"
import { getPageBySlug } from "@/lib/wordpress-data-loader"
import { cleanWordPressContent } from "@/lib/clean-wordPress-content"
import { DropdownPageShell } from "@/components/dropdown-page-shell"
import type { Metadata } from "next"

const WORDPRESS_SLUG =
  "diverse-vending-options-with-rocky-mountain-vendings-exclusive-wholesale-accounts"

export async function generateMetadata(): Promise<Metadata> {
  const page = getPageBySlug(WORDPRESS_SLUG)

  if (!page) {
    return {
      title: "Page Not Found | Rocky Mountain Vending",
    }
  }

  return generateRegistryMetadata("suppliers", {
    date: page.date,
    modified: page.modified,
    image: page.images?.[0]?.localPath,
  })
}

export default async function SuppliersPage() {
  try {
    const page = getPageBySlug(WORDPRESS_SLUG)

    if (!page) {
      notFound()
    }

    let imageMapping: any = {}
    try {
      imageMapping = loadImageMapping()
    } catch (e) {
      imageMapping = {}
    }

    const content = page.content ? (
      <div className="max-w-none">
        {cleanWordPressContent(String(page.content), {
          imageMapping,
          pageTitle: page.title,
        })}
      </div>
    ) : (
      <p className="text-muted-foreground">No content available.</p>
    )

    const structuredData = generateRegistryStructuredData("suppliers", {
      datePublished: page.date,
      dateModified: page.modified || page.date,
    })

    return (
      <>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
        />
        <DropdownPageShell
          breadcrumbs={[
            { label: "Food & Beverage" },
            { label: "Suppliers" },
          ]}
          eyebrow="Food & Beverage"
          title={page.title || "Food & Beverage Suppliers"}
          description={
            page.seoDescription ||
            page.excerpt ||
            "Learn how Rocky Mountain Vending sources products, keeps variety available, and builds a mix around both customer demand and dependable supply."
          }
          content={content}
          contentClassName="prose prose-lg max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-a:text-foreground prose-a:underline prose-a:decoration-primary/35 prose-a:underline-offset-4 hover:prose-a:decoration-primary prose-strong:text-foreground"
          cta={{
            eyebrow: "Need a Mix Review?",
            title: "Talk through product options for your location",
            description:
              "If you want help choosing a better snack and beverage mix, we can help with audience fit, healthier options, and machine planning.",
            actions: [
              { label: "Contact Us", href: "/contact-us#contact-form" },
              {
                label: "View Traditional Options",
                href: "/food-and-beverage/traditional-options",
                variant: "outline",
              },
            ],
          }}
        />
      </>
    )
  } catch (error) {
    if (process.env.NODE_ENV === "development") {
      console.error("Error rendering Suppliers page:", error)
    }
    notFound()
  }
}
