"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import { LineChart, BarChart } from "@/components/charts"
import { Download, ChevronDown, ChevronRight } from "lucide-react"
import { useState } from "react"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"

export function UserProfileAnalytics() {
  const [openSections, setOpenSections] = useState({
    valueAnalysis: true,
    behaviorAnalysis: false,
    lifecycleAnalysis: false,
    conversionAnalysis: false,
  })

  const toggleSection = (section) => {
    setOpenSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold">用户画像深度分析</h2>
        <div className="flex space-x-2">
          <Select defaultValue="30days">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="选择时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7days">最近7天</SelectItem>
              <SelectItem value="30days">最近30天</SelectItem>
              <SelectItem value="90days">最近90天</SelectItem>
              <SelectItem value="custom">自定义范围</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            导出数据
          </Button>
        </div>
      </div>

      <Tabs defaultValue="value">
        <TabsList>
          <TabsTrigger value="value">价值分析</TabsTrigger>
          <TabsTrigger value="behavior">行为分析</TabsTrigger>
          <TabsTrigger value="lifecycle">生命周期</TabsTrigger>
          <TabsTrigger value="conversion">转化路径</TabsTrigger>
        </TabsList>
        <TabsContent value="value" className="space-y-4 pt-4">
          <Collapsible open={openSections.valueAnalysis} onOpenChange={() => toggleSection("valueAnalysis")}>
            <Card className="border shadow-sm">
              <CardHeader className="pb-2">
                <CollapsibleTrigger className="flex justify-between items-center w-full">
                  <CardTitle className="text-base font-medium">用户价值分布趋势</CardTitle>
                  {openSections.valueAnalysis ? (
                    <ChevronDown className="h-4 w-4" />
                  ) : (
                    <ChevronRight className="h-4 w-4" />
                  )}
                </CollapsibleTrigger>
              </CardHeader>
              <CollapsibleContent>
                <CardContent>
                  <LineChart
                    data={{
                      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                      datasets: [
                        {
                          label: "高价值用户",
                          data: [1200, 1350, 1500, 1680, 1850, 2100, 2450],
                          borderColor: "rgba(16, 185, 129, 0.7)",
                          backgroundColor: "rgba(16, 185, 129, 0.1)",
                        },
                        {
                          label: "中价值用户",
                          data: [5600, 6200, 6800, 7500, 8200, 9000, 9800],
                          borderColor: "rgba(59, 130, 246, 0.7)",
                          backgroundColor: "rgba(59, 130, 246, 0.1)",
                        },
                        {
                          label: "低价值用户",
                          data: [8200, 8500, 8900, 9300, 9800, 10500, 11200],
                          borderColor: "rgba(156, 163, 175, 0.7)",
                          backgroundColor: "rgba(156, 163, 175, 0.1)",
                        },
                      ],
                    }}
                    height={300}
                  />
                </CardContent>
              </CollapsibleContent>
            </Card>
          </Collapsible>
        </TabsContent>
        <TabsContent value="behavior" className="space-y-4 pt-4">
          <Collapsible open={openSections.behaviorAnalysis} onOpenChange={() => toggleSection("behaviorAnalysis")}>
            <Card className="border shadow-sm">
              <CardHeader className="pb-2">
                <CollapsibleTrigger className="flex justify-between items-center w-full">
                  <CardTitle className="text-base font-medium">用户行为轨迹分析</CardTitle>
                  {openSections.behaviorAnalysis ? (
                    <ChevronDown className="h-4 w-4" />
                  ) : (
                    <ChevronRight className="h-4 w-4" />
                  )}
                </CollapsibleTrigger>
              </CardHeader>
              <CollapsibleContent>
                <CardContent>
                  <LineChart
                    data={{
                      labels: ["浏览", "搜索", "加入购物车", "下单", "支付", "评价", "复购"],
                      datasets: [
                        {
                          label: "高价值用户",
                          data: [100, 95, 85, 80, 78, 65, 60],
                          borderColor: "rgba(16, 185, 129, 0.7)",
                          backgroundColor: "rgba(16, 185, 129, 0.1)",
                        },
                        {
                          label: "中价值用户",
                          data: [100, 85, 65, 55, 50, 35, 25],
                          borderColor: "rgba(59, 130, 246, 0.7)",
                          backgroundColor: "rgba(59, 130, 246, 0.1)",
                        },
                        {
                          label: "低价值用户",
                          data: [100, 70, 40, 25, 20, 10, 5],
                          borderColor: "rgba(156, 163, 175, 0.7)",
                          backgroundColor: "rgba(156, 163, 175, 0.1)",
                        },
                      ],
                    }}
                    height={300}
                  />
                </CardContent>
              </CollapsibleContent>
            </Card>
          </Collapsible>
        </TabsContent>
        <TabsContent value="lifecycle" className="space-y-4 pt-4">
          <Collapsible open={openSections.lifecycleAnalysis} onOpenChange={() => toggleSection("lifecycleAnalysis")}>
            <Card className="border shadow-sm">
              <CardHeader className="pb-2">
                <CollapsibleTrigger className="flex justify-between items-center w-full">
                  <CardTitle className="text-base font-medium">用户生命周期分布</CardTitle>
                  {openSections.lifecycleAnalysis ? (
                    <ChevronDown className="h-4 w-4" />
                  ) : (
                    <ChevronRight className="h-4 w-4" />
                  )}
                </CollapsibleTrigger>
              </CardHeader>
              <CollapsibleContent>
                <CardContent>
                  <BarChart
                    data={{
                      labels: ["获取阶段", "激活阶段", "留存阶段", "转化阶段", "忠诚阶段"],
                      datasets: [
                        {
                          label: "用户数量",
                          data: [12500, 8600, 6200, 4800, 2450],
                          backgroundColor: "rgba(59, 130, 246, 0.7)",
                        },
                      ],
                    }}
                    height={300}
                  />
                </CardContent>
              </CollapsibleContent>
            </Card>
          </Collapsible>
        </TabsContent>
        <TabsContent value="conversion" className="space-y-4 pt-4">
          <Collapsible open={openSections.conversionAnalysis} onOpenChange={() => toggleSection("conversionAnalysis")}>
            <Card className="border shadow-sm">
              <CardHeader className="pb-2">
                <CollapsibleTrigger className="flex justify-between items-center w-full">
                  <CardTitle className="text-base font-medium">用户转化路径分析</CardTitle>
                  {openSections.conversionAnalysis ? (
                    <ChevronDown className="h-4 w-4" />
                  ) : (
                    <ChevronRight className="h-4 w-4" />
                  )}
                </CollapsibleTrigger>
              </CardHeader>
              <CollapsibleContent>
                <CardContent>
                  <LineChart
                    data={{
                      labels: ["访问", "注册", "浏览产品", "加入购物车", "下单", "支付", "复购"],
                      datasets: [
                        {
                          label: "转化率",
                          data: [100, 45, 38, 25, 18, 15, 8],
                          borderColor: "rgba(59, 130, 246, 0.7)",
                          backgroundColor: "rgba(59, 130, 246, 0.1)",
                        },
                      ],
                    }}
                    height={300}
                  />
                </CardContent>
              </CollapsibleContent>
            </Card>
          </Collapsible>
        </TabsContent>
      </Tabs>
    </div>
  )
}