"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { 
  Activity, Server, Database, Cpu, HardDrive, 
  Wifi, CheckCircle2, AlertTriangle, XCircle, Clock
} from "lucide-react"

const services = [
  { name: "数据接入服务", status: "healthy", uptime: "99.99%", latency: "12ms" },
  { name: "标签计算引擎", status: "healthy", uptime: "99.95%", latency: "45ms" },
  { name: "AI推理服务", status: "warning", uptime: "98.50%", latency: "230ms" },
  { name: "API网关", status: "healthy", uptime: "99.99%", latency: "8ms" },
  { name: "数据存储服务", status: "healthy", uptime: "99.99%", latency: "25ms" },
  { name: "消息队列", status: "healthy", uptime: "99.98%", latency: "5ms" },
]

const metrics = [
  { name: "CPU使用率", value: 45, max: 100, unit: "%", status: "normal" },
  { name: "内存使用率", value: 68, max: 100, unit: "%", status: "normal" },
  { name: "磁盘使用率", value: 72, max: 100, unit: "%", status: "warning" },
  { name: "网络带宽", value: 35, max: 100, unit: "%", status: "normal" },
]

export default function SystemHealthPage() {
  const getStatusIcon = (status: string) => {
    switch (status) {
      case "healthy":
        return <CheckCircle2 className="h-5 w-5 text-green-500" />
      case "warning":
        return <AlertTriangle className="h-5 w-5 text-yellow-500" />
      case "error":
        return <XCircle className="h-5 w-5 text-red-500" />
      default:
        return <Clock className="h-5 w-5 text-gray-500" />
    }
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "healthy":
        return <Badge className="bg-green-100 text-green-700">健康</Badge>
      case "warning":
        return <Badge className="bg-yellow-100 text-yellow-700">警告</Badge>
      case "error":
        return <Badge className="bg-red-100 text-red-700">故障</Badge>
      default:
        return <Badge variant="secondary">未知</Badge>
    }
  }

  const getProgressColor = (status: string) => {
    switch (status) {
      case "normal":
        return "bg-green-500"
      case "warning":
        return "bg-yellow-500"
      case "critical":
        return "bg-red-500"
      default:
        return "bg-gray-500"
    }
  }

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div>
        <h1 className="text-2xl font-bold text-foreground">系统健康</h1>
        <p className="text-muted-foreground">监控系统运行状态和资源使用情况</p>
      </div>

      {/* 整体状态 */}
      <Card className="border-green-200 bg-green-50/50">
        <CardContent className="pt-6">
          <div className="flex items-center gap-4">
            <div className="p-3 rounded-full bg-green-100">
              <CheckCircle2 className="h-8 w-8 text-green-600" />
            </div>
            <div>
              <h2 className="text-xl font-semibold text-green-800">系统运行正常</h2>
              <p className="text-green-600">所有核心服务运行正常，1个服务有轻微警告</p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 资源监控 */}
      <div className="grid gap-4 md:grid-cols-4">
        {metrics.map((metric) => (
          <Card key={metric.name}>
            <CardContent className="pt-6">
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm text-muted-foreground">{metric.name}</span>
                <span className="text-lg font-bold">{metric.value}{metric.unit}</span>
              </div>
              <Progress 
                value={metric.value} 
                className={`h-2 ${metric.status === "warning" ? "[&>div]:bg-yellow-500" : "[&>div]:bg-green-500"}`}
              />
            </CardContent>
          </Card>
        ))}
      </div>

      {/* 服务状态 */}
      <Card>
        <CardHeader>
          <CardTitle>服务状态</CardTitle>
          <CardDescription>各微服务运行状态监控</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-2">
            {services.map((service) => (
              <div 
                key={service.name}
                className="flex items-center justify-between p-4 border rounded-lg"
              >
                <div className="flex items-center gap-3">
                  {getStatusIcon(service.status)}
                  <div>
                    <p className="font-medium">{service.name}</p>
                    <p className="text-sm text-muted-foreground">
                      延迟: {service.latency}
                    </p>
                  </div>
                </div>
                <div className="text-right">
                  {getStatusBadge(service.status)}
                  <p className="text-sm text-muted-foreground mt-1">
                    可用率: {service.uptime}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 数据库连接 */}
      <div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Database className="h-5 w-5" />
              数据库连接
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <span>主数据库 (MySQL)</span>
                <Badge className="bg-green-100 text-green-700">已连接</Badge>
              </div>
              <div className="flex items-center justify-between">
                <span>缓存 (Redis)</span>
                <Badge className="bg-green-100 text-green-700">已连接</Badge>
              </div>
              <div className="flex items-center justify-between">
                <span>分析库 (ClickHouse)</span>
                <Badge className="bg-green-100 text-green-700">已连接</Badge>
              </div>
              <div className="grid grid-cols-3 gap-4 pt-4 border-t">
                <div>
                  <p className="text-sm text-muted-foreground">活跃连接</p>
                  <p className="text-xl font-bold">128</p>
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">查询/秒</p>
                  <p className="text-xl font-bold">1,250</p>
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">平均延迟</p>
                  <p className="text-xl font-bold">8ms</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Server className="h-5 w-5" />
              服务器资源
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <div className="flex items-center justify-between text-sm mb-1">
                  <span>CPU (8核)</span>
                  <span>45%</span>
                </div>
                <Progress value={45} className="h-2" />
              </div>
              <div>
                <div className="flex items-center justify-between text-sm mb-1">
                  <span>内存 (32GB)</span>
                  <span>68%</span>
                </div>
                <Progress value={68} className="h-2" />
              </div>
              <div>
                <div className="flex items-center justify-between text-sm mb-1">
                  <span>磁盘 (500GB)</span>
                  <span>72%</span>
                </div>
                <Progress value={72} className="h-2 [&>div]:bg-yellow-500" />
              </div>
              <div className="grid grid-cols-2 gap-4 pt-4 border-t">
                <div>
                  <p className="text-sm text-muted-foreground">运行时间</p>
                  <p className="text-xl font-bold">45天</p>
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">最后重启</p>
                  <p className="text-xl font-bold">12-01</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}