import type { TaskCheckpoint } from "../../lib/api";
import { CheckpointCard } from "./CheckpointCard";

interface CheckpointListProps {
  checkpoints: TaskCheckpoint[];
  taskId: string;
  onActionComplete: () => void;
}

export function CheckpointList({ checkpoints, taskId, onActionComplete }: CheckpointListProps) {
  // Sort checkpoints by number descending (most recent first)
  const sortedCheckpoints = [...checkpoints].sort(
    (a, b) => b.checkpointNumber - a.checkpointNumber
  );

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="shrink-0 p-3 border-b border-[rgba(117,170,252,0.1)] bg-[rgba(0,0,0,0.2)]">
        <div className="flex items-center justify-between">
          <div className="font-mono text-xs text-[#9bc3ff]">
            {checkpoints.length} checkpoint{checkpoints.length !== 1 ? "s" : ""}
          </div>
          <div className="font-mono text-[10px] text-[#556677]">
            Fork or resume from any checkpoint
          </div>
        </div>
      </div>

      {/* Checkpoint list */}
      <div className="flex-1 overflow-y-auto">
        {sortedCheckpoints.length === 0 ? (
          <div className="flex items-center justify-center h-32">
            <div className="font-mono text-[#7788aa] text-xs">No checkpoints</div>
          </div>
        ) : (
          <div className="divide-y divide-[rgba(117,170,252,0.1)]">
            {sortedCheckpoints.map((checkpoint) => (
              <CheckpointCard
                key={checkpoint.id}
                checkpoint={checkpoint}
                taskId={taskId}
                onActionComplete={onActionComplete}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}