"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { 
  Users, Database, Tag, Bot, Package, TrendingUp, 
  TrendingDown, Activity, BarChart3, PieChart
} from "lucide-react"

const businessMetrics = [
  {
    title: "用户总量",
    value: "1,256,890",
    change: "+12.5%",
    trend: "up",
    description: "累计注册用户数",
    icon: Users,
  },
  {
    title: "日活用户",
    value: "125,680",
    change: "+8.2%",
    trend: "up",
    description: "今日活跃用户数",
    icon: Activity,
  },
  {
    title: "标签覆盖率",
    value: "92.5%",
    change: "+2.1%",
    trend: "up",
    description: "有标签的用户占比",
    icon: Tag,
  },
  {
    title: "AI处理量",
    value: "45,280",
    change: "+25.6%",
    trend: "up",
    description: "今日AI处理记录数",
    icon: Bot,
  },
]

const dataMetrics = [
  { name: "数据接入量", today: "1.2M", week: "8.5M", month: "32M" },
  { name: "标签计算量", today: "850K", week: "5.2M", month: "21M" },
  { name: "API调用量", today: "125K", week: "890K", month: "3.5M" },
  { name: "流量包下载", today: "23", week: "156", month: "620" },
]

export default function MetricsPage() {
  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">业务指标</h1>
          <p className="text-muted-foreground">核心业务数据和运营指标</p>
        </div>
        <Select defaultValue="today">
          <SelectTrigger className="w-36">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="today">今日</SelectItem>
            <SelectItem value="week">本周</SelectItem>
            <SelectItem value="month">本月</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 核心指标 */}
      <div className="grid gap-4 md:grid-cols-4">
        {businessMetrics.map((metric) => (
          <Card key={metric.title}>
            <CardContent className="pt-6">
              <div className="flex items-start justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">{metric.title}</p>
                  <p className="text-2xl font-bold mt-1">{metric.value}</p>
                  <div className="flex items-center gap-1 mt-1">
                    {metric.trend === "up" ? (
                      <TrendingUp className="h-4 w-4 text-green-500" />
                    ) : (
                      <TrendingDown className="h-4 w-4 text-red-500" />
                    )}
                    <span className={`text-sm ${metric.trend === "up" ? "text-green-600" : "text-red-600"}`}>
                      {metric.change}
                    </span>
                  </div>
                </div>
                <div className="p-2 rounded-lg bg-primary/10">
                  <metric.icon className="h-6 w-6 text-primary" />
                </div>
              </div>
              <p className="text-xs text-muted-foreground mt-2">{metric.description}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* 数据处理统计 */}
      <Card>
        <CardHeader>
          <CardTitle>数据处理统计</CardTitle>
          <CardDescription>各模块数据处理量统计</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-4">
            {dataMetrics.map((metric) => (
              <div key={metric.name} className="p-4 border rounded-lg">
                <p className="font-medium mb-3">{metric.name}</p>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">今日</span>
                    <span className="font-bold">{metric.today}</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">本周</span>
                    <span className="font-medium">{metric.week}</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">本月</span>
                    <span className="font-medium">{metric.month}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 趋势图表 */}
      <div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <BarChart3 className="h-5 w-5" />
              用户增长趋势
            </CardTitle>
            <CardDescription>最近30天新增用户数</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-64 flex items-end justify-between gap-1">
              {Array.from({ length: 30 }).map((_, i) => (
                <div
                  key={i}
                  className="flex-1 bg-primary/20 hover:bg-primary/40 rounded-t transition-colors"
                  style={{ height: `${30 + Math.random() * 70}%` }}
                />
              ))}
            </div>
            <div className="flex justify-between text-xs text-muted-foreground mt-2">
              <span>30天前</span>
              <span>今天</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <PieChart className="h-5 w-5" />
              用户分布
            </CardTitle>
            <CardDescription>按价值等级分布</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-center h-64">
              <div className="relative w-48 h-48">
                <svg viewBox="0 0 100 100" className="transform -rotate-90">
                  <circle cx="50" cy="50" r="40" fill="none" stroke="#e5e7eb" strokeWidth="20" />
                  <circle 
                    cx="50" cy="50" r="40" fill="none" 
                    stroke="#3b82f6" strokeWidth="20"
                    strokeDasharray="75.4 251.2"
                  />
                  <circle 
                    cx="50" cy="50" r="40" fill="none" 
                    stroke="#10b981" strokeWidth="20"
                    strokeDasharray="50.3 251.2"
                    strokeDashoffset="-75.4"
                  />
                  <circle 
                    cx="50" cy="50" r="40" fill="none" 
                    stroke="#f59e0b" strokeWidth="20"
                    strokeDasharray="62.8 251.2"
                    strokeDashoffset="-125.7"
                  />
                  <circle 
                    cx="50" cy="50" r="40" fill="none" 
                    stroke="#ef4444" strokeWidth="20"
                    strokeDasharray="62.7 251.2"
                    strokeDashoffset="-188.5"
                  />
                </svg>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-2 mt-4">
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-blue-500" />
                <span className="text-sm">高价值 (30%)</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-green-500" />
                <span className="text-sm">中价值 (20%)</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-yellow-500" />
                <span className="text-sm">潜力 (25%)</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-red-500" />
                <span className="text-sm">低价值 (25%)</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}