import type { Metadata } from 'next'
import { getTranslations } from 'next-intl/server'
import { getBlogList, getBlogSidebarData } from '@/lib/db/queries/getBlogPosts'
import { getDefaultLanguage, getLanguages } from '@/lib/db/queries/getlanguages'
import { getSiteInfo } from '@/lib/db/queries/getSiteInfo'
import { buildLocalizedPath } from '@/lib/i18n/buildLocalizedPath'
import BlogContent from './BlogContent'

const APP_URL = (process.env.NEXT_PUBLIC_APP_URL ?? 'http://localhost:3000').replace(/\/$/, '')
const POSTS_PER_PAGE = 6

interface BlogsPageProps {
  params: Promise<{ locale: string }>
  searchParams: Promise<{ category?: string; search?: string; page?: string }>
}

export async function generateMetadata({ params }: BlogsPageProps): Promise<Metadata> {
  const { locale } = await params
  const [t, defaultLanguage, siteInfo, languages] = await Promise.all([
    getTranslations({ locale, namespace: 'Blog' }),
    getDefaultLanguage(),
    getSiteInfo(),
    getLanguages(),
  ])

  const defaultLocale = defaultLanguage?.code ?? 'en'
  const canonicalPath = buildLocalizedPath(locale, defaultLocale, '/blogs')
  const title = `${t('metaTitle')} | ${siteInfo.siteName}`
  const description = t('metaDescription', { siteName: siteInfo.siteName })

  const languageAlternates: Record<string, string> = {}
  for (const lang of languages) {
    languageAlternates[lang.code] = `${APP_URL}${buildLocalizedPath(lang.code, defaultLocale, '/blogs')}`
  }

  return {
    title,
    description,
    alternates: {
      canonical: `${APP_URL}${canonicalPath}`,
      languages: {
        ...languageAlternates,
        'x-default': `${APP_URL}${buildLocalizedPath(defaultLocale, defaultLocale, '/blogs')}`,
      },
    },
    openGraph: {
      title,
      description,
      siteName: siteInfo.siteName,
      url: `${APP_URL}${canonicalPath}`,
      type: 'website',
    },
    twitter: { card: 'summary', title, description },
  }
}

// Server Component: real DB-backed list (search + category filter + real
// SQL pagination, see getBlogPosts.ts / DATA_FETCHING_PATTERN.md) driven
// entirely by the URL's query string — filtering/pagination just navigate
// to a new `/blogs?...` URL, no client-side fetch. BlogContent only owns
// the interactive bits (search modal, pagination navigation).
export default async function BlogsPage({ params, searchParams }: BlogsPageProps) {
  const { locale } = await params
  const sp = await searchParams
  const category = sp.category?.trim() || null
  const search = sp.search?.trim() || null
  const page = Math.max(1, Number(sp.page) || 1)

  const [{ posts, total, totalPages }, sidebar] = await Promise.all([
    getBlogList(locale, { page, limit: POSTS_PER_PAGE, categorySlug: category, search }),
    getBlogSidebarData(locale),
  ])

  return (
    <BlogContent
      posts={posts}
      total={total}
      page={page}
      totalPages={totalPages}
      activeCategory={category}
      search={search}
      categories={sidebar.categories}
      totalCount={sidebar.totalCount}
      featuredPosts={sidebar.featuredPosts}
      recentPosts={sidebar.recentPosts}
    />
  )
}