'use client'
import Link from 'next/link'
import { TrendingUp, TrendingDown, Server, Wifi, CheckCircle, PackageCheck, Wrench, Target, Clock, Upload } from 'lucide-react'
import { useMemo } from 'react'

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 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' },
  ]},
]

export default function DashboardPage() {
  const maxStatusValue = useMemo(() => Math.max(...deviceStatusData.map(d => d.value)), [])

  return (
    <div className="p-6">
      <div className="mb-6">
        <h2 className="text-2xl font-semibold mb-1">首页</h2>
        <p className="text-sm" style={{ color: 'rgba(0,0,0,0.45)' }}>生产管理数据总览</p>
      </div>
      <div className="grid grid-cols-4 gap-6 mb-6">
        {metrics.map((m, i) => {
          const Icon = m.icon
          return (
            <Link key={i} href={m.link} className="bg-white p-6 rounded-lg block hover:shadow-md transition-shadow" style={{ boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <div className="text-sm mb-2" style={{ color: 'rgba(0,0,0,0.65)' }}>{m.label}</div>
                  <div className="text-3xl font-semibold mb-2">{m.value}</div>
                  {m.trend && m.trendValue && (
                    <div className="flex items-center gap-1" style={{ color: m.trend === 'up' ? '#52C41A' : '#FF4D4F' }}>
                      {m.trend === 'up' ? <TrendingUp size={14} /> : <TrendingDown size={14} />}
                      <span className="text-sm">{m.trendValue}</span>
                    </div>
                  )}
                </div>
                <div className="w-12 h-12 rounded-lg flex items-center justify-center" style={{ backgroundColor: m.color + '15' }}>
                  <Icon size={24} style={{ color: m.color }} />
                </div>
              </div>
            </Link>
          )
        })}
      </div>

      <div className="bg-white p-6 rounded-lg mb-6" style={{ boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
        <h3 className="text-lg font-semibold mb-6">设备状态分布</h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {deviceStatusData.map(item => (
            <div key={item.name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 60, textAlign: 'right', fontSize: 14, color: 'rgba(0,0,0,0.65)', flexShrink: 0 }}>{item.name}</div>
              <div style={{ flex: 1, backgroundColor: '#F5F5F5', borderRadius: 4, height: 24, 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 ? 2 : 0 }} />
              </div>
              <div style={{ width: 40, fontSize: 14, color: 'rgba(0,0,0,0.85)' }}>{item.value}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-white p-6 rounded-lg" style={{ boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
        <h3 className="text-lg font-semibold mb-6">待处理任务</h3>
        <div className="grid grid-cols-2 gap-6">
          {taskGroups.map((group, gi) => (
            <div key={gi}>
              <div className="flex items-center justify-between mb-4">
                <h4 className="text-base font-medium">{group.title}</h4>
                <span className="px-2 py-1 rounded text-xs" style={{ backgroundColor: '#F0F2F5', color: 'rgba(0,0,0,0.65)' }}>{group.count}</span>
              </div>
              {group.tasks.map((task, ti) => (
                <div key={ti} className="flex items-start justify-between py-3" style={{ borderBottom: '1px solid #F0F0F0' }}>
                  <div className="flex-1">
                    <div className="text-sm mb-1">{task.deviceSN}</div>
                    <div className="text-sm" style={{ color: 'rgba(0,0,0,0.45)' }}>{task.description}</div>
                  </div>
                  <div className="flex items-center gap-3">
                    {task.time && <span className="text-xs" style={{ color: 'rgba(0,0,0,0.45)' }}>{task.time}</span>}
                    <Link href={task.link} className="text-sm" style={{ color: '#4a7c59' }}>处理</Link>
                  </div>
                </div>
              ))}
              {group.tasks.length < group.count && (
                <Link href={group.link} className="block w-full mt-3 text-center text-sm" style={{ color: '#4a7c59' }}>查看全部 {group.count} 项</Link>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
