<template>
  <div class="h-screen flex flex-col bg-monokai-bg">
    <!-- Header -->
    <header class="bg-monokai-bg border-b-2 border-monokai-comment p-4">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <h1 class="text-3xl font-bold text-monokai-green">IPWatch</h1>
          <div class="flex flex-col">
            <span class="text-monokai-comment">Architecture réseau</span>
          </div>
        </div>

        <div class="flex items-center gap-6">
          <SystemStats />
          <div class="h-8 w-px bg-monokai-comment"></div>
          <button
            @click="goToDashboard"
            class="px-4 py-2 rounded bg-monokai-yellow text-monokai-bg font-bold hover:bg-monokai-orange transition-colors"
            title="Retour au dashboard"
          >
            ← Dashboard
          </button>
          <button
            @click="showSettings = true"
            class="px-4 py-2 rounded bg-monokai-purple text-monokai-bg text-sm hover:bg-monokai-pink transition-colors"
            title="Ouvrir les paramètres"
          >
            ⚙ Paramètres
          </button>
        </div>
      </div>
    </header>

    <!-- Contenu principal -->
    <main class="flex-1 overflow-hidden p-4 flex flex-col gap-3 min-h-0">
      <!-- Toolbar (palette + save) -->
      <section class="grid grid-cols-[minmax(0,1fr)_22rem] gap-6">
        <div class="border border-monokai-comment/60 rounded-2xl p-2">
          <ArchitectureToolbar @save="archStore.saveWorld()" />
        </div>
        <div></div>
      </section>

      <!-- Canvas + Propriétés -->
      <section class="flex-1 min-h-0 grid grid-cols-[minmax(0,1fr)_22rem] gap-6">
        <div class="border border-monokai-comment/60 rounded-3xl h-full overflow-hidden">
          <ArchitectureCanvas />
        </div>

        <ArchitectureProperties
          @delete-node="onDeleteNode"
          @delete-edge="onDeleteEdge"
          @sync-ip="onSyncIp"
          @pick-icon="onPickIcon"
        />
      </section>
    </main>

    <!-- Modal Icônes -->
    <div
      v-if="iconPickerOpen"
      class="fixed inset-0 z-50 bg-black/60 flex items-center justify-center"
      @click.self="iconPickerOpen = false"
    >
      <div class="bg-monokai-bg border border-monokai-comment/60 rounded-2xl w-[28rem] max-h-[70vh] overflow-auto p-4">
        <div class="flex items-center justify-between mb-3">
          <div class="text-monokai-text font-semibold">Icônes (data/icons)</div>
          <button class="text-monokai-comment hover:text-monokai-cyan" @click="iconPickerOpen = false">✕</button>
        </div>
        <div v-if="archStore.iconList.length" class="grid grid-cols-4 gap-3">
          <button
            v-for="icon in archStore.iconList"
            :key="icon"
            class="border border-monokai-comment/60 rounded-xl p-2 text-xs text-monokai-text hover:border-monokai-cyan/60"
            @click="selectIcon(icon)"
          >
            <img :src="`/icons/${icon}`" :alt="icon" class="w-full h-12 object-contain mb-1" />
            <div class="truncate">{{ icon }}</div>
          </button>
        </div>
        <div v-else class="text-xs text-monokai-comment">Aucune icône trouvée.</div>
      </div>
    </div>

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

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useIPStore } from '@/stores/ipStore'
import { useArchitectureStore } from '@/stores/architectureStore'
import SystemStats from '@/components/SystemStats.vue'
import SettingsModal from '@/components/SettingsModal.vue'
import ArchitectureCanvas from '@/components/architecture/ArchitectureCanvas.vue'
import ArchitectureToolbar from '@/components/architecture/ArchitectureToolbar.vue'
import ArchitectureProperties from '@/components/architecture/ArchitectureProperties.vue'

const router = useRouter()
const ipStore = useIPStore()
const archStore = useArchitectureStore()

const showSettings = ref(false)
const iconPickerOpen = ref(false)

// --- Navigation ---

function goToDashboard() {
  router.push('/')
}

// --- Événements des sous-composants ---

function onDeleteNode(nodeId) {
  archStore.removeNode(nodeId)
}

function onDeleteEdge(edgeId) {
  archStore.removeEdge(edgeId)
}

async function onSyncIp(nodeId) {
  await archStore.fetchIpData(nodeId)
}

async function onPickIcon() {
  iconPickerOpen.value = true
  if (!archStore.iconList.length) {
    await archStore.fetchIcons()
  }
}

function selectIcon(name) {
  if (archStore.selectedNodeId) {
    archStore.updateNodeData(archStore.selectedNodeId, 'icon', name)
  }
  iconPickerOpen.value = false
}

// --- Config ---

async function handleConfigReloaded() {
  await ipStore.fetchIPs()
  ipStore.bumpConfigReload()
}

// --- Init ---

onMounted(async () => {
  await archStore.loadWorld()
})
</script>
