import type { V4SubAgentState, V4SubAgentStatus } from '@/types/workbench';

interface V4SubAgentCanvasProps {
  agents: V4SubAgentState[];
  activeAgentId?: string;
  onSelect: (agentId: string) => void;
}

const STATUS_COLOR: Record<V4SubAgentStatus, string> = {
  spawned: '#58a6ff',
  running: '#48bb78',
  finished: '#78e6b4',
  error: '#ff7b72',
  cancelled: '#d29922',
  timeout: '#ff7b72',
};

const WIDTH = 640;
const HEIGHT = 300;
const CENTER_X = WIDTH / 2;
const CENTER_Y = HEIGHT / 2;
const RADIUS = 108;

/**
 * Lightweight SVG "canvas" visualizing the V4 Operating Agent's live
 * sub-agent fan-out as a graph: one central "Main Agent" node connected to
 * each spawned sub-agent node, colored by status. Purely a new view over
 * the EXISTING real-time `v4SubAgents` store state (populated by
 * `handleV4RuntimeEvent` from the DeerFlow harness stream) - no new Tauri
 * event channel needed, so status changes already appear here live as the
 * underlying store updates.
 */
export function V4SubAgentCanvas({ agents, activeAgentId, onSelect }: V4SubAgentCanvasProps) {
  const count = agents.length;

  return (
    <div className="v4-canvas">
      <svg
        className="v4-canvas__svg"
        viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
        role="img"
        aria-label="V4 sub-agent graph"
      >
        {agents.map((agent, index) => {
          const angle = count === 1 ? -Math.PI / 2 : (index / count) * Math.PI * 2 - Math.PI / 2;
          const x = CENTER_X + RADIUS * Math.cos(angle);
          const y = CENTER_Y + RADIUS * Math.sin(angle);
          return (
            <line
              key={`edge-${agent.agentId}`}
              x1={CENTER_X}
              y1={CENTER_Y}
              x2={x}
              y2={y}
              stroke={STATUS_COLOR[agent.status]}
              strokeOpacity={0.45}
              strokeWidth={2}
            />
          );
        })}

        <g className="v4-canvas__node v4-canvas__node--main">
          <circle cx={CENTER_X} cy={CENTER_Y} r={34} fill="#161b22" stroke="#58a6ff" strokeWidth={2} />
          <text x={CENTER_X} y={CENTER_Y - 4} textAnchor="middle" className="v4-canvas__label">Main</text>
          <text x={CENTER_X} y={CENTER_Y + 12} textAnchor="middle" className="v4-canvas__label">Agent</text>
        </g>

        {agents.map((agent, index) => {
          const angle = count === 1 ? -Math.PI / 2 : (index / count) * Math.PI * 2 - Math.PI / 2;
          const x = CENTER_X + RADIUS * Math.cos(angle);
          const y = CENTER_Y + RADIUS * Math.sin(angle);
          const isActive = agent.agentId === activeAgentId;
          const color = STATUS_COLOR[agent.status];
          return (
            <g
              key={agent.agentId}
              className={`v4-canvas__node ${agent.status === 'running' ? 'v4-canvas__node--pulse' : ''} ${isActive ? 'is-active' : ''}`}
              transform={`translate(${x}, ${y})`}
              onClick={() => onSelect(agent.agentId)}
              role="button"
              tabIndex={0}
              onKeyDown={(e) => {
                if (e.key === 'Enter' || e.key === ' ') onSelect(agent.agentId);
              }}
            >
              <circle r={26} fill="#0d1117" stroke={color} strokeWidth={isActive ? 3 : 2} />
              <text y={-32} textAnchor="middle" className="v4-canvas__label v4-canvas__label--id">
                {agent.agentId.length > 12 ? `${agent.agentId.slice(0, 12)}…` : agent.agentId}
              </text>
              <text y={4} textAnchor="middle" className="v4-canvas__label v4-canvas__label--status" fill={color}>
                {agent.status}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
}
