import { DISCIPLINE_LABELS } from "@autoscholar/schemas";
import Link from "next/link";

const GLYPH: Record<string, string> = {
  economics: "∂",
  finance: "σ",
  mathematics: "∀",
  statistics: "Σ",
  "computer-science": "λ",
  physics: "ℏ",
  chemistry: "⚛",
  biology: "𝔹",
  medicine: "℞",
  engineering: "⚙",
  "earth-sciences": "⊕",
  "social-sciences": "§",
  psychology: "ψ",
  humanities: "¶",
  law: "⚖",
  education: "∞",
  interdisciplinary: "⋈",
};

/** DisciplineExplorer — subject navigation from real counts (zero is shown as zero). */
export function DisciplineExplorer({
  counts,
  topics,
  compact = false,
}: {
  counts: Array<{ discipline: string; n: number }>;
  topics: Array<{ slug: string }>;
  compact?: boolean;
}) {
  const entries = Object.entries(DISCIPLINE_LABELS).map(([slug, name]) => ({
    slug,
    name,
    n: counts.find((c) => c.discipline === slug)?.n ?? 0,
    href: topics.some((t) => t.slug === slug) ? `/topics/${slug}` : `/research?discipline=${slug}`,
  }));
  const sorted = [...entries].sort((a, b) => b.n - a.n || a.name.localeCompare(b.name));
  return (
    <ul
      className={`grid gap-2 ${compact ? "grid-cols-2 sm:grid-cols-3" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"}`}
    >
      {sorted.map((d) => (
        <li key={d.slug}>
          <Link
            href={d.href}
            className="surface card-link flex min-h-[4.25rem] items-center gap-3 px-3.5 py-3 text-sm no-underline"
            aria-label={`${d.name}: ${d.n} ${d.n === 1 ? "paper" : "papers"}`}
          >
            <span
              aria-hidden="true"
              className="grid h-9 w-9 flex-none place-items-center rounded-md text-base"
              style={{
                background: d.n > 0 ? "var(--sci-soft)" : "var(--bg-muted)",
                color: d.n > 0 ? "var(--sci)" : "var(--fg-subtle)",
                fontFamily: "var(--font-serif)",
              }}
            >
              {GLYPH[d.slug] ?? "·"}
            </span>
            <span className="min-w-0">
              <span className="block truncate font-medium">{d.name}</span>
              <span className="subtle block font-mono text-[11px]">
                {d.n} {d.n === 1 ? "paper" : "papers"}
              </span>
            </span>
          </Link>
        </li>
      ))}
    </ul>
  );
}