<template>
  <div>
    <div class="mb-8 flex items-start justify-between">
      <div>
        <h1 class="text-3xl font-bold text-white mb-2 drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)]">Welcome Noderunner</h1>
        <p class="text-white/80">Here's an overview of your sovereign life</p>
      </div>
      <!-- Compact Status Indicator -->
      <div class="flex items-center gap-2 px-4 py-2 glass-card rounded-lg">
        <div class="relative">
          <div class="w-2 h-2 rounded-full bg-green-400"></div>
          <div class="absolute inset-0 w-2 h-2 rounded-full bg-green-400 animate-ping opacity-75"></div>
        </div>
        <span class="text-sm font-medium text-white">Online</span>
      </div>
    </div>

    <!-- Section Overviews -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
      <!-- My Apps Overview -->
      <div class="glass-card p-6">
        <div class="flex items-start justify-between mb-4">
          <div>
            <h2 class="text-xl font-semibold text-white mb-1">My Apps</h2>
            <p class="text-sm text-white/70">Manage your installed applications</p>
          </div>
          <RouterLink
            to="/dashboard/apps"
            class="text-white/60 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="M9 5l7 7-7 7" />
            </svg>
          </RouterLink>
        </div>
        
        <div class="grid grid-cols-2 gap-4 mb-4">
          <div class="p-4 bg-white/5 rounded-lg">
            <p class="text-xs text-white/60 mb-1">Installed</p>
            <p class="text-2xl font-bold text-white">{{ appCount }}</p>
          </div>
          <div class="p-4 bg-white/5 rounded-lg">
            <p class="text-xs text-white/60 mb-1">Running</p>
            <p class="text-2xl font-bold text-white">{{ runningCount }}</p>
          </div>
        </div>

        <div class="flex gap-2">
          <RouterLink
            to="/dashboard/marketplace"
            class="flex-1 px-4 py-2 glass-button rounded-lg text-sm font-medium text-center transition-colors"
          >
            Browse Store
          </RouterLink>
          <RouterLink
            to="/dashboard/apps"
            class="flex-1 px-4 py-2 glass-button rounded-lg text-sm font-medium text-center transition-colors"
          >
            Manage Apps
          </RouterLink>
        </div>
      </div>

      <!-- Cloud Overview -->
      <div class="glass-card p-6">
        <div class="flex items-start justify-between mb-4">
          <div>
            <h2 class="text-xl font-semibold text-white mb-1">Cloud</h2>
            <p class="text-sm text-white/70">Cloud services and storage</p>
          </div>
          <RouterLink
            to="/dashboard/cloud"
            class="text-white/60 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="M9 5l7 7-7 7" />
            </svg>
          </RouterLink>
        </div>
        
        <div class="grid grid-cols-2 gap-4 mb-4">
          <div class="p-4 bg-white/5 rounded-lg">
            <p class="text-xs text-white/60 mb-1">Storage Used</p>
            <p class="text-2xl font-bold text-white">2.4 GB</p>
          </div>
          <div class="p-4 bg-white/5 rounded-lg">
            <p class="text-xs text-white/60 mb-1">Folders</p>
            <p class="text-2xl font-bold text-white">5</p>
          </div>
        </div>

        <div class="flex gap-2">
          <RouterLink
            to="/dashboard/cloud"
            class="flex-1 px-4 py-2 glass-button rounded-lg text-sm font-medium text-center transition-colors"
          >
            View Folders
          </RouterLink>
          <button
            class="flex-1 px-4 py-2 glass-button rounded-lg text-sm font-medium transition-colors"
            @click="() => {}"
          >
            Upload Files
          </button>
        </div>
      </div>

      <!-- Network Overview -->
      <div class="glass-card p-6">
        <div class="flex items-start justify-between mb-4">
          <div>
            <h2 class="text-xl font-semibold text-white mb-1">Network</h2>
            <p class="text-sm text-white/70">Network infrastructure and Web3 services</p>
          </div>
          <RouterLink
            to="/dashboard/server"
            class="text-white/60 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="M9 5l7 7-7 7" />
            </svg>
          </RouterLink>
        </div>
        
        <div class="space-y-3 mb-4">
          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-2 h-2 rounded-full bg-green-400"></div>
              <span class="text-sm text-white/80">Services Status</span>
            </div>
            <span class="text-sm text-green-400 font-medium">All Running</span>
          </div>
          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-2 h-2 rounded-full bg-green-400"></div>
              <span class="text-sm text-white/80">Connectivity</span>
            </div>
            <span class="text-sm text-green-400 font-medium">Connected</span>
          </div>
          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-2 h-2 rounded-full bg-blue-400"></div>
              <span class="text-sm text-white/80">Connected Nodes</span>
            </div>
            <span class="text-sm text-white/80 font-medium">12</span>
          </div>
        </div>

        <div class="flex gap-2">
          <RouterLink
            to="/dashboard/server"
            class="flex-1 px-4 py-2 glass-button rounded-lg text-sm font-medium text-center transition-colors"
          >
            Manage Network
          </RouterLink>
          <button
            class="px-4 py-2 glass-button rounded-lg text-sm font-medium transition-colors"
            @click="() => {}"
          >
            <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
          </button>
        </div>
      </div>

      <!-- Web5 Overview -->
      <div class="glass-card p-6">
        <div class="flex items-start justify-between mb-4">
          <div>
            <h2 class="text-xl font-semibold text-white mb-1">Web5</h2>
            <p class="text-sm text-white/70">Decentralized identity and data protocols</p>
          </div>
          <RouterLink
            to="/dashboard/web5"
            class="text-white/60 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="M9 5l7 7-7 7" />
            </svg>
          </RouterLink>
        </div>
        
        <div class="space-y-3 mb-4">
          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-2 h-2 rounded-full bg-green-400"></div>
              <span class="text-sm text-white/80">DID Status</span>
            </div>
            <span class="text-sm text-green-400 font-medium">Active</span>
          </div>
          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-2 h-2 rounded-full bg-green-400"></div>
              <span class="text-sm text-white/80">DWN Sync</span>
            </div>
            <span class="text-sm text-green-400 font-medium">Synced</span>
          </div>
          <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <div class="flex items-center gap-3">
              <span class="text-lg text-orange-500 font-bold">₿</span>
              <span class="text-sm text-white/80">Networking Profits</span>
            </div>
            <span class="text-sm text-orange-500 font-medium">₿0.024</span>
          </div>
        </div>

        <div class="flex gap-2">
          <RouterLink
            to="/dashboard/web5"
            class="flex-1 px-4 py-2 glass-button rounded-lg text-sm font-medium text-center transition-colors"
          >
            Manage Web5
          </RouterLink>
          <button
            class="px-4 py-2 glass-button rounded-lg text-sm font-medium transition-colors"
            @click="() => {}"
          >
            <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Quick Actions - Hidden for now -->
    <!--
    <div class="path-option-card cursor-default px-6 py-6">
      <h2 class="text-xl font-semibold text-white/96 mb-4">Quick Actions</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <RouterLink
          to="/dashboard/marketplace"
          class="path-action-button path-action-button--continue flex items-center justify-center gap-3"
        >
          <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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
          </svg>
          <span>Browse App Store</span>
        </RouterLink>
        
        <RouterLink
          to="/dashboard/apps"
          class="path-action-button path-action-button--continue flex items-center justify-center gap-3"
        >
          <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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
          </svg>
          <span>Manage My Apps</span>
        </RouterLink>
        
        <RouterLink
          to="/dashboard/server"
          class="path-action-button path-action-button--continue flex items-center justify-center gap-3"
        >
          <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="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
          </svg>
          <span>Server Settings</span>
        </RouterLink>
      </div>
    </div>
    -->
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
import { useAppStore } from '../stores/app'
import { PackageState } from '../types/api'

const store = useAppStore()

// @ts-ignore - Computed kept for future use
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const version = computed(() => store.serverInfo?.version || '0.0.0')
const packages = computed(() => store.packages)
const appCount = computed(() => Object.keys(packages.value).length)
const runningCount = computed(() => 
  Object.values(packages.value).filter(pkg => pkg.state === PackageState.Running).length
)
</script>

