import type { Metadata } from 'next'
import { notFound } from 'next/navigation'
import { routes, getRouteBySlug } from '@/lib/routes-data'
import { RoutePageTemplate } from '@/components/routes/RoutePageTemplate'
import { Breadcrumbs } from '@/components/seo/Breadcrumbs'
import { JsonLd } from '@/components/seo/JsonLd'
import { COMPANY } from '@/lib/constants'

export async function generateStaticParams() {
  return routes.map((route) => ({ slug: route.slug }))
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>
}): Promise<Metadata> {
  const { slug } = await params
  const route = getRouteBySlug(slug)
  if (!route) return {}

  return {
    title: route.metaTitle,
    description: route.metaDescription,
    keywords: route.keywords,
    alternates: { canonical: `/routes/${route.slug}` },
    openGraph: {
      title: route.metaTitle,
      description: route.metaDescription,
      type: 'website',
    },
  }
}

export default async function RoutePage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const route = getRouteBySlug(slug)
  if (!route) notFound()

  const routeSchema = {
    '@context': 'https://schema.org',
    '@type': 'Service',
    name: `Charter Bus ${route.origin} to ${route.destination}`,
    description: route.overview,
    provider: {
      '@type': 'LocalBusiness',
      name: COMPANY.name,
      telephone: COMPANY.phone,
    },
    areaServed: [
      { '@type': 'City', name: route.origin },
      { '@type': 'City', name: route.destination },
    ],
    serviceType: 'Charter Bus Transportation',
  }

  return (
    <>
      <JsonLd data={routeSchema} />
      <div className="max-w-7xl mx-auto px-4">
        <div className="pt-24">
          <Breadcrumbs
            items={[
              { label: 'Routes', href: '/routes' },
              { label: `${route.origin} to ${route.destination}` },
            ]}
          />
        </div>
      </div>
      <RoutePageTemplate route={route} />
    </>
  )
}