Artifacts

import Link from "next/link";
import { FileText, ChevronRight } from "lucide-react";
import type { Report } from "@/lib/missions/types";

/** Presentational list of reports linking to each report's detail (with lineage). */
export function ReportList({
  reports,
  emptyText = "No reports yet.",
}: {
  reports: Report[];
  emptyText?: string;
}) {
  if (reports.length === 0) {
    return <p className="text-sm text-muted-foreground">{emptyText}</p>;
  }
  return (
    <ul className="divide-y divide-border">
      {reports.map((r) => (
        <li key={`${r.assignment_id}/${r.report_id}`}>
          <Link
            href={`/mission-control/${r.mission_id}/assignments/${r.assignment_id}/reports/${r.report_id}`}
            className="group flex items-center gap-3 py-2.5 transition-colors hover:bg-secondary/40"
          >
            <FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2 text-[13px]">
                <span className="font-mono text-[11px] text-muted-foreground">
                  {r.report_id.replace("REPORT-", "R-")}
                </span>
                <span className="truncate font-medium text-foreground">
                  {r.summary ? r.summary.split("\n")[0] : "(no summary)"}
                </span>
              </div>
              <div className="mt-0.5 truncate font-mono text-[11px] text-muted-foreground">
                {r.objective_id.replace("OBJECTIVE-", "O-")} ·{" "}
                {r.work_order_id.replace("WORKORDER-", "WO-")} ·{" "}
                {r.assignment_id.replace("ASSIGNMENT-", "A-")} · {r.executive}
              </div>
            </div>
            <span className="shrink-0 text-[11px] text-muted-foreground">
              {new Date(r.created_at).toLocaleString()}
            </span>
            <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground/40 transition-colors group-hover:text-foreground" />
          </Link>
        </li>
      ))}
    </ul>
  );
}