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

    <!-- 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 :showFilters="false" />
      </div>

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

      <!-- Colonne droite: Nouvelles détections + Filtres -->
      <div class="w-80 flex-shrink-0 flex flex-col">
        <NewDetections class="flex-1" />
        <IPDetails :showOnlyFilters="true" />
      </div>
    </div>

    <!-- Modal Paramètres -->
    <SettingsModal
      :isOpen="showSettings"
      @close="showSettings = false"
      @configReloaded="handleConfigReloaded"
    />
  </div>
</template>

<script setup>
import { ref } 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'
import SettingsModal from '@/components/SettingsModal.vue'

const ipStore = useIPStore()
const showSettings = ref(false)

async function handleConfigReloaded() {
  // Recharger les IPs après un import ou un rechargement de config
  await ipStore.fetchIPs()
  ipStore.bumpConfigReload()
}
</script>
