"use client"

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

interface UserPortraitOverviewProps {
  timeRange: string
}

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

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-2">用户性别分布</h3>
            <PieChart
              data={{
                labels: ["男性", "女性", "未知"],
                datasets: [
                  {
                    data: [45, 52, 3],
                    backgroundColor: ["rgb(59, 130, 246)", "rgb(236, 72, 153)", "rgb(156, 163, 175)"],
                  },
                ],
              }}
              height={180}
            />
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-2">用户年龄分布</h3>
            <PieChart
              data={{
                labels: ["18岁以下", "18-24岁", "25-34岁", "35-44岁", "45-54岁", "55岁以上"],
                datasets: [
                  {
                    data: [5, 25, 40, 20, 7, 3],
                    backgroundColor: [
                      "rgb(59, 130, 246)",
                      "rgb(16, 185, 129)",
                      "rgb(249, 115, 22)",
                      "rgb(139, 92, 246)",
                      "rgb(236, 72, 153)",
                      "rgb(156, 163, 175)",
                    ],
                  },
                ],
              }}
              height={180}
            />
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-2">用户价值分布</h3>
            <PieChart
              data={{
                labels: ["高价值", "中价值", "低价值"],
                datasets: [
                  {
                    data: [25, 45, 30],
                    backgroundColor: ["rgb(16, 185, 129)", "rgb(59, 130, 246)", "rgb(156, 163, 175)"],
                  },
                ],
              }}
              height={180}
            />
          </CardContent>
        </Card>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-2">地域分布 Top 10</h3>
            <BarChart
              data={{
                labels: ["北京", "上海", "广东", "浙江", "江苏", "四川", "湖北", "福建", "山东", "河南"],
                datasets: [
                  {
                    label: "用户数量",
                    data: [3200, 2800, 4500, 2100, 1900, 1600, 1400, 1200, 1100, 900],
                    backgroundColor: "rgba(59, 130, 246, 0.8)",
                  },
                ],
              }}
              height={250}
            />
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-2">职业分布</h3>
            <BarChart
              data={{
                labels: ["学生", "企业员工", "自由职业", "企业管理者", "公务员", "其他"],
                datasets: [
                  {
                    label: "用户数量",
                    data: [15000, 35000, 20000, 18000, 7000, 5000],
                    backgroundColor: "rgba(59, 130, 246, 0.8)",
                  },
                ],
              }}
              height={250}
            />
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardContent className="p-4">
          <h3 className="text-sm font-medium mb-2">兴趣标签分布</h3>
          <BarChart
            data={{
              labels: ["科技", "金融", "教育", "旅游", "健康", "美食", "时尚", "体育", "娱乐", "汽车"],
              datasets: [
                {
                  label: "用户数量",
                  data: [6500, 4800, 3900, 5200, 4100, 6800, 3500, 2900, 5500, 3200],
                  backgroundColor: "rgba(59, 130, 246, 0.8)",
                },
              ],
            }}
            height={250}
          />
        </CardContent>
      </Card>
    </div>
  )
}