<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
import AgentCard from './AgentCard.vue'

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

const props = defineProps<{
  agents: AgentData[]
  heroId?: string
  activeAgents?: string[]
}>()

const emit = defineEmits<{
  select: [id: string]
}>()

// ── Layout refs ──
const networkRef = ref<HTMLDivElement | null>(null)

interface CardBox {
  left: number
  right: number
  top: number
  bottom: number
  cx: number
  cy: number
  width: number
  height: number
}
const cardPositions = ref<Record<string, CardBox>>({})
const svgWidth = ref(0)
const svgHeight = ref(0)

// ── Computed data ──
const hero = computed(() => props.agents.find(a => a.id === props.heroId) ?? props.agents[0])
const childAgents = computed(() => props.agents.filter(a => a.id !== props.heroId))

function isActive(id: string): boolean {
  return props.activeAgents?.includes(id) ?? false
}

// ── Position measurement ──
function updatePositions() {
  if (!networkRef.value) return
  const rect = networkRef.value.getBoundingClientRect()
  svgWidth.value = rect.width
  svgHeight.value = rect.height

  const cards = networkRef.value.querySelectorAll('[data-agent-id]')
  const positions: Record<string, CardBox> = {}
  cards.forEach(el => {
    const id = el.getAttribute('data-agent-id')
    if (!id) return
    const r = el.getBoundingClientRect()
    positions[id] = {
      left: r.left - rect.left,
      right: r.left + r.width - rect.left,
      top: r.top - rect.top,
      bottom: r.top + r.height - rect.top,
      cx: r.left + r.width / 2 - rect.left,
      cy: r.top + r.height / 2 - rect.top,
      width: r.width,
      height: r.height,
    }
  })
  cardPositions.value = positions
}

// ── SVG path computation ──
interface ConnectionPath {
  d: string
  length: number
}

const connectionPaths = computed<Record<string, ConnectionPath | null>>(() => {
  const result: Record<string, ConnectionPath | null> = {}
  const pos = cardPositions.value
  const heroEntry = props.agents.find(a => a.id === props.heroId)
  const heroId = heroEntry?.id ?? ''
  const iris = heroId ? pos[heroId] : undefined
  if (!iris) return result

  const children = childAgents.value
  const total = children.length
  if (total === 0) return result

  for (let idx = 0; idx < total; idx++) {
    const agent = children[idx]
    const agentPos = pos[agent.id]
    if (!agentPos) {
      result[agent.id] = null
      continue
    }

    // Spread start points across Iris bottom edge (30%-70% range)
    const t = total > 1 ? idx / (total - 1) : 0.5
    const startX = iris.left + iris.width * (0.30 + t * 0.40)
    const startY = iris.bottom - 1

    // Determine column: left or right of Iris center
    const isLeftColumn = agentPos.cx < iris.cx

    // End point: approach from side, 8px before card edge
    const endX = isLeftColumn ? agentPos.right - 8 : agentPos.left + 8
    const endY = agentPos.cy

    // Bézier control points
    const cp1x = startX
    const cp1y = startY + 40
    const cp2x = endX + (isLeftColumn ? 50 : -50)
    const cp2y = endY - 10

    const d = `M ${startX} ${startY} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${endX} ${endY}`
    result[agent.id] = { d, length: 0 }
  }
  return result
})

// ── Pulse animation (JS-driven via requestAnimationFrame) ──
let animFrameId: number | null = null
let lastAnimTime = 0

// Track path elements and animation offset per agent
const pathElements = ref<Record<string, SVGPathElement | null>>({})
const pulseElements = ref<Record<string, SVGPathElement | null>>({})
const pulseOffsets = ref<Record<string, number>>({})

function storePathRef(id: string) {
  return (el: SVGPathElement | null) => {
    pathElements.value[id] = el
  }
}

function storePulseRef(id: string) {
  return (el: SVGPathElement | null) => {
    pulseElements.value[id] = el
  }
}

/** Refresh path lengths and pulse dasharrays from current SVG elements */
function refreshPathLengths() {
  for (const id of childAgents.value.map(a => a.id)) {
    const pathEl = pathElements.value[id]
    const pulseEl = pulseElements.value[id]
    const p = connectionPaths.value[id]
    if (pathEl && p) {
      p.length = pathEl.getTotalLength()
    }
    if (pulseEl && p && p.length > 0) {
      if (pulseOffsets.value[id] === undefined) {
        pulseOffsets.value[id] = 0
      }
      pulseEl.setAttribute('stroke-dasharray', `10 ${p.length}`)
      pulseEl.setAttribute('stroke-dashoffset', String(-pulseOffsets.value[id]))
    }
  }
}

