<template>
  <div class="flex flex-col h-full">
    <!-- Organisation en arbre par sous-réseaux -->
    <div class="flex-1 overflow-auto px-1 py-3 no-select">
      <div v-for="subnet in organizedSubnets" :key="subnet.name" class="mb-3">
        <!-- Header du sous-réseau (style tree) -->
        <div class="flex items-center gap-2 mb-2 text-monokai-cyan border-l-4 border-monokai-cyan pl-3 no-select">
          <span class="font-bold text-lg">{{ subnet.name }}</span>
          <span class="text-sm text-monokai-text font-semibold">{{ subnet.cidr }}</span>
          <span class="text-sm text-monokai-text font-semibold ml-auto">
            {{ subnet.ips.length }} IPs
            ({{ subnet.stats.online }} en ligne)
          </span>
        </div>

        <!-- Grille compacte des IPs du sous-réseau -->
        <div class="flex flex-wrap pl-2 ip-grid">
          <IPCell
            v-for="ip in subnet.ips"
            :key="ip.ip"
            :ip="ip"
            :is-pinging="scanProgress.currentIP === ip.ip"
          />
        </div>
      </div>

      <!-- Message si vide -->
      <div v-if="organizedSubnets.length === 0" class="text-center text-monokai-comment mt-10">
        <p>Aucune IP à afficher</p>
        <p class="text-sm mt-2">Ajustez les filtres ou lancez un scan</p>
      </div>
    </div>

    <!-- Légende -->
    <div class="bg-monokai-bg border-t border-monokai-comment px-3 py-2">
      <div class="flex items-center gap-3 text-[11px] whitespace-nowrap overflow-hidden no-select">
        <div class="flex items-center gap-1.5">
          <div class="w-3 h-3 rounded border-2 border-monokai-green bg-monokai-green/15"></div>
          <span class="text-monokai-text">En ligne (connue)</span>
        </div>
        <div class="flex items-center gap-1.5">
          <div class="w-3 h-3 rounded border-2 border-monokai-cyan bg-monokai-cyan/15"></div>
          <span class="text-monokai-text">En ligne (inconnue)</span>
        </div>
        <div class="flex items-center gap-1.5">
          <div class="w-3 h-3 rounded border-2 border-dashed border-monokai-pink bg-monokai-pink/10 opacity-50"></div>
          <span class="text-monokai-text">Hors ligne (connue)</span>
        </div>
        <div class="flex items-center gap-1.5">
          <div class="w-3 h-3 rounded border-2 border-dashed border-monokai-purple bg-monokai-purple/10 opacity-50"></div>
          <span class="text-monokai-text">Hors ligne (inconnue)</span>
        </div>
        <div class="flex items-center gap-1.5">
          <div class="w-3 h-3 rounded border-2 border-monokai-comment bg-monokai-comment/20"></div>
          <span class="text-monokai-text">Libre</span>
        </div>
        <div class="flex items-center gap-1.5">
          <div class="w-3 h-3 rounded border-2 border-monokai-orange" style="box-shadow: 0 0 6px rgba(253, 151, 31, 0.5);"></div>
          <span class="text-monokai-text">⚠️ MAC changée</span>
        </div>
        <div class="flex items-center gap-1.5">
          <div class="w-3 h-3 rounded border-[3px]" style="border-color: #1E3A8A; background-color: rgba(30, 58, 138, 0.25);"></div>
          <span class="text-monokai-text">Équip. réseau (en ligne)</span>
        </div>
        <div class="flex items-center gap-1.5">
          <div class="w-1.5 h-1.5 rounded-full" style="background-color: #FBBF24; box-shadow: 0 0 6px #FBBF24, 0 0 10px rgba(251, 191, 36, 0.6);"></div>
          <span class="text-monokai-text">Équip. réseau (hors ligne)</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useIPStore } from '@/stores/ipStore'
import IPCell from './IPCell.vue'

const ipStore = useIPStore()
const { filteredIPs, scanProgress } = storeToRefs(ipStore)

// Sous-réseaux chargés depuis la config
const subnets = ref([])

// Charger les subnets depuis l'API
onMounted(async () => {
  try {
    const response = await fetch('/api/ips/config/options')
    if (response.ok) {
      const data = await response.json()
      if (data.subnets && data.subnets.length > 0) {
        subnets.value = data.subnets
      } else {
        // Fallback si pas de subnets dans la config
        subnets.value = [
          { name: 'static_vm', cidr: '10.0.0.0/24', description: 'Machines virtuelles statiques' },
          { name: 'dhcp', cidr: '10.0.1.0/24', description: 'DHCP' },
          { name: 'iot', cidr: '10.0.2.0/24', description: 'IoT' },
          { name: 'autres', cidr: '10.0.3.0/24', description: 'autres' }
        ]
      }
    }
  } catch (error) {
    console.error('Erreur chargement subnets:', error)
    // Fallback en cas d'erreur
    subnets.value = [
      { name: 'static_vm', cidr: '10.0.0.0/24', description: 'Machines virtuelles statiques' },
      { name: 'dhcp', cidr: '10.0.1.0/24', description: 'DHCP' },
      { name: 'iot', cidr: '10.0.2.0/24', description: 'IoT' },
      { name: 'autres', cidr: '10.0.3.0/24', description: 'autres' }
    ]
  }
})

// Fonction pour trier les IPs par ordre numérique
function sortIPsNumerically(ips) {
  return ips.slice().sort((a, b) => {
    const partsA = a.ip.split('.').map(Number)
    const partsB = b.ip.split('.').map(Number)

    for (let i = 0; i < 4; i++) {
      if (partsA[i] !== partsB[i]) {
        return partsA[i] - partsB[i]
      }
    }
    return 0
  })
}

// Organiser les IPs par sous-réseau
const organizedSubnets = computed(() => {
  return subnets.value.map(subnet => {
    // Extraire le préfixe du sous-réseau (ex: "10.0.0" pour 10.0.0.0/24)
    const [oct1, oct2, oct3] = subnet.cidr.split('/')[0].split('.')
    const prefix = `${oct1}.${oct2}.${oct3}`

    // Filtrer les IPs qui appartiennent à ce sous-réseau
    const subnetIPs = filteredIPs.value.filter(ip => {
      return ip.ip.startsWith(prefix + '.')
    })

    // Trier par ordre numérique
    const sortedIPs = sortIPsNumerically(subnetIPs)

    // Calculer les stats
    const stats = {
      total: sortedIPs.length,
      online: sortedIPs.filter(ip => ip.last_status === 'online').length,
      offline: sortedIPs.filter(ip => ip.last_status === 'offline').length
    }

    return {
      name: subnet.name,
      cidr: subnet.cidr,
      description: subnet.description,
      ips: sortedIPs,
      stats
    }
  }).filter(subnet => subnet.ips.length > 0) // Ne montrer que les sous-réseaux avec des IPs
})
</script>
