"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Package, Server, Download, Upload, Users, Activity, ArrowRight, CheckCircle2, Zap } from "lucide-react"
import Link from "next/link"

const assetOverview = {
  totalPackages: 156,
  apiServices: 28,
  totalCalls: 12580000,
  activeSubscribers: 89,
}

const trafficPackages = [
  { id: 1, name: "高价值用户包", users: 125800, status: "active", updated: "2小时前", downloads: 23 },
  { id: 2, name: "流失预警用户包", users: 23400, status: "active", updated: "1小时前", downloads: 15 },
  { id: 3, name: "潜力转化用户包", users: 89000, status: "active", updated: "30分钟前", downloads: 45 },
  { id: 4, name: "沉默用户唤醒包", users: 156000, status: "pending", updated: "生成中", downloads: 0 },
]

const apiServices = [
  { id: 1, name: "用户画像查询API", calls: 2580000, qps: 1200, status: "running", latency: "32ms" },
  { id: 2, name: "价值评估API", calls: 1890000, qps: 800, status: "running", latency: "45ms" },
  { id: 3, name: "标签推荐API", calls: 980000, qps: 500, status: "running", latency: "28ms" },
  { id: 4, name: "流失预测API", calls: 560000, qps: 300, status: "running", latency: "120ms" },
]

