import { notFound } from "next/navigation";
import Link from "next/link";
import type { Metadata } from "next";
import { getCategoryBySlug, getAllCategories, 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";
import { categoryAccent } from "@/lib/utils";

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 cat = await getCategoryBySlug(slug);
  if (!cat) return { title: "Chuyên mục không tồn tại" };
  const a = categoryAccent(slug);
  return {
    title: `${a.label} — Tin tài chính`,
    description:
      cat.description ||
      `Tổng hợp ${cat.count ?? ""} bài viết về ${a.label} từ Finzone Network.`,
    alternates: { canonical: `/category/${slug}` },
  };
}

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

  const cat = await getCategoryBySlug(slug);
  if (!cat) notFound();

  const accent = categoryAccent(slug);
  const allCats = await getAllCategories();
  const subCats = allCats.filter((c) => c.parent === cat.id);

  const { posts, totalPages, total } = await listPosts({
    categories: [cat.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: cat.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">
            <span
              className="inline-block w-2 h-2 rounded-full mr-2 align-middle"
              style={{ background: accent.color }}
            />
            Chuyên mục
          </div>
          <h1 className="display-xl">{cat.name}</h1>
          {cat.description && (
            <p
              className="mt-4 text-base lg:text-lg leading-relaxed max-w-2xl mx-auto"
              style={{ color: "var(--ink-2)" }}
            >
              {cat.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>

          {subCats.length > 0 && (
            <div className="flex gap-2 mt-6 overflow-x-auto scrollbar-hide pb-1 justify-start lg:justify-center">
              <Link
                href={`/category/${slug}`}
                className="btn-secondary text-[11px] whitespace-nowrap"
                style={{ background: "var(--accent)", color: "white", borderColor: "var(--accent)" }}
              >
                Tất cả
              </Link>
              {subCats.map((sc) => (
                <Link
                  key={sc.id}
                  href={`/category/${sc.slug}`}
                  className="btn-secondary text-[11px] whitespace-nowrap"
                >
                  {sc.name}{" "}
                  <span style={{ color: "var(--ink-3)" }}>({sc.count})</span>
                </Link>
              ))}
            </div>
          )}
        </header>

        {posts.length === 0 ? (
          <p className="py-12 text-center" style={{ color: "var(--ink-3)" }}>
            Chưa có bài viết trong chuyên mục này.
          </p>
        ) : (
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
            <div className="lg:col-span-8 space-y-10">
              {page === 1 && posts[0] && (
                <PostCard post={posts[0]} variant="feature" priority />
              )}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-10">
                {(page === 1 ? posts.slice(1) : posts).map((p) => (
                  <PostCard key={p.id} post={p} variant="card" />
                ))}
              </div>
              <Pagination slug={slug} page={page} totalPages={totalPages} />
            </div>
            <aside className="lg:col-span-4 space-y-6">
              <SidebarLatest categoryId={cat.id} />
            </aside>
          </div>
        )}
      </main>
      <SiteFooter />
    </>
  );
}

async function SidebarLatest({ categoryId }: { categoryId: string }) {
  const { posts } = await listPosts({ categories: [categoryId], perPage: 5 });
  return (
    <div className="card-modern p-6 lg:sticky lg:top-4">
      <div
        className="text-[10px] uppercase tracking-wider font-bold mb-4 font-[family-name:var(--font-jetbrains-mono)] font-mono"
        style={{ color: "var(--ink-3)" }}
      >
        Mới nhất trong chuyên mục
      </div>
      <ul className="space-y-0">
        {posts.map((p) => (
          <li key={p.id}>
            <PostCard post={p} variant="rail" />
          </li>
        ))}
      </ul>
    </div>
  );
}

function Pagination({ slug, page, totalPages }: { slug: string; page: number; totalPages: number }) {
  if (totalPages <= 1) return null;
  const pages = paginationRange(page, totalPages);
  return (
    <nav aria-label="Phân trang" className="flex flex-wrap items-center justify-center gap-2 pt-6">
      {page > 1 && (
        <Link href={`/category/${slug}?page=${page - 1}`} className="btn-secondary text-[11px]">
          ← Trước
        </Link>
      )}
      {pages.map((p, i) =>
        p === "..." ? (
          <span key={i} className="px-3" style={{ color: "var(--ink-3)" }}>
            …
          </span>
        ) : (
          <Link
            key={i}
            href={`/category/${slug}?page=${p}`}
            className={p === page ? "btn-primary text-[11px]" : "btn-secondary text-[11px]"}
          >
            {p}
          </Link>
        )
      )}
      {page < totalPages && (
        <Link href={`/category/${slug}?page=${page + 1}`} className="btn-secondary text-[11px]">
          Sau →
        </Link>
      )}
    </nav>
  );
}

function paginationRange(current: number, total: number): (number | "...")[] {
  const range: (number | "...")[] = [];
  const window = 1;
  const left = Math.max(2, current - window);
  const right = Math.min(total - 1, current + window);
  range.push(1);
  if (left > 2) range.push("...");
  for (let i = left; i <= right; i++) range.push(i);
  if (right < total - 1) range.push("...");
  if (total > 1) range.push(total);
  return range;
}