<script setup lang="ts">
import apiSysStatistics from '@/api/modules/sysStatistics'

defineOptions({ name: 'Dashboard' })

const now = ref(new Date())
const timer = setInterval(() => { now.value = new Date() }, 1000)
onUnmounted(() => { clearInterval(timer) })

const dateText = computed(() => {
  const d = now.value
  const weekNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  return `${d.getMonth() + 1}月${d.getDate()}日 ${weekNames[d.getDay()]} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
})

const greeting = computed(() => {
  const h = now.value.getHours()
  if (h < 6) return '夜深了'
  if (h < 12) return '上午好'
  if (h < 14) return '中午好'
  if (h < 18) return '下午好'
  return '晚上好'
})

const loading = ref(false)
const stats = ref({
  user_count: 0,
  device_count: 0,
  license_count: 0,
  stocktake_count: 0,
})

function loadStats() {
  loading.value = true
  apiSysStatistics.panel().then((res: any) => {
    if (res.code === 1) {
      stats.value = res.data
    }
  }).catch(() => {}).finally(() => { loading.value = false })
}

onMounted(() => { loadStats() })

const metricCards = computed(() => [
  {
    name: '总用户数',
    value: (stats.value.user_count ?? 0).toLocaleString(),
    change: '+12.5%',
    icon: 'i-ri:user-line',
    bg: 'bg-blue-50 dark:bg-blue-950/30',
    iconColor: 'text-blue-500',
  },
  {
    name: '总设备数',
    value: (stats.value.device_count ?? 0).toLocaleString(),
    change: '+8.2%',
    icon: 'i-ri:computer-line',
    bg: 'bg-emerald-50 dark:bg-emerald-950/30',
    iconColor: 'text-emerald-500',
  },
  {
    name: '软件授权',
    value: (stats.value.license_count ?? 0).toLocaleString(),
    change: '+5.7%',
    icon: 'i-ri:key-2-line',
    bg: 'bg-amber-50 dark:bg-amber-950/30',
    iconColor: 'text-amber-500',
  },
  {
    name: '盘点任务',
    value: (stats.value.stocktake_count ?? 0).toLocaleString(),
    change: '-3.1%',
    icon: 'i-ri:line-chart-line',
    bg: 'bg-violet-50 dark:bg-violet-950/30',
    iconColor: 'text-violet-500',
  },
])
</script>

<template>
  <div class="p-4 space-y-4 size-full overflow-auto md:p-6">
    <!-- 欢迎卡片 -->
    <div class="relative overflow-hidden rounded-xl border bg-gradient-to-br from-blue-50/80 via-white to-white p-5 dark:from-blue-950/20 dark:via-background dark:to-background md:p-6">
      <!-- 装饰背景 -->
      <div class="absolute inset-0 pointer-events-none">
        <div class="absolute -right-4 -top-4 size-32 rounded-full bg-blue-100/40 dark:bg-blue-900/20" />
        <div class="absolute right-12 -bottom-6 size-24 rounded-full bg-cyan-100/30 dark:bg-cyan-900/10" />
        <div class="absolute right-24 top-10 size-2 rounded-full bg-blue-300/60 dark:bg-blue-700/30" />
      </div>
      <div class="relative flex flex-col gap-4 md:flex-row md:items-center">
        <!-- 头像 -->
        <div class="shrink-0 flex items-center justify-center size-14 rounded-full bg-blue-500 md:size-16">
          <FaIcon name="i-ri:user-3-line" class="size-7 text-white md:size-8" />
        </div>
        <!-- 文字内容 -->
        <div class="flex-1 min-w-0">
          <div class="text-xs text-muted-foreground mb-1">{{ dateText }}</div>
          <h2 class="text-xl font-semibold tracking-tight md:text-2xl">{{ greeting }}，Administrator</h2>
          <p class="text-sm text-muted-foreground mt-1">实时监控您的业务数据和系统运行状态</p>
          <div class="flex flex-wrap gap-2 mt-3">
            <span class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">
              <span class="size-1.5 rounded-full bg-emerald-500" />
              系统运行稳定
            </span>
            <span class="inline-flex items-center gap-1 rounded-full bg-secondary px-3 py-1 text-xs font-medium text-muted-foreground">
              <span class="size-1.5 rounded-full bg-amber-500" />
              今日重点 · 总收入
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据指标卡片 2x2 -->
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
      <div
        v-for="card in metricCards"
        :key="card.name"
        class="relative overflow-hidden rounded-xl border bg-background p-5 transition-shadow hover:shadow-md md:p-6"
      >
        <div class="flex items-start justify-between">
          <div class="flex-1">
            <div class="text-sm text-muted-foreground">{{ card.name }}</div>
            <div class="mt-2 text-2xl font-semibold tracking-tight md:text-3xl">
              <span v-if="loading" class="inline-block h-8 w-24 animate-pulse rounded bg-muted" />
              <span v-else>{{ card.value }}</span>
            </div>
            <div class="mt-2 flex items-center gap-1">
              <FaIcon
                :name="card.change.startsWith('+') ? 'i-ri:arrow-up-line' : 'i-ri:arrow-down-line'"
                :class="card.change.startsWith('+') ? 'text-emerald-500' : 'text-red-500'"
                class="size-3.5"
              />
              <span :class="card.change.startsWith('+') ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-500'" class="text-sm font-medium">
                {{ card.change.startsWith('+') ? '较昨日 ' : '较昨日 ' }}{{ card.change }}
              </span>
            </div>
          </div>
          <div :class="[card.bg, card.iconColor]" class="flex items-center justify-center size-12 rounded-lg md:size-14">
            <FaIcon :name="card.icon" class="size-6 md:size-7" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