export default function DataAssetPage() {
  const [todayCalls, setTodayCalls] = useState(258000)

  useEffect(() => {
    const interval = setInterval(() => {
      setTodayCalls((prev) => prev + Math.floor(Math.random() * 1000))
    }, 2000)
    return () => clearInterval(interval)
  }, [])

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-indigo-50/30 p-6">
      <div className="max-w-7xl mx-auto space-y-6">
        {/* 页面标题 */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-slate-800">数据资产与输出中心</h1>
            <p className="text-slate-500 mt-1">流量包管理、API服务市场、数据输出</p>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline">
              <Upload className="w-4 h-4 mr-2" />
              导入数据
            </Button>
            <Button className="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700">
              <Package className="w-4 h-4 mr-2" />
              创建流量包
            </Button>
          </div>
        </div>

        {/* 资产概览 */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card className="bg-white/70 backdrop-blur border-slate-200/60">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-xs text-slate-500">流量包总数</p>
                  <p className="text-2xl font-bold text-slate-800">{assetOverview.totalPackages}</p>
                </div>
                <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
                  <Package className="w-5 h-5 text-white" />
                </div>
              </div>
              <p className="text-xs text-emerald-600 mt-2">本月新增 12</p>
            </CardContent>
          </Card>

          <Card className="bg-white/70 backdrop-blur border-slate-200/60">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-xs text-slate-500">API服务数</p>
                  <p className="text-2xl font-bold text-slate-800">{assetOverview.apiServices}</p>
                </div>
                <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
                  <Server className="w-5 h-5 text-white" />
                </div>
              </div>
              <p className="text-xs text-emerald-600 mt-2">全部运行中</p>
            </CardContent>
          </Card>

          <Card className="bg-white/70 backdrop-blur border-slate-200/60">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-xs text-slate-500">今日API调用</p>
                  <p className="text-2xl font-bold text-slate-800">{todayCalls.toLocaleString()}</p>
                </div>
                <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
                  <Zap className="w-5 h-5 text-white" />
                </div>
              </div>
              <p className="text-xs text-emerald-600 mt-2">较昨日 +15.2%</p>
            </CardContent>
          </Card>

          <Card className="bg-white/70 backdrop-blur border-slate-200/60">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-xs text-slate-500">活跃订阅方</p>
                  <p className="text-2xl font-bold text-slate-800">{assetOverview.activeSubscribers}</p>
                </div>
                <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-orange-500 to-amber-600 flex items-center justify-center">
                  <Users className="w-5 h-5 text-white" />
                </div>
              </div>
              <p className="text-xs text-emerald-600 mt-2">本月新增 8</p>
            </CardContent>
          </Card>
        </div>

        {/* 功能入口 */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Link href="/data-asset/packages">
            <Card className="bg-white/70 backdrop-blur border-slate-200/60 hover:shadow-lg hover:border-slate-300 transition-all cursor-pointer group h-full">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
                      <Package className="w-7 h-7 text-white" />
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold text-slate-800">流量包管理</h3>
                      <p className="text-sm text-slate-500">创建、管理、导出用户流量包</p>
                    </div>
                  </div>
                  <ArrowRight className="w-5 h-5 text-slate-400 group-hover:text-slate-600 group-hover:translate-x-1 transition-all" />
                </div>
              </CardContent>
            </Card>
          </Link>

          <Link href="/data-asset/api-market">
            <Card className="bg-white/70 backdrop-blur border-slate-200/60 hover:shadow-lg hover:border-slate-300 transition-all cursor-pointer group h-full">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
                      <Server className="w-7 h-7 text-white" />
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold text-slate-800">API服务市场</h3>
                      <p className="text-sm text-slate-500">API服务发布、订阅、监控</p>
                    </div>
                  </div>
                  <ArrowRight className="w-5 h-5 text-slate-400 group-hover:text-slate-600 group-hover:translate-x-1 transition-all" />
                </div>
              </CardContent>
            </Card>
          </Link>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* 热门流量包 */}
          <Card className="bg-white/70 backdrop-blur border-slate-200/60">
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between">
                <CardTitle className="text-base flex items-center gap-2">
                  <Package className="w-4 h-4 text-indigo-500" />
                  热门流量包
                </CardTitle>
                <Link href="/data-asset/packages">
                  <Button variant="ghost" size="sm">
                    查看全部
                    <ArrowRight className="w-4 h-4 ml-1" />
                  </Button>
                </Link>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {trafficPackages.map((pkg) => (
                  <div key={pkg.id} className="flex items-center justify-between p-3 bg-slate-50/80 rounded-lg">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-100 to-purple-100 flex items-center justify-center">
                        <Users className="w-5 h-5 text-indigo-600" />
                      </div>
                      <div>
                        <p className="text-sm font-medium text-slate-800">{pkg.name}</p>
                        <p className="text-xs text-slate-500">{pkg.users.toLocaleString()} 用户</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      {pkg.status === "active" ? (
                        <Badge className="bg-emerald-100 text-emerald-700">
                          <CheckCircle2 className="w-3 h-3 mr-1" />
                          可用
                        </Badge>
                      ) : (
                        <Badge className="bg-blue-100 text-blue-700">
                          <Activity className="w-3 h-3 mr-1 animate-pulse" />
                          生成中
                        </Badge>
                      )}
                      <div className="text-right">
                        <p className="text-xs text-slate-500">{pkg.updated}</p>
                        {pkg.downloads > 0 && (
                          <p className="text-xs text-slate-400">
                            <Download className="w-3 h-3 inline mr-1" />
                            {pkg.downloads}
                          </p>
                        )}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* API服务状态 */}
          <Card className="bg-white/70 backdrop-blur border-slate-200/60">
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between">
                <CardTitle className="text-base flex items-center gap-2">
                  <Server className="w-4 h-4 text-blue-500" />
                  API服务状态
                </CardTitle>
                <Link href="/data-asset/api-market">
                  <Button variant="ghost" size="sm">
                    查看全部
                    <ArrowRight className="w-4 h-4 ml-1" />
                  </Button>
                </Link>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {apiServices.map((api) => (
                  <div key={api.id} className="flex items-center justify-between p-3 bg-slate-50/80 rounded-lg">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-100 to-cyan-100 flex items-center justify-center">
                        <Zap className="w-5 h-5 text-blue-600" />
                      </div>
                      <div>
                        <p className="text-sm font-medium text-slate-800">{api.name}</p>
                        <p className="text-xs text-slate-500">
                          QPS: {api.qps} | 延迟: {api.latency}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      <Badge className="bg-emerald-100 text-emerald-700">
                        <Activity className="w-3 h-3 mr-1" />
                        运行中
                      </Badge>
                      <div className="text-right">
                        <p className="text-sm font-medium text-slate-700">{(api.calls / 1000000).toFixed(1)}M</p>
                        <p className="text-xs text-slate-500">总调用</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}