"use client"

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

interface UserBehaviorAnalysisProps {
  timeRange: string
}

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

  return (
    <div className="space-y-6">
      <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">12.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">42分钟</div>
          <div className="text-xs text-green-600">较上月增长 5分钟</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">8.3</div>
          <div className="text-xs text-green-600">较上月增长 0.5</div>
        </div>
      </div>

      <Card>
        <CardContent className="p-4">
          <h3 className="text-sm font-medium mb-2">用户活跃度趋势</h3>
          <LineChart
            data={{
              labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
              datasets: [
                {
                  label: "日活跃用户",
                  data: [45000, 48000, 52000, 55000, 58000, 62000, 65000],
                  borderColor: "rgb(59, 130, 246)",
                  backgroundColor: "rgba(59, 130, 246, 0.1)",
                },
                {
                  label: "周活跃用户",
                  data: [75000, 78000, 82000, 85000, 88000, 92000, 95000],
                  borderColor: "rgb(16, 185, 129)",
                  backgroundColor: "rgba(16, 185, 129, 0.1)",
                },
                {
                  label: "月活跃用户",
                  data: [95000, 98000, 102000, 105000, 108000, 112000, 115000],
                  borderColor: "rgb(249, 115, 22)",
                  backgroundColor: "rgba(249, 115, 22, 0.1)",
                },
              ],
            }}
            height={250}
          />
        </CardContent>
      </Card>

      <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">活跃时段分布</h3>
            <BarChart
              data={{
                labels: ["0-3点", "3-6点", "6-9点", "9-12点", "12-15点", "15-18点", "18-21点", "21-24点"],
                datasets: [
                  {
                    label: "活跃用户数",
                    data: [8000, 4000, 25000, 58000, 42000, 38000, 75000, 62000],
                    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: ["iOS", "Android", "Windows", "MacOS", "其他"],
                datasets: [
                  {
                    label: "用户数量",
                    data: [52000, 55000, 10000, 5000, 1000],
                    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>
          <LineChart
            data={{
              labels: ["浏览", "搜索", "加入购物车", "下单", "支付", "评价", "复购"],
              datasets: [
                {
                  label: "高价值用户",
                  data: [100, 95, 85, 80, 78, 65, 60],
                  borderColor: "rgb(16, 185, 129)",
                  backgroundColor: "rgba(16, 185, 129, 0.1)",
                },
                {
                  label: "中价值用户",
                  data: [100, 85, 65, 55, 50, 35, 25],
                  borderColor: "rgb(59, 130, 246)",
                  backgroundColor: "rgba(59, 130, 246, 0.1)",
                },
                {
                  label: "低价值用户",
                  data: [100, 70, 40, 25, 20, 10, 5],
                  borderColor: "rgb(156, 163, 175)",
                  backgroundColor: "rgba(156, 163, 175, 0.1)",
                },
              ],
            }}
            height={250}
          />
        </CardContent>
      </Card>
    </div>
  )
}