import type { Metadata } from 'next'
import { Suspense } from 'react'
import { getTranslations, setRequestLocale } from 'next-intl/server'
import { Hero } from '@/components/hero'
import { HomeProofStrip } from '@/components/home-proof-strip'
import { AiCapabilityPanel } from '@/components/ai-capability-panel'
import { FeaturedCourses } from '@/components/featured-courses'
import { HomeCapabilities } from '@/components/home-capabilities'
import { SubjectsSection } from '@/components/subjects-section'
import { WhyChooseRokyan } from '@/components/why-choose-rokyan'
import { RokyanExperience } from '@/components/rokyan-experience'
import { ParticipantSuccessStories } from '@/components/participant-success-stories'
import { BlogSection } from '@/components/blog-section'
import { CtaBanner } from '@/components/cta-banner'
import { siteConfig } from '@/lib/site-config'
import { buildShareMetadata } from '@/lib/metadata'
import { getStaticSiteSettings } from '@/lib/site-settings'
import { fetchHomepageData } from '@/lib/homepage-data'
import { fetchHeroSlideViews } from '@/lib/hero-slides'
import { locales, type Locale } from '@/i18n/config'

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

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

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

  return {
    ...buildShareMetadata({
      title: t('title'),
      description: t('description'),
      path: '/',
      locale,
      imageAlt: `${site.shortName} — ${siteConfig.positioningHeadline}`,
      site,
    }),
    keywords: [...siteConfig.seoKeywords],
  }
}

function BelowFoldFallback() {
  return (
    <div className="animate-pulse border-b border-border/50 bg-white" aria-hidden>
      <div className="border-b border-border/60 bg-[oklch(0.975_0.01_343)] py-12">
        <div className="container-wide grid grid-cols-2 gap-3 sm:grid-cols-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="h-24 bg-muted" />
          ))}
        </div>
      </div>
      <div className="container-wide py-12">
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-8">
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} className="h-28 bg-muted sm:h-32" />
          ))}
        </div>
      </div>
    </div>
  )
}

async function HomeBelowFold({ locale }: { locale: Locale }) {
  const data = await fetchHomepageData(locale)

  return (
    <>
      <HomeProofStrip initialLogos={data.clientLogos} />
      <AiCapabilityPanel />
      <FeaturedCourses initialData={data.featuredCourses} />
      <HomeCapabilities initialServices={data.services} />
      <SubjectsSection initialData={data.categories} />
      <WhyChooseRokyan />
      <RokyanExperience />
      <ParticipantSuccessStories
        initialVideos={data.videoTestimonials}
        initialReviews={data.googleReviews}
      />
      <BlogSection initialData={data.blogPosts} />
      <CtaBanner />
    </>
  )
}

export default async function Home({ params }: HomePageProps) {
  const { locale } = await params
  const resolvedLocale = locale as Locale
  setRequestLocale(resolvedLocale)

  const heroSlides = await fetchHeroSlideViews(resolvedLocale)

  return (
    <main className="bg-white">
      <Hero initialSlides={heroSlides} />
      <Suspense fallback={<BelowFoldFallback />}>
        <HomeBelowFold locale={resolvedLocale} />
      </Suspense>
    </main>
  )
}