<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">
          <button
            @click="goBack"
            class="text-monokai-cyan hover:text-monokai-green transition-colors"
            title="Retour à la page principale"
          >
            <span class="mdi mdi-arrow-left text-2xl"></span>
          </button>
          <h1 class="text-3xl font-bold text-monokai-green">Équipements suivis</h1>
        </div>
        <div class="flex items-center gap-4">
          <button
            @click="refreshTrackedIPs"
            :disabled="loading"
            class="px-4 py-2 rounded bg-monokai-cyan text-monokai-bg font-bold hover:bg-monokai-green transition-colors disabled:opacity-50"
            title="Rafraîchir la liste"
          >
            <span class="mdi mdi-refresh" :class="{ 'animate-spin': loading }"></span> Rafraîchir
          </button>
          <div class="text-sm text-monokai-comment">
            {{ trackedIPs.length }} équipement(s) suivi(s)
          </div>
        </div>
      </div>
    </header>

    <!-- Liste des équipements -->
    <div class="flex-1 overflow-auto p-6">
      <!-- Message si aucun équipement -->
      <div v-if="!loading && trackedIPs.length === 0" class="text-center text-monokai-comment mt-20">
        <span class="mdi mdi-information-outline text-6xl mb-4 block"></span>
        <p class="text-xl mb-2">Aucun équipement suivi</p>
        <p class="text-sm">Cochez "IP suivie" dans les détails d'une IP sur la page principale</p>
        <button
          @click="goBack"
          class="mt-6 px-6 py-3 rounded bg-monokai-green text-monokai-bg font-bold hover:bg-monokai-cyan transition-colors"
        >
          <span class="mdi mdi-arrow-left"></span> Retour à la page principale
        </button>
      </div>

      <!-- Loader -->
      <div v-if="loading" class="text-center text-monokai-cyan mt-20">
        <span class="mdi mdi-loading mdi-spin text-6xl"></span>
        <p class="mt-4">Chargement des équipements...</p>
      </div>

      <!-- Grille des équipements -->
      <div v-else-if="trackedIPs.length > 0" class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
        <div
          v-for="ip in trackedIPs"
          :key="ip.ip"
          class="bg-monokai-bg border-2 rounded-lg p-2 transition-all hover:shadow-lg"
          :class="[
            ip.last_status === 'online'
              ? 'border-monokai-green shadow-monokai-green/20'
              : 'border-monokai-pink opacity-60'
          ]"
        >
          <!-- En-tête équipement -->
          <div class="flex items-center justify-between mb-2">
            <div class="flex-1 min-w-0">
              <h3 class="text-base font-bold text-monokai-text truncate" :title="ip.name || ip.ip">
                {{ ip.name || 'Sans nom' }}
              </h3>
              <p class="text-xs text-monokai-comment font-mono">{{ ip.ip }}</p>
            </div>
            <div
              :class="[
                'w-2.5 h-2.5 rounded-full flex-shrink-0 ml-2',
                ip.last_status === 'online' ? 'bg-monokai-green' : 'bg-monokai-pink'
              ]"
              :title="ip.last_status === 'online' ? 'En ligne' : 'Hors ligne'"
            ></div>
          </div>

          <!-- Métadonnées compactes -->
          <div class="space-y-0.5 mb-2 text-xs border-t border-monokai-comment/30 pt-2">
            <div v-if="ip.host" class="flex items-center gap-1.5">
              <span class="mdi mdi-server text-monokai-cyan text-sm"></span>
              <span class="text-monokai-text font-semibold truncate">{{ ip.host }}</span>
            </div>
            <div v-if="ip.location" class="flex items-center gap-1.5">
              <span class="mdi mdi-map-marker text-monokai-yellow text-sm"></span>
              <span class="text-monokai-text truncate">{{ ip.location }}</span>
            </div>
            <div v-if="ip.mac" class="flex items-center gap-1.5">
              <span class="mdi mdi-ethernet text-monokai-purple text-sm"></span>
              <span class="text-monokai-comment font-mono text-xs truncate" :title="ip.mac">{{ ip.mac.substring(0, 17) }}</span>
            </div>
            <div v-if="ip.vendor && ip.vendor !== 'Unknown'" class="flex items-center gap-1.5">
              <span class="mdi mdi-factory text-monokai-orange text-sm"></span>
              <span class="text-monokai-text text-xs truncate" :title="ip.vendor">{{ ip.vendor }}</span>
            </div>
          </div>

          <!-- Actions compactes -->
          <div class="flex gap-1">
            <button
              @click="wakeOnLan(ip)"
              :disabled="ip.last_status === 'online' || !ip.mac || actionLoading[ip.ip]"
              class="flex-1 px-2 py-1.5 rounded bg-monokai-green text-monokai-bg font-bold hover:bg-monokai-cyan transition-colors disabled:opacity-30 disabled:cursor-not-allowed text-xs"
              :title="!ip.mac ? 'Adresse MAC requise' : ip.last_status === 'online' ? 'Déjà en ligne' : 'Démarrer via Wake-on-LAN'"
            >
              <span class="mdi" :class="actionLoading[ip.ip] === 'wol' ? 'mdi-loading mdi-spin' : 'mdi-power'"></span>
              WOL
            </button>
            <button
              @click="shutdownDevice(ip)"
              :disabled="ip.last_status === 'offline' || actionLoading[ip.ip]"
              class="flex-1 px-2 py-1.5 rounded bg-monokai-pink text-monokai-bg font-bold hover:bg-red-700 transition-colors disabled:opacity-30 disabled:cursor-not-allowed text-xs"
              :title="ip.last_status === 'offline' ? 'Déjà hors ligne' : 'Éteindre l\'équipement'"
            >
              <span class="mdi" :class="actionLoading[ip.ip] === 'shutdown' ? 'mdi-loading mdi-spin' : 'mdi-power-off'"></span>
              Éteindre
            </button>
            <button
              @click="viewDetails(ip)"
              class="px-2 py-1.5 rounded bg-monokai-purple text-monokai-bg hover:bg-monokai-cyan transition-colors text-xs"
              title="Voir les détails"
            >
              <span class="mdi mdi-information"></span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()
