"use client"

import { Card, CardContent } from "@/components/ui/card"
import { PieChart, BarChart } from "@/components/charts"
import { Badge } from "@/components/ui/badge"

interface UserTagsDistributionProps {
  timeRange: string
}

export function UserTagsDistribution({ timeRange }: UserTagsDistributionProps) {
  // 这里应该根据timeRange从API获取实际数据

  // 模拟标签分类数据
  const tagCategories = [
    { name: "行为特征", count: 45, color: "bg-blue-100 text-blue-800" },
    { name: "偏好特征", count: 38, color: "bg-green-100 text-green-800" },
    { name: "价值特征", count: 22, color: "bg-purple-100 text-purple-800" },
    { name: "生命周期", count: 15, color: "bg-yellow-100 text-yellow-800" },
    { name: "渠道来源", count: 12, color: "bg-indigo-100 text-indigo-800" },
    { name: "社交属性", count: 8, color: "bg-pink-100 text-pink-800" },
  ]

  // 模拟热门标签数据
  const hotTags = [
    { name: "高价值用户", count: 12458, category: "价值特征" },
    { name: "活跃用户", count: 45678, category: "行为特征" },
    { name: "数据分析师", count: 8765, category: "职业角色" },
    { name: "营销决策者", count: 6543, category: "职业角色" },
    { name: "技术爱好者", count: 15432, category: "偏好特征" },
    { name: "潜在客户", count: 23456, category: "价值特征" },
    { name: "流失风险", count: 5678, category: "生命周期" },
    { name: "企业客户", count: 3456, category: "客户类型" },
    { name: "新注册用户", count: 7890, category: "生命周期" },
    { name: "社交活跃", count: 12345, category: "社交属性" },
  ]

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-4">标签分类分布</h3>
            <PieChart
              data={{
                labels: tagCategories.map((cat) => cat.name),
                datasets: [
                  {
                    data: tagCategories.map((cat) => cat.count),
                    backgroundColor: [
                      "rgb(59, 130, 246)",
                      "rgb(16, 185, 129)",
                      "rgb(139, 92, 246)",
                      "rgb(249, 115, 22)",
                      "rgb(99, 102, 241)",
                      "rgb(236, 72, 153)",
                    ],
                  },
                ],
              }}
              height={250}
            />
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-4">热门标签 Top 10</h3>
            <BarChart
              data={{
                labels: hotTags.map((tag) => tag.name),
                datasets: [
                  {
                    label: "用户数量",
                    data: hotTags.map((tag) => tag.count),
                    backgroundColor: "rgba(59, 130, 246, 0.8)",
                  },
                ],
              }}
              height={250}
            />
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardContent className="p-4">
          <h3 className="text-sm font-medium mb-4">标签分类详情</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {tagCategories.map((category) => (
              <div key={category.name} className="space-y-2">
                <div className="flex justify-between items-center">
                  <Badge className={category.color}>{category.name}</Badge>
                  <span className="text-sm text-muted-foreground">{category.count}个标签</span>
                </div>
                <div className="space-y-1">
                  {hotTags
                    .filter((tag) => tag.category === category.name)
                    .slice(0, 3)
                    .map((tag) => (
                      <div key={tag.name} className="flex justify-between items-center text-sm">
                        <span>{tag.name}</span>
                        <span className="text-muted-foreground">{(tag.count / 1000).toFixed(1)}k用户</span>
                      </div>
                    ))}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <h3 className="text-sm font-medium mb-4">标签覆盖率分析</h3>
          <div className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="bg-primary/10 rounded-lg p-4">
                <div className="text-sm text-muted-foreground">平均标签数/用户</div>
                <div className="text-2xl font-bold">5.8</div>
                <div className="text-xs text-green-600">较上月增长 0.3</div>
              </div>
              <div className="bg-primary/10 rounded-lg p-4">
                <div className="text-sm text-muted-foreground">标签覆盖率</div>
                <div className="text-2xl font-bold">92.5%</div>
                <div className="text-xs text-green-600">较上月提升 1.2%</div>
              </div>
              <div className="bg-primary/10 rounded-lg p-4">
                <div className="text-sm text-muted-foreground">标签准确率</div>
                <div className="text-2xl font-bold">87.3%</div>
                <div className="text-xs text-green-600">较上月提升 2.1%</div>
              </div>
            </div>

            <BarChart
              data={{
                labels: ["0个标签", "1-3个标签", "4-6个标签", "7-9个标签", "10个以上标签"],
                datasets: [
                  {
                    label: "用户数量",
                    data: [7500, 25000, 45000, 35000, 12500],
                    backgroundColor: "rgba(59, 130, 246, 0.8)",
                  },
                ],
              }}
              height={250}
            />
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
