import Link from "next/link";
import { disciplineLabel, fmtDate, modeLabel } from "@/lib/format";
import { t } from "@/lib/i18n";
import { StatusBadge } from "./StatusBadge";

/** PublicationMetadata — consistent academic header block for a paper. */
export function PublicationMetadata({
  publicId,
  versionNo,
  status,
  synthetic,
  title,
  discipline,
  mode,
  firstPublishedAt,
  revisedAt,
  keywords,
  verified,
}: {
  publicId: string;
  versionNo: number;
  status: string;
  synthetic: boolean;
  title: string;
  discipline: string;
  mode: string;
  firstPublishedAt: string | Date;
  revisedAt: string | Date;
  keywords: string[];
  verified?: string;
}) {
  return (
    <header>
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
        <span className="mono-id">{publicId}</span>
        <span className="muted text-xs">Version {versionNo}</span>
        <StatusBadge status={status} />
        {verified && <StatusBadge status="verified" label={verified} />}
        {synthetic && <span className="badge">staging sample — not a real paper</span>}
      </div>
      <h1 className="title-1 mt-4 max-w-4xl">{title}</h1>
      <p className="mt-4 text-sm">
        <span className="font-medium">{t("byline")}</span>
        <span className="muted"> · Research computed on MacLustr</span>
      </p>
      <dl className="mt-5 grid grid-cols-2 gap-x-6 gap-y-3 text-sm sm:grid-cols-4">
        <div>
          <dt className="label">Released</dt>
          <dd className="mt-0.5">{fmtDate(firstPublishedAt)}</dd>
        </div>
        <div>
          <dt className="label">Revised</dt>
          <dd className="mt-0.5">{fmtDate(revisedAt)}</dd>
        </div>
        <div>
          <dt className="label">Discipline</dt>
          <dd className="mt-0.5">
            <Link href={`/research?discipline=${discipline}`} className="no-underline hover:underline">
              {disciplineLabel(discipline)}
            </Link>
          </dd>
        </div>
        <div>
          <dt className="label">Methodology</dt>
          <dd className="mt-0.5">{modeLabel(mode)}</dd>
        </div>
      </dl>
      {keywords.length > 0 && (
        <ul className="mt-4 flex flex-wrap gap-1.5" aria-label="Keywords">
          {keywords.map((k) => (
            <li key={k}>
              <Link
                href={`/research?q=${encodeURIComponent(k)}`}
                className="chip no-underline"
                style={{ minHeight: "1.75rem" }}
              >
                {k}
              </Link>
            </li>
          ))}
        </ul>
      )}
    </header>
  );
}