"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { TooltipHelp, TooltipProvider } from "@/components/ui/tooltip-help"
import {
  Activity,
  TrendingUp,
  Database,
  Search,
  RefreshCw,
  Zap,
  BarChart3,
  Target,
  Globe,
  UserCheck,
  Clock,
} from "lucide-react"

export default function OverviewPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [isRefreshing, setIsRefreshing] = useState(false)
  const [lastUpdate, setLastUpdate] = useState(new Date())

  // 核心数据状态
  const [coreData, setCoreData] = useState({
    totalUsers: 4000000000, // 40亿用户
    activeUsers: 2800000000, // 28亿活跃用户
    dataGrowthRate: 15.8, // 数据增长率
    assetGrowthRate: 23.5, // 资产增长率
    realTimeQueries: 156789, // 实时查询数
    dataVolume: "12.8TB", // 数据量
    systemHealth: 99.2, // 系统健康度
    aiAnalysis: 8456, // AI分析次数
  })

  // 实时数据更新
  useEffect(() => {
    const interval = setInterval(() => {
      setCoreData((prev) => ({
        ...prev,
        realTimeQueries: prev.realTimeQueries + Math.floor(Math.random() * 50) + 10,
        activeUsers: prev.activeUsers + Math.floor(Math.random() * 1000) + 100,
      }))
      setLastUpdate(new Date())
    }, 5000) // 每5秒更新一次

    return () => clearInterval(interval)
  }, [])

  // 手动刷新
  const handleRefresh = async () => {
    setIsRefreshing(true)
    // 模拟数据刷新
    setTimeout(() => {
      setCoreData((prev) => ({
        ...prev,
        totalUsers: prev.totalUsers + Math.floor(Math.random() * 10000) + 1000,
        dataGrowthRate: +(Math.random() * 5 + 12).toFixed(1),
        assetGrowthRate: +(Math.random() * 8 + 18).toFixed(1),
      }))
      setLastUpdate(new Date())
      setIsRefreshing(false)
    }, 2000)
  }

  // 搜索处理
  const handleSearch = () => {
    if (searchQuery.trim()) {
      // 跳转到智能搜索页面
      window.location.href = `/intelligent-search?q=${encodeURIComponent(searchQuery)}`
    }
  }

  const formatNumber = (num: number) => {
    if (num >= 1000000000) {
      return (num / 1000000000).toFixed(1) + "B"
    }
    if (num >= 1000000) {
      return (num / 1000000).toFixed(1) + "M"
    }
    if (num >= 1000) {
      return (num / 1000).toFixed(1) + "K"
    }
    return num.toString()
  }

  return (
    <TooltipProvider>
      <div className="container mx-auto py-6 space-y-6">
        {/* 页面标题和搜索 */}
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">概览</h1>
            <p className="text-muted-foreground mt-1 flex items-center gap-2">
              数据资产中台总览
              <Badge variant="outline" className="text-xs">
                <Clock className="h-3 w-3 mr-1" />
                {lastUpdate.toLocaleTimeString()}
              </Badge>
            </p>
          </div>
          <div className="flex items-center space-x-3">
            <div className="relative flex-1 max-w-md">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                type="text"
                placeholder="搜索用户或流量关键词..."
                className="pl-10 pr-20"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                onKeyPress={(e) => e.key === "Enter" && handleSearch()}
              />
              <Button size="sm" className="absolute right-1 top-1/2 transform -translate-y-1/2" onClick={handleSearch}>
                搜索
              </Button>
            </div>
            <Button variant="outline" size="sm" onClick={handleRefresh} disabled={isRefreshing}>
              <RefreshCw className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
              {isRefreshing ? "刷新中" : "刷新"}
            </Button>
          </div>
        </div>

        {/* 核心用户数据展示 - 40亿用户为中心 */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* 中心用户总数卡片 */}
          <div className="lg:col-span-1">
            <Card className="h-full border-2 border-blue-200 bg-gradient-to-br from-blue-50 to-indigo-50">
              <CardHeader className="text-center pb-2">
                <CardTitle className="text-lg flex items-center justify-center gap-2">
                  <Globe className="h-6 w-6 text-blue-600" />
                  用户总数
                  <TooltipHelp content="平台累计用户总数，包括所有注册和识别的用户" />
                </CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <div className="text-5xl font-bold text-blue-600 mb-2">{formatNumber(coreData.totalUsers)}</div>
                <div className="text-sm text-muted-foreground">全球用户覆盖</div>
                <div className="mt-4 grid grid-cols-2 gap-2 text-xs">
                  <div className="bg-white/50 rounded p-2">
                    <div className="font-medium">活跃用户</div>
                    <div className="text-green-600 font-bold">{formatNumber(coreData.activeUsers)}</div>
                  </div>
                  <div className="bg-white/50 rounded p-2">
                    <div className="font-medium">活跃率</div>
                    <div className="text-blue-600 font-bold">
                      {((coreData.activeUsers / coreData.totalUsers) * 100).toFixed(1)}%
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* 右侧数据指标 */}
          <div className="lg:col-span-2 grid grid-cols-2 gap-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium flex items-center gap-1">
                  用户资产增长
                  <TooltipHelp content="用户资产价值的增长率，反映用户价值提升情况" />
                </CardTitle>
                <TrendingUp className="h-4 w-4 text-green-500" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-green-600">+{coreData.assetGrowthRate}%</div>
                <p className="text-xs text-muted-foreground">月度增长率</p>
                <div className="mt-2 h-2 bg-gray-200 rounded-full">
                  <div
                    className="h-2 bg-green-500 rounded-full transition-all duration-500"
                    style={{ width: `${Math.min(coreData.assetGrowthRate * 2, 100)}%` }}
                  ></div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium flex items-center gap-1">
                  数据增长
                  <TooltipHelp content="数据量的增长速度，包括用户行为数据、交易数据等" />
                </CardTitle>
                <Database className="h-4 w-4 text-blue-500" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-blue-600">+{coreData.dataGrowthRate}%</div>
                <p className="text-xs text-muted-foreground">数据量: {coreData.dataVolume}</p>
                <div className="mt-2 h-2 bg-gray-200 rounded-full">
                  <div
                    className="h-2 bg-blue-500 rounded-full transition-all duration-500"
                    style={{ width: `${Math.min(coreData.dataGrowthRate * 3, 100)}%` }}
                  ></div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium flex items-center gap-1">
                  实时查询
                  <TooltipHelp content="当前实时查询次数，反映系统活跃度" />
                </CardTitle>
                <Zap className="h-4 w-4 text-yellow-500" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-yellow-600">{formatNumber(coreData.realTimeQueries)}</div>
                <p className="text-xs text-muted-foreground">实时查询次数</p>
                <div className="flex items-center mt-2">
                  <div className="w-2 h-2 bg-yellow-500 rounded-full animate-pulse mr-2"></div>
                  <span className="text-xs text-green-600">实时更新中</span>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium flex items-center gap-1">
                  系统状态
                  <TooltipHelp content="系统整体健康状态和AI分析能力" />
                </CardTitle>
                <Activity className="h-4 w-4 text-purple-500" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-purple-600">{coreData.systemHealth}%</div>
                <p className="text-xs text-muted-foreground">AI分析: {formatNumber(coreData.aiAnalysis)} 次</p>
                <div className="flex items-center mt-2">
                  <Badge className="bg-green-100 text-green-800 text-xs">系统正常</Badge>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

        {/* 数据分布概览 */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">高价值用户</CardTitle>
              <Target className="h-4 w-4 text-red-500" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">2.8M</div>
              <p className="text-xs text-muted-foreground">占比 7.2%</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">活跃用户</CardTitle>
              <UserCheck className="h-4 w-4 text-green-500" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">28.5M</div>
              <p className="text-xs text-muted-foreground">日活跃用户</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">流量关键词</CardTitle>
              <BarChart3 className="h-4 w-4 text-blue-500" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">156K</div>
              <p className="text-xs text-muted-foreground">热门关键词数量</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">数据源</CardTitle>
              <Database className="h-4 w-4 text-purple-500" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">28</div>
              <p className="text-xs text-muted-foreground">已接入数据源</p>
            </CardContent>
          </Card>
        </div>

        {/* 实时活动流 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Activity className="h-5 w-5" />
              实时数据流
              <TooltipHelp content="系统实时数据处理和分析活动" />
            </CardTitle>
            <CardDescription>实时监控数据处理和用户活动</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                  <div>
                    <div className="font-medium">用户数据同步</div>
                    <div className="text-sm text-muted-foreground">新增 1,247 个用户记录</div>
                  </div>
                </div>
                <Badge className="bg-green-100 text-green-800">实时</Badge>
              </div>

              <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
                  <div>
                    <div className="font-medium">AI分析完成</div>
                    <div className="text-sm text-muted-foreground">用户画像分析处理完成</div>
                  </div>
                </div>
                <Badge className="bg-blue-100 text-blue-800">2分钟前</Badge>
              </div>

              <div className="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
                  <div>
                    <div className="font-medium">流量关键词更新</div>
                    <div className="text-sm text-muted-foreground">发现 89 个新热门关键词</div>
                  </div>
                </div>
                <Badge className="bg-purple-100 text-purple-800">5分钟前</Badge>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </TooltipProvider>
  )
}