<template>
  <div
    :class="[
      'ip-cell-compact',
      cellClass,
      { 'selected': isSelected },
      { 'ping-animation': isPinging },
      { 'mac-changed': ip.mac_changed },
      { 'network-device-offline': ip.network_device && ip.last_status === 'offline' }
    ]"
    @click="selectThisIP"
    :title="getTooltip"
  >
    <!-- Afficher seulement le dernier octet -->
    <div class="font-mono">
      {{ lastOctet }}
    </div>

    <!-- Indicateur ports ouverts (petit badge décalé et réduit) -->
    <div v-if="ip.open_ports && ip.open_ports.length > 0"
         class="absolute top-0.5 right-0.5 w-1 h-1 rounded-full bg-monokai-cyan">
    </div>

    <!-- Indicateur IP suivie (petit rond rouge en bas) - seulement si pas network_device offline -->
    <div v-if="ip.tracked && !(ip.network_device && ip.last_status === 'offline')"
         class="absolute bottom-0.5 left-1/2 transform -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-red-500"
         title="IP suivie">
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useIPStore } from '@/stores/ipStore'

const props = defineProps({
  ip: {
    type: Object,
    required: true
  },
  isPinging: {
    type: Boolean,
    default: false
  }
})

const ipStore = useIPStore()
const { selectedIP } = storeToRefs(ipStore)

const isSelected = computed(() => {
  return selectedIP.value?.ip === props.ip.ip
})

// Extraire le dernier octet de l'IP
const lastOctet = computed(() => {
  const parts = props.ip.ip.split('.')
  return parts[parts.length - 1]
})

// Tooltip avec infos complètes
const getTooltip = computed(() => {
  let tooltip = `${props.ip.ip}`
  if (props.ip.name) tooltip += ` - ${props.ip.name}`
  if (props.ip.network_device) tooltip += `\n🔷 Équipement réseau`
  if (props.ip.hostname) tooltip += `\nHostname: ${props.ip.hostname}`
  if (props.ip.mac) tooltip += `\nMAC: ${props.ip.mac}`
  if (props.ip.vendor) tooltip += ` (${props.ip.vendor})`
  if (props.ip.mac_changed) tooltip += `\n⚠️ MAC ADDRESS CHANGÉE !`
  if (props.ip.known) tooltip += `\n✅ IP connue`
  if (props.ip.tracked) tooltip += `\n⭐ IP suivie`
  if (props.ip.vm) tooltip += `\n🖥️ VM`
  if (props.ip.hardware_bench) tooltip += `\n🔧 Hardware bench`
  if (props.ip.open_ports && props.ip.open_ports.length > 0) {
    tooltip += `\nPorts: ${props.ip.open_ports.join(', ')}`
  }
  return tooltip
})

const cellClass = computed(() => {
  // Équipements réseau EN LIGNE ont bordure bleue
  if (props.ip.network_device && props.ip.last_status === 'online') {
    return 'network-device-online'
  }

  // Équipements réseau HORS LIGNE : style normal (known/unknown) + point bleu
  // Le point bleu est géré par le template HTML, pas par la classe CSS

  // Déterminer la classe selon l'état (guidelines-css.md)
  if (!props.ip.last_status) {
    return 'free'
  }

  if (props.ip.last_status === 'online') {
    return props.ip.known ? 'online-known' : 'online-unknown'
  } else {
    return props.ip.known ? 'offline-known' : 'offline-unknown'
  }
})

function selectThisIP() {
  ipStore.selectIP(props.ip)
}
</script>
