import type { Metadata } from 'next'
import { getTranslations, setRequestLocale } from 'next-intl/server'
import { PageHero } from '@/components/page-hero'
import { Link } from '@/i18n/navigation'
import { locales, type Locale } from '@/i18n/config'
import { getStaticSiteSettings } from '@/lib/site-settings'
import { buildShareMetadata } from '@/lib/metadata'

type SitemapPageProps = {
  params: Promise<{ locale: string }>
}

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }))
}

export async function generateMetadata({ params }: SitemapPageProps): Promise<Metadata> {
  const { locale } = await params
  const t = await getTranslations({ locale, namespace: 'sitemap.page' })
  const site = getStaticSiteSettings()

  return buildShareMetadata({
    title: t('meta.title'),
    description: t('meta.description', { name: site.shortName }),
    path: `/${locale}/sitemap`,
    site,
  })
}

export default async function SitemapPage({ params }: SitemapPageProps) {
  const { locale } = await params
  setRequestLocale(locale as Locale)

  const t = await getTranslations('sitemap.page')
  const site = getStaticSiteSettings()

  const sections = [
    {
      title: t('sections.main'),
      links: [
        { label: t('links.home'), href: '/' },
        { label: t('links.contact'), href: '/contact' },
        { label: t('links.categories'), href: '/courses' },
        { label: t('links.upcoming'), href: '/services/upcoming-courses' },
      ],
    },
    {
      title: t('sections.services'),
      links: [
        { label: t('links.liveOnline'), href: '/services/live-online-courses' },
        { label: t('links.bespoke'), href: '/services/bespoke-training' },
        { label: t('links.coaching'), href: '/services/coaching' },
        { label: t('links.consultancy'), href: '/services/consultancy' },
      ],
    },
    {
      title: t('sections.about'),
      links: [
        { label: t('links.about'), href: '/about' },
        { label: t('links.clients'), href: '/about/our-clients' },
        { label: t('links.gallery'), href: '/about/gallery' },
        { label: t('links.blog'), href: '/blog' },
        { label: t('links.caseStudies'), href: '/resources/case-studies' },
        { label: t('links.faqs'), href: '/information/faqs' },
        { label: t('links.venue'), href: '/information/course-venue' },
        { label: t('links.travel'), href: '/information/travel-information' },
      ],
    },
    {
      title: t('sections.legal'),
      links: [
        { label: t('links.privacy'), href: '/legal/privacy-policy' },
        { label: t('links.terms'), href: '/legal/terms' },
        { label: t('links.cookies'), href: '/legal/cookies' },
      ],
    },
  ]

  return (
    <main>
      <PageHero
        eyebrow={t('hero.eyebrow')}
        title={t('hero.title')}
        description={t('hero.description', { name: site.shortName })}
      />
      <section className="section-padding">
        <div className="container-wide grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
          {sections.map((section) => (
            <div key={section.title}>
              <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                {section.title}
              </h2>
              <ul className="mt-4 space-y-2.5">
                {section.links.map((link) => (
                  <li key={link.href}>
                    <Link href={link.href} className="text-foreground transition-colors hover:text-primary">
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>
    </main>
  )
}