import type { Attachment } from "fhir/r4";
import { Badge } from "../ui/badge";
import { StoredAttachmentActions } from "../FhirDocumentReferenceDisplay/FhirDocumentReferenceDisplay";
import { formatDateTime } from "../../utils/dateUtils";
import "./LabReports.css";

/**
 * The laboratory's own report, reopened by the clinician the result goes to.
 *
 * THE ONE SURFACE THAT RENDERED `presentedForm` WAS THE PATIENT'S. So the page a result was typed from
 * reached the patient and not the clinician deciding whether to acknowledge it -- who had the numbers
 * somebody keyed in and no way back to the document they came from. Reading the values against the
 * page they were read off is the check this exists for.
 *
 * EACH REPORT IS NAMED AND DATED, because a corrected report sits beside the first and two identical
 * Open buttons do not say which is which.
 *
 * AND THE NEWEST IS MARKED, which the walk is the reason for: the two reports on the order it was run
 * against were filed fifty-three seconds apart, so both rows read the same minute and only the titles
 * told them apart -- and a laboratory that sends `results.pdf` twice takes that away too. The list is
 * stored in the order it was filed and appended to, never reordered, so the last one is the newest.
 *
 * OPENING GOES THROUGH THE SHARED STORED-ATTACHMENT CONTROL rather than a fourth presign-and-open: an
 * object key is not a link, and that control is where the refusal wording and the presign both live.
 *
 * SHARED BETWEEN THE CHART AND THE BENCH, which reach the same attachments by different routes: a
 * clinician through the report itself, a technician through the one order they are working. Two
 * renderings would disagree about which report is the latest, and that is the question being asked.
 */
export const LabReports = ({ reports }: { reports: Attachment[] }) => (
  <div className="lab-reports">
    <p className="lab-reports-heading">
      {reports.length === 1 ? "The lab's report" : "The lab's reports"}
    </p>
    {reports.map((report, at) => (
      <div className="lab-report-row" key={report.url}>
        <span className="lab-report-name">
          {report.title ?? "Report"}
          {report.creation ? ` · filed ${formatDateTime(report.creation)}` : ""}
        </span>
        {reports.length > 1 && at === reports.length - 1 && <Badge variant="outline">Latest</Badge>}
        <StoredAttachmentActions attachment={report} />
      </div>
    ))}
  </div>
);