import { Metadata } from 'next'
import { businessConfig } from '@/lib/seo-config'
import { ManualsPageClient } from '@/components/manuals-page-client'
import { scanManuals, groupManuals, getManufacturers, getCategories } from '@/lib/manuals'
import { generateStructuredData } from '@/lib/seo'

export const metadata: Metadata = {
  title: 'Vending Machine Manuals | Download PDF Guides | Rocky Mountain Vending',
  description:
    'Download free vending machine manuals and PDF guides for BevMax, Merchant Series, and more. Find service manuals, parts guides, and installation instructions for hundreds of vending machine models.',
  keywords: [
    'vending machine manuals',
    'vending machine PDF',
    'vending machine service manual',
    'BevMax manual',
    'Merchant Series manual',
    'vending machine parts guide',
    'vending machine repair manual',
    'vending machine installation guide',
  ],
  openGraph: {
    title: 'Vending Machine Manuals | Download PDF Guides | Rocky Mountain Vending',
    description:
      'Download free vending machine manuals and PDF guides for BevMax, Merchant Series, and more. Find service manuals, parts guides, and installation instructions.',
    type: 'website',
    url: `${businessConfig.website}/manuals`,
    images: [
      {
        url: `${businessConfig.website}/images/rocky-mountain-vending-service-area-926x1024.webp`,
        width: 926,
        height: 1024,
        alt: 'Rocky Mountain Vending Manuals',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Vending Machine Manuals | Download PDF Guides',
    description:
      'Download free vending machine manuals and PDF guides for hundreds of vending machine models.',
  },
  alternates: {
    canonical: `${businessConfig.website}/manuals`,
  },
}

export default async function ManualsPage() {
  // Scan manuals directory
  const manuals = await scanManuals()
  const groupedManuals = groupManuals(manuals)
  const manufacturers = getManufacturers(manuals)
  const categories = getCategories(manuals)

  // Generate structured data for SEO
  const structuredData = generateStructuredData({
    title: 'Vending Machine Manuals',
    description:
      'Download free vending machine manuals and PDF guides for BevMax, Merchant Series, and more. Find service manuals, parts guides, and installation instructions for hundreds of vending machine models.',
    url: `${businessConfig.website}/manuals`,
    type: 'WebPage',
  })

  // Add CollectionPage schema for better SEO
  const collectionSchema = {
    '@context': 'https://schema.org',
    '@type': 'CollectionPage',
    name: 'Vending Machine Manuals',
    description:
      'A comprehensive collection of vending machine manuals, service guides, and parts documentation for various manufacturers and models.',
    url: `${businessConfig.website}/manuals`,
    mainEntity: {
      '@type': 'ItemList',
      numberOfItems: manuals.length,
      itemListElement: manuals.slice(0, 50).map((manual, index) => ({
        '@type': 'ListItem',
        position: index + 1,
        item: {
          '@type': 'DigitalDocument',
          name: manual.filename.replace(/\.pdf$/i, ''),
          description: `${manual.manufacturer} ${manual.category} Manual`,
          encodingFormat: 'application/pdf',
        },
      })),
    },
  }

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionSchema) }}
      />
      <div className="container mx-auto px-4 py-8 md:py-12">
        <header className="mb-8 md:mb-12">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">
            Vending Machine Manuals
          </h1>
          <p className="text-lg text-muted-foreground max-w-3xl">
            Download free PDF manuals, service guides, and parts documentation for hundreds of
            vending machine models. Find installation instructions, troubleshooting guides, and
            maintenance documentation organized by manufacturer and category.
          </p>
          <div className="mt-4 text-sm text-muted-foreground">
            <p>
              <strong>{manuals.length}</strong> manuals available from{' '}
              <strong>{manufacturers.length}</strong> manufacturers
            </p>
          </div>
        </header>

        <ManualsPageClient
          manuals={manuals}
          groupedManuals={groupedManuals}
          manufacturers={manufacturers}
          categories={categories}
        />
      </div>
    </>
  )
}