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

export function BranchFrame({ data }: NodeProps) {
  const node = data as unknown as CanvasNodeData;
  const item = node.item;
  if (!item || item.itemType !== "branch-summary") return null;
  return <section className="branchFrame" aria-label={`方案 ${item.branchId} 实现 Agent 展开流程`}>
    <header>
      <div className="branchFrameTitle"><span><GitBranch size={14} />实现 Agent</span><strong>方案 {item.branchId}</strong></div>
      <StatusBadge status={item.branch.status} />
      <div className="branchFrameActions">
        <button type="button" className="nodeAction nodrag nopan" onClick={(event) => { event.stopPropagation(); node.onToggleBranch(item.roundIndex, item.branchId); }}><ChevronUp size={14} />收起方案过程</button>
        {item.detailRef ? <button type="button" className="nodeAction nodrag nopan" data-focus-return={`${item.id}:business`} onClick={(event) => { event.stopPropagation(); node.onOpen(item, "business"); }}>查看方案汇总<ArrowRight size={14} /></button> : null}
        <SourceComparisonButton item={item} onOpen={node.onOpen} />
      </div>
    </header>
  </section>;
}