<template>
  <div class="h-screen flex flex-col bg-monokai-bg">
    <!-- Header -->
    <AppHeader />

    <!-- Layout 3 colonnes selon consigne-design_webui.md -->
    <div class="flex-1 flex overflow-hidden">
      <!-- Colonne gauche: Détails IP -->
      <div class="w-80 flex-shrink-0">
        <IPDetails />
      </div>

      <!-- Colonne centrale: Grille d'IP organisée en arbre -->
      <div class="flex-1">
        <IPGridTree />
      </div>

      <!-- Colonne droite: Nouvelles détections -->
      <div class="w-80 flex-shrink-0">
        <NewDetections />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useIPStore } from '@/stores/ipStore'
import AppHeader from '@/components/AppHeader.vue'
import IPDetails from '@/components/IPDetails.vue'
import IPGridTree from '@/components/IPGridTree.vue'
import NewDetections from '@/components/NewDetections.vue'

const ipStore = useIPStore()

onMounted(async () => {
  // Charger les données initiales
  await ipStore.fetchIPs()

  // Connecter WebSocket
  ipStore.connectWebSocket()
})

onUnmounted(() => {
  // Déconnecter WebSocket
  ipStore.disconnectWebSocket()
})
</script>
