<template>
  <div class="pb-16 md:pb-6 mobile-scroll-pad">
    <!-- Desktop Back Button -->
    <button @click="router.push('/dashboard/web5')" class="hidden md:flex mb-6 items-center gap-2 text-white/70 hover:text-white transition-colors">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
      Web5
    </button>
    <!-- Mobile Back Button -->
    <Teleport to="body">
      <button
        @click="router.push('/dashboard/web5')"
        class="md:hidden mobile-back-btn glass-button px-6 py-3 rounded-lg font-medium shadow-2xl flex items-center justify-center gap-2"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
        <span>Web5</span>
      </button>
    </Teleport>

    <!-- Header -->
    <div class="hidden md:block mb-8">
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-3xl font-bold text-white mb-2">Fleet Dashboard</h1>
          <p class="text-white/70">Beta Telemetry — monitoring {{ fleet.nodes.value.length }} node{{ fleet.nodes.value.length !== 1 ? 's' : '' }}</p>
        </div>
        <div class="flex gap-2 items-center">
          <span v-if="fleet.autoRefresh.value" class="text-xs text-white/40">Auto-refresh 60s</span>
          <button class="glass-button text-sm px-4 py-2" @click="fleet.toggleAutoRefresh">
            {{ fleet.autoRefresh.value ? 'Pause' : 'Resume' }}
          </button>
          <button class="glass-button text-sm px-4 py-2" @click="fleet.refreshAll">
            Refresh
          </button>
          <button class="glass-button text-sm px-4 py-2" @click="fleet.exportFleetData">
            Export JSON
          </button>
        </div>
      </div>
    </div>

    <!-- Mobile Header -->
    <div class="md:hidden mb-6">
      <h1 class="text-2xl font-bold text-white mb-1">Fleet Dashboard</h1>
      <p class="text-white/60 text-sm mb-3">Monitoring {{ fleet.nodes.value.length }} node{{ fleet.nodes.value.length !== 1 ? 's' : '' }}</p>
      <div class="flex gap-2">
        <button class="glass-button text-xs px-3 py-2 flex-1" @click="fleet.refreshAll">Refresh</button>
        <button class="glass-button text-xs px-3 py-2 flex-1" @click="fleet.exportFleetData">Export</button>
      </div>
    </div>

    <!-- Loading State -->
    <div v-if="fleet.loading.value" class="flex items-center justify-center py-20">
      <div class="text-white/50 text-sm">Loading fleet data...</div>
    </div>

    <!-- Error State -->
    <div v-else-if="fleet.errorMessage.value" class="glass-card p-6 mb-6">
      <div class="alert-error rounded-lg mb-4">{{ fleet.errorMessage.value }}</div>
      <button class="glass-button text-sm px-4 py-2" @click="fleet.refreshAll">Retry</button>
    </div>

    <!-- Dashboard Content -->
    <template v-else>
      <FleetOverviewCards
        :node-count="fleet.nodes.value.length"
        :online-count="fleet.onlineCount.value"
        :offline-count="fleet.offlineCount.value"
        :fleet-health-pct="fleet.fleetHealthPct.value"
        :healthy-count="fleet.healthyCount.value"
        :avg-cpu="fleet.avgCpu.value"
        :avg-mem="fleet.avgMem.value"
        :avg-disk="fleet.avgDisk.value"
      />

      <FleetNodeGrid
        :nodes="fleet.nodes.value"
        :sorted-nodes="fleet.sortedNodes.value"
        :sort-by="fleet.sortBy.value"
        :selected-node-id="fleet.selectedNodeId.value"
        @update:sort-by="fleet.sortBy.value = $event"
        @select-node="fleet.selectNode"
      />

      <FleetAlerts
        :alerts="fleet.fleetAlerts.value"
        :alerts-loading="fleet.alertsLoading.value"
      />

      <FleetNodeDetail
        v-if="fleet.selectedNodeId.value && fleet.selectedNode.value"
        :node="fleet.selectedNode.value"
        :node-id="fleet.selectedNodeId.value"
        :history-loading="fleet.nodeHistoryLoading.value"
        :history-labels="fleet.nodeHistoryLabels.value"
        :cpu-datasets="fleet.nodeHistoryCpuDatasets.value"
        :mem-datasets="fleet.nodeHistoryMemDatasets.value"
        :disk-datasets="fleet.nodeHistoryDiskDatasets.value"
        :chart-width="fleet.chartWidth.value"
        @close="fleet.selectedNodeId.value = null"
      />

      <FleetContainerMatrix
        :nodes="fleet.nodes.value"
        :sorted-nodes="fleet.sortedNodes.value"
        :all-app-ids="fleet.allAppIds.value"
      />

      <p class="text-xs text-white/30 mt-4 text-center">
        {{ fleet.autoRefresh.value ? 'Auto-refreshing every 60s' : 'Auto-refresh paused' }}
        &middot; Last updated {{ fleet.lastRefreshed.value ? timeAgo(fleet.lastRefreshed.value) : 'never' }}
      </p>
    </template>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import FleetOverviewCards from './fleet/FleetOverviewCards.vue'
import FleetNodeGrid from './fleet/FleetNodeGrid.vue'
import FleetAlerts from './fleet/FleetAlerts.vue'
import FleetNodeDetail from './fleet/FleetNodeDetail.vue'
import FleetContainerMatrix from './fleet/FleetContainerMatrix.vue'
import { useFleetData, timeAgo } from './fleet/useFleetData'

const router = useRouter()

const fleet = useFleetData()
</script>
