users/app/data-asset/api-market/page.tsx

"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 { Input } from "@/components/ui/input"
import {
  Server,
  ArrowLeft,
  Plus,
  Search,
  Filter,
  Activity,
  Zap,
  Clock,
  Code,
  Key,
  Copy,
  Eye,
  Settings,
  BarChart3,
} from "lucide-react"
import Link from "next/link"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
import { ApiKeyManagementDialog } from "@/components/dialogs/api-key-management-dialog"
import { PublishApiDialog } from "@/components/dialogs/publish-api-dialog"

const apiServices = [
  {
    id: 1,
    name: "用户画像查询API",
    description: "根据用户ID查询完整画像信息",
    endpoint: "/api/v1/user/portrait",
    method: "GET",
    totalCalls: 2580000,
    todayCalls: 125800,
    qps: 1200,
    latency: 32,
    status: "running",
    subscribers: 45,
  },
  {
    id: 2,
    name: "价值评估API",
    description: "实时评估用户价值等级",
    endpoint: "/api/v1/user/value",
    method: "POST",
    totalCalls: 1890000,
    todayCalls: 89500,
    qps: 800,
    latency: 45,
    status: "running",
    subscribers: 38,
  },
  {
    id: 3,
    name: "标签推荐API",
    description: "智能推荐用户标签",
    endpoint: "/api/v1/tag/recommend",
    method: "POST",
    totalCalls: 980000,
    todayCalls: 45600,
    qps: 500,
    latency: 28,
    status: "running",
    subscribers: 23,
  },
  {
    id: 4,
    name: "流失预测API",
    description: "预测用户流失概率",
    endpoint: "/api/v1/predict/churn",
    method: "POST",
    totalCalls: 560000,
    todayCalls: 28900,
    qps: 300,
    latency: 120,
    status: "running",
    subscribers: 18,
  },
  {
    id: 5,
    name: "人群圈选API",
    description: "根据条件筛选用户人群",
    endpoint: "/api/v1/crowd/select",
    method: "POST",
    totalCalls: 320000,
    todayCalls: 15600,
    qps: 200,
    latency: 250,
    status: "running",
    subscribers: 12,
  },
]

const apiCallTrend = [
  { time: "00:00", calls: 8500 },
  { time: "04:00", calls: 3200 },
  { time: "08:00", calls: 15800 },
  { time: "12:00", calls: 28500 },
  { time: "16:00", calls: 32000 },
  { time: "20:00", calls: 25600 },
  { time: "24:00", calls: 18900 },
]

