import { listTopics } from "@autoscholar/core";
import type { Metadata } from "next";
import Link from "next/link";
import { EmptyState } from "@/components/EmptyState";
import { db } from "@/lib/server/db";

export const dynamic = "force-dynamic";
export const metadata: Metadata = {
  title: "Topics",
  description: "Browse AutoScholar working papers by scientific discipline and subfield.",
  alternates: { canonical: "/topics" },
};

export default async function TopicsPage() {
  const topics = await listTopics(db());
  const roots = topics.filter((t) => !t.parentId);
  return (
    <div className="space-y-8">
      <header>
        <p className="eyebrow">Browse</p>
        <h1 className="serif mt-1 text-3xl font-semibold">Scientific disciplines</h1>
        <p className="muted mt-2 max-w-2xl text-sm">
          Every legitimate academic discipline is in scope. Methodology follows the question: econometrics is
          never imposed on a proof, and a literature review never pretends to be an experiment.
        </p>
      </header>
      {roots.length === 0 ? (
        <EmptyState title="Topics have not been configured yet." />
      ) : (
        <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {roots.map((t) => {
            const children = topics.filter((c) => c.parentId === t.id);
            return (
              <li key={t.id} className="surface p-4">
                <Link
                  href={`/topics/${t.slug}`}
                  className="serif text-lg font-semibold no-underline hover:underline"
                >
                  {t.name}
                </Link>
                <p className="subtle mt-1 font-mono text-xs">
                  {t.paperCount} {t.paperCount === 1 ? "paper" : "papers"}
                </p>
                {t.description && <p className="muted mt-2 text-sm">{t.description}</p>}
                {children.length > 0 && (
                  <ul className="mt-3 flex flex-wrap gap-1.5">
                    {children.map((c) => (
                      <li key={c.id}>
                        <Link href={`/topics/${c.slug}`} className="badge no-underline">
                          {c.name}
                        </Link>
                      </li>
                    ))}
                  </ul>
                )}
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}