import { HistoryIcon } from 'lucide-react';
import { Link } from '#/components/atoms/link.jsx';
import { Skeleton } from '#/components/atoms/skeleton.jsx';
import { AuthorFacepile } from '#/components/molecules/author-facepile.jsx';
import { timeAgo } from '#/lib/format.js';
import { cn } from '#/lib/utils.js';

/**
 * The last commit to change the file in view, above it: who changed it, what
 * they said, and when. The repository's own latest commit reads the same way
 * above its file listing, so a reader meets one line in both places.
 *
 * The walk behind it runs over objects the file view has already opened, so
 * the line fills in behind the file rather than holding it up.
 */
/**
 * @param {{repo: string, commit?: {sha: string, message: string, author: unknown, committedAt: number}|null, pending?: boolean, historyHref?: string, className?: string}} props
 */
export function FileCommit({ repo, commit, pending, historyHref, className }) {
  // The placeholder stands in the shape of the line it waits for, down to
  // the round of the avatar, so the file below it does not step down the
  // page when the walk lands.
  if (pending) {
    return (
      <div
        className={cn(
          'flex min-h-[41px] items-center gap-3 border-border border-b bg-muted px-(--gutter) py-2.5 text-[13px]',
          className,
        )}
      >
        <Skeleton className="size-[18px] shrink-0 rounded-full" />
        <Skeleton className="h-[18px] w-28 max-w-full" />
        <Skeleton className="h-[18px] w-64 max-w-full" />
      </div>
    );
  }
  if (!commit) return null;

  const subject = commit.message.split('\n')[0];
  const href = `/${encodeURIComponent(repo)}/commit/${commit.sha}`;

  return (
    <div
      className={cn(
        'flex min-h-[41px] flex-wrap items-center gap-x-3 gap-y-2 border-border border-b bg-muted px-(--gutter) py-2.5 text-[13px]',
        className,
      )}
    >
      <AuthorFacepile
        ident={commit.author}
        message={commit.message}
        className="font-semibold"
      />
      <Link
        href={href}
        className="min-w-0 flex-1 truncate text-muted-foreground"
        title={subject}
      >
        {subject}
      </Link>
      <span className="flex shrink-0 items-center gap-2 text-[12.5px] text-faint">
        <Link href={href} className="font-mono">
          {commit.sha.slice(0, 7)}
        </Link>
        <span aria-hidden="true">·</span>
        <span>{timeAgo(commit.committedAt)}</span>
      </span>
      {historyHref && (
        <Link
          href={historyHref}
          className="flex shrink-0 items-center gap-1.5 text-[12.5px] text-foreground no-underline hover:underline"
        >
          <HistoryIcon className="size-3.5 text-faint" />
          History
        </Link>
      )}
    </div>
  );
}