<template>
  <div class="h-full flex flex-col bg-monokai-bg border-l border-monokai-comment no-select">
    <!-- Header -->
    <div class="p-4 border-b border-monokai-comment">
      <h2 class="text-xl font-bold text-monokai-pink">Nouvelles Détections</h2>
    </div>

    <!-- Liste -->
    <div class="flex-1 overflow-auto p-4">
      <div v-if="newIPs.length > 0" class="space-y-2">
        <div
          v-for="ip in newIPs"
          :key="ip.ip"
          @click="selectIP(ip)"
          :class="[
            'p-2.5 rounded border-2 cursor-pointer transition-colors',
            isOlderThanOneHour(ip.first_seen)
              ? 'border-monokai-purple-dark bg-monokai-purple-dark/10 hover:bg-monokai-purple-dark/20'
              : 'border-monokai-pink bg-monokai-pink/10 hover:bg-monokai-pink/20'
          ]"
        >
          <!-- IP + Statut sur la même ligne -->
          <div class="flex items-center justify-between">
            <span class="font-mono font-bold text-monokai-text text-sm">
              {{ ip.ip }}
            </span>
            <div class="flex items-center gap-2 text-xs">
              <span
                :class="[
                  'px-2 py-0.5 rounded',
                  ip.last_status === 'online'
                    ? 'bg-monokai-green/20 text-monokai-green'
                    : 'bg-monokai-comment/20 text-monokai-comment'
                ]"
              >
                {{ ip.last_status || 'Inconnu' }}
              </span>
              <span
                v-if="!ip.known"
                class="px-2 py-0.5 rounded bg-monokai-cyan/20 text-monokai-cyan"
              >
                Inconnue
              </span>
            </div>
          </div>

          <!-- MAC/Vendor + Timestamp sur la même ligne -->
          <div class="flex items-center justify-between text-xs text-monokai-comment mt-1">
            <div v-if="ip.mac" class="font-mono">
              {{ ip.mac }}
              <span v-if="ip.vendor" class="ml-1">({{ ip.vendor }})</span>
            </div>
            <div>{{ formatTime(ip.first_seen) }}</div>
          </div>
        </div>
      </div>

      <!-- Placeholder -->
      <div v-else class="text-center text-monokai-comment mt-10">
        <p>Aucune nouvelle IP détectée</p>
        <p class="text-sm mt-2">Les nouvelles IPs apparaîtront ici</p>
      </div>
    </div>
  </div>
</template>

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

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

// IPs nouvellement détectées (dans les dernières 24h ET online ET non enregistrées)
const newIPs = computed(() => {
  const oneDayAgo = new Date(Date.now() - 24 * 60 * 60 * 1000)

  return ips.value
    .filter(ip => {
      // Doit être online
      if (ip.last_status !== 'online') return false
      // Doit avoir un first_seen récent
      if (!ip.first_seen) return false
      const firstSeen = new Date(ip.first_seen)
      if (firstSeen <= oneDayAgo) return false
      // Ne pas afficher les IPs déjà enregistrées (avec nom ou connue)
      if (ip.known || ip.name) return false
      return true
    })
    .sort((a, b) => {
      const dateA = new Date(a.first_seen)
      const dateB = new Date(b.first_seen)
      return dateB - dateA // Plus récent en premier
    })
    .slice(0, 20) // Limiter à 20
})

function selectIP(ip) {
  ipStore.selectIP(ip)
}

// Vérifier si la détection date de plus d'une heure
function isOlderThanOneHour(dateString) {
  if (!dateString) return false
  const date = new Date(dateString)
  const now = new Date()
  const diff = now - date
  return diff >= 3600000 // 1 heure = 3600000 ms
}

function formatTime(dateString) {
  if (!dateString) return ''
  const date = new Date(dateString)
  const now = new Date()
  const diff = now - date

  // Moins d'une minute
  if (diff < 60000) {
    return 'À l\'instant'
  }

  // Moins d'une heure
  if (diff < 3600000) {
    const minutes = Math.floor(diff / 60000)
    return `Il y a ${minutes} min`
  }

  // Moins de 24h
  if (diff < 86400000) {
    const hours = Math.floor(diff / 3600000)
    return `Il y a ${hours}h`
  }

  return date.toLocaleString('fr-FR')
}
</script>
