aragrp/app/blog/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import { getPosts, getCategories } from "@/lib/wp-api";
import { BlogPostCard } from "@/components/blog-post-card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ChevronRight, ChevronLeft } from "lucide-react";

const PER_PAGE = 9;

export const metadata: Metadata = {
  title: "بلاگ",
  description: "مقالات و مطالب فیپ در زمینه یکپارچه‌سازی، اتوماسیون و بهره‌وری سازمانی.",
};

interface BlogPageProps {
  searchParams: Promise<{ search?: string; category?: string; page?: string }>;
}

export default async function BlogPage({ searchParams }: BlogPageProps) {
  const params = await searchParams;
  const search = params.search ?? "";
  const categoryId = params.category ? parseInt(params.category, 10) : undefined;
  const page = Math.max(1, parseInt(params.page ?? "1", 10) || 1);

  let postsResult;
  let categories: Awaited<ReturnType<typeof getCategories>> = [];

  try {
    [postsResult, categories] = await Promise.all([
      getPosts({
        page,
        perPage: PER_PAGE,
        search: search || undefined,
        categoryId: Number.isFinite(categoryId) ? categoryId : undefined,
      }),
      getCategories(),
    ]);
  } catch (e) {
    console.log(e)
    return (
      <section className="bg-background pt-32 pb-20 md:pt-40 md:pb-28">
        <div className="mx-auto max-w-4xl px-6 text-center">
          <h1 className="text-4xl font-bold md:text-5xl">بلاگ</h1>
          <p className="mt-4 text-muted-foreground">
            در حال حاضر امکان بارگذاری مطالب وجود ندارد. لطفاً بعداً تلاش کنید.
          </p>
        </div>
      </section>
    );
  }

  const { posts, total, totalPages } = postsResult;
  const hasFilters = search || categoryId;

  function buildQuery(updates: { search?: string; category?: string; page?: number }) {
    const q = new URLSearchParams();
    if (updates.search !== undefined && updates.search !== "") q.set("search", updates.search);
    if (updates.category !== undefined && updates.category !== "") q.set("category", updates.category);
    if (updates.page !== undefined && updates.page > 1) q.set("page", String(updates.page));
    const s = q.toString();
    return s ? `?${s}` : "";
  }

  return (
    <>
      {/* Hero + search & filters in one section */}
      <section className="bg-background pt-32 pb-10 md:pt-40 md:pb-14">
        <div className="mx-auto max-w-6xl px-6">
          <div className="text-center space-y-8">
            <div className="space-y-3">
              <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl leading-tight tracking-normal">
                بلاگ
              </h1>
              <p className="text-lg md:text-xl leading-relaxed text-muted-foreground max-w-2xl mx-auto">
                مقالات و مطالب فیپ در زمینه یکپارچه‌سازی، اتوماسیون و بهره‌وری سازمانی.
              </p>
            </div>

            <div className="flex flex-col gap-5 max-w-2xl mx-auto">
              <form
                method="get"
                action="/blog"
                className="flex flex-col sm:flex-row gap-2 sm:gap-2 w-full"
              >
                <input type="hidden" name="category" value={categoryId ?? ""} />
                <Input
                  type="search"
                  name="search"
                  placeholder="جستجو در مطالب..."
                  defaultValue={search}
                  className="flex-1 w-full sm:min-w-[14rem] text-base"
                  aria-label="جستجو در مطالب"
                />
                <div className="flex gap-2 flex-shrink-0">
                  <Button type="submit" size="default" className="flex-1 sm:flex-none">
                    جستجو
                  </Button>
                  {hasFilters && (
                    <Link href="/blog" className="flex-1 sm:flex-none">
                      <Button type="button" variant="outline" size="default" className="w-full">
                        پاک کردن فیلتر
                      </Button>
                    </Link>
                  )}
                </div>
              </form>

              {categories.length > 0 && (
                <div className="flex flex-wrap items-center justify-center gap-2">
                  <Link
                    href="/blog"
                    className={`text-sm rounded-full px-4 py-2 transition-colors ${!categoryId
                      ? "bg-primary text-primary-foreground shadow-sm"
                      : "bg-muted/80 hover:bg-muted text-muted-foreground hover:text-foreground"
                      }`}
                  >
                    همه
                  </Link>
                  {categories.map((cat) => (
                    <Link
                      key={cat.id}
                      href={`/blog${buildQuery({ search, category: String(cat.id), page: 1 })}`}
                      className={`text-sm rounded-full px-4 py-2 transition-colors ${categoryId === cat.id
                        ? "bg-primary text-primary-foreground shadow-sm"
                        : "bg-muted/80 hover:bg-muted text-muted-foreground hover:text-foreground"
                        }`}
                    >
                      {cat.name}
                    </Link>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      <section className="bg-background pb-20 md:pb-28">
        <div className="mx-auto max-w-6xl px-6 pt-2">
          {posts.length === 0 ? (
            <div className="text-center py-16 text-muted-foreground">
              <p>مطلبی یافت نشد.</p>
              <Link href="/blog" className="mt-4 inline-block">
                <Button variant="outline" size="sm">
                  نمایش همه مطالب
                </Button>
              </Link>
            </div>
          ) : (
            <>
              <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {posts.map((post) => (
                  <li key={post.id}>
                    <BlogPostCard post={post} />
                  </li>
                ))}
              </ul>

              {totalPages > 1 && (
                <nav
                  className="mt-12 flex flex-wrap items-center justify-center gap-2"
                  aria-label="صفحه‌بندی"
                >
                  {page > 1 && (
                    <Link
                      href={`/blog${buildQuery({
                        search,
                        category: categoryId ? String(categoryId) : undefined,
                        page: page - 1,
                      })}`}
                    >
                      <Button variant="outline" size="icon" aria-label="صفحه قبل">
                        <ChevronRight className="size-4" />
                      </Button>
                    </Link>
                  )}
                  <span className="text-muted-foreground text-sm px-2">
                    صفحه {page} از {totalPages} ({total} مطلب)
                  </span>
                  {page < totalPages && (
                    <Link
                      href={`/blog${buildQuery({
                        search,
                        category: categoryId ? String(categoryId) : undefined,
                        page: page + 1,
                      })}`}
                    >
                      <Button variant="outline" size="icon" aria-label="صفحه بعد">
                        <ChevronLeft className="size-4" />
                      </Button>
                    </Link>
                  )}
                </nav>
              )}
            </>
          )}
        </div>
      </section>
    </>
  );
}