<template>
  <aside class="border border-monokai-comment/60 rounded-3xl p-5 overflow-auto h-full text-sm">

    <!-- Propriétés d'un Edge sélectionné -->
    <div v-if="selectedEdge" class="space-y-3">
      <h3 class="text-monokai-cyan font-bold flex items-center gap-2">
        <span class="mdi mdi-vector-line"></span> Connexion
      </h3>

      <details open>
        <summary class="text-monokai-comment cursor-pointer select-none">Style</summary>
        <div class="mt-2 space-y-2 pl-2">
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-20">Couleur</span>
            <input type="color" :value="selectedEdge.data?.color || '#56A7FF'"
              @input="updateEdge('color', $event.target.value)" class="w-8 h-6 bg-transparent border-0 cursor-pointer" />
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-20">Épaisseur</span>
            <input type="number" min="1" max="10" :value="selectedEdge.data?.width || 2"
              @input="updateEdge('width', toNum($event.target.value))" class="input-field w-16" />
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-20">Trait</span>
            <select :value="selectedEdge.data?.dash || 'solid'" @change="updateEdge('dash', $event.target.value)" class="input-field">
              <option value="solid">plein</option>
              <option value="dashed">pointillé</option>
              <option value="dotted">points</option>
            </select>
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-20">Début</span>
            <select :value="selectedEdge.data?.startCap || 'none'" @change="updateEdge('startCap', $event.target.value)" class="input-field">
              <option value="none">aucune</option>
              <option value="arrow">flèche</option>
            </select>
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-20">Fin</span>
            <select :value="selectedEdge.data?.endCap || 'none'" @change="updateEdge('endCap', $event.target.value)" class="input-field">
              <option value="none">aucune</option>
              <option value="arrow">flèche</option>
            </select>
          </label>
        </div>
      </details>

      <button @click="$emit('delete-edge', selectedEdge.id)"
        class="w-full mt-2 px-3 py-1.5 rounded text-xs bg-monokai-pink/20 text-monokai-pink hover:bg-monokai-pink/30 transition-colors">
        <span class="mdi mdi-delete"></span> Supprimer la connexion
      </button>
    </div>

    <!-- Propriétés d'un Noeud sélectionné -->
    <div v-else-if="selectedNode" class="space-y-3">
      <h3 class="text-monokai-cyan font-bold flex items-center gap-2">
        <span class="mdi mdi-square-edit-outline"></span> Propriétés
      </h3>

      <!-- Section IP -->
      <details open>
        <summary class="text-monokai-comment cursor-pointer select-none">IP</summary>
        <div class="mt-2 space-y-2 pl-2">
          <div class="flex items-center gap-1">
            <input :value="nodeData.ipAddress" @input="update('ipAddress', $event.target.value)"
              placeholder="ex: 10.0.0.5" class="input-field flex-1" />
            <button @click="$emit('sync-ip', selectedNode.id)"
              class="px-2 py-1 rounded text-xs bg-monokai-cyan/20 text-monokai-cyan hover:bg-monokai-cyan/30"
              title="Synchroniser les données IP">
              <span class="mdi mdi-sync"></span>
            </button>
          </div>
          <textarea v-if="nodeData.ipData" readonly
            class="w-full bg-monokai-bg border border-monokai-comment/40 rounded px-2 py-1 text-xs font-mono h-24 resize-none text-monokai-comment"
            :value="formatIpData(nodeData.ipData)"></textarea>
        </div>
      </details>

      <!-- Section Identité -->
      <details open>
        <summary class="text-monokai-comment cursor-pointer select-none">Identité</summary>
        <div class="mt-2 space-y-2 pl-2">
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Nom</span>
            <input :value="nodeData.name" @input="update('name', $event.target.value)" class="input-field flex-1" />
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">ID</span>
            <input :value="nodeData.id" @input="update('id', $event.target.value)" class="input-field flex-1" />
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Label</span>
            <input :value="nodeData.label" @input="update('label', $event.target.value)" class="input-field flex-1" />
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Type</span>
            <input :value="nodeData.type" @input="update('type', $event.target.value)" class="input-field flex-1" />
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Icône</span>
            <input :value="nodeData.icon" @input="update('icon', $event.target.value)" class="input-field flex-1" />
            <button @click="$emit('pick-icon', selectedNode.id)"
              class="px-2 py-1 rounded text-xs bg-monokai-comment/20 text-monokai-text hover:bg-monokai-comment/30">
              choisir
            </button>
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Taille</span>
            <input type="range" min="12" max="48" :value="nodeData.iconSize || 16"
              @input="update('iconSize', toNum($event.target.value))" class="flex-1" />
            <span class="text-monokai-comment text-xs w-8 text-right">{{ nodeData.iconSize || 16 }}px</span>
          </label>
          <label class="flex items-center gap-2">
            <input type="checkbox" :checked="nodeData.locked" @change="update('locked', $event.target.checked)"
              class="accent-monokai-pink" />
            <span class="text-monokai-comment">Verrouillé</span>
          </label>
        </div>
      </details>

      <!-- Section Relations -->
      <details>
        <summary class="text-monokai-comment cursor-pointer select-none">Relations</summary>
        <div class="mt-2 space-y-2 pl-2">
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Parent</span>
            <input :value="nodeData.parentId" @input="update('parentId', $event.target.value)"
              class="input-field flex-1" placeholder="instanceId du parent" />
          </label>
          <div v-if="nodeData.childrenIds?.length" class="text-xs text-monokai-comment">
            Enfants : {{ nodeData.childrenIds.join(', ') }}
          </div>
        </div>
      </details>

      <!-- Section Géométrie -->
      <details open>
        <summary class="text-monokai-comment cursor-pointer select-none">Géométrie</summary>
        <div class="mt-2 space-y-2 pl-2">
          <div class="grid grid-cols-2 gap-2">
            <label class="flex items-center gap-1">
              <span class="text-monokai-comment text-xs">X</span>
              <input type="number" :value="Math.round(selectedNode.position?.x || 0)"
                @input="update('position.x', toNum($event.target.value))" class="input-field w-full" />
            </label>
            <label class="flex items-center gap-1">
              <span class="text-monokai-comment text-xs">Y</span>
              <input type="number" :value="Math.round(selectedNode.position?.y || 0)"
                @input="update('position.y', toNum($event.target.value))" class="input-field w-full" />
            </label>
            <label class="flex items-center gap-1">
              <span class="text-monokai-comment text-xs">L</span>
              <input type="number" :value="parseSize(selectedNode.style?.width)"
                @input="update('width', toNum($event.target.value))" class="input-field w-full" />
            </label>
            <label class="flex items-center gap-1">
              <span class="text-monokai-comment text-xs">H</span>
              <input type="number" :value="parseSize(selectedNode.style?.height)"
                @input="update('height', toNum($event.target.value))" class="input-field w-full" />
            </label>
          </div>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">zIndex</span>
            <input type="number" :value="selectedNode.zIndex || 1"
              @input="update('zIndex', toNum($event.target.value))" class="input-field w-20" />
          </label>
        </div>
      </details>

      <!-- Section Couleur -->
      <details open>
        <summary class="text-monokai-comment cursor-pointer select-none">Couleur</summary>
        <div class="mt-2 space-y-2 pl-2">
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Fond</span>
            <input type="color" :value="nodeData.fillColor === 'transparent' ? '#272822' : nodeData.fillColor"
              @input="update('fillColor', $event.target.value)" class="w-8 h-6 bg-transparent border-0 cursor-pointer" />
            <button @click="update('fillColor', 'transparent')"
              class="text-xs text-monokai-comment hover:text-monokai-text">transparent</button>
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Opacité</span>
            <input type="range" min="0" max="1" step="0.05" :value="nodeData.opacity ?? 1"
              @input="update('opacity', toNum($event.target.value))" class="flex-1" />
            <span class="text-monokai-comment text-xs w-8 text-right">{{ Math.round((nodeData.opacity ?? 1) * 100) }}%</span>
          </label>
        </div>
      </details>

      <!-- Section Trait -->
      <details>
        <summary class="text-monokai-comment cursor-pointer select-none">Trait</summary>
        <div class="mt-2 space-y-2 pl-2">
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Couleur</span>
            <input type="color" :value="nodeData.borderColor || '#B5B5B5'"
              @input="update('borderColor', $event.target.value)" class="w-8 h-6 bg-transparent border-0 cursor-pointer" />
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Épaisseur</span>
            <input type="number" min="1" max="12" :value="nodeData.borderWidth || 2"
              @input="update('borderWidth', toNum($event.target.value))" class="input-field w-16" />
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Style</span>
            <select :value="nodeData.borderStyle || 'solid'" @change="update('borderStyle', $event.target.value)" class="input-field">
              <option value="solid">plein</option>
              <option value="dashed">pointillé</option>
              <option value="dotted">points</option>
            </select>
          </label>
        </div>
      </details>

      <!-- Section Connecteurs (interfaces réseau) -->
      <details open>
        <summary class="text-monokai-comment cursor-pointer select-none">Connecteurs</summary>
        <div class="mt-2 space-y-2 pl-2">
          <div class="grid grid-cols-2 gap-2">
            <label class="flex items-center gap-1">
              <span class="text-monokai-comment text-xs">Haut</span>
              <input type="number" min="0" max="8" :value="nodeData.connectTop || 0"
                @input="update('connectTop', toNum($event.target.value))" class="input-field w-full" />
            </label>
            <label class="flex items-center gap-1">
              <span class="text-monokai-comment text-xs">Bas</span>
              <input type="number" min="0" max="8" :value="nodeData.connectBottom || 0"
                @input="update('connectBottom', toNum($event.target.value))" class="input-field w-full" />
            </label>
            <label class="flex items-center gap-1">
              <span class="text-monokai-comment text-xs">Gauche</span>
              <input type="number" min="0" max="8" :value="nodeData.connectLeft || 0"
                @input="update('connectLeft', toNum($event.target.value))" class="input-field w-full" />
            </label>
            <label class="flex items-center gap-1">
              <span class="text-monokai-comment text-xs">Droite</span>
              <input type="number" min="0" max="8" :value="nodeData.connectRight || 0"
                @input="update('connectRight', toNum($event.target.value))" class="input-field w-full" />
            </label>
          </div>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Couleur</span>
            <input type="color" :value="nodeData.connectorColor || '#B5B5B5'"
              @input="update('connectorColor', $event.target.value)" class="w-8 h-6 bg-transparent border-0 cursor-pointer" />
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Taille</span>
            <input type="number" min="6" max="24" :value="nodeData.connectorSize || 12"
              @input="update('connectorSize', toNum($event.target.value))" class="input-field w-16" />
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Contour</span>
            <input type="color" :value="nodeData.connectorStrokeColor || '#1E1F1C'"
              @input="update('connectorStrokeColor', $event.target.value)" class="w-8 h-6 bg-transparent border-0 cursor-pointer" />
          </label>
        </div>
      </details>

      <!-- Section Texte -->
      <details>
        <summary class="text-monokai-comment cursor-pointer select-none">Texte</summary>
        <div class="mt-2 space-y-2 pl-2">
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Couleur</span>
            <input type="color" :value="nodeData.fontColor || '#E6E6E6'"
              @input="update('fontColor', $event.target.value)" class="w-8 h-6 bg-transparent border-0 cursor-pointer" />
          </label>
          <label class="flex items-center gap-2">
            <span class="text-monokai-comment w-16">Taille</span>
            <input type="number" min="8" max="48" :value="nodeData.fontSize || 14"
              @input="update('fontSize', toNum($event.target.value))" class="input-field w-16" />
          </label>
        </div>
      </details>

      <!-- Bouton supprimer -->
      <button v-if="!nodeData.locked" @click="$emit('delete-node', selectedNode.id)"
        class="w-full mt-2 px-3 py-1.5 rounded text-xs bg-monokai-pink/20 text-monokai-pink hover:bg-monokai-pink/30 transition-colors">
        <span class="mdi mdi-delete"></span> Supprimer le noeud
      </button>
    </div>

    <!-- Aucune sélection -->
    <div v-else class="text-monokai-comment text-center">
      <span class="mdi mdi-cursor-default-click text-4xl block mb-3 opacity-30"></span>
      <p>Aucun objet sélectionné</p>
      <p class="text-xs mt-1 opacity-60">Cliquez sur un noeud ou une connexion</p>
    </div>
  </aside>
