/** فهرست مقاله‌های مجله زهورا */
import type { Metadata } from "next";
import Link from "next/link";
import { Breadcrumbs } from "@/components/ui/Breadcrumbs";
import { ArticleCard } from "@/components/magazine/ArticleCard";
import { faNumber } from "@/lib/format";
import { seo } from "@/lib/seo";
import { listArticles } from "@/server/services/magazine";

type Props = { searchParams: Promise<{ page?: string }> };

export async function generateMetadata({ searchParams }: Props): Promise<Metadata> {
  const page = Number((await searchParams).page) || 1;
  const meta = seo({
    title: "مجله زیبایی زهورا",
    description: "راهنمای مراقبت پوست، آرایش، مو و عطر؛ روتین‌های ساده، معرفی محصولات و پاسخ پرسش‌های رایج زیبایی در مجله زهورا.",
    path: page > 1 ? `/mag?page=${page}` : "/mag",
  });
  return meta;
}

export default async function MagazinePage({ searchParams }: Props) {
  const page = Math.max(1, Math.min(500, Number((await searchParams).page) || 1));
  const { rows, pageCount } = await listArticles(page);
  return (
    <div className="container-z py-6 md:py-10">
      <Breadcrumbs items={[{ name: "مجله" }]} />
      <h1 className="mt-4 text-2xl font-extrabold md:text-4xl">مجله زهورا</h1>
      <p className="mt-2 text-sm text-muted">راهنمای مراقبت پوست، آرایش، مو و عطر</p>
      {rows.length ? (
        <div className="mt-8 grid gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
          {rows.map((a, i) => <ArticleCard key={a.slug} a={a} priority={i === 0} />)}
        </div>
      ) : (
        <p className="mt-10 rounded-2xl bg-mist p-8 text-center text-sm text-muted">به‌زودی اولین مقاله‌ها منتشر می‌شوند.</p>
      )}
      {pageCount > 1 && (
        <nav aria-label="صفحه‌بندی" className="mt-10 flex justify-center gap-2">
          {Array.from({ length: pageCount }, (_, i) => i + 1).map((p) => (
            <Link key={p} href={p === 1 ? "/mag" : `/mag?page=${p}`} aria-current={p === page ? "page" : undefined} className={`grid size-10 place-items-center rounded-full text-sm ${p === page ? "bg-ink text-paper" : "bg-mist"}`}>
              {faNumber(p)}
            </Link>
          ))}
        </nav>
      )}
    </div>
  );
}