disclosure-bureau/web/app/c/[slug]/page.tsx

/**
 * /c/[slug] — Case report viewer.
 *
 * Reads /data/ufo/case/reports/<slug>.md, parses frontmatter for metadata,
 * renders the markdown body via MarkdownBody. The case-writer detective
 * writes these files; this page is the reader.
 */
import { notFound } from "next/navigation";
import Link from "next/link";
import { readFile } from "node:fs/promises";
import path from "node:path";
import { MarkdownBody } from "@/components/markdown-body";
import { AuthBar } from "@/components/auth-bar";

export const runtime = "nodejs";
export const dynamic = "force-dynamic";

const CASE_ROOT = process.env.CASE_ROOT || "/data/ufo/case";

interface Frontmatter {
  topic?: string;
  created_by?: string;
  created_at?: string;
  job_id?: string;
  n_evidence?: number;
  n_hypotheses?: number;
  n_contradictions?: number;
  n_witnesses?: number;
  n_outliers?: number;
}

function parseFrontmatter(md: string): { fm: Frontmatter; body: string } {
  const m = md.match(/^---\n([\s\S]+?)\n---\n([\s\S]*)$/);
  if (!m) return { fm: {}, body: md };
  const fm: Frontmatter = {};
  for (const line of m[1].split("\n")) {
    const kv = line.match(/^([a-z_]+):\s*(.+)$/);
    if (!kv) continue;
    const k = kv[1] as keyof Frontmatter;
    let v: string | number = kv[2].trim();
    if (v.startsWith('"') && v.endsWith('"')) v = v.slice(1, -1);
    if (k === "n_evidence" || k === "n_hypotheses" || k === "n_contradictions"
        || k === "n_witnesses" || k === "n_outliers") {
      const n = Number(v);
      if (Number.isFinite(n)) (fm[k] as number) = n;
    } else {
      (fm[k] as string) = v as string;
    }
  }
  return { fm, body: m[2] };
}

export default async function CaseReportPage({
  params,
}: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  if (!/^[a-z0-9][a-z0-9-]*$/.test(slug)) notFound();

  let md: string;
  try {
    md = await readFile(path.join(CASE_ROOT, "reports", `${slug}.md`), "utf-8");
  } catch {
    notFound();
  }
  const { fm, body } = parseFrontmatter(md);

  const stats: Array<{ label: string; value: number | undefined; color: string }> = [
    { label: "evidence", value: fm.n_evidence, color: "text-[#06d6a0]" },
    { label: "hypotheses", value: fm.n_hypotheses, color: "text-[#7fdbff]" },
    { label: "contradictions", value: fm.n_contradictions, color: "text-[#ff8a4d]" },
    { label: "witnesses", value: fm.n_witnesses, color: "text-[#9b5de5]" },
    { label: "outliers", value: fm.n_outliers, color: "text-[#ffd23f]" },
  ];

  return (
    <div className="min-h-screen bg-[#0a0e1a] text-[#e7ecf3]">
      <AuthBar />
      <div className="mx-auto max-w-3xl px-4 py-8 pt-16">
        <div className="text-[11px] text-[#5a6678] font-mono mb-2">
          <Link href="/" className="hover:text-[#7fdbff]">disclosure.top</Link>
          <span className="mx-1">/</span>
          <span>case-report</span>
          <span className="mx-1">/</span>
          <span className="text-[#e0c080]">{slug}</span>
        </div>

        <div className="rounded-lg border border-[rgba(224,192,128,0.18)] bg-gradient-to-br from-[rgba(224,192,128,0.06)] to-transparent p-4 mb-6">
          <div className="text-[10px] font-mono text-[#5a6678] uppercase mb-2">
            Case report{fm.created_by && <> · written by <span className="text-[#e0c080]">{fm.created_by}</span></>}
            {fm.created_at && <> · {fm.created_at}</>}
          </div>
          {fm.topic && (
            <h1 className="text-xl font-mono text-[#e7ecf3] leading-snug">{fm.topic}</h1>
          )}
          <div className="mt-3 flex flex-wrap gap-3 text-[10px] font-mono">
            {stats.filter((s) => typeof s.value === "number").map((s) => (
              <span key={s.label}>
                <span className={s.color}>{s.value}</span>
                <span className="text-[#5a6678] ml-1">{s.label}</span>
              </span>
            ))}
          </div>
        </div>

        <article className="prose prose-invert prose-sm max-w-none">
          <MarkdownBody>{body}</MarkdownBody>
        </article>
      </div>
    </div>
  );
}