import { notFound } from "next/navigation";
import Link from "next/link";
import type { Metadata } from "next";
import { getTagBySlug, listPosts } from "@/lib/cms";
import { SiteHeader } from "@/components/site-header";
import { SiteFooter } from "@/components/site-footer";
import { Breadcrumb } from "@/components/breadcrumb";
import { PostCard } from "@/components/post-card";

export const dynamic = "force-dynamic";
export const revalidate = 60;

interface PageProps {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ page?: string }>;
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const tag = await getTagBySlug(slug);
  if (!tag) return { title: "Tag không tồn tại" };
  return {
    title: `${tag.name} — Tags Finzone`,
    description: `Tổng hợp ${tag.count ?? ""} bài viết được gắn tag "${tag.name}" từ Finzone Network.`,
    alternates: { canonical: `/tag/${slug}` },
  };
}

export default async function TagPage({ params, searchParams }: PageProps) {
  const { slug } = await params;
  const sp = await searchParams;
  const page = Math.max(1, Number(sp.page ?? "1"));
  const perPage = 12;

  const tag = await getTagBySlug(slug);
  if (!tag) notFound();

  const { posts, totalPages, total } = await listPosts({
    tags: [tag.id],
    page,
    perPage,
    orderBy: "date",
    order: "desc",
  });

  return (
    <>
      <SiteHeader />
      <div
        className="border-b hairline"
        style={{ background: "var(--bg)" }}
      >
        <div className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10 py-3">
          <Breadcrumb items={[{ label: "Trang chủ", href: "/" }, { label: `Tag: ${tag.name}` }]} />
        </div>
      </div>

      <main id="main" className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10 py-10 lg:py-14">
        <header className="text-center mb-10 pb-8 border-b hairline-strong">
          <div className="eyebrow mb-3">Tag</div>
          <h1 className="display-xl">#{tag.name}</h1>
          <p
            className="mt-3 text-[11px] font-[family-name:var(--font-jetbrains-mono)] font-mono uppercase tracking-wider"
            style={{ color: "var(--ink-3)" }}
          >
            {total} bài viết
          </p>
        </header>

        {posts.length === 0 ? (
          <p className="py-12 text-center" style={{ color: "var(--ink-3)" }}>
            Chưa có bài viết với tag này.
          </p>
        ) : (
          <>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-10 mb-10">
              {posts.map((p) => (
                <PostCard key={p.id} post={p} variant="card" />
              ))}
            </div>

            {totalPages > 1 && (
              <nav className="flex items-center justify-center gap-2">
                {page > 1 && (
                  <Link href={`/tag/${slug}?page=${page - 1}`} className="btn-secondary text-[11px]">
                    ← Trước
                  </Link>
                )}
                <span className="px-3 text-[11px] font-mono uppercase tracking-wider" style={{ color: "var(--ink-3)" }}>
                  Trang {page} / {totalPages}
                </span>
                {page < totalPages && (
                  <Link href={`/tag/${slug}?page=${page + 1}`} className="btn-secondary text-[11px]">
                    Sau →
                  </Link>
                )}
              </nav>
            )}
          </>
        )}
      </main>
      <SiteFooter />
    </>
  );
}