import { Link } from "@tanstack/react-router";
import { CommitAuthor } from "~/components/CommitAuthor";
import { Avatar } from "~/ui/Avatar";
import { RelativeTime } from "~/ui/RelativeTime";
import { StatusDot } from "~/ui/StatusDot";
import type { StatusState } from "~/lib/types";
import type { CommitBrief } from "~/lib/code-intel";
import { SignatureBadge } from "./security/SignatureBadge";
import { useCommitSignatures } from "~/hooks/use-commit-signatures";

export function CommitList({
  owner,
  repo,
  commits,
  statuses = {},
}: {
  owner: string;
  repo: string;
  commits: Array<CommitBrief & { authorAccount: string | null }>;
  statuses?: Record<string, StatusState>;
}) {
  const signatures = useCommitSignatures(
    owner,
    repo,
    commits.map((commit) => commit.sha),
  );
  return (
    <ul className="divide-y divide-kumo-hairline">
      {commits.map((commit) => (
        <li key={commit.sha} className="flex items-center gap-3 px-4 py-3">
          {commit.authorAccount ? (
            <Avatar name={commit.authorAccount} size="sm" />
          ) : (
            <Avatar name={commit.authorName} size="sm" src={null} />
          )}
          <div className="min-w-0 flex-1">
            <Link
              to="/$owner/$repo/commit/$sha"
              params={{ owner, repo, sha: commit.sha }}
              className="block truncate text-sm text-kumo-strong hover:text-accent-400"
            >
              {commit.subject}
            </Link>
            <div className="text-xs text-kumo-subtle">
              <CommitAuthor authorName={commit.authorName} authorAccount={commit.authorAccount} avatar={false} />{" "}
              committed <RelativeTime timestamp={commit.committedAt} />
            </div>
          </div>
          <SignatureBadge signature={signatures[commit.sha]} />
          <StatusDot state={statuses[commit.sha] ?? null} />
          <Link
            to="/$owner/$repo/commit/$sha"
            params={{ owner, repo, sha: commit.sha }}
            className="rounded border border-kumo-hairline px-2 py-0.5 font-mono text-xs text-kumo-subtle hover:border-kumo-interact hover:text-kumo-strong"
          >
            {commit.shortSha}
          </Link>
          <Link
            to="/$owner/$repo/tree/$"
            params={{ owner, repo, _splat: commit.sha }}
            className="text-xs text-kumo-subtle hover:text-kumo-strong"
            title="Browse files at this commit"
          >
            ⌁
          </Link>
        </li>
      ))}
    </ul>
  );
}