import type { Metadata } from "next";
import { fetchLibraryList, type LibraryDocListItem } from "@/lib/api";
import { getPublicSettingsCached } from "@/lib/serverData";
import { requestCanonical } from "@/lib/canonicalMeta";
import { libraryPath } from "@/lib/urlStyle";
import LibrarySearchGrid from "@/components/LibrarySearchGrid";

export async function generateMetadata(): Promise<Metadata> {
  const settings = await getPublicSettingsCached();
  return {
    title: "书库",
    description: settings.site_description,
    ...(await requestCanonical(libraryPath(settings.url_style))),
  };
}

export default async function LibraryPage() {
  const settings = await getPublicSettingsCached();

  // 接口失败降级为空态，不让页面 500
  let docs: LibraryDocListItem[] = [];
  try {
    const res = await fetchLibraryList();
    docs = res.docs ?? [];
  } catch {
    /* 降级空态 */
  }

  return (
    <div className="min-w-0">
      {/* Hero：书香气——serif 大标题、两侧晕染、底部水纹线 */}
      <section
        className="relative overflow-hidden px-6 py-12 sm:px-12 sm:py-16 text-center"
        style={{
          background:
            "radial-gradient(140% 180% at 50% -20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%)," +
            "radial-gradient(80% 120% at 8% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%)," +
            "radial-gradient(80% 120% at 92% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%)",
        }}
      >
        <div
          aria-hidden
          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[520px] h-[520px] rounded-full pointer-events-none"
          style={{
            background: "color-mix(in srgb, var(--accent) 10%, transparent)",
            filter: "blur(72px)",
          }}
        />
        <div className="relative">
          <p
            className="text-[11px] sm:text-[12px] font-semibold tracking-[0.35em] uppercase mb-4"
            style={{ color: "var(--accent)" }}
          >
            Library
          </p>
          <h1
            className="j13-library-title text-[32px] sm:text-[44px] leading-tight font-bold tracking-wide"
            style={{ color: "var(--ink)" }}
          >
            书库
          </h1>
          <div
            aria-hidden
            className="mx-auto mt-5 h-px w-24 sm:w-32"
            style={{
              background:
                "linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 40%, var(--line)), transparent)",
            }}
          />
          <p className="meta mt-4 text-[13.5px] sm:text-[14px] tracking-wide">
            书籍、文档与页面作品，在线阅读或下载
          </p>
        </div>
      </section>

      <LibrarySearchGrid docs={docs} urlStyle={settings.url_style} />
    </div>
  );
}