"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { PieChart, BarChart, LineChart } from "@/components/charts"
import {
  Activity,
  Filter,
  Plus,
  RefreshCw,
  Search,
  MessageSquare,
  ShoppingCart,
  FileText,
  CreditCard,
  Users,
} from "lucide-react"

export default function ScenariosPage() {
  const [scenarioType, setScenarioType] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")

  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">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            创建场景
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="bg-white shadow-sm">
          <CardContent className="p-4 flex items-center">
            <div className="bg-blue-100 p-2 rounded-full mr-3">
              <MessageSquare className="h-5 w-5 text-blue-600" />
            </div>
            <div>
              <div className="text-sm font-medium text-gray-600">场景总数</div>
              <div className="text-xl font-bold">48</div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-white shadow-sm">
          <CardContent className="p-4 flex items-center">
            <div className="bg-green-100 p-2 rounded-full mr-3">
              <Users className="h-5 w-5 text-green-600" />
            </div>
            <div>
              <div className="text-sm font-medium text-gray-600">覆盖用户</div>
              <div className="text-xl font-bold">98,765</div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-white shadow-sm">
          <CardContent className="p-4 flex items-center">
            <div className="bg-purple-100 p-2 rounded-full mr-3">
              <Activity className="h-5 w-5 text-purple-600" />
            </div>
            <div>
              <div className="text-sm font-medium text-gray-600">平均转化率</div>
              <div className="text-xl font-bold">12.2%</div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-white shadow-sm">
          <CardContent className="p-4 flex items-center">
            <div className="bg-amber-100 p-2 rounded-full mr-3">
              <CreditCard className="h-5 w-5 text-amber-600" />
            </div>
            <div>
              <div className="text-sm font-medium text-gray-600">平均客单价</div>
              <div className="text-xl font-bold">¥1,850</div>
            </div>
          </CardContent>
        </Card>
      </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>
          </div>
        </CardHeader>
        <CardContent className="p-4">
          <Tabs defaultValue="overview" className="space-y-4">
            <TabsList className="grid grid-cols-3 w-full">
              <TabsTrigger value="overview">场景概览</TabsTrigger>
              <TabsTrigger value="conversion">转化分析</TabsTrigger>
              <TabsTrigger value="behavior">行为分析</TabsTrigger>
            </TabsList>

            <TabsContent value="overview" className="space-y-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>
                  <PieChart
                    data={{
                      labels: ["社交场景", "购物场景", "内容消费", "服务咨询", "金融场景"],
                      datasets: [
                        {
                          data: [35, 30, 20, 10, 5],
                          backgroundColor: [
                            "rgb(59, 130, 246)",
                            "rgb(16, 185, 129)",
                            "rgb(249, 115, 22)",
                            "rgb(139, 92, 246)",
                            "rgb(156, 163, 175)",
                          ],
                        },
                      ],
                    }}
                    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: ["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>
            </TabsContent>

            <TabsContent value="conversion" className="space-y-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: [12.5, 18.7, 8.3, 6.2, 15.4],
                          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: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                      datasets: [
                        {
                          label: "平均转化率",
                          data: [8.5, 9.2, 10.1, 10.8, 11.5, 12.0, 12.2],
                          borderColor: "rgb(59, 130, 246)",
                          backgroundColor: "rgba(59, 130, 246, 0.1)",
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
              </div>
            </TabsContent>

            <TabsContent value="behavior" className="space-y-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>
                  <PieChart
                    data={{
                      labels: ["浏览", "互动", "分享", "评论", "购买"],
                      datasets: [
                        {
                          data: [45, 25, 15, 10, 5],
                          backgroundColor: [
                            "rgb(59, 130, 246)",
                            "rgb(16, 185, 129)",
                            "rgb(249, 115, 22)",
                            "rgb(139, 92, 246)",
                            "rgb(156, 163, 175)",
                          ],
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
                <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: [12.5, 8.7, 15.3, 6.2, 4.4],
                          backgroundColor: "rgba(59, 130, 246, 0.8)",
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>

      <Card className="border-none shadow-md overflow-hidden">
        <CardHeader className="bg-white border-b">
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>场景列表</CardTitle>
              <CardDescription>查看和管理所有场景</CardDescription>
            </div>
            <div className="flex items-center space-x-2">
              <div className="relative">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder="搜索场景..."
                  className="pl-8 w-[200px] md:w-[300px]"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <Select value={scenarioType} onValueChange={setScenarioType}>
                <SelectTrigger className="w-[150px]">
                  <SelectValue placeholder="场景类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部类型</SelectItem>
                  <SelectItem value="social">社交场景</SelectItem>
                  <SelectItem value="shopping">购物场景</SelectItem>
                  <SelectItem value="content">内容消费</SelectItem>
                  <SelectItem value="service">服务咨询</SelectItem>
                  <SelectItem value="finance">金融场景</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>
            </div>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50">
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">场景ID</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">场景名称</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">场景类型</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">覆盖用户</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">转化率</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">创建时间</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">操作</th>
                </tr>
              </thead>
              <tbody className="divide-y">
                {[
                  {
                    id: "SCN-001",
                    name: "社交互动推荐",
                    type: "社交场景",
                    users: 25678,
                    conversion: 12.5,
                    created: "2023-05-15",
                  },
                  {
                    id: "SCN-002",
                    name: "商品购买流程",
                    type: "购物场景",
                    users: 18765,
                    conversion: 18.7,
                    created: "2023-05-20",
                  },
                  {
                    id: "SCN-003",
                    name: "视频内容推荐",
                    type: "内容消费",
                    users: 32456,
                    conversion: 8.3,
                    created: "2023-06-01",
                  },
                  {
                    id: "SCN-004",
                    name: "客服咨询入口",
                    type: "服务咨询",
                    users: 12345,
                    conversion: 6.2,
                    created: "2023-06-10",
                  },
                  {
                    id: "SCN-005",
                    name: "支付流程优化",
                    type: "金融场景",
                    users: 8765,
                    conversion: 15.4,
                    created: "2023-06-15",
                  },
                  {
                    id: "SCN-006",
                    name: "社区讨论互动",
                    type: "社交场景",
                    users: 15432,
                    conversion: 10.8,
                    created: "2023-06-20",
                  },
                  {
                    id: "SCN-007",
                    name: "促销活动推荐",
                    type: "购物场景",
                    users: 21345,
                    conversion: 16.2,
                    created: "2023-06-25",
                  },
                  {
                    id: "SCN-008",
                    name: "文章阅读推荐",
                    type: "内容消费",
                    users: 18765,
                    conversion: 7.5,
                    created: "2023-07-01",
                  },
                  {
                    id: "SCN-009",
                    name: "问题反馈流程",
                    type: "服务咨询",
                    users: 9876,
                    conversion: 5.8,
                    created: "2023-07-05",
                  },
                  {
                    id: "SCN-010",
                    name: "会员充值流程",
                    type: "金融场景",
                    users: 6543,
                    conversion: 14.2,
                    created: "2023-07-10",
                  },
                ].map((scenario) => (
                  <tr key={scenario.id} className="hover:bg-gray-50">
                    <td className="px-4 py-3 text-sm">{scenario.id}</td>
                    <td className="px-4 py-3 text-sm font-medium">{scenario.name}</td>
                    <td className="px-4 py-3 text-sm">
                      <div className="flex items-center">
                        {scenario.type === "社交场景" && <MessageSquare className="h-4 w-4 mr-1 text-blue-500" />}
                        {scenario.type === "购物场景" && <ShoppingCart className="h-4 w-4 mr-1 text-green-500" />}
                        {scenario.type === "内容消费" && <FileText className="h-4 w-4 mr-1 text-orange-500" />}
                        {scenario.type === "服务咨询" && <Users className="h-4 w-4 mr-1 text-purple-500" />}
                        {scenario.type === "金融场景" && <CreditCard className="h-4 w-4 mr-1 text-amber-500" />}
                        {scenario.type}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-sm">{scenario.users.toLocaleString()}</td>
                    <td className="px-4 py-3 text-sm">{scenario.conversion}%</td>
                    <td className="px-4 py-3 text-sm">{scenario.created}</td>
                    <td className="px-4 py-3 text-sm">
                      <Button variant="ghost" size="sm">
                        详情
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}