"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Loader2 } from "lucide-react"

interface Count {
  count: number
}

export default function DatabaseStats() {
  const [videoCount, setVideoCount] = useState<Count | null>(null)
  const [uploaderCount, setUploaderCount] = useState<Count | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    const fetchCounts = async () => {
      try {
        setLoading(true)
        const videoResponse = await fetch("https://v-api-proxy-cn-1.mei.lv:3389/basic/v1/database/video_count")
        const uploaderResponse = await fetch("https://v-api-proxy-cn-1.mei.lv:3389/basic/v1/database/uploader_count")

        if (!videoResponse.ok || !uploaderResponse.ok) {
          throw new Error("服务器响应错误")
        }

        const videoData = await videoResponse.json()
        const uploaderData = await uploaderResponse.json()

        setVideoCount(videoData)
        setUploaderCount(uploaderData)
      } catch (error) {
        console.error("获取数据库统计信息时出错:", error)
        setError("无法获取数据库统计信息")
      } finally {
        setLoading(false)
      }
    }

    fetchCounts()
  }, [])

  return (
    <Card className="mt-8 bg-gradient-to-br from-pink-100 to-indigo-100">
      <CardHeader>
        <CardTitle className="text-2xl font-bold text-primary">数据库统计</CardTitle>
      </CardHeader>
      <CardContent>
        {loading ? (
          <div className="flex items-center justify-center">
            <Loader2 className="h-8 w-8 animate-spin text-primary" />
          </div>
        ) : error ? (
          <p className="text-red-500">{error}</p>
        ) : (
          <div className="grid grid-cols-2 gap-4">
            <div className="text-center">
              <h3 className="font-bold text-xl mb-2">视频数量</h3>
              <p className="text-2xl text-primary">{videoCount ? videoCount.count.toLocaleString() : "暂无数据"}</p>
            </div>
            <div className="text-center">
              <h3 className="font-bold text-xl mb-2">UP主数量</h3>
              <p className="text-2xl text-primary">
                {uploaderCount ? uploaderCount.count.toLocaleString() : "暂无数据"}
              </p>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}