import { notFound } from "next/navigation";
import Link from "next/link";
import type { Metadata } from "next";
import { getAuthorBySlug, 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 author = await getAuthorBySlug(slug);
  if (!author) return { title: "Tác giả không tồn tại" };
  return {
    title: `${author.name} — Tác giả`,
    description: author.description || `Bài viết của ${author.name} trên Finzone Network.`,
    alternates: { canonical: `/tac-gia/${slug}` },
  };
}

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

  const author = await getAuthorBySlug(slug);
  if (!author) notFound();

  const { posts, totalPages, total } = await listPosts({
    author: author.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: "Tác giả" },
              { label: author.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="w-20 h-20 rounded-full flex items-center justify-center font-bold text-2xl mx-auto mb-4 overflow-hidden"
            style={{ background: "var(--accent)", color: "white" }}
          >
            {author.avatar_urls?.["96"] ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={author.avatar_urls["96"]} alt={author.name} />
            ) : (
              author.name.slice(0, 2).toUpperCase()
            )}
          </div>
          <div className="eyebrow mb-2">Tác giả</div>
          <h1 className="display-xl">{author.name}</h1>
          {author.description && (
            <p
              className="mt-4 text-base lg:text-lg leading-relaxed max-w-2xl mx-auto"
              style={{ color: "var(--ink-2)" }}
            >
              {author.description}
            </p>
          )}
          <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)" }}>
            Tác giả này chưa có bài viết nào.
          </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={`/tac-gia/${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={`/tac-gia/${slug}?page=${page + 1}`} className="btn-secondary text-[11px]">
                    Sau →
                  </Link>
                )}
              </nav>
            )}
          </>
        )}
      </main>
      <SiteFooter />
    </>
  );
}