<template>
  <div>
    <div class="mb-8">
      <h1 class="text-3xl font-bold text-white mb-2">Network</h1>
      <p class="text-white/70">Manage your network infrastructure and Web3 services</p>
      <p class="text-sm text-white/60 mt-2">{{ connectedNodes }} connected nodes</p>
    </div>

    <!-- Quick Actions Container -->
    <div class="glass-card p-6 mb-6">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- Service Status -->
        <div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
          <div class="flex items-center gap-3">
            <div class="relative">
              <div class="w-3 h-3 rounded-full" :class="servicesRunning ? 'bg-green-400' : 'bg-red-400'"></div>
              <div v-if="servicesRunning" class="absolute inset-0 w-3 h-3 rounded-full bg-green-400 animate-ping opacity-75"></div>
            </div>
            <div>
              <p class="text-sm font-medium text-white">Services</p>
              <p class="text-xs text-white/60">{{ servicesRunning ? 'All Running' : 'Some Stopped' }}</p>
            </div>
          </div>
          <button
            @click="restartServices"
            class="px-3 py-1.5 glass-button rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
            :disabled="restarting"
          >
            {{ restarting ? 'Restarting...' : 'Restart' }}
          </button>
        </div>

        <!-- Connectivity Status -->
        <div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
          <div class="flex items-center gap-3">
            <div class="relative">
              <div class="w-3 h-3 rounded-full" :class="connectivityStatus === 'connected' ? 'bg-green-400' : connectivityStatus === 'checking' ? 'bg-yellow-400' : 'bg-red-400'"></div>
              <div v-if="connectivityStatus === 'connected'" class="absolute inset-0 w-3 h-3 rounded-full bg-green-400 animate-ping opacity-75"></div>
            </div>
            <div>
              <p class="text-sm font-medium text-white">Connectivity</p>
              <p class="text-xs text-white/60 capitalize">{{ connectivityStatus }}</p>
            </div>
          </div>
          <button
            @click="checkConnectivity"
            class="px-3 py-1.5 glass-button rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
            :disabled="checkingConnectivity"
          >
            {{ checkingConnectivity ? 'Checking...' : 'Check' }}
          </button>
        </div>

        <!-- Auto-Sync Toggle -->
        <div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
          <div class="flex items-center gap-3">
            <svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
            </svg>
            <div>
              <p class="text-sm font-medium text-white">Auto-Sync</p>
              <p class="text-xs text-white/60">{{ autoSyncEnabled ? 'Enabled' : 'Disabled' }}</p>
            </div>
          </div>
          <button
            @click="toggleAutoSync"
            class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
            :class="autoSyncEnabled ? 'bg-green-500' : 'bg-white/20'"
          >
            <span
              class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
              :class="autoSyncEnabled ? 'translate-x-6' : 'translate-x-1'"
            />
          </button>
        </div>

        <!-- Logs & Diagnostics -->
        <div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
          <div class="flex items-center gap-3">
            <svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            <div>
              <p class="text-sm font-medium text-white">Logs</p>
              <p class="text-xs text-white/60">{{ logCount > 0 ? `${logCount} new` : 'No new logs' }}</p>
            </div>
          </div>
          <button
            @click="viewLogs"
            class="px-3 py-1.5 glass-button rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
          >
            View
          </button>
        </div>
      </div>
    </div>

    <!-- Overview Cards -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
      <!-- Local Network Card -->
      <div class="glass-card p-6">
        <div class="flex items-start gap-4 mb-4">
          <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
            <svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
            </svg>
          </div>
          <div class="flex-1">
            <h2 class="text-xl font-semibold text-white mb-2">Local Network</h2>
            <p class="text-white/70 text-sm mb-4">OpenWRT-integrated router and network management</p>
          </div>
        </div>

        <div class="space-y-3">
          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
              <span class="text-white/80 text-sm">Firewall Active</span>
            </div>
            <span class="text-green-400 text-sm font-medium">Protected</span>
          </div>

          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
              </svg>
              <span class="text-white/80 text-sm">WiFi Networks</span>
            </div>
            <span class="text-white/60 text-sm">2 configured</span>
          </div>

          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
              </svg>
              <span class="text-white/80 text-sm">DHCP Clients</span>
            </div>
            <span class="text-white/60 text-sm">12 active</span>
          </div>

          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
              <span class="text-white/80 text-sm">Port Forwarding</span>
            </div>
            <span class="text-white/60 text-sm">5 rules</span>
          </div>
        </div>

        <button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors">
          Manage Local Network
        </button>
      </div>

      <!-- Web3 Card -->
      <div class="glass-card p-6">
        <div class="flex items-start gap-4 mb-4">
          <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
            <svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
            </svg>
          </div>
          <div class="flex-1">
            <h2 class="text-xl font-semibold text-white mb-2">Web3</h2>
            <p class="text-white/70 text-sm mb-4">Decentralized web hosting and services</p>
          </div>
        </div>

        <div class="space-y-3">
          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
              </svg>
              <span class="text-white/80 text-sm">Hosted Websites</span>
            </div>
            <span class="text-white/60 text-sm">3 active</span>
          </div>

          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
              <span class="text-white/80 text-sm">SSL Certificates</span>
            </div>
            <span class="text-green-400 text-sm font-medium">Valid</span>
          </div>

          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
              </svg>
              <span class="text-white/80 text-sm">IPFS Storage</span>
            </div>
            <span class="text-white/60 text-sm">2.4 GB used</span>
          </div>

          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
      </svg>
              <span class="text-white/80 text-sm">ENS Domains</span>
            </div>
            <span class="text-white/60 text-sm">1 configured</span>
          </div>
        </div>

        <button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors">
          Manage Web3 Services
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// Connected nodes
const connectedNodes = ref(12)

// Service status
const servicesRunning = ref(true)
const restarting = ref(false)

// Connectivity status: 'connected' | 'disconnected' | 'checking'
const connectivityStatus = ref<'connected' | 'disconnected' | 'checking'>('connected')
const checkingConnectivity = ref(false)

// Auto-sync toggle
const autoSyncEnabled = ref(true)

// Logs
const logCount = ref(3)

function restartServices() {
  restarting.value = true
  servicesRunning.value = false
  // TODO: Implement restart services API call
  console.log('Restarting services...')
  setTimeout(() => {
    restarting.value = false
    servicesRunning.value = true
  }, 2000)
}

function checkConnectivity() {
  checkingConnectivity.value = true
  connectivityStatus.value = 'checking'
  // TODO: Implement connectivity check API call
  console.log('Checking connectivity...')
  setTimeout(() => {
    checkingConnectivity.value = false
    connectivityStatus.value = 'connected'
  }, 2000)
}

function toggleAutoSync() {
  autoSyncEnabled.value = !autoSyncEnabled.value
  // TODO: Implement auto-sync toggle API call
  console.log('Auto-sync:', autoSyncEnabled.value ? 'enabled' : 'disabled')
}

function viewLogs() {
  // TODO: Navigate to logs view or open logs modal
  console.log('Viewing logs...')
  logCount.value = 0
}
</script>

