import type { CanvasItem, QueryAttempt } from "@/lib/types";
import { queryAttemptItem } from "@/lib/layout";

const statusText = { hit: "命中", empty: "无结果", failure: "失败", running: "进行中", interrupted: "构建中断", unknown: "状态未知" } as const;

export function QueryAttemptList({ id, attempts, roundIndex, branchId, onOpen }: { id?: string; attempts: QueryAttempt[]; roundIndex: number; branchId: number; onOpen: (item: CanvasItem, target: "business") => void }) {
  return <ol id={id} className="queryAttemptList">
    {attempts.map((attempt, index) => {
      const item = queryAttemptItem(attempt, roundIndex, branchId);
      return <li key={attempt.id}><button type="button" className="nodrag nopan" data-focus-return={`${item.id}:query`} onClick={(event) => { event.stopPropagation(); onOpen(item, "business"); }}><span className="queryIndex">{String(index + 1).padStart(2, "0")}</span><span className="queryText">{attempt.queryLabel}</span><span className={`queryStatus query-${attempt.status}`}>{attempt.resultCount && attempt.resultCount > 0 ? `${attempt.resultCount} 条` : statusText[attempt.status]}</span></button></li>;
    })}
  </ol>;
}