"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import { toast } from "@/components/ui/use-toast"
import { useRouter } from "next/navigation"

interface ApiInterface {
  id: string
  name: string
  endpoint: string
  method: string
  status: "active" | "inactive" | "deprecated"
  stats: {
    totalCalls: number
    successCalls: number
    errorCalls: number
    successRate: number
    avgResponseTime: number
  }
  lastUpdated: string
  trend: { date: string; calls: number; success: number; responseTime: number }[]
  description: string
  authentication: string
}

export default function ApiInterfacePage() {
  const router = useRouter()
  const [apis, setApis] = useState<ApiInterface[]>([
    {
      id: "1",
      name: "用户数据查询接口",
      endpoint: "/api/users/query",
      method: "GET",
      status: "active",
      stats: {
        totalCalls: 1245632,
        successCalls: 1220578,
        errorCalls: 25054,
        successRate: 98,
        avgResponseTime: 120,
      },
      lastUpdated: "2023-07-15 14:30",
      trend: Array.from({ length: 7 }, (_, i) => ({
        date: `2023-07-${String(i + 9).padStart(2, "0")}`,
        calls: Math.floor(Math.random() * 20000) + 150000,
        success: Math.floor(Math.random() * 18000) + 145000,
        responseTime: Math.floor(Math.random() * 50) + 100,
      })),
      description: "查询用户基本信息、标签和行为数据",
      authentication: "API Key",
    },
    {
      id: "2",
      name: "用户标签更新接口",
      endpoint: "/api/users/tags/update",
      method: "POST",
      status: "active",
      stats: {
        totalCalls: 856421,
        successCalls: 845789,
        errorCalls: 10632,
        successRate: 99,
        avgResponseTime: 150,
      },
      lastUpdated: "2023-07-15 13:45",
      trend: Array.from({ length: 7 }, (_, i) => ({
        date: `2023-07-${String(i + 9).padStart(2, "0")}`,
        calls: Math.floor(Math.random() * 15000) + 100000,
        success: Math.floor(Math.random() * 14000) + 98000,
        responseTime: Math.floor(Math.random() * 40) + 130,
      })),
      description: "更新用户标签信息",
      authentication: "OAuth 2.0",
    },
    {
      id: "3",
      name: "用户行为分析接口",
      endpoint: "/api/analytics/user-behavior",
      method: "GET",
      status: "active",
      stats: {
        totalCalls: 542367,
        successCalls: 538945,
        errorCalls: 3422,
        successRate: 99.5,
        avgResponseTime: 180,
      },
      lastUpdated: "2023-07-15 12:20",
      trend: Array.from({ length: 7 }, (_, i) => ({
        date: `2023-07-${String(i + 9).padStart(2, "0")}`,
        calls: Math.floor(Math.random() * 10000) + 70000,
        success: Math.floor(Math.random() * 9800) + 69000,
        responseTime: Math.floor(Math.random() * 30) + 170,
      })),
      description: "获取用户行为分析数据",
      authentication: "API Key",
    },
  ])

  const [isApiDocsOpen, setIsApiDocsOpen] = useState(false)
  const [selectedApiId, setSelectedApiId] = useState<string | null>(null)
  const [searchQuery, setSearchQuery] = useState("")

  const handleViewDocs = (apiId: string) => {
    setSelectedApiId(apiId)
    setIsApiDocsOpen(true)
  }

  const copyApi = (apiId: string) => {
    const apiToCopy = apis.find((api) => api.id === apiId)
    if (apiToCopy) {
      const newApi = {
        ...apiToCopy,
        id: `${Date.now()}`,
        name: `${apiToCopy.name} (副本)`,
        status: "inactive" as const,
        lastUpdated: new Date().toLocaleString(),
      }
      setApis([...apis, newApi])
      toast({
        title: "复制成功",
        description: "已创建接口副本",
      })
    }
  }

  const selectedApi = apis.find((api) => api.id === selectedApiId)

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center gap-2">
        <Button variant="ghost" size="icon" onClick={() => router.push("/data-platform")}>
          <ArrowLeft className="h-5 w-5" />
        </Button>
        <h1 className="text-3xl font-bold">API接口已整合</h1>
      </div>

      <Card className="border shadow-md">
        <CardHeader>
          <CardTitle>API接口已整合到数据中台</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="mb-4">API接口功能已经整合到数据中台中，请前往数据中台页面查看和管理API接口。</p>
          <Button onClick={() => router.push("/data-platform")}>前往数据中台</Button>
        </CardContent>
      </Card>
    </div>
  )
}