"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import {
  Activity,
  Server,
  Database,
  Cpu,
  HardDrive,
  Network,
  AlertTriangle,
  CheckCircle,
  XCircle,
  RefreshCw,
  Bell,
} from "lucide-react"

export default function MonitoringPage() {
  const [isRefreshing, setIsRefreshing] = useState(false)
  const [lastUpdate, setLastUpdate] = useState(new Date())

  const systemMetrics = {
    cpu: 45.2,
    memory: 67.8,
    disk: 34.5,
    network: 23.1,
  }

  const serviceStatus = [
    { name: "数据接入服务", status: "running", uptime: "99.9%", responseTime: "120ms" },
    { name: "AI分析引擎", status: "running", uptime: "99.7%", responseTime: "340ms" },
    { name: "用户画像服务", status: "warning", uptime: "98.5%", responseTime: "580ms" },
    { name: "数据存储服务", status: "running", uptime: "99.8%", responseTime: "45ms" },
    { name: "搜索引擎", status: "running", uptime: "99.6%", responseTime: "89ms" },
  ]

  const alerts = [
    {
      id: 1,
      level: "warning",
      message: "用户画像服务响应时间超过阈值",
      time: "5分钟前",
      service: "用户画像服务",
    },
    {
      id: 2,
      level: "info",
      message: "数据同步任务完成",
      time: "10分钟前",
      service: "数据接入服务",
    },
    {
      id: 3,
      level: "success",
      message: "AI模型训练完成",
      time: "15分钟前",
      service: "AI分析引擎",
    },
  ]

  const handleRefresh = () => {
    setIsRefreshing(true)
    setTimeout(() => {
      setIsRefreshing(false)
      setLastUpdate(new Date())
    }, 2000)
  }

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "running":
        return <CheckCircle className="h-4 w-4 text-green-500" />
      case "warning":
        return <AlertTriangle className="h-4 w-4 text-yellow-500" />
      case "error":
        return <XCircle className="h-4 w-4 text-red-500" />
      default:
        return <CheckCircle className="h-4 w-4 text-gray-500" />
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case "running":
        return "bg-green-100 text-green-800"
      case "warning":
        return "bg-yellow-100 text-yellow-800"
      case "error":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  const getAlertIcon = (level: string) => {
    switch (level) {
      case "warning":
        return <AlertTriangle className="h-4 w-4 text-yellow-500" />
      case "error":
        return <XCircle className="h-4 w-4 text-red-500" />
      case "success":
        return <CheckCircle className="h-4 w-4 text-green-500" />
      default:
        return <Bell className="h-4 w-4 text-blue-500" />
    }
  }

  return (
    <div className="container mx-auto py-6 space-y-6">
      {/* 页面标题 */}
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">实时监控</h1>
          <p className="text-muted-foreground">系统运行状态与性能监控</p>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground">最后更新: {lastUpdate.toLocaleTimeString()}</span>
          <Button variant="outline" size="icon" onClick={handleRefresh} disabled={isRefreshing}>
            <RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
          </Button>
        </div>
      </div>

      {/* 系统资源监控 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card className="bg-gradient-to-r from-blue-50 to-cyan-50 border-none shadow-md">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">CPU使用率</CardTitle>
              <Cpu className="h-4 w-4 text-blue-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-blue-600">{systemMetrics.cpu}%</div>
            <Progress value={systemMetrics.cpu} className="mt-2 h-2" />
            <div className="text-xs text-muted-foreground mt-1">正常范围</div>
          </CardContent>
        </Card>

        <Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-none shadow-md">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">内存使用率</CardTitle>
              <HardDrive className="h-4 w-4 text-green-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">{systemMetrics.memory}%</div>
            <Progress value={systemMetrics.memory} className="mt-2 h-2" />
            <div className="text-xs text-muted-foreground mt-1">正常范围</div>
          </CardContent>
        </Card>

        <Card className="bg-gradient-to-r from-purple-50 to-pink-50 border-none shadow-md">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">磁盘使用率</CardTitle>
              <Database className="h-4 w-4 text-purple-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-purple-600">{systemMetrics.disk}%</div>
            <Progress value={systemMetrics.disk} className="mt-2 h-2" />
            <div className="text-xs text-muted-foreground mt-1">充足空间</div>
          </CardContent>
        </Card>

        <Card className="bg-gradient-to-r from-orange-50 to-red-50 border-none shadow-md">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">网络流量</CardTitle>
              <Network className="h-4 w-4 text-orange-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-orange-600">{systemMetrics.network}%</div>
            <Progress value={systemMetrics.network} className="mt-2 h-2" />
            <div className="text-xs text-muted-foreground mt-1">流量正常</div>
          </CardContent>
        </Card>
      </div>

      {/* 服务状态监控 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Server className="h-5 w-5 text-blue-600" />
              服务状态
            </CardTitle>
            <CardDescription>各服务模块运行状态</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {serviceStatus.map((service, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex items-center gap-3">
                    {getStatusIcon(service.status)}
                    <div>
                      <p className="font-medium text-sm">{service.name}</p>
                      <p className="text-xs text-muted-foreground">响应时间: {service.responseTime}</p>
                    </div>
                  </div>
                  <div className="text-right">
                    <Badge className={getStatusColor(service.status)}>
                      {service.status === "running" ? "运行中" : service.status === "warning" ? "警告" : "错误"}
                    </Badge>
                    <p className="text-xs text-muted-foreground mt-1">可用性: {service.uptime}</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* 告警信息 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Bell className="h-5 w-5 text-yellow-600" />
              告警信息
            </CardTitle>
            <CardDescription>系统告警与通知</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {alerts.map((alert) => (
                <div key={alert.id} className="flex items-start gap-3 p-3 border rounded-lg">
                  {getAlertIcon(alert.level)}
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium">{alert.message}</p>
                    <div className="flex items-center gap-2 mt-1">
                      <span className="text-xs text-muted-foreground">{alert.service}</span>
                      <span className="text-xs text-muted-foreground">•</span>
                      <span className="text-xs text-muted-foreground">{alert.time}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <Button variant="outline" className="w-full mt-4 bg-transparent">
              查看全部告警
            </Button>
          </CardContent>
        </Card>
      </div>

      {/* 性能趋势 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="h-5 w-5 text-green-600" />
            性能趋势
          </CardTitle>
          <CardDescription>系统性能历史趋势分析</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="text-center p-4 bg-blue-50 rounded-lg">
              <div className="text-2xl font-bold text-blue-600">99.8%</div>
              <div className="text-sm text-muted-foreground">系统可用性</div>
              <div className="text-xs text-green-600 mt-1">↑ 0.2%</div>
            </div>
            <div className="text-center p-4 bg-green-50 rounded-lg">
              <div className="text-2xl font-bold text-green-600">156ms</div>
              <div className="text-sm text-muted-foreground">平均响应时间</div>
              <div className="text-xs text-green-600 mt-1">↓ 12ms</div>
            </div>
            <div className="text-center p-4 bg-purple-50 rounded-lg">
              <div className="text-2xl font-bold text-purple-600">1.2M</div>
              <div className="text-sm text-muted-foreground">日处理请求</div>
              <div className="text-xs text-green-600 mt-1">↑ 15%</div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}