import type { Metadata } from "next";
import Link from "next/link";

import { PublicPostArchiveList } from "@/components/PublicPostArchiveList";
import { getApiBaseUrl } from "@/lib/api";
import { fetchPublicPosts } from "@/lib/posts";

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

function titleFromSlug(slug: string) {
  try {
    const decoded = decodeURIComponent(slug);
    return decoded
      .split(/[-_]+/)
      .filter(Boolean)
      .map((w) => w.charAt(0).toLocaleUpperCase("vi-VN") + w.slice(1).toLocaleLowerCase("vi-VN"))
      .join(" ");
  } catch {
    return slug;
  }
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  let slug: string;
  try {
    slug = (await params).slug;
  } catch {
    return { title: "Danh mục" };
  }

  try {
    const peek = await fetchPublicPosts({ categorySlug: slug, page: 1, pageSize: 1 });
    const name = peek.items[0]?.category.name ?? titleFromSlug(slug);
    return {
      title: name,
      description: `Các bài viết thuộc mục «${name}» trên Cổ Thư Kỳ Phổ.`,
    };
  } catch {
    return { title: titleFromSlug(slug), description: "Cổ Thư Kỳ Phổ" };
  }
}

export default async function CategoryArchivePage({ params, searchParams }: PageProps) {
  const { slug } = await params;
  const sp = await searchParams;
  const page = Math.max(1, parseInt(sp.page ?? "1", 10) || 1);
  const pageSize = 10;

  let data;
  let error: string | null = null;
  try {
    data = await fetchPublicPosts({ page, pageSize, categorySlug: slug });
  } catch (e) {
    error = e instanceof Error ? e.message : "Chưa mở được mục này.";
    data = { items: [], page: 1, pageSize, total: 0 };
  }

  const categoryTitle = data.items[0]?.category.name ?? titleFromSlug(slug);
  const totalPages = Math.max(1, Math.ceil(data.total / data.pageSize));
  const hasApi = Boolean(getApiBaseUrl());

  const hrefForPage = (p: number) =>
    p <= 1 ? `/categories/${encodeURIComponent(slug)}` : `/categories/${encodeURIComponent(slug)}?page=${p}`;

  return (
    <main className="mx-auto max-w-[1100px] px-4 py-16 sm:px-8 sm:py-20 lg:py-24">
      <header className="mx-auto max-w-3xl text-center">
        <div className="ctkp-rule mx-auto mb-8 w-24" aria-hidden />
        <p className="ctkp-eyebrow tracking-[0.32em]">Mục trong sổ</p>
        <h1 className="font-ctkp-display mt-4 text-[2.15rem] font-semibold leading-[1.12] tracking-tight text-stone-100 sm:text-5xl sm:leading-[1.08]">
          {categoryTitle}
        </h1>
        <p className="mx-auto mt-6 max-w-2xl text-base leading-[1.82] text-stone-400 sm:leading-[1.75]">
          Các thiên đã xuất bản thuộc mục này — lật từng trang để đọc lời xưa còn vang trên cổ thư.
        </p>
        <p className="mt-5 text-sm leading-relaxed text-stone-500">
          <Link href="/posts" className="ctkp-text-link text-amber-200/55 hover:text-amber-100/90">
            ← Về toàn bộ sổ bài
          </Link>
          {data.total > 0 ? (
            <span className="mt-2 block font-medium text-amber-200/45">
              {data.total} thiên trong mục · đang xem trang {page}
            </span>
          ) : null}
          {error ? (
            <span className="mt-3 block rounded-lg border border-amber-900/25 bg-amber-950/15 px-3 py-2 text-amber-100/75">
              {error}
            </span>
          ) : null}
        </p>
        <div className="ctkp-rule mx-auto mt-10 max-w-xs" aria-hidden />
      </header>

      <PublicPostArchiveList
        items={data.items}
        page={page}
        totalPages={totalPages}
        hrefForPage={hrefForPage}
        emptyTitle={
          !hasApi ? "Chưa nối nguồn chữ" : error ? "Mục chưa mở được" : "Mục còn trống"
        }
        emptyMessage={
          !hasApi ? (
            <>
              Để xem thiên theo mục, cần nối ứng dụng tới máy chủ nội dung. Kiểm tra cấu hình triển khai, rồi làm mới
              trang.
            </>
          ) : error ? (
            <>Cổ thư chưa nhận được trang — dòng báo gợi ý nằm phía trên. Mời thử lại sau.</>
          ) : (
            <>
              Chưa có thiên nào trong mục này, hoặc đường dẫn chưa khớp tên trên sổ.{" "}
              <Link href="/posts" className="ctkp-text-link text-amber-200/70 hover:text-amber-50">
                Về toàn bộ sổ bài
              </Link>{" "}
              để lật tiếp.
            </>
          )
        }
      />
    </main>
  );
}