import Link from "next/link";
import type { ReportIndexView } from "yt-dlp-transcript-common/lib/report/views";
import { EmptyState, Eyebrow, ReportName, dateLabel } from "./parts";

// The report index: `/reports/`, and a cited site's home page when it has more
// than one report. One card per published report, in the site's order
// (site.json `reports`): its name, subtitle and dates -- its counts and tally
// are the report page's. `heading: null` draws no heading (the home page: the
// header already names the site).

export default function ReportIndex({
  index,
  heading = "Reports",
  tagline,
}: {
  index: ReportIndexView | null;
  heading?: string | null;
  tagline?: string;
}) {
  const reports = index?.reports ?? [];
  if (reports.length === 0) {
    return <EmptyState title="No reports">This site has not published a report yet.</EmptyState>;
  }
  return (
    <div className="mx-auto flex w-full max-w-3xl flex-col gap-6">
      {(heading || tagline) && (
        <header className="flex flex-col gap-1">
          {heading && <h1 className="font-display text-3xl font-semibold tracking-tight text-foreground">{heading}</h1>}
          {tagline && <p className="text-sm text-muted-foreground">{tagline}</p>}
        </header>
      )}
      <ul data-report-index="" className="flex flex-col gap-4">
        {reports.map((r) => {
          const dates = [
            r.published ? `Published ${dateLabel(r.published)}` : null,
            r.updated && r.updated !== r.published ? `updated ${dateLabel(r.updated)}` : null,
          ]
            .filter(Boolean)
            .join(" · ");
          return (
            <li key={r.id} data-report-entry={r.id}>
              <article className="flex flex-col gap-2 rounded-lg border border-border bg-card p-4 sm:p-5">
                {!r.series && <Eyebrow>{r.kind === "factcheck" ? "Fact-check" : "Report"}</Eyebrow>}
                <h2 className="font-display text-xl font-semibold leading-snug text-foreground">
                  <Link href={r.href} className="hover:text-brand transition-colors">
                    <ReportName series={r.series} title={r.title} />
                  </Link>
                </h2>
                {r.subtitle && <p className="text-sm text-muted-foreground">{r.subtitle}</p>}
                {dates && <p className="font-mono text-xs text-muted-foreground">{dates}</p>}
              </article>
            </li>
          );
        })}
      </ul>
    </div>
  );
}