import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
import { useState } from 'react';
import { Link } from '#/components/atoms/link.jsx';
import { CheckLog } from '#/components/molecules/check-log.jsx';
import { CheckRow } from '#/components/molecules/check-row.jsx';
import { CheckSteps } from '#/components/molecules/check-steps.jsx';

/**
 * One run as a line that opens in place: the steps it ran and the log behind
 * them. The log is fetched only once opened, so a commit checked by several
 * workflows costs one request per run the reader actually opens.
 *
 * A failed run opens itself. Someone reading a commit whose check failed came
 * for the output.
 */
export function CheckDisclosure({ runner, check, runHref }) {
  const failed = check.status === 'failure' || check.status === 'error';
  const [open, setOpen] = useState(failed);
  const steps = Array.isArray(check.steps) ? check.steps : [];
  const Chevron = open ? ChevronDownIcon : ChevronRightIcon;

  return (
    <div className="border-border border-t first:border-t-0">
      <div className="flex items-center">
        <button
          type="button"
          onClick={() => setOpen(!open)}
          aria-expanded={open}
          className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 py-0 pl-2 text-left hover:bg-accent"
        >
          <Chevron className="size-3.5 shrink-0 text-faint" />
          <CheckRow check={check} className="min-w-0 flex-1" showTime={false} />
        </button>
        {runHref && (
          <Link href={runHref} className="shrink-0 px-4 text-[12px]">
            Details
          </Link>
        )}
      </div>
      {open && (
        <div className="border-border border-t bg-muted">
          {steps.length > 0 && <CheckSteps steps={steps} />}
          {/* A log opened beside its neighbours is capped, so one long run
              does not push the rest of them off the page. */}
          <div className="max-h-96 overflow-auto border-border border-t">
            <CheckLog runner={runner} check={check} />
          </div>
        </div>
      )}
    </div>
  );
}