<template>
  <section id="nodes" class="px-6 py-20 md:px-12 max-w-7xl mx-auto">
    <div class="flex justify-between items-center mb-10 flex-wrap gap-4">
      <div>
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">
          🌍 Статус серверов
        </h2>
        <p class="text-gray-500 dark:text-gray-400 mt-2">
          {{ onlineCount }} из {{ nodes.length }} серверов онлайн
          <span v-if="averagePing !== null" class="ml-4">
            📶 Средний пинг: <span class="font-semibold text-blue-600 dark:text-blue-400">{{ averagePing }}ms</span>
          </span>
        </p>
      </div>
      <button
        @click="refreshData"
        :disabled="loading"
        class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
      >
        <span :class="{ 'animate-spin': loading }">🔄</span>
        {{ loading ? 'Обновление...' : 'Обновить' }}
      </button>
    </div>

    <!-- Состояние загрузки -->
    <div v-if="loading && !nodes.length" class="flex justify-center py-20">
      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>

    <!-- Ошибка -->
    <div v-else-if="error" class="text-center text-red-500 py-12">
      <p class="text-lg">{{ error }}</p>
      <button @click="refreshData" class="mt-4 text-blue-600 dark:text-blue-400 hover:underline">
        Попробовать снова
      </button>
    </div>

    <!-- Сетка серверов -->
    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      <div
        v-for="node in sortedNodes"
        :key="node.name"
        class="bg-white dark:bg-gray-900 rounded-xl p-5 border transition hover:shadow-lg"
        :class="[
          node.isOnline
            ? 'border-green-500/30 dark:border-green-500/20 hover:border-green-500'
            : 'border-red-500/30 dark:border-red-500/20 opacity-60'
        ]"
      >
        <!-- Шапка -->
        <div class="flex items-start justify-between mb-3">
          <div class="flex items-center gap-2">
            <!-- Флаг из CDN -->
            <img 
              v-if="node.country_code" 
              :src="`https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/flags/4x3/${node.country_code.toLowerCase()}.svg`" 
              :alt="node.country_code.toLowerCase()"
              class="h-5 w-auto rounded-sm"
            />
            <div>
              <h3 class="font-semibold text-gray-900 dark:text-white">
                {{ node.name }}
              </h3>
              <span class="text-xs text-gray-500 dark:text-gray-400">
                {{ node.country_code }}
              </span>
            </div>
          </div>
          <span
            class="text-xs px-2 py-1 rounded-full font-medium"
            :class="node.isOnline
              ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400'
              : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'"
          >
            {{ node.isOnline ? '🟢 Онлайн' : '🔴 Офлайн' }}
          </span>
        </div>

        <!-- IP и порт -->
        <div class="text-sm text-gray-500 dark:text-gray-400 mb-3 font-mono">
          {{ node.ip }}:{{ node.port }}
        </div>

        <!-- Статистика -->
        <div class="grid grid-cols-2 gap-2 text-sm">
          <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-2 text-center">
            <div class="text-gray-500 dark:text-gray-400 text-xs">Пользователи</div>
            <div class="font-semibold text-gray-900 dark:text-white">
              {{ node.users_online }}
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-2 text-center">
            <div class="text-gray-500 dark:text-gray-400 text-xs">Uptime</div>
            <div class="font-semibold text-gray-900 dark:text-white">
              {{ formatUptime(node.uptime) }}
            </div>
          </div>
        </div>

        <!-- Пинг (если измерен) -->
        <div v-if="node.ping !== undefined && node.ping !== null" class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
          <div class="flex justify-between items-center text-sm">
            <span class="text-gray-500 dark:text-gray-400">📶 Пинг</span>
            <span
              class="font-semibold"
              :class="{
                'text-green-600 dark:text-green-400': node.ping < 50,
                'text-yellow-600 dark:text-yellow-400': node.ping >= 50 && node.ping < 150,
                'text-orange-600 dark:text-orange-400': node.ping >= 150 && node.ping < 300,
                'text-red-600 dark:text-red-400': node.ping >= 300
              }"
            >
              {{ node.ping }}ms
            </span>
          </div>
          <!-- Прогресс-бар пинга -->
          <div class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full mt-1 overflow-hidden">
            <div
              class="h-full rounded-full transition-all duration-500"
              :class="{
                'bg-green-500': node.ping < 50,
                'bg-yellow-500': node.ping >= 50 && node.ping < 150,
                'bg-orange-500': node.ping >= 150 && node.ping < 300,
                'bg-red-500': node.ping >= 300
              }"
              :style="{ width: Math.min((node.ping / 300) * 100, 100) + '%' }"
            ></div>
          </div>
        </div>

        <!-- Кнопка проверки пинга -->
        <button
          @click="pingNode(node)"
          :disabled="node.pinging || !node.isOnline"
          class="mt-3 w-full text-xs py-1.5 rounded-lg transition font-medium"
          :class="[
            node.isOnline
              ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/30 disabled:opacity-50'
              : 'bg-gray-100 dark:bg-gray-800 text-gray-400 cursor-not-allowed'
          ]"
        >
          {{ node.pinging ? '⏳ Измерение...' : 'Проверить пинг' }}
        </button>
      </div>
    </div>

    <!-- Футер с статистикой -->
    <div
      v-if="!loading && nodes.length"
      class="mt-10 grid grid-cols-2 md:grid-cols-4 gap-4 text-center"
    >
      <div class="bg-gray-50 dark:bg-gray-800/50 rounded-xl p-4">
        <div class="text-2xl font-bold text-gray-900 dark:text-white">
          {{ nodes.length }}
        </div>
        <div class="text-sm text-gray-500 dark:text-gray-400">Всего серверов</div>
      </div>
      <div class="bg-gray-50 dark:bg-gray-800/50 rounded-xl p-4">
        <div class="text-2xl font-bold text-green-600 dark:text-green-400">
          {{ onlineCount }}
        </div>
        <div class="text-sm text-gray-500 dark:text-gray-400">Онлайн</div>
      </div>
      <div class="bg-gray-50 dark:bg-gray-800/50 rounded-xl p-4">
        <div class="text-2xl font-bold text-red-600 dark:text-red-400">
          {{ offlineCount }}
        </div>
        <div class="text-sm text-gray-500 dark:text-gray-400">Офлайн</div>
      </div>
      <div class="bg-gray-50 dark:bg-gray-800/50 rounded-xl p-4">
        <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">
          {{ totalUsers }}
        </div>
        <div class="text-sm text-gray-500 dark:text-gray-400">Всего пользователей</div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// Состояние
