import { GitCommit } from "lucide-react";
import { CopyText } from "@/components/ui/copy-text";
import { EmptyState } from "@/components/ui/empty-state";
import { ago } from "@/lib/format";

export interface CommitRow {
  id: string;
  hash: string;
  message: string;
  author: string | null;
  timestamp: Date;
  branch: string | null;
}

export function CommitLogList({ commits }: { commits: CommitRow[] }) {
  if (commits.length === 0) {
    return (
      <EmptyState
        icon={<GitCommit className="h-5 w-5" />}
        title="Chưa có commit"
        description="Cài đặt git hook ở repo bằng scripts/install-hook.sh để bắt đầu nhận webhook về."
      />
    );
  }

  return (
    <ol className="relative space-y-3">
      <span
        aria-hidden
        className="absolute bottom-1 left-[7px] top-2 w-px bg-border"
      />
      {commits.map((c) => (
        <li key={c.id} className="relative pl-7">
          <span
            aria-hidden
            className="absolute left-[3px] top-1.5 flex h-2.5 w-2.5 items-center justify-center rounded-full border border-primary/40 bg-background"
          >
            <span className="block h-1 w-1 rounded-full bg-primary" />
          </span>
          <div className="flex flex-wrap items-center gap-2 text-xs">
            <CopyText
              value={c.hash}
              display={c.hash.slice(0, 7)}
              className="text-mono text-primary"
            />
            <span className="text-foreground/85">{c.author ?? "—"}</span>
            <span className="text-2xs uppercase tracking-wider text-muted-foreground">
              {ago(c.timestamp)}
            </span>
          </div>
          <p className="mt-1 break-words text-sm text-foreground/90">
            {c.message}
          </p>
        </li>
      ))}
    </ol>
  );
}