"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { BarChart, LineChart } from "@/components/charts"
import {
  Activity,
  ArrowUpRight,
  Download,
  Filter,
  RefreshCw,
  ShoppingCart,
  TrendingUp,
  MessageSquare,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function ConversionPage() {
  const [timeRange, setTimeRange] = useState("30days")

  return (
    <div className="container mx-auto p-4 space-y-6">
      {/* 页面标题和工具栏 */}
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold">成交转化</h1>
          <p className="text-muted-foreground mt-1">促进用户交易与转化的功能集合</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-[140px]">
              <SelectValue placeholder="选择时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7days">最近7天</SelectItem>
              <SelectItem value="30days">最近30天</SelectItem>
              <SelectItem value="90days">最近90天</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon">
            <Filter className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="icon">
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            导出报告
          </Button>
        </div>
      </div>

      {/* 成交转化概览 */}
      <Card className="border-none shadow-md overflow-hidden">
        <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>成交转化概览</CardTitle>
              <CardDescription>用户交易与转化整体情况</CardDescription>
            </div>
            <Button variant="outline">
              <ShoppingCart className="h-4 w-4 mr-2" />
              查看详情
            </Button>
          </div>
        </CardHeader>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-none shadow-sm">
              <CardContent className="p-4">
                <div className="flex justify-between items-start">
                  <div>
                    <div className="text-sm font-medium text-blue-600">浏览转化率</div>
                    <div className="text-2xl font-bold mt-2">45.2%</div>
                    <div className="text-sm text-green-600 mt-1 flex items-center">
                      <ArrowUpRight className="h-4 w-4 mr-1" />
                      较上月提升 2.1%
                    </div>
                  </div>
                  <div className="bg-blue-100 p-2 rounded-full">
                    <Activity className="h-5 w-5 text-blue-600" />
                  </div>
                </div>
                <div className="mt-3">
                  <div className="flex justify-between text-xs mb-1">
                    <span>目标</span>
                    <span>50%</span>
                  </div>
                  <Progress value={90.4} className="h-1.5 bg-blue-100" />
                </div>
              </CardContent>
            </Card>

            <Card className="bg-gradient-to-br from-green-50 to-emerald-50 border-none shadow-sm">
              <CardContent className="p-4">
                <div className="flex justify-between items-start">
                  <div>
                    <div className="text-sm font-medium text-green-600">购买转化率</div>
                    <div className="text-2xl font-bold mt-2">12.5%</div>
                    <div className="text-sm text-green-600 mt-1 flex items-center">
                      <ArrowUpRight className="h-4 w-4 mr-1" />
                      较上月提升 0.8%
                    </div>
                  </div>
                  <div className="bg-green-100 p-2 rounded-full">
                    <ShoppingCart className="h-5 w-5 text-green-600" />
                  </div>
                </div>
                <div className="mt-3">
                  <div className="flex justify-between text-xs mb-1">
                    <span>目标</span>
                    <span>15%</span>
                  </div>
                  <Progress value={83.3} className="h-1.5 bg-green-100" />
                </div>
              </CardContent>
            </Card>

            <Card className="bg-gradient-to-br from-purple-50 to-pink-50 border-none shadow-sm">
              <CardContent className="p-4">
                <div className="flex justify-between items-start">
                  <div>
                    <div className="text-sm font-medium text-purple-600">场景转化率</div>
                    <div className="text-2xl font-bold mt-2">18.3%</div>
                    <div className="text-sm text-green-600 mt-1 flex items-center">
                      <ArrowUpRight className="h-4 w-4 mr-1" />
                      较上月提升 1.2%
                    </div>
                  </div>
                  <div className="bg-purple-100 p-2 rounded-full">
                    <MessageSquare className="h-5 w-5 text-purple-600" />
                  </div>
                </div>
                <div className="mt-3">
                  <div className="flex justify-between text-xs mb-1">
                    <span>目标</span>
                    <span>20%</span>
                  </div>
                  <Progress value={91.5} className="h-1.5 bg-purple-100" />
                </div>
              </CardContent>
            </Card>

            <Card className="bg-gradient-to-br from-amber-50 to-yellow-50 border-none shadow-sm">
              <CardContent className="p-4">
                <div className="flex justify-between items-start">
                  <div>
                    <div className="text-sm font-medium text-amber-600">客单价</div>
                    <div className="text-2xl font-bold mt-2">¥245</div>
                    <div className="text-sm text-green-600 mt-1 flex items-center">
                      <ArrowUpRight className="h-4 w-4 mr-1" />
                      较上月提升 5.2%
                    </div>
                  </div>
                  <div className="bg-amber-100 p-2 rounded-full">
                    <TrendingUp className="h-5 w-5 text-amber-600" />
                  </div>
                </div>
                <div className="mt-3">
                  <div className="flex justify-between text-xs mb-1">
                    <span>目标</span>
                    <span>¥250</span>
                  </div>
                  <Progress value={98} className="h-1.5 bg-amber-100" />
                </div>
              </CardContent>
            </Card>
          </div>
        </CardContent>
      </Card>

      {/* 用户行为分析 */}
      <Card className="border-none shadow-md overflow-hidden">
        <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>用户行为分析</CardTitle>
              <CardDescription>用户行为与交互数据分析</CardDescription>
            </div>
            <Badge className="bg-blue-100 text-blue-800">转化</Badge>
          </div>
        </CardHeader>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <h3 className="text-lg font-medium mb-3">用户行为分析</h3>
              <BarChart
                data={{
                  labels: ["浏览", "搜索", "点击", "加购", "下单", "支付", "分享"],
                  datasets: [
                    {
                      label: "行为占比(%)",
                      data: [100, 65, 45, 25, 15, 12, 8],
                      backgroundColor: "rgba(59, 130, 246, 0.8)",
                    },
                  ],
                }}
                height={220}
              />
            </div>
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <h3 className="text-lg font-medium mb-3">用户活跃度分析</h3>
              <LineChart
                data={{
                  labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                  datasets: [
                    {
                      label: "活跃用户数",
                      data: [65000, 59000, 80000, 81000, 56000, 85000, 90000],
                      borderColor: "rgb(59, 130, 246)",
                      backgroundColor: "rgba(59, 130, 246, 0.1)",
                    },
                    {
                      label: "平均停留时间(分钟)",
                      data: [12, 10, 14, 15, 11, 18, 20],
                      borderColor: "rgb(16, 185, 129)",
                      backgroundColor: "rgba(16, 185, 129, 0.1)",
                    },
                  ],
                }}
                height={220}
              />
            </div>
          </div>

          <div className="mt-4">
            <Card className="bg-white shadow-sm">
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">用户行为指标</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <div className="flex justify-between items-center">
                      <span className="text-sm">平均活跃度</span>
                      <span className="text-sm font-medium">68.5%</span>
                    </div>
                    <Progress value={68.5} className="h-1.5" />
                  </div>

                  <div className="space-y-2">
                    <div className="flex justify-between items-center">
                      <span className="text-sm">平均停留时间</span>
                      <span className="text-sm font-medium">12.5分钟</span>
                    </div>
                    <Progress value={62.5} className="h-1.5" />
                  </div>

                  <div className="space-y-2">
                    <div className="flex justify-between items-center">
                      <span className="text-sm">互动率</span>
                      <span className="text-sm font-medium">45.2%</span>
                    </div>
                    <Progress value={45.2} className="h-1.5" />
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </CardContent>
      </Card>

      {/* 交易漏斗分析 */}
      <Card className="border-none shadow-md overflow-hidden">
        <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b">
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>交易漏斗分析</CardTitle>
              <CardDescription>用户交易转化漏斗分析</CardDescription>
            </div>
            <Badge className="bg-blue-100 text-blue-800">转化</Badge>
          </div>
        </CardHeader>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <h3 className="text-lg font-medium mb-3">转化漏斗</h3>
              <div className="flex flex-col items-center space-y-2 py-4">
                <div className="w-full max-w-md">
                  <div className="relative pt-1">
                    <div className="flex mb-2 items-center justify-between">
                      <div>
                        <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200">
                          浏览 (100%)
                        </span>
                      </div>
                      <div className="text-right">
                        <span className="text-xs font-semibold inline-block text-blue-600">125,689</span>
                      </div>
                    </div>
                    <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blue-200">
                      <div
                        style={{ width: "100%" }}
                        className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"
                      ></div>
                    </div>
                  </div>
                </div>

                <div className="w-full max-w-md">
                  <div className="relative pt-1">
                    <div className="flex mb-2 items-center justify-between">
                      <div>
                        <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200">
                          加入购物车 (45%)
                        </span>
                      </div>
                      <div className="text-right">
                        <span className="text-xs font-semibold inline-block text-blue-600">56,560</span>
                      </div>
                    </div>
                    <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blue-200">
                      <div
                        style={{ width: "45%" }}
                        className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"
                      ></div>
                    </div>
                  </div>
                </div>

                <div className="w-full max-w-md">
                  <div className="relative pt-1">
                    <div className="flex mb-2 items-center justify-between">
                      <div>
                        <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-yellow-600 bg-yellow-200">
                          下单 (18%)
                        </span>
                      </div>
                      <div className="text-right">
                        <span className="text-xs font-semibold inline-block text-yellow-600">22,624</span>
                      </div>
                    </div>
                    <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-yellow-200">
                      <div
                        style={{ width: "18%" }}
                        className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500"
                      ></div>
                    </div>
                  </div>
                </div>

                <div className="w-full max-w-md">
                  <div className="relative pt-1">
                    <div className="flex mb-2 items-center justify-between">
                      <div>
                        <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-green-600 bg-green-200">
                          支付完成 (8%)
                        </span>
                      </div>
                      <div className="text-right">
                        <span className="text-xs font-semibold inline-block text-green-600">10,055</span>
                      </div>
                    </div>
                    <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-green-200">
                      <div
                        style={{ width: "8%" }}
                        className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <h3 className="text-lg font-medium mb-3">转化率趋势</h3>
              <LineChart
                data={{
                  labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                  datasets: [
                    {
                      label: "浏览转化率",
                      data: [40, 42, 43, 44, 45, 46, 45],
                      borderColor: "rgb(59, 130, 246)",
                      backgroundColor: "rgba(59, 130, 246, 0.1)",
                    },
                    {
                      label: "购买转化率",
                      data: [15, 16, 16.5, 17, 17.5, 18, 18],
                      borderColor: "rgb(16, 185, 129)",
                      backgroundColor: "rgba(16, 185, 129, 0.1)",
                    },
                  ],
                }}
                height={220}
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 场景管理 */}
      <Card className="border-none shadow-md overflow-hidden">
        <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b">
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>场景管理</CardTitle>
              <CardDescription>用户交互场景管理与分析</CardDescription>
            </div>
            <Badge className="bg-blue-100 text-blue-800">转化</Badge>
          </div>
        </CardHeader>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card className="bg-white shadow-sm">
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">场景概览</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="text-sm">活跃场景数</span>
                    <span className="text-sm font-medium">48</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">场景转化率</span>
                    <span className="text-sm font-medium">18.3%</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">场景覆盖率</span>
                    <span className="text-sm font-medium">85.2%</span>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-white shadow-sm">
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">热门场景</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="text-sm">社交场景</span>
                    <span className="text-sm font-medium">35%</span>
                  </div>
                  <Progress value={35} className="h-1.5" />

                  <div className="flex justify-between items-center mt-2">
                    <span className="text-sm">购物场景</span>
                    <span className="text-sm font-medium">30%</span>
                  </div>
                  <Progress value={30} className="h-1.5" />

                  <div className="flex justify-between items-center mt-2">
                    <span className="text-sm">内容消费</span>
                    <span className="text-sm font-medium">20%</span>
                  </div>
                  <Progress value={20} className="h-1.5" />
                </div>
              </CardContent>
            </Card>

            <Card className="bg-white shadow-sm">
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">场景效果</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="text-sm">平均停留时间</span>
                    <span className="text-sm font-medium">8.5分钟</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">互动率</span>
                    <span className="text-sm font-medium">42.3%</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">转化率</span>
                    <span className="text-sm font-medium">18.3%</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          <div className="mt-4">
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <h3 className="text-lg font-medium mb-3">场景使用趋势</h3>
              <LineChart
                data={{
                  labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                  datasets: [
                    {
                      label: "社交场景",
                      data: [25000, 27000, 28000, 30000, 32000, 35000, 38000],
                      borderColor: "rgb(59, 130, 246)",
                      backgroundColor: "rgba(59, 130, 246, 0.1)",
                    },
                    {
                      label: "购物场景",
                      data: [20000, 22000, 24000, 25000, 28000, 30000, 32000],
                      borderColor: "rgb(16, 185, 129)",
                      backgroundColor: "rgba(16, 185, 129, 0.1)",
                    },
                  ],
                }}
                height={220}
              />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}