export default function APIMarketPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [totalCalls, setTotalCalls] = useState(305400)
  const [showKeyDialog, setShowKeyDialog] = useState(false)
  const [showPublishDialog, setShowPublishDialog] = useState(false)

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

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30 p-6">
      <div className="max-w-7xl mx-auto space-y-6">
        {/* 页面标题 */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link href="/data-asset">
              <Button variant="ghost" size="icon" className="rounded-full">
                <ArrowLeft className="w-5 h-5" />
              </Button>
            </Link>
            <div>
              <h1 className="text-2xl font-bold text-slate-800">API服务市场</h1>
              <p className="text-slate-500 mt-1">API服务发布、订阅与监控</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" onClick={() => setShowKeyDialog(true)}>
              <Key className="w-4 h-4 mr-2" />
              管理密钥
            </Button>
            <Button
              className="bg-gradient-to-r from-blue-500 to-cyan-600 hover:from-blue-600 hover:to-cyan-700"
              onClick={() => setShowPublishDialog(true)}
            >
              <Plus className="w-4 h-4 mr-2" />
              发布API
            </Button>
          </div>
        </div>

        {/* API调用概览 */}
        <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">{totalCalls.toLocaleString()}</p>
                </div>
                <Zap className="w-8 h-8 text-blue-500" />
              </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">平均QPS</p>
                  <p className="text-2xl font-bold text-slate-800">600</p>
                </div>
                <Activity className="w-8 h-8 text-emerald-500" />
              </div>
              <p className="text-xs text-slate-500 mt-2">峰值: 1,200</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">95ms</p>
                </div>
                <Clock className="w-8 h-8 text-amber-500" />
              </div>
              <p className="text-xs text-emerald-600 mt-2">较上周 -8%</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">99.8%</p>
                </div>
                <BarChart3 className="w-8 h-8 text-violet-500" />
              </div>
              <p className="text-xs text-emerald-600 mt-2">稳定运行</p>
            </CardContent>
          </Card>
        </div>

        {/* 调用趋势图 */}
        <Card className="bg-white/70 backdrop-blur border-slate-200/60">
          <CardHeader className="pb-2">
            <CardTitle className="text-base">今日API调用趋势</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-64">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={apiCallTrend}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                  <XAxis dataKey="time" tick={{ fontSize: 12 }} stroke="#94a3b8" />
                  <YAxis tick={{ fontSize: 12 }} stroke="#94a3b8" />
                  <Tooltip
                    contentStyle={{
                      backgroundColor: "white",
                      border: "1px solid #e2e8f0",
                      borderRadius: "8px",
                    }}
                  />
                  <Line type="monotone" dataKey="calls" stroke="#3b82f6" strokeWidth={2} dot={{ r: 4 }} />
                </LineChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>

        {/* 筛选工具栏 */}
        <div className="flex items-center gap-4">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
            <Input
              placeholder="搜索API服务..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-9 bg-white/70"
            />
          </div>
          <Button variant="outline">
            <Filter className="w-4 h-4 mr-2" />
            筛选
          </Button>
        </div>

        {/* API服务列表 */}
        <div className="space-y-4">
          {apiServices.map((api) => (
            <Card key={api.id} className="bg-white/70 backdrop-blur border-slate-200/60 hover:shadow-md transition-all">
              <CardContent className="p-5">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
                      <Server className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <div className="flex items-center gap-2">
                        <h3 className="font-semibold text-slate-800">{api.name}</h3>
                        <Badge className="bg-emerald-100 text-emerald-700">
                          <Activity className="w-3 h-3 mr-1" />
                          运行中
                        </Badge>
                      </div>
                      <p className="text-sm text-slate-500 mt-0.5">{api.description}</p>
                      <div className="flex items-center gap-2 mt-2">
                        <Badge
                          variant="outline"
                          className={api.method === "GET" ? "bg-blue-50 text-blue-600" : "bg-green-50 text-green-600"}
                        >
                          {api.method}
                        </Badge>
                        <code className="text-xs bg-slate-100 px-2 py-0.5 rounded">{api.endpoint}</code>
                        <Button variant="ghost" size="sm" className="h-6 px-2">
                          <Copy className="w-3 h-3" />
                        </Button>
                      </div>
                    </div>
                  </div>

                  <div className="flex items-center gap-8">
                    <div className="text-center">
                      <p className="text-lg font-bold text-slate-800">{api.todayCalls.toLocaleString()}</p>
                      <p className="text-xs text-slate-500">今日调用</p>
                    </div>
                    <div className="text-center">
                      <p className="text-lg font-semibold text-slate-700">{api.qps}</p>
                      <p className="text-xs text-slate-500">QPS</p>
                    </div>
                    <div className="text-center">
                      <p className="text-lg font-semibold text-slate-700">{api.latency}ms</p>
                      <p className="text-xs text-slate-500">延迟</p>
                    </div>
                    <div className="text-center">
                      <p className="text-lg font-semibold text-slate-700">{api.subscribers}</p>
                      <p className="text-xs text-slate-500">订阅方</p>
                    </div>

                    <div className="flex items-center gap-2">
                      <Button variant="outline" size="sm">
                        <Code className="w-4 h-4 mr-1" />
                        文档
                      </Button>
                      <Button variant="outline" size="sm">
                        <Eye className="w-4 h-4 mr-1" />
                        监控
                      </Button>
                      <Button variant="ghost" size="sm">
                        <Settings className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <ApiKeyManagementDialog open={showKeyDialog} onOpenChange={setShowKeyDialog} />
      <PublishApiDialog open={showPublishDialog} onOpenChange={setShowPublishDialog} />
    </div>
  )
}