function startPulseAnimation() {
  const speeds: Record<string, number> = {}

  refreshPathLengths()

  for (const id of childAgents.value.map(a => a.id)) {
    const p = connectionPaths.value[id]
    if (p && p.length > 0) {
      speeds[id] = p.length / 3000 // full traversal in ~3s
      if (pulseOffsets.value[id] === undefined) {
        pulseOffsets.value[id] = 0
      }
    }
  }

  lastAnimTime = performance.now()

  function tick(now: number) {
    const dt = now - lastAnimTime
    lastAnimTime = now

    const children = childAgents.value
    for (let i = 0; i < children.length; i++) {
      const id = children[i].id
      const pathEl = pathElements.value[id]
      const pulseEl = pulseElements.value[id]
      const p = connectionPaths.value[id]
      if (!pathEl || !pulseEl || !p) continue

      const len = p.length
      if (len <= 0) continue

      const currentOffset = pulseOffsets.value[id] ?? 0
      const newOffset = currentOffset + (speeds[id] ?? len / 3000) * dt
      const cycleLen = len + 10
      pulseOffsets.value[id] = newOffset > cycleLen ? newOffset % cycleLen : newOffset

      pulseEl.setAttribute('stroke-dashoffset', String(-pulseOffsets.value[id]))
    }

    animFrameId = requestAnimationFrame(tick)
  }

  animFrameId = requestAnimationFrame(tick)
}

function stopPulseAnimation() {
  if (animFrameId !== null) {
    cancelAnimationFrame(animFrameId)
    animFrameId = null
  }
}

// ── Lifecycle ──
let resizeObserver: ResizeObserver | null = null

onMounted(async () => {
  await nextTick()
  updatePositions()

  // Wait for SVG to render so path refs are populated
  await nextTick()
  updatePositions()
  refreshPathLengths()

  startPulseAnimation()

  resizeObserver = new ResizeObserver(() => {
    updatePositions()
    // Paths changed — recalculate lengths and dasharrays
    requestAnimationFrame(() => {
      refreshPathLengths()
    })
  })
  if (networkRef.value) {
    resizeObserver.observe(networkRef.value)
  }
})

onUnmounted(() => {
  stopPulseAnimation()
  resizeObserver?.disconnect()
})
</script>

<template>
  <div ref="networkRef" class="team-network">
    <!-- SVG Connection Layer -->
    <svg
      v-if="svgWidth > 0 && svgHeight > 0"
      class="network-svg"
      :width="svgWidth"
      :height="svgHeight"
      :viewBox="`0 0 ${svgWidth} ${svgHeight}`"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <filter
          v-for="agent in childAgents"
          :key="`glow-${agent.id}`"
          :id="`glow-${agent.id}`"
          x="-30%" y="-30%" width="160%" height="160%"
        >
          <feGaussianBlur stdDeviation="4" result="blur" />
          <feMerge>
            <feMergeNode in="blur" />
            <feMergeNode in="blur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>

      <!-- Connection lines for each agent -->
      <template v-for="agent in childAgents" :key="agent.id">
        <!-- Base line -->
        <path
          v-if="connectionPaths[agent.id]"
          :ref="storePathRef(agent.id)"
          :d="connectionPaths[agent.id]!.d"
          :stroke="agent.color"
          :stroke-width="isActive(agent.id) ? 2.5 : 1.5"
          fill="none"
          :opacity="isActive(agent.id) ? 0.7 : 0.25"
          stroke-linecap="round"
        />

        <!-- Glow line for active agent -->
        <path
          v-if="isActive(agent.id) && connectionPaths[agent.id]"
          :d="connectionPaths[agent.id]!.d"
          :stroke="agent.color"
          stroke-width="4"
          fill="none"
          stroke-linecap="round"
          :filter="`url(#glow-${agent.id})`"
          opacity="0.5"
        />

        <!-- Pulse line (white dashed segment moving along) -->
        <path
          v-if="connectionPaths[agent.id]"
          :ref="storePulseRef(agent.id)"
          :d="connectionPaths[agent.id]!.d"
          stroke="white"
          stroke-width="3"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          :opacity="isActive(agent.id) ? 1 : 0.4"
        />
      </template>
    </svg>

    <!-- Cards Layer (above SVG) -->
    <div class="cards-layer">
      <!-- Hero: Iris centered top -->
      <div class="hero-slot" data-agent-id="iris">
        <AgentCard
          v-bind="hero"
          :class="{ 'hero-active': isActive(hero.id) }"
          :style="{
            boxShadow: isActive(hero.id)
              ? `0 0 20px ${hero.color}44`
              : undefined,
            borderColor: isActive(hero.id) ? hero.color : undefined,
          }"
          @click="emit('select', hero.id)"
        />
      </div>

      <!-- Agent Grid: 2 columns x 2 rows -->
      <div class="agent-grid">
        <div
          v-for="agent in childAgents"
          :key="agent.id"
          :data-agent-id="agent.id"
          class="agent-slot"
        >
          <AgentCard
            v-bind="agent"
            :style="{
              boxShadow: isActive(agent.id)
                ? `0 0 14px ${agent.color}55, 0 0 30px ${agent.color}22`
                : undefined,
              borderColor: isActive(agent.id) ? agent.color : undefined,
            }"
            @click="emit('select', agent.id)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.team-network {
  position: relative;
  width: 100%;
}

.network-svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.cards-layer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.hero-slot {
  width: 100%;
  max-width: 520px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.hero-active {
  transition: border-color 0.3s, box-shadow 0.3s;
}

.agent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 820px;
}

.agent-slot {
  width: 100%;
  transition: border-color 0.3s, box-shadow 0.3s;
}

@media (max-width: 720px) {
  .agent-grid {
    grid-template-columns: 1fr;
  }
  .cards-layer {
    gap: 20px;
  }
}
</style>
