import type { PublicPaperSummary } from "@autoscholar/schemas";
import Link from "next/link";
import { disciplineLabel, fmtDate, modeLabel } from "@/lib/format";
import { IconArrow, IconCode, IconData, IconDoc } from "./Icons";
import { StatusBadge } from "./StatusBadge";

function Avail({ p }: { p: PublicPaperSummary }) {
  const items: Array<[boolean, string, React.ReactNode]> = [
    [true, "PDF", <IconDoc key="pdf" size={14} />],
    [
      p.hasLatex,
      "LaTeX",
      <span key="tex" className="font-mono text-[10px]">
        TeX
      </span>,
    ],
    [p.hasCode, "Code", <IconCode key="code" size={14} />],
    [p.hasData, "Data", <IconData key="data" size={14} />],
  ];
  return (
    <ul className="flex items-center gap-2" aria-label="Available artifacts">
      {items
        .filter(([ok]) => ok)
        .map(([, label, icon]) => (
          <li
            key={label}
            className="subtle inline-flex items-center gap-1 text-[11px]"
            title={`${label} available`}
          >
            {icon}
            <span className="sr-only sm:not-sr-only">{label}</span>
          </li>
        ))}
    </ul>
  );
}

/** ResearchPaperCard — premium publication card. `variant="row"` is denser for lists; `featured` is the editorial lead. */
export function PaperCard({
  p,
  featured = false,
  variant = "card",
  index,
}: {
  p: PublicPaperSummary;
  featured?: boolean;
  variant?: "card" | "row";
  index?: number;
}) {
  const href = `/research/${p.slug}`;
  const delay = index !== undefined ? `reveal reveal-${Math.min(4, (index % 4) + 1)}` : "";
  if (featured) {
    return (
      <article
        className={`surface card-link relative grid gap-6 p-6 sm:p-8 lg:grid-cols-12 lg:p-10 ${delay}`}
      >
        <div className="lg:col-span-8">
          <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
            <span className="mono-id">{p.publicId}</span>
            <span className="badge badge-accent">Featured</span>
            <span className="muted text-xs">
              {disciplineLabel(p.discipline)} · {modeLabel(p.researchMode)}
            </span>
            {p.status !== "published" && <StatusBadge status={p.status} />}
            {p.synthetic && <span className="badge">staging sample</span>}
          </div>
          <h3 className="title-1 mt-4">
            <Link href={href} className="no-underline after:absolute after:inset-0 hover:underline">
              {p.title}
            </Link>
          </h3>
          <p className="prose-paper muted mt-4 line-clamp-4 text-[1.02rem]">{p.abstract}</p>
        </div>
        <div className="flex flex-col justify-between gap-4 border-t pt-4 hairline lg:col-span-4 lg:border-l lg:border-t-0 lg:pl-8 lg:pt-0">
          <dl className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm lg:grid-cols-1">
            <div>
              <dt className="label">Released</dt>
              <dd className="mt-0.5">{fmtDate(p.firstPublishedAt)}</dd>
            </div>
            <div>
              <dt className="label">Version</dt>
              <dd className="mt-0.5">v{p.versionNo}</dd>
            </div>
            <div className="col-span-2 lg:col-span-1">
              <dt className="label">Keywords</dt>
              <dd className="mt-1 flex flex-wrap gap-1.5">
                {p.keywords.slice(0, 5).map((k) => (
                  <span key={k} className="badge normal-case tracking-normal">
                    {k}
                  </span>
                ))}
              </dd>
            </div>
          </dl>
          <div className="flex items-center justify-between gap-3">
            <Avail p={p} />
            <span
              className="inline-flex items-center gap-1 text-sm font-medium"
              style={{ color: "var(--accent-strong)" }}
            >
              Read <IconArrow size={16} />
            </span>
          </div>
        </div>
      </article>
    );
  }
  if (variant === "row") {
    return (
      <article
        className={`group relative grid gap-3 border-b py-5 hairline sm:grid-cols-12 sm:gap-6 ${delay}`}
      >
        <div className="sm:col-span-3">
          <p className="mono-id">{p.publicId}</p>
          <p className="muted mt-1 text-xs">
            {fmtDate(p.firstPublishedAt)} · v{p.versionNo}
          </p>
          <p className="muted mt-1 text-xs">
            {disciplineLabel(p.discipline)} · {modeLabel(p.researchMode)}
          </p>
        </div>
        <div className="min-w-0 sm:col-span-9">
          <div className="flex flex-wrap items-center gap-2">
            {p.status !== "published" && <StatusBadge status={p.status} />}
            {p.synthetic && <span className="badge">staging sample</span>}
          </div>
          <h3 className="title-3 mt-1">
            <Link href={href} className="no-underline after:absolute after:inset-0 group-hover:underline">
              {p.title}
            </Link>
          </h3>
          <p className="muted mt-2 line-clamp-2 text-sm leading-relaxed">{p.abstract}</p>
          <div className="mt-3 flex flex-wrap items-center justify-between gap-2">
            <ul className="flex flex-wrap gap-1.5">
              {p.keywords.slice(0, 4).map((k) => (
                <li key={k} className="badge normal-case tracking-normal">
                  {k}
                </li>
              ))}
            </ul>
            <Avail p={p} />
          </div>
        </div>
      </article>
    );
  }
  return (
    <article className={`surface card-link relative flex h-full flex-col gap-3 p-5 ${delay}`}>
      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
        <span className="mono-id">{p.publicId}</span>
        <span className="muted">
          {disciplineLabel(p.discipline)} · {modeLabel(p.researchMode)}
        </span>
        {p.status !== "published" && <StatusBadge status={p.status} />}
        {p.synthetic && <span className="badge">staging sample</span>}
      </div>
      <h3 className="title-3">
        <Link href={href} className="no-underline after:absolute after:inset-0 hover:underline">
          {p.title}
        </Link>
      </h3>
      <p className="muted line-clamp-3 text-sm leading-relaxed">{p.abstract}</p>
      <div className="mt-auto flex items-center justify-between gap-2 pt-2 text-xs">
        <span className="subtle">
          {fmtDate(p.firstPublishedAt)} · v{p.versionNo}
        </span>
        <Avail p={p} />
      </div>
    </article>
  );
}
export { PaperCard as ResearchPaperCard };
export function FeaturedPaper({ p }: { p: PublicPaperSummary }) {
  return <PaperCard p={p} featured />;
}