const nodes = ref([])
const loading = ref(false)
const error = ref(null)
let updateInterval = null

// Вычисляемые свойства
const sortedNodes = computed(() => {
  return [...nodes.value].sort((a, b) => {
    // Сначала онлайн
    if (a.isOnline !== b.isOnline) {
      return a.isOnline ? -1 : 1
    }
    // Потом по имени
    return a.name.localeCompare(b.name)
  })
})

const onlineCount = computed(() => {
  return nodes.value.filter(n => n.isOnline).length
})

const offlineCount = computed(() => {
  return nodes.value.filter(n => !n.isOnline).length
})

const totalUsers = computed(() => {
  return nodes.value.reduce((sum, n) => sum + (n.users_online || 0), 0)
})

const averagePing = computed(() => {
  const pings = nodes.value
    .filter(n => n.ping !== undefined && n.ping !== null)
    .map(n => n.ping)
  
  if (pings.length === 0) return null
  return Math.round(pings.reduce((a, b) => a + b, 0) / pings.length)
})

// Методы
const formatUptime = (seconds) => {
  if (!seconds) return '0м'
  const days = Math.floor(seconds / 86400)
  const hours = Math.floor((seconds % 86400) / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  
  if (days > 0) return `${days}д ${hours}ч`
  if (hours > 0) return `${hours}ч ${minutes}м`
  return `${minutes}м`
}

// Загрузка данных
const fetchNodes = async () => {
  loading.value = true
  error.value = null
  
  try {
    const response = await fetch('/api/v1/nodes')
    
    if (!response.ok) {
      throw new Error(`Ошибка: ${response.status}`)
    }
    
    const data = await response.json()
    
    // Добавляем поле isOnline и инициализируем пинг
    nodes.value = data.map(node => ({
      ...node,
      isOnline: true, // Все ноды из бэкенда считаем онлайн
      ping: undefined,
      pinging: false
    }))
    
  } catch (err) {
    console.error('Failed to load nodes:', err)
    error.value = 'Не удалось загрузить статус серверов'
  } finally {
    loading.value = false
  }
}

// Измерение пинга через WebSocket
const pingNode = async (node) => {
  if (!node.isOnline || node.pinging) return
  
  node.pinging = true
  node.ping = undefined
  
  const startTime = performance.now()
  const wsUrl = `wss://${node.ip}:${node.port}`
  
  try {
    const ws = new WebSocket(wsUrl)
    
    const timeout = setTimeout(() => {
      ws.close()
      node.ping = null
      node.pinging = false
    }, 5000)
    
    ws.onopen = () => {
      const endTime = performance.now()
      clearTimeout(timeout)
      node.ping = Math.round(endTime - startTime)
      node.pinging = false
      ws.close()
    }
    
    ws.onerror = () => {
      clearTimeout(timeout)
      node.ping = null
      node.pinging = false
    }
    
  } catch {
    node.ping = null
    node.pinging = false
  }
}

// Измерение пинга для всех нод
const pingAllNodes = async () => {
  const pingPromises = nodes.value.map(node => pingNode(node))
  await Promise.allSettled(pingPromises)
}

// Обновление данных
const refreshData = async () => {
  await fetchNodes()
  // После загрузки данных измеряем пинг для онлайн нод
  await pingAllNodes()
}

// Жизненный цикл
onMounted(() => {
  refreshData()
  
  // Автообновление каждые 30 секунд
  updateInterval = setInterval(() => {
    if (!loading.value) {
      refreshData()
    }
  }, 30000)
})

onUnmounted(() => {
  if (updateInterval) {
    clearInterval(updateInterval)
  }
})
</script>