import React from 'react'
import { SectionsLayout } from '@/components/ui/layouts'
import Blog, { IBlogList } from '@/models/Blog'
import BlogHero from './components/BlogHero'
import BlogLatestArticlesPresentation from './components/BlogLatestArticlesPresentation'
import { getLocale, getTranslations } from 'next-intl/server'
import Pagination from '@/components/ui/pagination/Pagination'
import { Metadata } from 'next'
import { getBlogsMeta } from '@/components/metaData'

type Params = Promise<{ slug: string }>
type SearchParams = Promise<{ search: string, page: string }>

export const generateMetadata = async (props: { 
  searchParams: SearchParams 
}): Promise<Metadata> => {
  const t = await getTranslations('')
  const locale = await getLocale()
  const searchParams = await props.searchParams
  const currentPage = searchParams?.page ? parseInt(searchParams.page) : 1
  
  const baseMeta = await getBlogsMeta(t)
  const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_HOST || 'https://dadycar.com'
  const localePrefix = locale === 'en' ? '/en' : ''
  
  // Build canonical URL
  const canonicalUrl = currentPage === 1 
    ? `${baseUrl}${localePrefix}/blog`
    : `${baseUrl}${localePrefix}/blog?page=${currentPage}`
  
  // Update title for paginated pages
  const title = currentPage > 1 
    ? `${baseMeta.title} - Page ${currentPage}`
    : baseMeta.title
  
  return {
    ...baseMeta,
    title: title,
    alternates: {
      canonical: canonicalUrl,
    },
    robots: {
      index: true, // Allow indexing pagination pages
      follow: true,
    }
  }
}

const BlogPage = async (props: { 
  params: Params,
  searchParams: SearchParams 
}) => {
  const locale = await getLocale()
  const searchParams = await props.searchParams

  const itemsPerPage = 10
  const searchQuery = searchParams?.search || ''
  const currentPage = searchParams?.page ? parseInt(searchParams.page) : 1

  let blogList: IBlogList
  if (searchQuery) {
    blogList = (await Blog.search(
      decodeURIComponent(searchQuery),
      locale,
      currentPage,
      itemsPerPage
    )) as IBlogList
  } else {
    blogList = (await Blog.getList(locale, currentPage, itemsPerPage)) as IBlogList
  }

  const totalPages = blogList.totalPages
  const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_HOST || 'https://dadycar.com'
  const localePrefix = locale === 'en' ? '/en' : ''

  // Calculate prev and next URLs for SEO
  const prevUrl = currentPage > 2 
    ? `${baseUrl}${localePrefix}/blog?page=${currentPage - 1}`
    : currentPage === 2 
      ? `${baseUrl}${localePrefix}/blog`
      : null

  const nextUrl = currentPage < totalPages 
    ? `${baseUrl}${localePrefix}/blog?page=${currentPage + 1}`
    : null

  return (
    <>
      {/* Add rel="prev" and rel="next" link tags for SEO */}
      {prevUrl && (
        <link rel="prev" href={prevUrl} />
      )}
      {nextUrl && (
        <link rel="next" href={nextUrl} />
      )}

      <main className="overflow-visible">
        <BlogHero />
        
        <SectionsLayout>
          <BlogLatestArticlesPresentation
            latestArticles={blogList?.blogs}
            searchQuery={searchQuery}
          />
          {totalPages > 1 && (
            <Pagination
              totalPages={totalPages}
              currentPage={currentPage}
              basePath={`/blog${searchQuery ? `?search=${searchQuery}` : ''}`}
              enBasePath={`/en/blog${searchQuery ? `?search=${searchQuery}` : ''}`}
              className="mt-8"
              locale={locale}
            />
          )}
        </SectionsLayout>
      </main>
    </>
  )
}

export default BlogPage