"use client"

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

interface UserLifecycleAnalysisProps {
  timeRange: string
}

export function UserLifecycleAnalysis({ timeRange }: UserLifecycleAnalysisProps) {
  // 这里应该根据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,458</div>
          <div className="text-xs text-green-600">较上月增长 8.2%</div>
        </div>
        <div className="bg-primary/10 rounded-lg p-4">
          <div className="text-sm text-muted-foreground">用户留存率(30天)</div>
          <div className="text-2xl font-bold">68.5%</div>
          <div className="text-xs text-green-600">较上月提升 2.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">5.2%</div>
          <div className="text-xs text-green-600">较上月降低 0.8%</div>
        </div>
      </div>

      <Card>
        <CardContent className="p-4">
          <h3 className="text-sm font-medium mb-2">用户生命周期分布</h3>
          <BarChart
            data={{
              labels: ["获取阶段", "激活阶段", "留存阶段", "转化阶段", "忠诚阶段"],
              datasets: [
                {
                  label: "用户数量",
                  data: [25000, 18000, 12000, 8000, 5000],
                  backgroundColor: "rgba(59, 130, 246, 0.8)",
                },
              ],
            }}
            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>
            <LineChart
              data={{
                labels: ["1天", "7天", "14天", "30天", "60天", "90天", "180天", "365天"],
                datasets: [
                  {
                    label: "留存率",
                    data: [95, 85, 75, 68, 55, 42, 28, 15],
                    borderColor: "rgb(59, 130, 246)",
                    backgroundColor: "rgba(59, 130, 246, 0.1)",
                  },
                ],
              }}
              height={250}
            />
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-2">用户流失原因分析</h3>
            <BarChart
              data={{
                labels: ["产品体验差", "需求不匹配", "竞品转移", "价格因素", "服务问题", "其他原因"],
                datasets: [
                  {
                    label: "流失用户比例",
                    data: [35, 25, 20, 10, 8, 2],
                    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: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
              datasets: [
                {
                  label: "高价值用户比例",
                  data: [18, 19, 20, 22, 23, 24, 25],
                  borderColor: "rgb(16, 185, 129)",
                  backgroundColor: "rgba(16, 185, 129, 0.1)",
                },
                {
                  label: "中价值用户比例",
                  data: [42, 43, 44, 45, 45, 46, 45],
                  borderColor: "rgb(59, 130, 246)",
                  backgroundColor: "rgba(59, 130, 246, 0.1)",
                },
                {
                  label: "低价值用户比例",
                  data: [40, 38, 36, 33, 32, 30, 30],
                  borderColor: "rgb(156, 163, 175)",
                  backgroundColor: "rgba(156, 163, 175, 0.1)",
                },
              ],
            }}
            height={250}
          />
        </CardContent>
      </Card>
    </div>
  )
}