import { Link } from '#/components/atoms/link.jsx';
import { CheckRow } from '#/components/molecules/check-row.jsx';
import {
  checkLook,
  latestPerWorkflow,
  summarize,
  summaryWords,
} from '#/lib/checks.js';
import { shortRef } from '#/lib/git.js';
import { cn } from '#/lib/utils.js';

/**
 * One commit's runs, as a card: a heading that names the commit on the bright
 * surface, and the runs under it on the recessed one, so a page of them reads
 * as blocks rather than one unbroken sheet.
 *
 * A sha names nothing to a reader, so the heading reads as the commit's
 * subject line once the repository is open, and as the short sha until then.
 * The heading's status covers the commit: the newest run of each workflow
 * decides it, so a workflow asked for twice counts once.
 */
export function CheckGroup({ repo, group, label }) {
  const summary = summarize(latestPerWorkflow(group.runs));
  const look = checkLook(summary?.status);
  const commitHref = `/${encodeURIComponent(repo)}/commit/${group.sha}`;
  const short = group.sha.slice(0, 8);
  const ref = group.runs.find((run) => run.ref)?.ref;

  return (
    <li className="overflow-hidden rounded-lg border border-border bg-card">
      <div className="flex items-center gap-3 px-4 py-2.5">
        <look.Icon
          className={cn('size-4 shrink-0', look.className)}
          aria-hidden="true"
        />
        {/* The subject takes the width, and the sha and ref it ran against
            close the heading at the right. */}
        <Link
          href={commitHref}
          title={summary ? summaryWords(summary, group.runs) : undefined}
          className={cn(
            'min-w-0 flex-1 truncate font-semibold text-[13px] text-foreground no-underline hover:underline',
            label ? '' : 'font-mono',
          )}
        >
          {label?.subject ?? short}
        </Link>
        {label && (
          <code className="shrink-0 font-mono text-[12px] text-key">
            {short}
          </code>
        )}
        {ref && (
          <span className="hidden shrink-0 font-mono text-[12px] text-faint sm:inline">
            {shortRef(ref)}
          </span>
        )}
      </div>
      <ul className="border-border border-t bg-muted">
        {group.runs.map((run) => (
          <li
            key={run.rkey ?? run.startedAt}
            className="border-border border-t first:border-t-0"
          >
            {/* A record read without its key has no page to open. */}
            {run.rkey ? (
              <Link
                href={`/${encodeURIComponent(repo)}/checks/${run.rkey}`}
                className="block text-foreground no-underline hover:bg-accent hover:no-underline"
              >
                <CheckRow check={run} className="pl-11" />
              </Link>
            ) : (
              <CheckRow check={run} className="pl-11" />
            )}
          </li>
        ))}
      </ul>
    </li>
  );
}