"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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Database,
  Users,
  Target,
  TrendingUp,
  RefreshCw,
  Download,
  ChevronRight,
  Activity,
  Zap,
  UserCheck,
  Layers,
  Tag,
} from "lucide-react"
import Link from "next/link"

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

  // 今日数据概览
  const todayStats = {
    dataSync: {
      total: 1245678,
      growth: "+12.5%",
      sources: 8,
      lastUpdate: "2分钟前",
    },
    userPool: {
      totalUsers: 125678,
      activeUsers: 45678,
      newUsers: 1234,
      growth: "+8.2%",
    },
    userPortrait: {
      totalTags: 342,
      activeTags: 287,
      coverage: "95.8%",
      growth: "+5.3%",
    },
    userValuation: {
      avgValue: 3248,
      highValue: 12456,
      growth: "+15.8%",
      upgradeRate: "12.5%",
    },
  }

  // 实时活动数据
  const realtimeActivities = [
    {
      id: 1,
      type: "data_sync",
      message: "IMEI数据同步完成",
      time: "刚刚",
      status: "success",
    },
    {
      id: 2,
      type: "user_pool",
      message: "新增用户池分群",
      time: "2分钟前",
      status: "info",
    },
    {
      id: 3,
      type: "user_portrait",
      message: "标签规则自动执行",
      time: "5分钟前",
      status: "warning",
    },
    {
      id: 4,
      type: "user_valuation",
      message: "用户价值模型更新完成",
      time: "8分钟前",
      status: "success",
    },
  ]

  const getActivityIcon = (type: string) => {
    switch (type) {
      case "data_sync":
        return <Database className="h-4 w-4" />
      case "user_pool":
        return <Users className="h-4 w-4" />
      case "user_portrait":
        return <Target className="h-4 w-4" />
      case "user_valuation":
        return <TrendingUp className="h-4 w-4" />
      default:
        return <Activity className="h-4 w-4" />
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case "success":
        return "text-green-600"
      case "warning":
        return "text-yellow-600"
      case "info":
        return "text-blue-600"
      default:
        return "text-gray-600"
    }
  }

  return (
    <div className="container mx-auto py-4 md:py-6 space-y-4 md:space-y-6">
      {/* 页面标题和工具栏 */}
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold tracking-tight">数据概览</h1>
          <p className="text-sm md:text-base text-muted-foreground">卡若数据资产中台总览</p>
        </div>
        <div className="flex gap-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-[120px] text-sm">
              <SelectValue placeholder="时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="today">今日</SelectItem>
              <SelectItem value="week">本周</SelectItem>
              <SelectItem value="month">本月</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="sm" className="hidden md:flex bg-transparent">
            <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-4">
        {/* 数据中台 */}
        <Link href="/data-platform">
          <Card className="border-none shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer group">
            <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 pb-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Database className="h-5 w-5 text-blue-600" />
                  <CardTitle className="text-base">数据中台</CardTitle>
                </div>
                <Badge className="bg-blue-100 text-blue-700">核心</Badge>
              </div>
              <CardDescription className="text-xs">多源数据整合中心</CardDescription>
            </CardHeader>
            <CardContent className="pt-3">
              <div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">数据总量</span>
                  <span className="font-bold">{todayStats.dataSync.total.toLocaleString()}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">数据源</span>
                  <span className="font-bold">{todayStats.dataSync.sources}个</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">增长率</span>
                  <span className="text-green-600 font-bold">{todayStats.dataSync.growth}</span>
                </div>
                <div className="flex items-center justify-between mt-3">
                  <span className="text-xs text-gray-500">最后更新: {todayStats.dataSync.lastUpdate}</span>
                  <ChevronRight className="h-4 w-4 text-gray-400 group-hover:text-blue-600 transition-colors" />
                </div>
              </div>
            </CardContent>
          </Card>
        </Link>

        {/* 用户池 */}
        <Link href="/user-pool">
          <Card className="border-none shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer group">
            <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 pb-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Users className="h-5 w-5 text-green-600" />
                  <CardTitle className="text-base">用户池</CardTitle>
                </div>
              </div>
              <CardDescription className="text-xs">用户数据管理中心</CardDescription>
            </CardHeader>
            <CardContent className="pt-3">
              <div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">总用户数</span>
                  <span className="font-bold">{todayStats.userPool.totalUsers.toLocaleString()}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">活跃用户</span>
                  <span className="font-bold">{todayStats.userPool.activeUsers.toLocaleString()}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">新增用户</span>
                  <span className="font-bold">{todayStats.userPool.newUsers.toLocaleString()}</span>
                </div>
                <div className="flex items-center justify-between mt-3">
                  <span className="text-xs text-green-600">增长 {todayStats.userPool.growth}</span>
                  <ChevronRight className="h-4 w-4 text-gray-400 group-hover:text-green-600 transition-colors" />
                </div>
              </div>
            </CardContent>
          </Card>
        </Link>

        {/* 用户画像 */}
        <Link href="/user-portrait">
          <Card className="border-none shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer group">
            <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 pb-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Target className="h-5 w-5 text-purple-600" />
                  <CardTitle className="text-base">用户画像</CardTitle>
                </div>
              </div>
              <CardDescription className="text-xs">用户标签画像分析</CardDescription>
            </CardHeader>
            <CardContent className="pt-3">
              <div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">标签总数</span>
                  <span className="font-bold">{todayStats.userPortrait.totalTags}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">活跃标签</span>
                  <span className="font-bold">{todayStats.userPortrait.activeTags}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">覆盖率</span>
                  <span className="text-purple-600 font-bold">{todayStats.userPortrait.coverage}</span>
                </div>
                <div className="flex items-center justify-between mt-3">
                  <span className="text-xs text-purple-600">增长 {todayStats.userPortrait.growth}</span>
                  <ChevronRight className="h-4 w-4 text-gray-400 group-hover:text-purple-600 transition-colors" />
                </div>
              </div>
            </CardContent>
          </Card>
        </Link>

        {/* 用户估值 */}
        <Link href="/user-valuation">
          <Card className="border-none shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer group">
            <CardHeader className="bg-gradient-to-r from-orange-50 to-red-50 pb-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <TrendingUp className="h-5 w-5 text-orange-600" />
                  <CardTitle className="text-base">用户估值</CardTitle>
                </div>
              </div>
              <CardDescription className="text-xs">用户价值评估模型</CardDescription>
            </CardHeader>
            <CardContent className="pt-3">
              <div className="space-y-2">
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">平均估值</span>
                  <span className="font-bold">¥{todayStats.userValuation.avgValue.toLocaleString()}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">高价值用户</span>
                  <span className="font-bold">{todayStats.userValuation.highValue.toLocaleString()}</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">升级率</span>
                  <span className="text-orange-600 font-bold">{todayStats.userValuation.upgradeRate}</span>
                </div>
                <div className="flex items-center justify-between mt-3">
                  <span className="text-xs text-orange-600">增长 {todayStats.userValuation.growth}</span>
                  <ChevronRight className="h-4 w-4 text-gray-400 group-hover:text-orange-600 transition-colors" />
                </div>
              </div>
            </CardContent>
          </Card>
        </Link>
      </div>

      {/* 实时数据流 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6">
        {/* 今日关键指标 */}
        <Card className="lg:col-span-2 border-none shadow-md">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Activity className="h-5 w-5 text-blue-600" />
              今日关键指标
            </CardTitle>
            <CardDescription>实时数据监控</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="text-center p-3 bg-blue-50 rounded-lg">
                <div className="text-2xl font-bold text-blue-600">98.5%</div>
                <div className="text-xs text-gray-600">系统可用性</div>
              </div>
              <div className="text-center p-3 bg-green-50 rounded-lg">
                <div className="text-2xl font-bold text-green-600">2.3s</div>
                <div className="text-xs text-gray-600">平均响应时间</div>
              </div>
              <div className="text-center p-3 bg-purple-50 rounded-lg">
                <div className="text-2xl font-bold text-purple-600">342</div>
                <div className="text-xs text-gray-600">活跃标签数</div>
              </div>
              <div className="text-center p-3 bg-orange-50 rounded-lg">
                <div className="text-2xl font-bold text-orange-600">95.8%</div>
                <div className="text-xs text-gray-600">标签覆盖率</div>
              </div>
            </div>
            <div className="mt-4 space-y-3">
              <div>
                <div className="flex justify-between text-sm mb-1">
                  <span>数据处理进度</span>
                  <span>87%</span>
                </div>
                <Progress value={87} className="h-2" />
              </div>
              <div>
                <div className="flex justify-between text-sm mb-1">
                  <span>标签规则执行</span>
                  <span>92%</span>
                </div>
                <Progress value={92} className="h-2" />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 实时活动 */}
        <Card className="border-none shadow-md">
          <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">
              {realtimeActivities.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 ${getStatusColor(activity.status)}`}>
                    {getActivityIcon(activity.type)}
                  </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 text-sm bg-transparent">
              查看全部活动
            </Button>
          </CardContent>
        </Card>
      </div>

      {/* 快速操作 */}
      <Card className="border-none shadow-md">
        <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">
            <Link href="/data-platform">
              <Button variant="outline" className="w-full h-16 flex flex-col gap-1 bg-transparent">
                <Database className="h-5 w-5" />
                <span className="text-xs">数据导入</span>
              </Button>
            </Link>
            <Link href="/user-pool/management">
              <Button variant="outline" className="w-full h-16 flex flex-col gap-1 bg-transparent">
                <UserCheck className="h-5 w-5" />
                <span className="text-xs">用户管理</span>
              </Button>
            </Link>
            <Link href="/user-pool/segmentation">
              <Button variant="outline" className="w-full h-16 flex flex-col gap-1 bg-transparent">
                <Layers className="h-5 w-5" />
                <span className="text-xs">用户分群</span>
              </Button>
            </Link>
            <Link href="/user-portrait/tags">
              <Button variant="outline" className="w-full h-16 flex flex-col gap-1 bg-transparent">
                <Tag className="h-5 w-5" />
                <span className="text-xs">标签管理</span>
              </Button>
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}