"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  BarChart3,
  TrendingUp,
  Users,
  Database,
  Activity,
  RefreshCw,
  Download,
  Eye,
  Zap,
  Target,
  AlertCircle,
} from "lucide-react"

export default function DashboardPage() {
  const [timeRange, setTimeRange] = useState("today")

  const dashboardStats = {
    totalUsers: 125678,
    activeUsers: 45678,
    dataVolume: 1245678,
    aiAccuracy: 96.8,
    growthRate: 12.5,
    qualityScore: 94.2,
  }

  const recentActivities = [
    {
      id: 1,
      type: "data_sync",
      message: "用户数据同步完成",
      time: "2分钟前",
      status: "success",
    },
    {
      id: 2,
      type: "ai_analysis",
      message: "AI模型训练完成",
      time: "5分钟前",
      status: "success",
    },
    {
      id: 3,
      type: "quality_check",
      message: "数据质量检查通过",
      time: "10分钟前",
      status: "warning",
    },
  ]

  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 gap-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-[120px]">
              <SelectValue placeholder="时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="today">今日</SelectItem>
              <SelectItem value="week">本周</SelectItem>
              <SelectItem value="month">本月</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon">
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            导出
          </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">总用户数</CardTitle>
              <Users className="h-4 w-4 text-blue-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-blue-600">{dashboardStats.totalUsers.toLocaleString()}</div>
            <div className="flex items-center mt-2">
              <TrendingUp className="h-3 w-3 text-green-500 mr-1" />
              <span className="text-xs text-green-600">+{dashboardStats.growthRate}%</span>
            </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>
              <Activity className="h-4 w-4 text-green-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">{dashboardStats.activeUsers.toLocaleString()}</div>
            <div className="text-xs text-muted-foreground mt-2">
              活跃率 {((dashboardStats.activeUsers / dashboardStats.totalUsers) * 100).toFixed(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">{dashboardStats.dataVolume.toLocaleString()}</div>
            <div className="text-xs text-muted-foreground mt-2">条记录</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">AI准确率</CardTitle>
              <Target className="h-4 w-4 text-orange-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-orange-600">{dashboardStats.aiAccuracy}%</div>
            <div className="text-xs text-muted-foreground mt-2">模型置信度</div>
          </CardContent>
        </Card>
      </div>

      {/* 详细分析 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 数据质量监控 */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <BarChart3 className="h-5 w-5 text-blue-600" />
              数据质量监控
            </CardTitle>
            <CardDescription>实时数据质量评估</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span>整体质量评分</span>
                  <span className="font-medium">{dashboardStats.qualityScore}%</span>
                </div>
                <Progress value={dashboardStats.qualityScore} className="h-2" />
              </div>
              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span>数据完整性</span>
                  <span className="font-medium">98.5%</span>
                </div>
                <Progress value={98.5} className="h-2" />
              </div>
              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span>数据准确性</span>
                  <span className="font-medium">96.2%</span>
                </div>
                <Progress value={96.2} className="h-2" />
              </div>
              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span>数据一致性</span>
                  <span className="font-medium">94.8%</span>
                </div>
                <Progress value={94.8} className="h-2" />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 实时活动 */}
        <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="space-y-3">
              {recentActivities.map((activity) => (
                <div key={activity.id} className="flex items-start gap-3 p-2 hover:bg-gray-50 rounded-lg">
                  <div
                    className={`p-1 rounded-full ${
                      activity.status === "success"
                        ? "text-green-600"
                        : activity.status === "warning"
                          ? "text-yellow-600"
                          : "text-red-600"
                    }`}
                  >
                    {activity.status === "success" ? (
                      <Zap className="h-4 w-4" />
                    ) : activity.status === "warning" ? (
                      <AlertCircle className="h-4 w-4" />
                    ) : (
                      <AlertCircle className="h-4 w-4" />
                    )}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium truncate">{activity.message}</p>
                    <p className="text-xs text-gray-500">{activity.time}</p>
                  </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">
            <Zap className="h-5 w-5 text-yellow-600" />
            快速操作
          </CardTitle>
          <CardDescription>常用功能快捷入口</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            <Button variant="outline" className="h-16 flex flex-col gap-1 bg-transparent">
              <Eye className="h-5 w-5" />
              <span className="text-xs">查看报告</span>
            </Button>
            <Button variant="outline" className="h-16 flex flex-col gap-1 bg-transparent">
              <Database className="h-5 w-5" />
              <span className="text-xs">数据导入</span>
            </Button>
            <Button variant="outline" className="h-16 flex flex-col gap-1 bg-transparent">
              <Users className="h-5 w-5" />
              <span className="text-xs">用户管理</span>
            </Button>
            <Button variant="outline" className="h-16 flex flex-col gap-1 bg-transparent">
              <Target className="h-5 w-5" />
              <span className="text-xs">AI分析</span>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
