import { ChevronLeft, GitBranch } from "lucide-react";
import type { NodeProps } from "@xyflow/react";
import type { CanvasNodeData } from "@/lib/layout";
import { StatusBadge } from "@/components/ui/Badges";

export function RoundFrame({ data }: NodeProps) {
  const node = data as unknown as CanvasNodeData;
  const round = node.round;
  if (!round) return null;
  const defaultTitle = `第 ${round.roundIndex} 轮`;
  return <section className="roundFrame" aria-label={`第 ${round.roundIndex} 轮展开流程`}>
    <header>
      <button
        type="button"
        className="roundCollapse nodrag nopan"
        onClick={(event) => {
          event.stopPropagation();
          node.onToggleRound(round.roundIndex);
        }}
      ><ChevronLeft size={17} />折叠本轮</button>
      <div><strong>{round.summary.title && round.summary.title !== defaultTitle ? `${defaultTitle} · ${round.summary.title}` : defaultTitle}</strong><span>{round.summary.goal.headline || "本轮目标未记录"}</span></div>
      <span className="branchCount"><GitBranch size={13} />{round.branches.length} 个候选 · {round.convergenceBatches.length} 个收敛批次</span>
      <StatusBadge status={round.state} />
    </header>
  </section>;
}