<template>
  <div class="p-6">
    <div class="mb-6">
      <h2 class="text-2xl font-semibold mb-1">首页</h2>
      <p class="text-sm" style="color: rgba(0, 0, 0, 0.45)">生产管理数据总览</p>
    </div>

    <!-- Metric Cards (clickable) -->
    <div class="grid grid-cols-4 gap-6 mb-6">
      <router-link
        v-for="(metric, index) in metrics" :key="index"
        :to="metric.link"
        class="bg-white p-6 rounded-lg block hover:shadow-md transition-shadow"
        style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)"
      >
        <div class="flex items-start justify-between">
          <div class="flex-1">
            <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.65)">{{ metric.label }}</div>
            <div class="text-3xl font-semibold mb-2">{{ metric.value }}</div>
            <div v-if="metric.trend && metric.trendValue" class="flex items-center gap-1"
              :style="{ color: metric.trend === 'up' ? '#52C41A' : '#FF4D4F' }">
              <TrendingUp v-if="metric.trend === 'up'" :size="14" />
              <TrendingDown v-else :size="14" />
              <span class="text-sm">{{ metric.trendValue }}</span>
            </div>
          </div>
          <div class="w-12 h-12 rounded-lg flex items-center justify-center" :style="{ backgroundColor: metric.color + '15' }">
            <component :is="metric.icon" :size="24" :style="{ color: metric.color }" />
          </div>
        </div>
      </router-link>
    </div>

    <!-- Device Status Chart -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <h3 class="text-lg font-semibold mb-6">设备状态分布</h3>
      <div style="display: flex; flex-direction: column; gap: 16px;">
        <div v-for="item in deviceStatusData" :key="item.name" style="display: flex; align-items: center; gap: 12px;">
          <div style="width: 60px; text-align: right; font-size: 14px; color: rgba(0,0,0,0.65); flex-shrink: 0;">{{ item.name }}</div>
          <div style="flex: 1; background-color: #F5F5F5; border-radius: 4px; height: 24px; overflow: hidden;">
            <div :style="{ width: (item.value / maxStatusValue * 100) + '%', height: '100%', backgroundColor: item.color, borderRadius: '0 4px 4px 0', transition: 'width 0.3s ease', minWidth: item.value > 0 ? '2px' : '0' }"></div>
          </div>
          <div style="width: 40px; font-size: 14px; color: rgba(0,0,0,0.85);">{{ item.value }}</div>
        </div>
      </div>
    </div>

    <!-- Pending Tasks with navigation -->
    <div class="bg-white p-6 rounded-lg" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <h3 class="text-lg font-semibold mb-6">待处理任务</h3>
      <div class="grid grid-cols-2 gap-6">
        <div v-for="(group, gi) in taskGroups" :key="gi">
          <div class="flex items-center justify-between mb-4">
            <h4 class="text-base font-medium">{{ group.title }}</h4>
            <span class="px-2 py-1 rounded text-xs" style="background-color: #F0F2F5; color: rgba(0, 0, 0, 0.65)">{{ group.count }}</span>
          </div>
          <div>
            <div v-for="(task, ti) in group.tasks" :key="ti" class="flex items-start justify-between py-3" style="border-bottom: 1px solid #F0F0F0">
              <div class="flex-1">
                <div class="text-sm mb-1">{{ task.deviceSN }}</div>
                <div class="text-sm" style="color: rgba(0, 0, 0, 0.45)">{{ task.description }}</div>
              </div>
              <div class="flex items-center gap-3">
                <span v-if="task.time" class="text-xs" style="color: rgba(0, 0, 0, 0.45)">{{ task.time }}</span>
                <router-link :to="task.link" class="text-sm" style="color: #4a7c59">处理</router-link>
              </div>
            </div>
          </div>
          <router-link v-if="group.tasks.length < group.count" :to="group.link" class="block w-full mt-3 text-center text-sm" style="color: #4a7c59">
            查看全部 {{ group.count }} 项
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { TrendingUp, TrendingDown, Server, Wifi, CheckCircle, PackageCheck, Wrench, Target, Clock, Upload } from 'lucide-vue-next'

const metrics = [
  { label: '设备总数', value: '5,234', trend: 'up' as const, trendValue: '+5.2%', color: '#4a7c59', icon: Server, link: '/devices' },
  { label: '装配中', value: '4,856', trend: 'up' as const, trendValue: '+2.8%', color: '#52C41A', icon: Wifi, link: '/devices' },
  { label: '已激活', value: '4,912', trend: 'up' as const, trendValue: '+1.5%', color: '#4a7c59', icon: CheckCircle, link: '/devices' },
  { label: '有新版本', value: '156', color: '#722ED1', icon: PackageCheck, link: '/firmware' },
  { label: '维修中', value: '23', trend: 'down' as const, trendValue: '-12.3%', color: '#FF4D4F', icon: Wrench, link: '/repair' },
  { label: '报废', value: '56', color: '#FA8C16', icon: Target, link: '/scrap' },
  { label: '授权即将到期', value: '45', color: '#FAAD14', icon: Clock, link: '/licenses' },
  { label: '可升级', value: '8', color: '#13C2C2', icon: Upload, link: '/firmware' },
]

const deviceStatusData = [
  { name: '已装配', value: 45, color: '#52C41A' },
  { name: '已出厂', value: 378, color: '#FF4D4F' },
  { name: '已激活', value: 286, color: '#FAAD14' },
  { name: '报废', value: 7, color: '#8C8C8C' },
]
const maxStatusValue = computed(() => Math.max(...deviceStatusData.map((d) => d.value)))

const taskGroups = [
  {
    title: '校准即将到期', count: 23, link: '/calibration',
    tasks: [
      { deviceSN: 'AC20240308005', description: '采集板校准即将到期', time: '3天后到期', link: '/calibration' },
      { deviceSN: 'AC20240308006', description: '采集板校准即将到期', time: '今天到期', link: '/calibration' },
    ],
  },
  {
    title: '维修工单', count: 5, link: '/repair',
    tasks: [
      { deviceSN: 'GD30-2024-000056', description: '板卡故障，待处理', time: '4小时前', link: '/repair/WO-2024-0001' },
      { deviceSN: 'GD30-2024-000078', description: '固件异常', time: '6小时前', link: '/repair/WO-2024-0002' },
    ],
  },
  {
    title: '固件升级通知', count: 8, link: '/firmware',
    tasks: [
      { deviceSN: 'GD-30 Supreme', description: '固件版本v2.3.5可用', time: '1天前', link: '/firmware' },
      { deviceSN: 'GD-10 Supreme', description: '固件版本v2.3.5可用', time: '1天前', link: '/firmware' },
    ],
  },
  {
    title: '授权即将到期', count: 45, link: '/licenses',
    tasks: [
      { deviceSN: 'GD30-2025-000001', description: '授权将于30天后到期', time: '30天', link: '/licenses' },
      { deviceSN: 'GT20-2025-000045', description: '授权将于15天后到期', time: '15天', link: '/licenses' },
    ],
  },
]
</script>
