<template>
  <div class="flex flex-col h-full">
    <LayoutHeader :title="$t('dashboard.title')">
      <template #right>
        <Button variant="subtle" @click="refreshData">
          <template #prefix>
            <FeatherIcon name="refresh-cw" class="h-4 w-4" />
          </template>
          {{ $t('common.refresh') }}
        </Button>
      </template>
    </LayoutHeader>

    <div class="flex-1 overflow-auto p-5">
      <!-- Stats Overview -->
      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-6">
        <StatCard
          :label="$t('dashboard.totalSites')"
          :value="stats.totalSites"
          iconName="server"
          color="blue"
          :trend="5"
        />
        <StatCard
          :label="$t('dashboard.activeSites')"
          :value="stats.activeSites"
          iconName="activity"
          color="green"
          :trend="3"
        />
        <StatCard
          :label="$t('dashboard.stoppedSites')"
          :value="stats.stoppedSites"
          iconName="pause-circle"
          color="yellow"
        />
        <StatCard
          :label="$t('dashboard.totalUsers')"
          :value="stats.totalUsers"
          iconName="users"
          color="purple"
          :trend="8"
        />
      </div>

      <!-- Charts Row 1 -->
      <div class="grid gap-4 lg:grid-cols-2 mb-6">
        <ChartCard :title="$t('dashboard.trafficOverview')">
          <div class="h-full flex items-end">
            <div class="w-full">
              <div class="relative h-40">
                <div class="absolute inset-0 flex items-end justify-between gap-1.5">
                  <div
                    v-for="(value, idx) in trafficData.datasets[0].values"
                    :key="idx"
                    class="flex-1 bg-blue-500 rounded-t transition-all"
                    :style="{ height: `${(value / 5000) * 100}%` }"
                  ></div>
                </div>
              </div>
              <div class="flex justify-between text-xs text-ink-gray-4 mt-2">
                <span v-for="label in trafficData.labels" :key="label">{{ label }}</span>
              </div>
            </div>
          </div>
        </ChartCard>

        <ChartCard :title="$t('dashboard.activeSessions')">
          <div class="h-full flex items-center justify-center">
            <div class="flex items-center gap-8">
              <div class="relative w-32 h-32">
                <svg class="w-full h-full transform -rotate-90">
                  <circle
                    cx="64" cy="64" r="56"
                    fill="none"
                    stroke-width="12"
                    class="stroke-surface-gray-2"
                  />
                  <circle
                    cx="64" cy="64" r="56"
                    fill="none"
                    stroke-width="12"
                    stroke-dasharray="351.86"
                    :stroke-dashoffset="351.86 * (1 - 0.65)"
                    class="stroke-blue-500"
                  />
                </svg>
                <div class="absolute inset-0 flex items-center justify-center">
                  <span class="text-2xl font-bold text-ink-gray-9">65%</span>
                </div>
              </div>
              <div class="space-y-2">
                <div class="flex items-center gap-2">
                  <div class="w-3 h-3 rounded-full bg-blue-500"></div>
                  <span class="text-sm text-ink-gray-7">Active: 65%</span>
                </div>
                <div class="flex items-center gap-2">
                  <div class="w-3 h-3 rounded-full bg-orange-400"></div>
                  <span class="text-sm text-ink-gray-7">Idle: 25%</span>
                </div>
                <div class="flex items-center gap-2">
                  <div class="w-3 h-3 rounded-full bg-green-500"></div>
                  <span class="text-sm text-ink-gray-7">New: 10%</span>
                </div>
              </div>
            </div>
          </div>
        </ChartCard>
      </div>

      <!-- Charts Row 2 -->
      <div class="grid gap-4 lg:grid-cols-3 mb-6">
        <ChartCard :title="$t('dashboard.cpuUsage')">
          <div class="h-full flex items-center justify-center">
            <div class="w-full">
              <div class="relative h-24">
                <svg class="w-full h-full" viewBox="0 0 300 100" preserveAspectRatio="none">
                  <polyline
                    fill="none"
                    stroke-width="2"
                    class="stroke-green-500"
                    :points="cpuPoints"
                  />
                </svg>
              </div>
              <div class="text-center mt-2">
                <span class="text-2xl font-bold text-ink-gray-9">45%</span>
                <span class="text-sm text-ink-gray-5 ml-1">avg</span>
              </div>
            </div>
          </div>
        </ChartCard>

        <ChartCard :title="$t('dashboard.ramUsage')">
          <div class="h-full flex items-center justify-center">
            <div class="flex items-center gap-6">
              <div class="relative w-24 h-24">
                <svg class="w-full h-full transform -rotate-90">
                  <circle
                    cx="48" cy="48" r="40"
                    fill="none"
                    stroke-width="10"
                    class="stroke-surface-gray-2"
                  />
                  <circle
                    cx="48" cy="48" r="40"
                    fill="none"
                    stroke-width="10"
                    stroke-dasharray="251.33"
                    :stroke-dashoffset="251.33 * (1 - 0.45)"
                    class="stroke-purple-500"
                  />
                </svg>
                <div class="absolute inset-0 flex items-center justify-center">
                  <span class="text-lg font-bold text-ink-gray-9">45%</span>
                </div>
              </div>
              <div class="space-y-1 text-sm text-ink-gray-7">
                <div>Used: 7.2 GB</div>
                <div>Free: 4.8 GB</div>
                <div>Cached: 4.0 GB</div>
              </div>
            </div>
          </div>
        </ChartCard>

        <ChartCard :title="$t('dashboard.diskUsage')">
          <div class="h-full flex items-center justify-center">
            <div class="flex items-center gap-6">
              <div class="relative w-24 h-24">
                <svg class="w-full h-full transform -rotate-90">
                  <circle
                    cx="48" cy="48" r="40"
                    fill="none"
                    stroke-width="10"
                    class="stroke-surface-gray-2"
                  />
                  <circle
                    cx="48" cy="48" r="40"
                    fill="none"
                    stroke-width="10"
                    stroke-dasharray="251.33"
                    :stroke-dashoffset="251.33 * (1 - 0.62)"
                    class="stroke-orange-500"
                  />
                </svg>
                <div class="absolute inset-0 flex items-center justify-center">
                  <span class="text-lg font-bold text-ink-gray-9">62%</span>
                </div>
              </div>
              <div class="space-y-1 text-sm text-ink-gray-7">
                <div>Used: 310 GB</div>
                <div>Free: 190 GB</div>
                <div>Total: 500 GB</div>
              </div>
            </div>
          </div>
        </ChartCard>
      </div>

      <!-- Network + System Info -->
      <div class="grid gap-4 lg:grid-cols-2 mb-6">
        <ChartCard :title="$t('dashboard.networkUsage')">
          <div class="h-full flex items-center justify-center">
            <div class="w-full">
              <div class="relative h-24">
                <svg class="w-full h-full" viewBox="0 0 300 100" preserveAspectRatio="none">
                  <polyline
                    fill="none"
                    stroke-width="2"
                    class="stroke-blue-500"
                    :points="downloadPoints"
                  />
                  <polyline
                    fill="none"
                    stroke-width="2"
                    class="stroke-green-500"
                    :points="uploadPoints"
                  />
                </svg>
              </div>
              <div class="flex justify-center gap-6 mt-2">
                <div class="flex items-center gap-2">
                  <div class="w-3 h-3 rounded-full bg-blue-500"></div>
                  <span class="text-sm text-ink-gray-7">Download</span>
                </div>
                <div class="flex items-center gap-2">
                  <div class="w-3 h-3 rounded-full bg-green-500"></div>
                  <span class="text-sm text-ink-gray-7">Upload</span>
                </div>
              </div>
            </div>
          </div>
        </ChartCard>

        <!-- System Info -->
        <div class="rounded-lg border p-5 shadow-sm">
          <h3 class="text-lg font-semibold text-ink-gray-9 mb-4">
            {{ $t('dashboard.systemInfo') }}
          </h3>
          <div class="space-y-3">
            <div class="flex justify-between items-center py-2 border-b">
              <span class="text-sm text-ink-gray-5">{{ $t('dashboard.osVersion') }}</span>
              <span class="text-sm font-medium text-ink-gray-9">{{ systemInfo.osVersion }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b">
              <span class="text-sm text-ink-gray-5">{{ $t('dashboard.incusVersion') }}</span>
              <span class="text-sm font-medium text-ink-gray-9">{{ systemInfo.incusVersion }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b">
              <span class="text-sm text-ink-gray-5">{{ $t('dashboard.kernelVersion') }}</span>
              <span class="text-sm font-medium text-ink-gray-9">{{ systemInfo.kernelVersion }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b">
              <span class="text-sm text-ink-gray-5">{{ $t('dashboard.imageVersion') }}</span>
              <span class="text-sm font-medium text-ink-gray-9">{{ systemInfo.imageVersion }}</span>
            </div>
            <div class="flex justify-between items-center py-2">
              <span class="text-sm text-ink-gray-5">{{ $t('dashboard.distrobuilderVersion') }}</span>
              <span class="text-sm font-medium text-ink-gray-9">{{ systemInfo.distrobuilderVersion }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { Button, FeatherIcon } from 'frappe-ui'
import LayoutHeader from '@/components/Common/LayoutHeader.vue'
import StatCard from '@/components/Common/StatCard.vue'
import ChartCard from '@/components/Common/ChartCard.vue'
import {
  trafficData,
  cpuData,
  networkData,
  systemInfo,
  statsOverview,
} from '@/mocks/dashboard'

const stats = ref(statsOverview)

function refreshData() {
  console.log('Refreshing data...')
}

const cpuPoints = computed(() => {
  const values = cpuData.datasets[0].values
  const max = 100
  const width = 300
  const height = 100
  const step = width / (values.length - 1)
  return values
    .map((v, i) => `${i * step},${height - (v / max) * height}`)
    .join(' ')
})

const downloadPoints = computed(() => {
  const values = networkData.datasets[0].values
  const max = 400
  const width = 300
  const height = 100
  const step = width / (values.length - 1)
  return values
    .map((v, i) => `${i * step},${height - (v / max) * height}`)
    .join(' ')
})

const uploadPoints = computed(() => {
  const values = networkData.datasets[1].values
  const max = 400
  const width = 300
  const height = 100
  const step = width / (values.length - 1)
  return values
    .map((v, i) => `${i * step},${height - (v / max) * height}`)
    .join(' ')
})
</script>
