import { HistoryIcon } from 'lucide-react';
import { Link } from '#/components/atoms/link.jsx';
import { AuthorFacepile } from '#/components/molecules/author-facepile.jsx';
import { RefCheckStatus } from '#/components/molecules/ref-check-status.jsx';
import { timeAgo } from '#/lib/format.js';

/**
 * The commit at the tip of the ref in view, above the file listing: who wrote
 * it, what it said, how its checks ended, and how far the history goes.
 *
 * The count comes from the same walk that produced the commit, so it is the
 * number of commits reachable from this ref rather than a total for the
 * repository. A walk that hit its ceiling reads as "N+". It is the only route
 * to the history from this page.
 */
export function LatestCommit({
  repo,
  refName,
  commit,
  count,
  truncated,
  space,
}) {
  const subject = commit.message.split('\n')[0];
  const short = commit.sha.slice(0, 7);

  return (
    <div className="flex flex-wrap items-center gap-x-3 gap-y-2 border-border border-b bg-muted px-4 py-2.5 text-[13px]">
      <AuthorFacepile
        ident={commit.author}
        message={commit.message}
        className="font-semibold"
      />
      <Link
        href={`/${encodeURIComponent(repo)}/commit/${commit.sha}`}
        className="min-w-0 flex-1 truncate text-muted-foreground"
        title={subject}
      >
        {subject}
      </Link>
      <RefCheckStatus
        repo={repo}
        refName={refName}
        sha={commit.sha}
        space={space}
      />
      <span className="flex shrink-0 items-center gap-2 text-[12.5px] text-faint">
        <Link
          href={`/${encodeURIComponent(repo)}/commit/${commit.sha}`}
          className="font-mono"
        >
          {short}
        </Link>
        <span aria-hidden="true">·</span>
        <span>{timeAgo(commit.committedAt)}</span>
      </span>
      <Link
        href={`/${encodeURIComponent(repo)}/commits/${encodeURI(refName)}`}
        className="flex shrink-0 items-center gap-1.5 text-[12.5px] text-foreground"
      >
        <HistoryIcon className="size-3.5 text-faint" />
        <span className="font-semibold">
          {count}
          {truncated ? '+' : ''}
        </span>
        <span className="text-faint">
          {count === 1 && !truncated ? 'commit' : 'commits'}
        </span>
      </Link>
    </div>
  );
}