page

import React, { useState } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Server, Activity, AlertCircle } from 'lucide-react';

const DataCenterMonitor = () => {
  const [activeCity, setActiveCity] = useState('shanghai');

  const cityData = {
    shanghai: {
      name: '上海',
      lab: '泰山稳定性实验室',
      facility: '浦东电脑实验室',
      equipment: {
        online: 500,
        offline: 80
      },
      tasks: {
        healthy: 500,
        subHealthy: 50,
        blocked: 80
      }
    },
    nanjing: {
      name: '南京',
      lab: '金陵稳定性实验室',
      facility: '江宁计算中心',
      equipment: {
        online: 420,
        offline: 60
      },
      tasks: {
        healthy: 400,
        subHealthy: 40,
        blocked: 40
      }
    },
    xian: {
      name: '西安',
      lab: '秦岭稳定性实验室',
      facility: '高新技术园区',
      equipment: {
        online: 380,
        offline: 50
      },
      tasks: {
        healthy: 360,
        subHealthy: 35,
        blocked: 35
      }
    }
  };

  const currentData = cityData[activeCity];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-8">
      <div className="max-w-7xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-slate-800 mb-2">数据中心监控系统</h1>
          <p className="text-slate-600">实时监控各地数据中心设备与任务状态</p>
        </div>

        {/* 城市选择 Tabs */}
        <Tabs value={activeCity} onValueChange={setActiveCity} className="mb-8">
          <TabsList className="grid w-full max-w-md grid-cols-3 bg-white shadow-sm">
            <TabsTrigger value="shanghai" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">
              上海
            </TabsTrigger>
            <TabsTrigger value="nanjing" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">
              南京
            </TabsTrigger>
            <TabsTrigger value="xian" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">
              西安
            </TabsTrigger>
          </TabsList>
        </Tabs>

        {/* 实验室信息卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
          <Card className="bg-white shadow-lg border-t-4 border-t-blue-500">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-slate-700">
                <Server className="w-5 h-5 text-blue-600" />
                实验室名称
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-2xl font-semibold text-slate-800">{currentData.lab}</p>
            </CardContent>
          </Card>

          <Card className="bg-white shadow-lg border-t-4 border-t-purple-500">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-slate-700">
                <Activity className="w-5 h-5 text-purple-600" />
                实验设施
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-2xl font-semibold text-slate-800">{currentData.facility}</p>
            </CardContent>
          </Card>
        </div>

        {/* 主监控面板 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* 左侧：服务器机房图片区域 */}
          <Card className="bg-gradient-to-br from-slate-800 to-slate-900 shadow-2xl overflow-hidden">
            <CardContent className="p-0 relative h-96 flex items-center justify-center">
              {/* 模拟服务器机架 */}
              <div className="absolute inset-0 flex items-center justify-center opacity-20">
                <div className="grid grid-cols-8 gap-1">
                  {[...Array(64)].map((_, i) => (
                    <div
                      key={i}
                      className="w-3 h-16 bg-blue-500 rounded-sm"
                      style={{
                        animationDelay: `${i * 0.05}s`,
                        animation: 'pulse 2s infinite'
                      }}
                    />
                  ))}
                </div>
              </div>
              <div className="relative z-10 text-center">
                <Server className="w-24 h-24 text-blue-400 mx-auto mb-4" />
                <p className="text-white text-lg font-semibold">数据中心机房</p>
                <Badge variant="outline" className="mt-2 text-green-400 border-green-400">
                  运行中
                </Badge>
              </div>
            </CardContent>
          </Card>

          {/* 右侧：状态监控 */}
          <div className="space-y-6">
            {/* 设备状态 */}
            <Card className="bg-white shadow-lg">
              <CardHeader>
                <CardTitle className="text-lg font-semibold text-slate-700">设备状态</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 gap-6">
                  <div className="text-center p-4 bg-green-50 rounded-lg">
                    <p className="text-sm text-slate-600 mb-1">Online</p>
                    <p className="text-4xl font-bold text-green-600">{currentData.equipment.online}</p>
                  </div>
                  <div className="text-center p-4 bg-red-50 rounded-lg">
                    <p className="text-sm text-slate-600 mb-1">Offline</p>
                    <p className="text-4xl font-bold text-red-600">{currentData.equipment.offline}</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* 任务状态 */}
            <Card className="bg-white shadow-lg">
              <CardHeader>
                <CardTitle className="text-lg font-semibold text-slate-700">任务状态</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-3 gap-4">
                  <div className="text-center p-4 bg-emerald-50 rounded-lg">
                    <p className="text-sm text-slate-600 mb-1">健康</p>
                    <p className="text-3xl font-bold text-emerald-600">{currentData.tasks.healthy}</p>
                  </div>
                  <div className="text-center p-4 bg-amber-50 rounded-lg">
                    <p className="text-sm text-slate-600 mb-1">亚健康</p>
                    <p className="text-3xl font-bold text-amber-600">{currentData.tasks.subHealthy}</p>
                  </div>
                  <div className="text-center p-4 bg-rose-50 rounded-lg">
                    <p className="text-sm text-slate-600 mb-1">阻塞</p>
                    <p className="text-3xl font-bold text-rose-600">{currentData.tasks.blocked}</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* 健康度指示器 */}
            <Card className="bg-gradient-to-r from-blue-500 to-blue-600 shadow-lg">
              <CardContent className="p-6">
                <div className="flex items-center justify-between text-white">
                  <div className="flex items-center gap-3">
                    <AlertCircle className="w-6 h-6" />
                    <span className="text-lg font-semibold">系统健康度</span>
                  </div>
                  <span className="text-3xl font-bold">
                    {Math.round((currentData.tasks.healthy / (currentData.tasks.healthy + currentData.tasks.subHealthy + currentData.tasks.blocked)) * 100)}%
                  </span>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DataCenterMonitor;