import { useState } from "react";
import { useTranslation } from "react-i18next";
import clsx from "clsx";
import { ChevronRight } from "lucide-react";
import type { AuditRow } from "../lib/api";
import { Button } from "./ui/Button";
import { RelativeTime } from "./ui/RelativeTime";

/** A folded run of one job's successful runs (lib/auditGroups, E31): the row shows the newest, this
 *  opens the earlier ones, each with its moment and its result (`detailOf`, the row's own wording). */
export default function AuditEarlierRuns({
  runs,
  detailOf,
}: {
  runs: AuditRow[];
  detailOf: (run: AuditRow) => string | null;
}) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  const earlier = runs.slice(1);
  return (
    <div className="mt-1">
      <Button
        variant="link-muted"
        aria-expanded={open}
        onClick={() => setOpen(!open)}
        icon={<ChevronRight className={clsx("transition-transform", open && "rotate-90")} />}
      >
        {t("audit.earlierRuns", { count: earlier.length })}
      </Button>
      {open && (
        <ul className="mt-1 space-y-0.5 text-2xs text-muted">
          {earlier.map((run) => (
            <li key={run.id} className="flex gap-2">
              <RelativeTime
                at={run.created_at}
                seconds
                empty="—"
                className="shrink-0 tabular-nums"
              />
              <span className="min-w-0 wrap-break-word">{detailOf(run)}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}