</template>

<script setup>
import { computed } from 'vue'
import { useArchitectureStore } from '@/stores/architectureStore'

const archStore = useArchitectureStore()

defineEmits(['delete-node', 'delete-edge', 'sync-ip', 'pick-icon'])

const selectedNode = computed(() => archStore.selectedNode)
const selectedEdge = computed(() => archStore.selectedEdge)
const nodeData = computed(() => selectedNode.value?.data || {})

function update(field, value) {
  if (!selectedNode.value) return
  archStore.updateNodeData(selectedNode.value.id, field, value)
}

function updateEdge(field, value) {
  if (!selectedEdge.value) return
  archStore.updateEdgeData(selectedEdge.value.id, field, value)
}

function toNum(val) {
  const n = Number(val)
  return isNaN(n) ? 0 : n
}

function parseSize(sizeStr) {
  if (!sizeStr) return 120
  return parseInt(String(sizeStr).replace('px', ''), 10) || 120
}

function formatIpData(ipData) {
  if (!ipData) return ''
  const lines = []
  if (ipData.ip) lines.push(`IP: ${ipData.ip}`)
  if (ipData.name) lines.push(`Nom: ${ipData.name}`)
  if (ipData.mac) lines.push(`MAC: ${ipData.mac}`)
  if (ipData.vendor) lines.push(`Vendor: ${ipData.vendor}`)
  if (ipData.hostname) lines.push(`Hostname: ${ipData.hostname}`)
  if (ipData.last_status) lines.push(`Status: ${ipData.last_status}`)
  if (ipData.location) lines.push(`Location: ${ipData.location}`)
  if (ipData.host) lines.push(`Host: ${ipData.host}`)
  if (ipData.open_ports?.length) lines.push(`Ports: ${ipData.open_ports.join(', ')}`)
  if (ipData.link) lines.push(`Lien: ${ipData.link}`)
  return lines.join('\n')
}
</script>

<style scoped>
.input-field {
  @apply bg-monokai-bg border border-monokai-comment/40 rounded px-2 py-1 text-xs text-monokai-text focus:border-monokai-cyan focus:outline-none;
}
</style>
