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, Search, X } from "lucide-react";
import { type, typeSpacing } from "@/lib/typography";
import { cn } from "@/lib/utils";

const PER_PAGE = 9;

export const metadata: Metadata = {
  title: "دانشنامه",
  description: "مقالات و مطالب فیپ در زمینه یکپارچه‌سازی، اتوماسیون و بهره‌وری سازمانی.",
  openGraph: {
    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) {
    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={type.h1}>بلاگ</h1>
          <p className={cn(type.body, "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, compact */}
      <section className="bg-background pt-24 pb-6 md:pt-28 md:pb-8">
        <div className="mx-auto max-w-3xl px-4 sm:px-6">
          <div className="text-center space-y-5">
            <div className="space-y-1.5">
              <h1 className={type.h1}>
                دانشنامه
              </h1>
              <p className={cn(type["body-sm"], "mx-auto max-w-xl text-muted-foreground md:text-base")}>
                مقالات و مطالب فیپ در زمینه یکپارچه‌سازی، اتوماسیون و بهره‌وری سازمانی.
              </p>
            </div>

            <div className="flex flex-col gap-4">
              <form
                method="get"
                action="/blog"
                className="flex gap-2 w-full"
              >
                <input type="hidden" name="category" value={categoryId ?? ""} />
                <div className="relative flex-1 flex items-center">
                  <Search className="absolute right-3 size-4 text-muted-foreground pointer-events-none" aria-hidden />
                  <Input
                    type="search"
                    name="search"
                    placeholder="جستجو در مطالب..."
                    defaultValue={search}
                    className="w-full pr-10 pl-3 h-9 text-sm"
                    aria-label="جستجو در مطالب"
                  />
                </div>
                <Button type="submit" className="shrink-0">
                  جستجو
                </Button>
              </form>
              {hasFilters && (
                <Link
                  href="/blog"
                  className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
                >
                  <X className="size-3.5" />
                  پاک کردن فیلتر
                </Link>
              )}

              {categories.length > 0 && (
                <div className="flex flex-wrap items-center justify-center gap-1.5">
                  <Link
                    href="/blog"
                    className={`text-xs rounded-full px-3 py-1.5 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-xs rounded-full px-3 py-1.5 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>
    </>
  );
}