import Link from "next/link";
import { badgeVariants } from "@/components/ui/badge";
import { fmtAgo } from "@/lib/format";
import type { ArticleRow } from "@/lib/articles/sites";

// One row per article: what it is, where it stands, what is waiting on it,
// and where it came from. Server-rendered, zero JS -- the /browse idiom.

const posterUrl = (a: ArticleRow) =>
  `/api/sites/media?site=${encodeURIComponent(a.site)}&report=${encodeURIComponent(a.id)}&file=poster.jpg`;

const baseName = (p: string) => p.split("/").pop() ?? p;

export function articleHref(a: { site: string; id: string }) {
  return `/sites/${a.site}/${a.id}`;
}

export default function ArticleTable({ articles }: { articles: ArticleRow[] }) {
  if (articles.length === 0) return <p className="text-[12px] text-[var(--color-dim)]">no articles</p>;
  return (
    <table className="w-full border-collapse text-[12px]" data-testid="article-table">
      <thead>
        <tr className="text-left text-[11px] text-[var(--color-dim)]">
          <th className="w-[72px] py-1 font-normal" />
          <th className="py-1 font-normal">article</th>
          <th className="py-1 font-normal">status</th>
          <th className="py-1 font-normal">updated</th>
          <th className="py-1 text-right font-normal">cites</th>
          <th className="py-1 text-right font-normal">notes</th>
          <th className="py-1 pl-3 font-normal">video project</th>
          <th className="py-1 font-normal">source</th>
        </tr>
      </thead>
      <tbody>
        {articles.map((a) => (
          <tr
            key={`${a.site}/${a.id}`}
            data-article={`${a.site}/${a.id}`}
            data-status={a.status}
            className="border-t border-[var(--color-line)] align-top"
          >
            <td className="py-1.5 pr-2">
              {a.hasPoster ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img src={posterUrl(a)} alt="" loading="lazy" className="h-9 w-16 rounded object-cover" />
              ) : (
                <div className="h-9 w-16 rounded bg-[var(--color-panel-2)]" />
              )}
            </td>
            <td className="py-1.5 pr-3">
              <Link href={articleHref(a)} className="text-[var(--color-text)] hover:text-[var(--color-sel)]">
                {a.title}
              </Link>
              <div className="font-mono text-[11px] text-[var(--color-dim)]">
                {a.id}
                {a.series ? ` · ${a.series}` : ""}
                {a.problem ? <span className="text-[var(--color-bad)]"> · {a.problems} problem{a.problems === 1 ? "" : "s"}</span> : null}
              </div>
            </td>
            <td className="py-1.5 pr-3">
              <span className={badgeVariants({ variant: a.status === "published" ? "on" : "neutral", size: "sm" })}>
                {a.status}
              </span>
            </td>
            <td className="num py-1.5 pr-3 text-[var(--color-dim)]">
              {a.updated ?? (a.mtimeMs ? fmtAgo(a.mtimeMs) : "—")}
            </td>
            <td className="num py-1.5 pr-3 text-right">{a.citations}</td>
            <td className="num py-1.5 text-right">
              {a.openNotes > 0 ? (
                <Link
                  href={`${articleHref(a)}?status=open`}
                  data-open-notes={a.openNotes}
                  className={badgeVariants({ variant: "open", size: "sm" })}
                >
                  {a.openNotes} open
                </Link>
              ) : (
                <span className="text-[var(--color-dim)]">{a.notes || "—"}</span>
              )}
            </td>
            <td className="py-1.5 pl-3 pr-3">
              {a.projects.linked.map((p) => (
                <Link key={p.id} href={`/browse/${p.id}`} data-project-link={p.id} className="block font-mono text-[11px] text-[var(--color-sel)] hover:underline">
                  {p.id}
                </Link>
              ))}
              {a.projects.possible.map((p) => (
                <Link key={p.id} href={`/browse/${p.id}`} title="shares the slug; not linked" className="block font-mono text-[11px] text-[var(--color-dim)] hover:underline">
                  {p.id} (possible)
                </Link>
              ))}
              {a.projects.linked.length + a.projects.possible.length === 0 && <span className="text-[var(--color-dim)]">—</span>}
            </td>
            <td className="py-1.5 font-mono text-[11px] text-[var(--color-dim)]" title={a.source?.how ?? ""}>
              {a.source?.draft ? baseName(a.source.draft) : a.source?.generator ? baseName(a.source.generator) : "—"}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}