"use client"

import { useState, useEffect } from "react"
import { Search, Users, TrendingUp, Database, RefreshCw, BarChart3, Activity, Globe, Smartphone, Brain } from 'lucide-react'
import { Card, CardContent, 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 { useRouter } from "next/navigation"
import { Toaster } from "@/components/ui/toaster"
import UserSearch from '@/components/home/user-search'
import UserList from '@/components/home/user-list'
import Link from "next/link"

interface SystemStats {
  userCount: number
  keywordCount: number
  versionCount: number
  avgResponseTime: number
  cacheSize: number
  connected: boolean
}

interface GrowthData {
  period: string
  userGrowth: number
  dataGrowth: number
  activeUsers: number
}

function StatCard({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
  return (
    <div className="rounded-lg border bg-white p-3">
      <div className="flex items-center gap-2 text-gray-500 text-xs">{icon}<span>{label}</span></div>
      <div className="mt-1 text-lg font-semibold">{value}</div>
    </div>
  )
}

export const dynamic = "force-static"

export default function OverviewPage() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")
  const [systemStats, setSystemStats] = useState<SystemStats>({
    userCount: 4000000000,
    keywordCount: 150000,
    versionCount: 25,
    avgResponseTime: 120,
    cacheSize: 0,
    connected: true,
  })
  const [growthData, setGrowthData] = useState<GrowthData[]>([
    { period: "今日", userGrowth: 2.3, dataGrowth: 1.8, activeUsers: 85600000 },
    { period: "本周", userGrowth: 12.5, dataGrowth: 8.9, activeUsers: 520000000 },
    { period: "本月", userGrowth: 45.2, dataGrowth: 32.1, activeUsers: 1200000000 },
  ])
  const [isRefreshing, setIsRefreshing] = useState(false)
  const [lastUpdate, setLastUpdate] = useState(new Date())

  // 自动刷新数据
  useEffect(() => {
    const interval = setInterval(() => {
      refreshData()
    }, 30000) // 30秒刷新一次

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

  // 刷新数据
  const refreshData = async () => {
    setIsRefreshing(true)
    try {
      // 模拟数据更新
      setSystemStats((prev) => ({
        ...prev,
        userCount: prev.userCount + Math.floor(Math.random() * 1000),
        avgResponseTime: Math.floor(Math.random() * 50) + 100,
      }))

      setGrowthData((prev) =>
        prev.map((item) => ({
          ...item,
          userGrowth: item.userGrowth + (Math.random() - 0.5) * 0.5,
          dataGrowth: item.dataGrowth + (Math.random() - 0.5) * 0.3,
          activeUsers: Math.floor(item.activeUsers * (1 + (Math.random() - 0.5) * 0.01)),
        })),
      )

      setLastUpdate(new Date())
    } catch (error) {
      console.error("刷新数据失败:", error)
    } finally {
      setIsRefreshing(false)
    }
  }

  // 处理搜索
  const handleSearch = () => {
    if (searchQuery.trim()) {
      router.push(`/intelligent-search?q=${encodeURIComponent(searchQuery)}`)
    }
  }

  // 格式化数字显示
  const formatNumber = (num: number): string => {
    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()
  }

  const tiles = [
    {
      href: "/user-portrait",
      title: "用户画像",
      desc: "管理与分群、标签与画像洞察",
      icon: <Users className="h-5 w-5 text-purple-500" />,
    },
    {
      href: "/devices",
      title: "设备管理",
      desc: "查看设备状态与执行任务",
      icon: <Smartphone className="h-5 w-5 text-emerald-500" />,
    },
    {
      href: "/data-platform",
      title: "数据中台",
      desc: "数据接入、质量监控与查询",
      icon: <Database className="h-5 w-5 text-indigo-500" />,
    },
    {
      href: "/ai-assistant",
      title: "AI 助手",
      desc: "智能问答与自动化报表",
      icon: <Brain className="h-5 w-5 text-rose-500" />,
    },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
      <div className="container mx-auto px-4 py-8">
        {/* 页面标题和搜索 */}
        <div className="mb-8">
          <div className="flex items-center justify-between mb-6">
            <div>
              <h1 className="text-4xl font-bold text-gray-900 mb-2">概览</h1>
              <p className="text-gray-600">数据资产中台</p>
            </div>
            <div className="flex items-center gap-4">
              <Badge variant="outline" className="text-green-600 border-green-200">
                <Activity className="w-3 h-3 mr-1" />
                系统正常
              </Badge>
              <Button
                variant="outline"
                size="sm"
                onClick={refreshData}
                disabled={isRefreshing}
                className="flex items-center gap-2 bg-transparent"
              >
                <RefreshCw className={`w-4 h-4 ${isRefreshing ? "animate-spin" : ""}`} />
                刷新
              </Button>
            </div>
          </div>

          {/* 搜索框 */}
          <div className="relative max-w-2xl">
            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
            <Input
              placeholder="搜索用户或流量关键词..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              onKeyPress={(e) => e.key === "Enter" && handleSearch()}
              className="pl-12 pr-24 h-14 text-lg border-2 border-gray-200 focus:border-blue-500 rounded-xl shadow-sm"
            />
            <Button
              onClick={handleSearch}
              className="absolute right-2 top-1/2 transform -translate-y-1/2 px-6 rounded-lg"
            >
              搜索
            </Button>
          </div>
        </div>

        {/* 核心数据展示 - 40亿用户为中心 */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
          {/* 用户总数 - 主要指标 */}
          <Card className="lg:col-span-2 border-2 border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50">
            <CardHeader className="pb-3">
              <CardTitle className="flex items-center gap-3 text-2xl">
                <div className="p-3 bg-blue-500 rounded-xl">
                  <Users className="w-8 h-8 text-white" />
                </div>
                用户资产总量
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="text-center">
                  <div className="text-6xl font-bold text-blue-600 mb-2">{formatNumber(systemStats.userCount)}</div>
                  <div className="text-lg text-gray-600">总用户数</div>
                </div>

                <div className="grid grid-cols-3 gap-4 pt-4 border-t">
                  {growthData.map((data, index) => (
                    <div key={index} className="text-center">
                      <div className="text-2xl font-bold text-green-600">+{data.userGrowth.toFixed(1)}%</div>
                      <div className="text-sm text-gray-500">{data.period}增长</div>
                      <div className="text-xs text-gray-400 mt-1">活跃: {formatNumber(data.activeUsers)}</div>
                    </div>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 系统状态 */}
          <Card className="border-2 border-green-200 bg-gradient-to-r from-green-50 to-emerald-50">
            <CardHeader className="pb-3">
              <CardTitle className="flex items-center gap-3">
                <div className="p-2 bg-green-500 rounded-lg">
                  <Activity className="w-6 h-6 text-white" />
                </div>
                实时状态
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex justify-between items-center">
                <span className="text-gray-600">响应时间</span>
                <Badge variant="secondary">{systemStats.avgResponseTime}ms</Badge>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-gray-600">数据源</span>
                <Badge variant="secondary">{systemStats.versionCount}个</Badge>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-gray-600">缓存大小</span>
                <Badge variant="secondary">{systemStats.cacheSize}MB</Badge>
              </div>
              <div className="text-xs text-gray-500 pt-2 border-t">最后更新: {lastUpdate.toLocaleTimeString()}</div>
            </CardContent>
          </Card>
        </div>

        {/* 数据增长趋势 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
          <Card className="border-2 border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50">
            <CardHeader>
              <CardTitle className="flex items-center gap-3">
                <div className="p-2 bg-purple-500 rounded-lg">
                  <TrendingUp className="w-6 h-6 text-white" />
                </div>
                用户资产增长
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {growthData.map((data, index) => (
                  <div key={index} className="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
                    <div>
                      <div className="font-semibold">{data.period}</div>
                      <div className="text-sm text-gray-500">活跃用户: {formatNumber(data.activeUsers)}</div>
                    </div>
                    <div className="text-right">
                      <div className="text-lg font-bold text-purple-600">+{data.userGrowth.toFixed(1)}%</div>
                      <div className="text-xs text-gray-500">增长率</div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          <Card className="border-2 border-orange-200 bg-gradient-to-r from-orange-50 to-yellow-50">
            <CardHeader>
              <CardTitle className="flex items-center gap-3">
                <div className="p-2 bg-orange-500 rounded-lg">
                  <Database className="w-6 h-6 text-white" />
                </div>
                数据增长情况
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
                  <div>
                    <div className="font-semibold">流量关键词</div>
                    <div className="text-sm text-gray-500">总计 {formatNumber(systemStats.keywordCount)} 个</div>
                  </div>
                  <div className="text-right">
                    <div className="text-lg font-bold text-orange-600">+{growthData[0].dataGrowth.toFixed(1)}%</div>
                    <div className="text-xs text-gray-500">今日增长</div>
                  </div>
                </div>

                <div className="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
                  <div>
                    <div className="font-semibold">数据处理量</div>
                    <div className="text-sm text-gray-500">实时处理中</div>
                  </div>
                  <div className="text-right">
                    <div className="text-lg font-bold text-orange-600">
                      {formatNumber(Math.floor(systemStats.userCount * 0.001))}
                    </div>
                    <div className="text-xs text-gray-500">条/秒</div>
                  </div>
                </div>

                <div className="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
                  <div>
                    <div className="font-semibold">存储容量</div>
                    <div className="text-sm text-gray-500">云端存储</div>
                  </div>
                  <div className="text-right">
                    <div className="text-lg font-bold text-orange-600">
                      {Math.floor(systemStats.userCount / 1000000)}TB
                    </div>
                    <div className="text-xs text-gray-500">已使用</div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 快速访问入口 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          {tiles.map((t) => (
            <Card key={t.href} className="transition hover:shadow-md">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-lg">{t.title}</CardTitle>
                {t.icon}
              </CardHeader>
              <CardContent className="flex items-center justify-between">
                <p className="text-sm text-muted-foreground">{t.desc}</p>
                <Button asChild size="sm" className="ml-3">
                  <Link href={t.href}>进入</Link>
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* 快速指标示例（可后续接入真实数据） */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-8">
          <StatCard icon={<Users className="h-4 w-4" />} label="用户总量" value="~120+" />
          <StatCard icon={<Activity className="h-4 w-4" />} label="近7日活跃" value="动态计算" />
          <StatCard icon={<BarChart3 className="h-4 w-4" />} label="平均RFM" value="50-80" />
          <StatCard icon={<Users className="h-4 w-4" />} label="新客占比" value="≈25%" />
        </div>

        {/* 搜索 + 条件过滤 + 列表 */}
        <UserSearch query={searchQuery} />
      </div>
      <Toaster />
    </div>
  )
}