<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useOpenClawAgentsQuery } from '../api/openclawRuntime'
import TeamNetwork from '../components/team/TeamNetwork.vue'

const router = useRouter()
const agentsQuery = useOpenClawAgentsQuery()

interface AgentCardData {
  id: string
  name: string
  role: string
  description: string
  tags: string[]
  color: string
  icon: string
  hero?: boolean
}

const palette = ['#8b7cf6', '#3b82f6', '#a855f7', '#22c55e', '#eab308']

function iconFor(agentId: string): string {
  const id = agentId.toLocaleLowerCase()
  if (id === 'iris') return 'bot'
  if (id.includes('review') || id.includes('security')) return 'shield'
  if (id.includes('research')) return 'search'
  if (id.includes('executor') || id.includes('devops')) return 'terminal'
  if (id.includes('program') || id.includes('develop')) return 'code'
  return 'server'
}

const heroId = computed(() =>
  agentsQuery.data.value?.items.find(agent => agent.id === 'iris')?.id
  ?? agentsQuery.data.value?.items[0]?.id
  ?? '',
)

const agents = computed<AgentCardData[]>(() =>
  (agentsQuery.data.value?.items ?? []).map((agent, index) => ({
    id: agent.id,
    name: agent.name,
    role: agent.id === 'iris' ? 'Chief of Staff' : 'OpenClaw Agent',
    description: agent.description
      ?? `Live agent from ${agent.provider ?? 'the active OpenClaw runtime'}.`,
    tags: [
      agent.provider ?? 'OpenClaw',
      agent.model ?? 'Runtime default',
      agent.status,
    ],
    color: palette[index % palette.length],
    icon: iconFor(agent.id),
    hero: agent.id === heroId.value,
  })),
)

const activeAgents = computed(() =>
  (agentsQuery.data.value?.items ?? [])
    .filter(agent => ['active', 'running', 'working', 'thinking', 'busy'].includes(
      agent.status.toLocaleLowerCase(),
    ))
    .map(agent => agent.id),
)

const loading = computed(() => agentsQuery.isPending.value)
const loadError = computed(() =>
  agentsQuery.error.value instanceof Error ? agentsQuery.error.value.message : '',
)

function goToAgent(id: string) {
  router.push(`/agents/${id}`)
}
</script>

<template>
  <div class="team-page">
    <!-- Quote Pill -->
    <div class="quote-pill">
      <span class="quote-text">"An autonomous organization of AI agents that does work for me and produces value 24/7"</span>
    </div>

    <!-- Header -->
    <div class="team-header">
      <h1 class="team-title">AI Team Network</h1>
      <p class="team-subtitle">{{ agents.length }} AI agents, connected in real-time.</p>
      <p class="team-description">Mission Control orchestriert ein Team spezialisierter Agenten — jeder mit eigener Identität, eigenem Workspace und klaren Verantwortlichkeiten. Die Pulse zeigen aktive Kommunikationsflüsse.</p>
    </div>

    <!-- Network Visualization -->
    <div class="network-container">
      <TeamNetwork
        v-if="agents.length"
        :agents="agents"
        :hero-id="heroId"
        :active-agents="activeAgents"
        @select="goToAgent"
      />
      <p v-else-if="loading" class="team-subtitle">OpenClaw-Agenten werden geladen…</p>
      <p v-else-if="loadError" class="team-subtitle">{{ loadError }}</p>
      <p v-else class="team-subtitle">OpenClaw meldet aktuell keine Agenten.</p>
    </div>

    <!-- Legend -->
    <div class="legend-row">
      <div class="legend-item">
        <span class="legend-dot active-pulse"></span>
        <span>Aktive Verbindung</span>
      </div>
      <div class="legend-item">
        <span class="legend-dot idle-pulse"></span>
        <span>Idle</span>
      </div>
      <div class="legend-item">
        <span class="legend-dot pulse-dot"></span>
        <span>Datenfluss (Pulse)</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.team-page {
  max-width: 920px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.quote-pill {
  background: var(--panel);
  border: 1px solid rgba(139, 124, 246, 0.25);
  border-radius: 14px;
  padding: 14px 22px;
  margin-bottom: 24px;
  box-shadow: 0 0 18px rgba(139, 124, 246, 0.06), inset 0 0 18px rgba(139, 124, 246, 0.03);
  text-align: center;
}
.quote-text {
  font-style: italic;
  font-size: 12px;
  color: #9ea5b3;
  line-height: 1.5;
}

.team-header {
  text-align: center;
  margin-bottom: 28px;
}
.team-title {
  font-size: 26px;
  font-weight: 600;
  color: #e8eaf0;
  margin: 0 0 6px;
}
.team-subtitle {
  font-size: 12px;
  color: #7e8799;
  margin: 0 0 4px;
}
.team-description {
  font-size: 10.5px;
  color: #6b7385;
  margin: 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.network-container {
  margin-top: 10px;
  padding: 0;
}

.legend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 28px;
  padding: 12px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #7e8799;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.active-pulse {
  background: #51d49a;
  box-shadow: 0 0 6px rgba(81, 212, 154, 0.6);
}
.idle-pulse {
  background: #3a3f4b;
}
.pulse-dot {
  background: white;
  width: 6px;
  height: 6px;
  animation: legend-pulse 1.5s ease-in-out infinite;
}
@keyframes legend-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
</style>
