<template>
  <div class="agent-view scanlines">
    <div class="bg-grid"></div>
    <div class="bg-glow"></div>
    <div class="bg-particles">
      <span v-for="p in bgParticles" :key="p.id" class="bg-particle" :style="p.style"></span>
    </div>

    <div class="view-header">
      <div class="header-title">
        <span class="title-bracket">[</span>
        <span class="title-text">AGENT COMMAND CENTER</span>
        <span class="title-bracket">]</span>
      </div>
      <div class="header-actions">
        <button class="btn-icon" @click="refreshStats" :class="{ spinning: loading }" title="刷新状态">
          <RefreshCw :size="14" />
        </button>
        <div class="status-bar">
          <span class="status-dot" :class="connectionStatus"></span>
          <span class="status-label">{{ connectionLabel }}</span>
        </div>
      </div>
    </div>

    <div
      class="nodes-canvas"
      ref="canvasRef"
      :class="{ panning: isPanning }"
      @mousedown="startPan"
      @wheel.prevent="handleWheel"
    >
      <div class="canvas-aura"></div>
      <div class="canvas-scan"></div>

      <div class="hud-panels">
        <div class="hud-panel route-telemetry" data-testid="route-telemetry">
          <div class="route-main">{{ activeMainRouteLabel }}</div>
          <div class="route-child">{{ activeChildRouteLabel }}</div>
        </div>
        <div class="hud-panel runtime-summary" data-testid="runtime-summary">
          <div class="hud-title">RUNTIME SUMMARY</div>
          <div class="runtime-grid">
            <div class="runtime-item">
              <span class="runtime-label">MODE</span>
              <strong>{{ runtimeSummary.executionMode }}</strong>
            </div>
            <div class="runtime-item">
              <span class="runtime-label">PHASE</span>
              <strong>{{ runtimeSummary.currentPhase }}</strong>
            </div>
            <div class="runtime-item">
              <span class="runtime-label">CHECKPOINT</span>
              <strong>{{ runtimeSummary.currentCheckpoint }}</strong>
            </div>
            <div class="runtime-item">
              <span class="runtime-label">VERIFIER</span>
              <strong>{{ runtimeSummary.verifierStatus }}</strong>
            </div>
            <div class="runtime-item">
              <span class="runtime-label">ISOLATION</span>
              <strong>{{ runtimeSummary.isolationMode }}</strong>
            </div>
            <div class="runtime-item">
              <span class="runtime-label">TOKENS</span>
              <strong>{{ runtimeSummary.totalTokens }}</strong>
            </div>
          </div>
          <div class="runtime-note">{{ runtimeSummary.verifierSummary }}</div>
          <div class="runtime-meta">
            <span>Cost {{ runtimeSummary.estimatedCost }}</span>
            <span>Tasks {{ runtimeSummary.completedTaskCount }}/{{ runtimeSummary.activeTaskCount }}</span>
            <span>Nodes {{ runtimeSummary.topologyNodeCount }}</span>
            <span v-if="runtimeSummary.budgetWarning" class="runtime-warning">Budget warning</span>
          </div>
          <div v-if="runtimeSummary.workspacePath" class="runtime-workspace">{{ runtimeSummary.workspacePath }}</div>
        </div>

        <div class="hud-panel runtime-events" data-testid="runtime-events-panel">
          <div class="hud-title">RECENT EVENTS</div>
          <div v-if="runtimeSummary.recentEvents.length" class="stack-list">
            <div
              v-for="event in runtimeSummary.recentEvents.slice(0, 5)"
              :key="event.eventId"
              class="stack-item"
            >
              <div class="stack-line">
                <strong>{{ event.eventType }}</strong>
                <span class="event-severity" :class="event.severity">{{ event.severity }}</span>
              </div>
              <div class="stack-subline">{{ event.timestamp }}</div>
            </div>
          </div>
          <div v-else class="stack-empty">暂无 recent events。</div>
        </div>

        <div class="hud-panel runtime-drilldown" data-testid="runtime-drilldown-panel">
          <div class="hud-title">TOPOLOGY & VERIFIER</div>
          <div class="mini-section">
            <div class="mini-title">Topology</div>
            <div v-if="runtimeSummary.topologyNodes.length" class="stack-list">
              <div
                v-for="node in runtimeSummary.topologyNodes"
                :key="node.agentId"
                class="stack-item"
              >
                <div class="stack-line">
                  <strong>{{ node.agentId }}</strong>
                  <span>{{ node.role }}</span>
                </div>
                <div class="stack-subline">Tasks {{ node.completedTaskCount }}/{{ node.taskCount }}</div>
              </div>
            </div>
            <div v-else class="stack-empty">暂无 topology 详情。</div>
          </div>
          <div class="mini-section">
            <div class="mini-title">Verifier Evidence</div>
            <div v-if="runtimeSummary.verifierEvidence.length" class="stack-list">
              <div
                v-for="entry in runtimeSummary.verifierEvidence"
                :key="entry.label"
                class="stack-item"
              >
                <div class="stack-line">
                  <strong>{{ entry.label }}</strong>
                  <span>{{ entry.status }}</span>
                </div>
              </div>
            </div>
            <div v-else class="stack-empty">暂无 verifier evidence。</div>
          </div>
        </div>

        <div class="hud-panel runtime-governance" data-testid="runtime-governance-panel">
          <div class="hud-title">COST & TOOLS</div>
          <div class="mini-section">
            <div class="mini-title">Cost By Agent</div>
            <div v-if="runtimeSummary.costByAgent.length" class="stack-list">
              <div
                v-for="item in runtimeSummary.costByAgent"
                :key="item.agentId"
                class="stack-item"
              >
                <div class="stack-line">
                  <strong>{{ item.agentId }}</strong>
                  <span>{{ item.totalTokens }} tk</span>
                </div>
                <div class="stack-subline">
                  {{ item.estimatedCost }}
                  <span v-if="item.budgetWarning" class="runtime-warning">warning</span>
                </div>
              </div>
            </div>
            <div v-else class="stack-empty">暂无 cost breakdown。</div>
            <div class="stack-subline threshold-line">
              Thresholds: {{ runtimeSummary.costThresholds.totalTokens }} tk / {{ runtimeSummary.costThresholds.estimatedCost }}
            </div>
          </div>
          <div class="mini-section">
            <div class="mini-title">Tool Governance</div>
            <div class="stack-subline">Used {{ runtimeSummary.toolGovernanceTotals.usedTools }}/{{ runtimeSummary.toolGovernanceTotals.totalTools }}</div>
            <div v-if="runtimeSummary.toolGovernance.length" class="stack-list">
              <div
                v-for="tool in runtimeSummary.toolGovernance"
                :key="tool.toolName"
                class="stack-item"
              >
                <div class="stack-line">
                  <strong>{{ tool.toolName }}</strong>
                  <span>{{ tool.usageCount }}x</span>
                </div>
                <div class="stack-subline">{{ tool.permissionClass }} · {{ tool.sideEffectScope }}</div>
              </div>
            </div>
            <div v-else class="stack-empty">暂无 tool governance 数据。</div>
            <div v-if="runtimeSummary.upgradeCandidates.length" class="candidate-list">
              <span v-for="candidate in runtimeSummary.upgradeCandidates" :key="candidate" class="candidate-chip">{{ candidate }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="nodes-viewport" :style="viewportStyle">
        <div class="nodes-stage" :style="stageStyle">
          <svg class="conn-svg" ref="svgRef">
            <defs>
              <filter id="lineGlow">
                <feGaussianBlur stdDeviation="3" result="blur"/>
                <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
            </defs>

            <path
              v-for="agent in mainAgents"
              :key="`bus-${agent.id}`"
              :d="getBusLinePath(agent.id)"
              class="conn-path"
              :class="{ energized: activeMainId === agent.id }"
              :data-testid="`bus-link-${agent.id}`"
            />
            <path
              v-for="agent in activeMainAgents"
              :key="`bus-current-${agent.id}`"
              :d="getBusLinePath(agent.id)"
              class="conn-current"
              :data-testid="`bus-current-${agent.id}`"
            />

            <path
              v-for="child in childAgents"
              :key="`sub-${child.id}`"
              :d="getSubLinePath(child.id)"
              class="conn-path conn-path-sub"
              :class="{ energized: activeChildId === child.id }"
              :data-testid="`sub-link-${child.id}`"
            />
            <path
              v-for="child in activeChildAgents"
              :key="`sub-current-${child.id}`"
              :d="getSubLinePath(child.id)"
              class="conn-current conn-current-sub"
              :data-testid="`sub-current-${child.id}`"
            />
          </svg>

          <div
            ref="masterCardRef"
            class="node-card node-master"
            :class="{ selected: selectedAgentId === 'master' }"
            :style="masterNodeStyle"
            @click="selectAgent('master')"
          >
            <div class="node-inner">
              <div class="node-corner tl"></div>
              <div class="node-corner tr"></div>
              <div class="node-corner bl"></div>
              <div class="node-corner br"></div>
              <div class="node-status" :class="getStatusClass('master')">
                <span class="status-ring"></span>
              </div>
              <div class="node-label">MASTER CORE</div>
              <div class="node-name">{{ getAgentName('master') }}</div>
              <div class="node-role">{{ getAgentRole('master') }}</div>
              <div class="node-desc">{{ getAgentDesc('master') }}</div>
              <div class="node-footer">
                <span class="node-stat">
                  <span class="stat-label">调用</span>
                  <span class="stat-val">{{ agentData.master?.callCount || 0 }}</span>
                </span>
                <span v-if="agentData.master?.currentTask" class="node-task-tag">{{ agentData.master.currentTask }}</span>
              </div>
            </div>
          </div>

          <div
            v-for="agent in mainAgents"
            :key="agent.id"
            :ref="el => setNodeRef(agent.id, el as HTMLElement)"
            class="node-card node-sub"
            :class="{ selected: selectedAgentId === agent.id, disabled: !localAgents[agent.id]?.enabled }"
            :style="getMainNodeStyle(agent.id)"
            :data-testid="`agent-chip-${agent.id}`"
            @click="selectAgent(agent.id)"
          >
            <div class="node-inner">
              <div class="node-corner tl"></div>
              <div class="node-corner tr"></div>
              <div class="node-corner bl"></div>
              <div class="node-corner br"></div>
              <div class="node-status" :class="getStatusClass(agent.id)">
                <span class="status-ring"></span>
              </div>
              <div class="node-label">{{ getAgentName(agent.id) }}</div>
              <div class="node-role">{{ getAgentRole(agent.id) }}</div>
              <div class="node-desc">{{ getAgentDesc(agent.id) }}</div>
              <div class="node-footer">
                <span class="node-stat">
                  <span class="stat-label">调用</span>
                  <span class="stat-val">{{ agentData[agent.id]?.callCount || 0 }}</span>
                </span>
                <span v-if="agentData[agent.id]?.currentTask" class="node-task-tag">{{ agentData[agent.id]?.currentTask }}</span>
                <span v-else class="node-idle">待命中</span>
              </div>
              <div class="rel-label">{{ relationLabels[`master-${agent.id}`] }}</div>
            </div>
          </div>

          <div
            v-for="child in childAgents"
            :key="child.id"
            :ref="el => setNodeRef(child.id, el as HTMLElement)"
            class="node-card node-sub node-child"
            :class="{ selected: selectedAgentId === child.id, disabled: !localAgents[child.id]?.enabled }"
            :style="getChildNodeStyle(child.id)"
            :data-testid="`agent-chip-${child.id}`"
            @click="selectAgent(child.id)"
          >
            <div class="node-inner">
              <div class="node-corner tl"></div>
              <div class="node-corner tr"></div>
              <div class="node-corner bl"></div>
              <div class="node-corner br"></div>
              <div class="node-status" :class="getStatusClass(child.id)">
                <span class="status-ring"></span>
              </div>
              <div class="node-label">{{ child.name }}</div>
              <div class="node-role">{{ child.role }}</div>
              <div class="node-desc">{{ child.description }}</div>
              <div class="node-footer">
                <span class="node-stat">
                  <span class="stat-label">调用</span>
                  <span class="stat-val">{{ agentData[child.id]?.callCount || 0 }}</span>
                </span>
                <span v-if="agentData[child.id]?.currentTask" class="node-task-tag">{{ agentData[child.id]?.currentTask }}</span>
                <span v-else class="node-idle">待命中</span>
              </div>
              <div class="rel-label">{{ child.toolScopeLabel }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="canvas-controls">
        <button class="control-chip zoom-chip" @click="zoomOut" title="缩小视图">
          <span class="chip-symbol">-</span>
        </button>
        <button class="control-chip zoom-readout" @click="resetView" title="重置视图">
          <span class="chip-value">{{ zoomPercent }}</span>
        </button>
        <button class="control-chip zoom-chip" @click="zoomIn" title="放大视图">
          <span class="chip-symbol">+</span>
        </button>
      </div>
    </div>

    <Transition :css="false" @enter="animateIn" @leave="animateOut">
      <div v-if="drawerOpen" class="config-drawer" data-testid="agent-config-drawer">
        <div class="drawer-header">
          <span class="drawer-title">// AGENT CONFIGURATION</span>
          <button class="btn-close" @click="drawerOpen = false"><X :size="16" /></button>
        </div>
        <div class="drawer-body" v-if="editAgent">
          <div class="form-group">
            <label class="form-label">// AGENT NAME</label>
            <input v-model="editAgent.name" type="text" class="form-input" />
          </div>
          <div class="form-group">
            <label class="form-label">// ROLE</label>
            <input v-model="editAgent.role" type="text" class="form-input" />
          </div>
          <div class="form-group">
            <label class="form-label">// DESCRIPTION</label>
            <textarea v-model="editAgent.description" class="form-textarea" rows="2"></textarea>
          </div>
          <div class="form-group flex-1">
            <label class="form-label">// SYSTEM PROMPT</label>
            <textarea v-model="editAgent.systemPrompt" class="form-textarea code-textarea" rows="10"></textarea>
          </div>
          <div class="form-group">
            <label class="form-label">// STATUS</label>
            <div class="toggle-row">
              <span class="toggle-label" :class="{ dim: editAgent.enabled }">DISABLED</span>
              <button class="toggle-btn" :class="{ active: editAgent.enabled }" @click="editAgent = { ...editAgent, enabled: !editAgent.enabled }">
                <span class="toggle-knob"></span>
              </button>
              <span class="toggle-label" :class="{ dim: !editAgent.enabled }">ENABLED</span>
            </div>
          </div>
          <div class="form-group linked-skills-group" data-testid="linked-skills-section">
            <label class="form-label">// LINKED SKILLS</label>
            <div v-if="selectedNodePackages.length > 0" class="linked-skill-packages">
              <span
                v-for="pkg in selectedNodePackages"
                :key="pkg.id"
                class="linked-skill-package"
                :data-testid="`linked-skills-package-${pkg.id}`"
              >
                <strong>{{ pkg.title }}</strong>
                <span>{{ pkg.stateLabel }}</span>
              </span>
            </div>
            <div v-if="skillsLoading" class="linked-skills-state" data-testid="linked-skills-loading">加载技能中...</div>
            <div v-else-if="skillsError" class="linked-skills-state linked-skills-error" data-testid="linked-skills-error">{{ skillsError }}</div>
            <div v-else-if="saveError" class="linked-skills-state linked-skills-error" data-testid="linked-skills-save-error">{{ saveError }}</div>
            <div v-else-if="selectedNodeSkills.length === 0" class="linked-skills-state" data-testid="linked-skills-empty">
              暂无可关联技能，请先到左侧能力中心创建或维护相关 Skill。
            </div>
            <div v-else class="linked-skill-list">
              <label
                v-for="skill in selectedNodeSkills"
                :key="skill.id"
                class="linked-skill-item"
                :data-testid="`linked-skill-item-${skill.id}`"
              >
                <input
                  :checked="editAgent.selectedSkillIds.includes(skill.id)"
                  type="checkbox"
                  class="linked-skill-checkbox"
                  :data-testid="`linked-skill-checkbox-${skill.id}`"
                  @change="toggleSkillSelection(skill.id, ($event.target as HTMLInputElement).checked)"
                />
                <div class="linked-skill-copy">
                  <div class="linked-skill-head">
                    <span class="linked-skill-name">{{ skill.name }}</span>
                    <span class="linked-skill-agent-type">{{ skill.agent_type }}</span>
                  </div>
                  <div class="linked-skill-desc">{{ skill.description || '暂无描述' }}</div>
                  <div v-if="skill.tools.length > 0" class="linked-skill-tools">
                    <span v-for="tool in skill.tools" :key="tool" class="linked-skill-tool">{{ tool }}</span>
                  </div>
                </div>
              </label>
            </div>
          </div>
          <div class="drawer-actions">
            <button class="btn-secondary" data-testid="linked-skills-reset" @click="resetConfig">重置</button>
            <button class="btn-primary" data-testid="linked-skills-save" @click="saveConfig" :disabled="saving">
              <span v-if="saving" class="btn-loader"></span>
              {{ saving ? '保存中...' : '保存配置' }}
            </button>
          </div>
        </div>
      </div>
    </Transition>

    <Transition :css="false" @enter="animateIn" @leave="animateOut">
      <div v-if="addModalOpen" class="modal-overlay" @click.self="addModalOpen = false">
        <div class="modal-card">
          <div class="modal-header">
            <span class="modal-title">// ADD NEW AGENT</span>
            <button class="btn-close" @click="addModalOpen = false"><X :size="16" /></button>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label class="form-label">// AGENT NAME</label>
              <input v-model="newAgent.name" type="text" class="form-input" placeholder="例如: CODER" />
            </div>
            <div class="form-group">
              <label class="form-label">// ROLE KEY (英文唯一标识)</label>
              <input v-model="newAgent.roleKey" type="text" class="form-input" placeholder="例如: coder" />
            </div>
            <div class="form-group">
              <label class="form-label">// ROLE</label>
              <input v-model="newAgent.role" type="text" class="form-input" placeholder="例如: 中文角色名" />
            </div>
            <div class="form-group">
              <label class="form-label">// DESCRIPTION</label>
              <textarea v-model="newAgent.description" class="form-textarea" rows="2" placeholder="描述该 Agent 的职责..."></textarea>
            </div>
            <div class="form-group flex-1">
              <label class="form-label">// SYSTEM PROMPT</label>
              <textarea v-model="newAgent.systemPrompt" class="form-textarea code-textarea" rows="6" placeholder="输入系统提示词..."></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn-secondary" @click="addModalOpen = false">取消</button>
            <button class="btn-primary" @click="addAgent" :disabled="!newAgent.name || !newAgent.roleKey">创建智能体</button>
          </div>
        </div>
      </div>
    </Transition>

    <Transition :css="false" @enter="fadeIn" @leave="fadeOut">
      <div v-if="drawerOpen" class="drawer-backdrop" @click="drawerOpen = false"></div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { RefreshCw, X } from 'lucide-vue-next'
import { useAgentsPage } from './composables/useAgentsPage'

const {
  bgParticles,
  canvasRef,
  svgRef,
  masterCardRef,
  isPanning,
  connectionStatus,
  connectionLabel,
  loading,
  drawerOpen,
  addModalOpen,
  editAgent,
  newAgent,
  skillsLoading,
  skillsError,
  saveError,
  saving,
  mainAgents,
  childAgents,
  relationLabels,
  activeMainId,
  activeChildId,
  activeMainAgents,
  activeChildAgents,
  activeMainRouteLabel,
  activeChildRouteLabel,
  selectedAgentId,
  selectedNodePackages,
  selectedNodeSkills,
  agentData,
  runtimeSummary,
  localAgents,
  viewportStyle,
  stageStyle,
  masterNodeStyle,
  zoomPercent,
  refreshStats,
  startPan,
  handleWheel,
  getBusLinePath,
  getSubLinePath,
  selectAgent,
  setNodeRef,
  getStatusClass,
  getAgentName,
  getAgentRole,
  getAgentDesc,
  getMainNodeStyle,
  getChildNodeStyle,
  zoomOut,
  zoomIn,
  resetView,
  toggleSkillSelection,
  resetConfig,
  saveConfig,
  addAgent,
  animateIn,
  animateOut,
  fadeIn,
  fadeOut,
} = useAgentsPage()
</script>

<style scoped src="./agentsPage.css"></style>