const trackedIPs = ref([])
const loading = ref(false)
const actionLoading = ref({}) // Pour suivre les actions en cours par IP

onMounted(async () => {
  await fetchTrackedIPs()
})

async function fetchTrackedIPs() {
  loading.value = true
  try {
    const response = await axios.get('/api/tracking/')
    trackedIPs.value = response.data
  } catch (error) {
    console.error('Erreur chargement IPs suivies:', error)
    alert(`Erreur lors du chargement des équipements suivis: ${error.message}`)
  } finally {
    loading.value = false
  }
}

async function refreshTrackedIPs() {
  await fetchTrackedIPs()
}

async function wakeOnLan(ip) {
  if (!ip.mac) {
    alert('Adresse MAC manquante. Impossible d\'envoyer le paquet Wake-on-LAN.')
    return
  }

  actionLoading.value[ip.ip] = 'wol'
  try {
    await axios.post(`/api/tracking/wol/${ip.ip}`)
    alert(`✓ Paquet Wake-on-LAN envoyé à ${ip.name || ip.ip}.\n\nL'équipement devrait démarrer dans quelques secondes (si Wake-on-LAN est activé dans le BIOS).`)

    // Rafraîchir après quelques secondes
    setTimeout(async () => {
      await fetchTrackedIPs()
    }, 3000)
  } catch (error) {
    console.error('Erreur WOL:', error)
    const errorMsg = error.response?.data?.detail || error.message
    alert(`✗ Erreur Wake-on-LAN: ${errorMsg}`)
  } finally {
    delete actionLoading.value[ip.ip]
  }
}

async function shutdownDevice(ip) {
  if (!confirm(`Voulez-vous vraiment éteindre ${ip.name || ip.ip} ?`)) {
    return
  }

  actionLoading.value[ip.ip] = 'shutdown'
  try {
    await axios.post(`/api/tracking/shutdown/${ip.ip}`)
    alert(`✓ Commande d'arrêt envoyée à ${ip.name || ip.ip}`)

    // Rafraîchir après quelques secondes
    setTimeout(async () => {
      await fetchTrackedIPs()
    }, 3000)
  } catch (error) {
    console.error('Erreur shutdown:', error)
    const errorMsg = error.response?.data?.detail || error.message

    // Message spécifique si non implémenté
    if (error.response?.status === 501) {
      alert(`⚠ Fonctionnalité non implémentée\n\n${errorMsg}\n\nCette fonctionnalité nécessite une configuration supplémentaire selon votre infrastructure (SSH, WMI, SNMP, etc.).`)
    } else {
      alert(`✗ Erreur arrêt: ${errorMsg}`)
    }
  } finally {
    delete actionLoading.value[ip.ip]
  }
}

function viewDetails(ip) {
  // Retourner à la page principale avec l'IP sélectionnée
  router.push({ path: '/', query: { select: ip.ip } })
}

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

function formatDate(dateString) {
  if (!dateString) return 'N/A'
  const date = new Date(dateString)
  const now = new Date()
  const diffMs = now - date
  const diffMins = Math.floor(diffMs / 60000)
  const diffHours = Math.floor(diffMs / 3600000)
  const diffDays = Math.floor(diffMs / 86400000)

  if (diffMins < 1) return 'À l\'instant'
  if (diffMins < 60) return `Il y a ${diffMins} min`
  if (diffHours < 24) return `Il y a ${diffHours}h`
  if (diffDays < 7) return `Il y a ${diffDays}j`

  return date.toLocaleString('fr-FR', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>
