'use client'

import { useTranslations } from 'next-intl'
import { useRouter } from '@/i18n/navigation'
import Container from '@/components/frontend/Container'
import BlogCard from '@/components/frontend/blog/BlogCard'
import BlogSidebar from '@/components/frontend/blog/BlogSidebar'
import BlogCategories from '@/components/frontend/blog/BlogCategories'
import BlogSearch from '@/components/frontend/blog/BlogSearch'
import Pagination from '@/components/frontend/Pagination'
import type { BlogPostSummary, BlogCategoryFilter } from '@/lib/db/queries/getBlogPosts'

interface BlogContentProps {
  posts: BlogPostSummary[]
  total: number
  page: number
  totalPages: number
  activeCategory: string | null
  search: string | null
  categories: BlogCategoryFilter[]
  totalCount: number
  featuredPosts: BlogPostSummary[]
  recentPosts: BlogPostSummary[]
}

// Presentational + navigation only — all data (posts, categories, pagination
// totals) is fetched server-side by blogs/page.tsx via the real,
// unstable_cache-wrapped getBlogPosts.ts queries (see
// DATA_FETCHING_PATTERN.md). Filtering and paging just navigate to a new
// `/blogs?...` URL; the Server Component re-fetches with the new params —
// no client-side fetch, no local in-memory filtering.
export default function BlogContent({
  posts,
  page,
  totalPages,
  activeCategory,
  search,
  categories,
  totalCount,
  featuredPosts,
  recentPosts,
}: BlogContentProps) {
  const t = useTranslations('Blog')
  const router = useRouter()

  const handlePageChange = (newPage: number) => {
    const query: Record<string, string> = {}
    if (activeCategory) query.category = activeCategory
    if (search) query.search = search
    if (newPage > 1) query.page = String(newPage)
    router.push({ pathname: '/blogs', query })
  }

  return (
    <>
      {/* Header */}
      <section className="relative overflow-hidden rounded-2xl mb-8">
        <div className="absolute inset-0 bg-gradient-primary opacity-90" />
        <div className="relative z-10 px-6 py-12 md:px-10 md:py-16 text-center">
          <div className="max-w-3xl mx-auto">
            <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
              {t('heroTitle')}
            </h1>
            <p className="text-white/80 text-lg">{t('heroSubtitle')}</p>
            <div className="mt-6 flex justify-center">
              <BlogSearch />
            </div>
          </div>
        </div>
      </section>

      <Container className="py-8">
        <div className="flex flex-col lg:flex-row gap-8">
          {/* Main Content */}
          <div className="flex-1">
            <BlogCategories categories={categories} totalCount={totalCount} activeCategory={activeCategory} />

            {posts.length === 0 ? (
              <div className="text-center py-12">
                <div className="text-6xl mb-4">📝</div>
                <h2 className="text-xl font-semibold text-dark mb-2">{t('noPostsTitle')}</h2>
                <p className="text-gray-custom">{t('noPostsDescription')}</p>
              </div>
            ) : (
              <>
                <div className="grid md:grid-cols-2 gap-6">
                  {posts.map((post) => (
                    <BlogCard key={post.id} post={post} />
                  ))}
                </div>

                {totalPages > 1 && (
                  <div className="mt-12">
                    <Pagination currentPage={page} totalPages={totalPages} onPageChange={handlePageChange} />
                  </div>
                )}
              </>
            )}
          </div>

          {/* Sidebar */}
          <div className="lg:w-80">
            <BlogSidebar
              categories={categories}
              totalCount={totalCount}
              activeCategory={activeCategory}
              featuredPosts={featuredPosts}
              recentPosts={recentPosts}
            />
          </div>
        </div>
      </Container>
    </>
  )
}