import type { ReactNode } from "react";
import { formatDate } from "../../flow";
import { rangeLabel, type LabSeries } from "../../logic/charts";
import { isNewSince } from "../../logic/format";
import { cn, Icon } from "../kit";
import { FlagPill, NewPill, Sparkline } from "./LabBits";

/** The latest result for each test, its flag, and a tiny line when there are earlier results. */
export function LabRows({
  series,
  lastLookedAt,
  selected = null,
  onSelect,
  controls,
}: {
  series: LabSeries[];
  lastLookedAt: string | null;
  selected?: string | null;
  onSelect?: (key: string) => void;
  controls?: string;
}) {
  return (
    <ul aria-label="Latest result for each test" className="m-0 flex list-none flex-col p-0">
      {series.map((s) => {
        const { latest } = s;
        const flagged = latest.flag === "high" || latest.flag === "low";
        const body: ReactNode = (
          <>
            <span className={cn("flex size-9 shrink-0 items-center justify-center rounded-full", flagged ? "bg-amber-fill text-amber-icon" : "bg-tile text-teal-icon")}>
              <Icon name="test-tube-line" size={17} />
            </span>
            <span className="flex min-w-0 flex-1 flex-col gap-0.5">
              <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
                <strong className="text-[14px] leading-5 font-medium text-ink">{s.name}</strong>
                {isNewSince(latest.changedAt, lastLookedAt) && <NewPill />}
              </span>
              <span className="text-[12.5px] leading-[18px] text-muted">
                {formatDate(latest.date)} · {latest.range ? `Range ${rangeLabel(latest.range)}` : "Range not given"}
                {s.results.length > 1 && ` · ${s.results.length} results`}
              </span>
            </span>
            {s.trend && <Sparkline points={s.points} className="w-11 sm:w-14" />}
            <span className="flex shrink-0 flex-col items-end gap-1 text-right">
              <strong className="text-[15px] leading-5 font-semibold text-ink tabular-nums">{latest.value.trim()}</strong>
              {s.unit && <span className="max-w-[6.5rem] text-[12px] leading-4 text-muted [overflow-wrap:anywhere]">{s.unit}</span>}
              <FlagPill flag={latest.flag} />
            </span>
            {s.trend && onSelect && (
              <span className="hidden shrink-0 sm:flex">
                <Icon name="line-chart-line" className={selected === s.key ? "text-ink" : "text-subtle"} />
              </span>
            )}
          </>
        );
        const row = "flex w-full items-center gap-3 rounded-xl px-2 py-3";
        return (
          <li key={s.key} className="shadow-[inset_0_-1px_0_var(--color-hairline)] last:shadow-none">
            {s.trend && onSelect ? (
              <button
                type="button"
                aria-pressed={selected === s.key}
                aria-controls={controls}
                onClick={() => onSelect(s.key)}
                className={cn(row, "cursor-pointer border-0 bg-transparent text-left font-sans text-ink outline-none hover:bg-tile focus-visible:shadow-[0_0_0_2px_var(--color-brand)] aria-pressed:bg-tile")}
              >
                {body}
                <span className="sr-only">Show the trend</span>
              </button>
            ) : (
              <div className={row}>{body}</div>
            )}
          </li>
        );
      })}
    </ul>
  );
}