import type { Metadata } from "next";

import Link from "next/link";

import { Card, PageHeader } from "@/components/ui";

import { getCategories } from "@/lib/feed";

export const revalidate = 300;

export const metadata: Metadata = {

  title: "Topics",

  description:

    "Browse the record by topic -bills and awards grouped by policy area. Counts only, no editorial weighting.",

};

export default function CategoriesPage() {

  const cats = getCategories().sort(

    (a, b) => b.total - a.total || a.label.localeCompare(b.label)

  );

  const withItems = cats.filter((c) => c.total > 0);

  const empty = cats.filter((c) => c.total === 0);

  return (

    <div className="mx-auto w-full max-w-register px-4 py-10 sm:px-6">

      <Link

        href="/register"

        className="focus-ring tap label mb-6 gap-1 text-ash hover:text-paper"

      >

        ← Register

      </Link>

      <PageHeader

        eyebrow="Topics · browse the record"

        title="By policy area"

        lead="Every bill is tagged with one policy area; federal awards carry the same tags. Pick a topic to read the bills filed under it. Counts reflect the record only -no ranking by importance."

      />

      <div className="mt-8">

        <p className="label mb-3">{withItems.length} topics on record</p>

        <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">

          {withItems.map((c) => (

            <li key={c.slug}>

              <Link

                href={`/bills?policyArea=${encodeURIComponent(c.label)}`}

                className="focus-ring block rounded-[3px] border border-line bg-surface p-4 transition-colors hover:bg-graphite"

              >

                <div className="flex items-start justify-between gap-3">

                  <span className="font-mono text-[13px] text-paper">

                    {c.label}

                  </span>

                  <span className="label shrink-0 text-ash-2">{c.total}</span>

                </div>

                <p className="label mt-2 text-ash-2">

                  {c.billCount} bill{c.billCount === 1 ? "" : "s"}

                  {c.awardCount > 0 ? ` · ${c.awardCount} award${c.awardCount === 1 ? "" : "s"}` : ""}

                </p>

              </Link>

            </li>

          ))}

        </ul>

      </div>

      {empty.length > 0 ? (

        <div className="mt-10">

          <p className="label mb-3">No record yet</p>

          <Card className="p-5">

            <p className="font-mono text-[12px] leading-relaxed text-ash-2">

              {empty.map((c) => c.label).join(" · ")}

            </p>

            <p className="label mt-3 text-ash-2">

              These topics have no bills or awards on record. They appear here so

              the list stays complete rather than hiding the gap.

            </p>

          </Card>

        </div>

      ) : null}

      <div className="mt-12 border-t border-line pt-6">

        <p className="label text-ash-2">

          Policy areas come from congress.gov bill metadata. Awards are tagged

          from USAspending.gov. No topic is weighted over another by coverage.

        </p>

      </div>

    </div>

  );

}