"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Sparkles, BarChart, TrendingUp, Users, Mail, Clock, Download, ChevronRight } from "lucide-react"

export default function AIAssistantPage() {
  const [activeTab, setActiveTab] = useState("data-analysis")
  const [selectedUserGroup, setSelectedUserGroup] = useState("")
  const [isUserGroupDialogOpen, setIsUserGroupDialogOpen] = useState(false)
  const [emailAddress, setEmailAddress] = useState("")
  const [scheduleReport, setScheduleReport] = useState(false)

  // 分析流程步骤
  const [analysisStep, setAnalysisStep] = useState(1)
  const [analysisType, setAnalysisType] = useState("")

  // 营销策略步骤
  const [strategyStep, setStrategyStep] = useState(1)
  const [strategyType, setStrategyType] = useState("")

  return (
    <div className="container mx-auto py-6 space-y-8">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">AI 智能助手</h1>
          <p className="text-muted-foreground">利用AI技术分析数据并提供营销策略</p>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full max-w-md grid-cols-2">
          <TabsTrigger value="data-analysis">数据分析</TabsTrigger>
          <TabsTrigger value="marketing-strategy">营销策略</TabsTrigger>
        </TabsList>

        <TabsContent value="data-analysis" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>AI 数据分析</CardTitle>
              <CardDescription>使用AI分析用户数据并生成洞察报告</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* 第1步：选择用户分群 */}
              <div className={`space-y-4 ${analysisStep !== 1 ? "opacity-60" : ""}`}>
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-medium flex items-center">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
                      1
                    </div>
                    选择用户分群
                  </h3>
                  {analysisStep > 1 ? (
                    <Button variant="outline" size="sm" onClick={() => setAnalysisStep(1)}>
                      修改
                    </Button>
                  ) : (
                    <Button variant="outline" onClick={() => setIsUserGroupDialogOpen(true)}>
                      <Users className="mr-2 h-4 w-4" />
                      选择用户分群
                    </Button>
                  )}
                </div>

                {selectedUserGroup && (
                  <div className="p-4 border rounded-lg bg-muted/50">
                    <div className="flex justify-between items-center">
                      <div className="flex items-center gap-2">
                        <Users className="h-5 w-5 text-muted-foreground" />
                        <span className="font-medium">已选择用户分群：</span>
                        <Badge className="bg-blue-100 text-blue-800">{selectedUserGroup}</Badge>
                      </div>
                      {analysisStep === 1 && (
                        <Button
                          onClick={() => {
                            setAnalysisStep(2)
                          }}
                          disabled={!selectedUserGroup}
                        >
                          下一步 <ChevronRight className="ml-1 h-4 w-4" />
                        </Button>
                      )}
                    </div>
                  </div>
                )}
              </div>

              <Separator />

              {/* 第2步：选择分析类型 */}
              <div
                className={`space-y-4 ${analysisStep !== 2 ? (analysisStep > 2 ? "opacity-60" : "opacity-40") : ""}`}
              >
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-medium flex items-center">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
                      2
                    </div>
                    选择分析类型
                  </h3>
                  {analysisStep > 2 && (
                    <Button variant="outline" size="sm" onClick={() => setAnalysisStep(2)}>
                      修改
                    </Button>
                  )}
                </div>

                {analysisStep >= 2 && (
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <Card
                      className={`border-2 cursor-pointer hover:shadow-md transition-all ${analysisType === "behavior" ? "border-primary" : "border-transparent"}`}
                      onClick={() => setAnalysisType("behavior")}
                    >
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">用户行为分析</CardTitle>
                      </CardHeader>
                      <CardContent className="text-sm text-muted-foreground">
                        分析用户的行为模式、偏好和习惯
                      </CardContent>
                      <CardFooter>
                        {analysisType === "behavior" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
                      </CardFooter>
                    </Card>
                    <Card
                      className={`border-2 cursor-pointer hover:shadow-md transition-all ${analysisType === "value" ? "border-primary" : "border-transparent"}`}
                      onClick={() => setAnalysisType("value")}
                    >
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">用户估值分析</CardTitle>
                      </CardHeader>
                      <CardContent className="text-sm text-muted-foreground">分析用户的价值分布和潜在价值</CardContent>
                      <CardFooter>
                        {analysisType === "value" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
                      </CardFooter>
                    </Card>
                    <Card
                      className={`border-2 cursor-pointer hover:shadow-md transition-all ${analysisType === "churn" ? "border-primary" : "border-transparent"}`}
                      onClick={() => setAnalysisType("churn")}
                    >
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">用户流失预警</CardTitle>
                      </CardHeader>
                      <CardContent className="text-sm text-muted-foreground">
                        预测可能流失的用户并提供挽留建议
                      </CardContent>
                      <CardFooter>
                        {analysisType === "churn" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
                      </CardFooter>
                    </Card>
                  </div>
                )}

                {analysisStep === 2 && analysisType && (
                  <div className="flex justify-end">
                    <Button onClick={() => setAnalysisStep(3)}>
                      下一步 <ChevronRight className="ml-1 h-4 w-4" />
                    </Button>
                  </div>
                )}
              </div>

              <Separator />

              {/* 第3步：分析参数设置 */}
              <div
                className={`space-y-4 ${analysisStep !== 3 ? (analysisStep > 3 ? "opacity-60" : "opacity-40") : ""}`}
              >
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-medium flex items-center">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
                      3
                    </div>
                    分析参数设置
                  </h3>
                  {analysisStep > 3 && (
                    <Button variant="outline" size="sm" onClick={() => setAnalysisStep(3)}>
                      修改
                    </Button>
                  )}
                </div>

                {analysisStep >= 3 && (
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="time-range">时间范围</Label>
                      <Select defaultValue="30days">
                        <SelectTrigger id="time-range">
                          <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>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="analysis-depth">分析深度</Label>
                      <Select defaultValue="medium">
                        <SelectTrigger id="analysis-depth">
                          <SelectValue placeholder="选择分析深度" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="basic">基础分析</SelectItem>
                          <SelectItem value="medium">中等深度</SelectItem>
                          <SelectItem value="deep">深度分析</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                )}

                {analysisStep === 3 && (
                  <div className="flex justify-end">
                    <Button onClick={() => setAnalysisStep(4)}>
                      下一步 <ChevronRight className="ml-1 h-4 w-4" />
                    </Button>
                  </div>
                )}
              </div>

              <Separator />

              {/* 第4步：报告设置 */}
              <div className={`space-y-4 ${analysisStep !== 4 ? "opacity-40" : ""}`}>
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-medium flex items-center">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
                      4
                    </div>
                    报告设置
                  </h3>
                </div>

                {analysisStep >= 4 && (
                  <div className="space-y-4">
                    <div className="flex flex-col space-y-2">
                      <Label htmlFor="email">发送分析报告至</Label>
                      <Input
                        id="email"
                        type="email"
                        placeholder="输入邮箱地址"
                        value={emailAddress}
                        onChange={(e) => setEmailAddress(e.target.value)}
                      />
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="schedule-report" checked={scheduleReport} onCheckedChange={setScheduleReport} />
                      <Label htmlFor="schedule-report">定期发送报告</Label>
                    </div>
                    {scheduleReport && (
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
                        <div className="space-y-2">
                          <Label htmlFor="schedule-frequency">发送频率</Label>
                          <Select defaultValue="weekly">
                            <SelectTrigger id="schedule-frequency">
                              <SelectValue placeholder="选择发送频率" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="daily">每日</SelectItem>
                              <SelectItem value="weekly">每周</SelectItem>
                              <SelectItem value="monthly">每月</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="schedule-time">发送时间</Label>
                          <Select defaultValue="morning">
                            <SelectTrigger id="schedule-time">
                              <SelectValue placeholder="选择发送时间" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="morning">上午 9:00</SelectItem>
                              <SelectItem value="noon">中午 12:00</SelectItem>
                              <SelectItem value="evening">下午 6:00</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                    )}
                  </div>
                )}
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button
                variant="outline"
                onClick={() => {
                  setAnalysisStep(1)
                  setAnalysisType("")
                }}
              >
                重置
              </Button>
              <Button disabled={analysisStep < 4 || !emailAddress}>
                <Sparkles className="mr-2 h-4 w-4" />
                开始分析
              </Button>
            </CardFooter>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>分析结果预览</CardTitle>
              <CardDescription>AI生成的数据分析结果</CardDescription>
            </CardHeader>
            <CardContent className="h-96 flex items-center justify-center">
              {selectedUserGroup && analysisStep === 4 ? (
                <div className="text-center space-y-4">
                  <BarChart className="h-16 w-16 mx-auto text-primary" />
                  <p className="text-lg font-medium">分析结果将在这里显示</p>
                  <p className="text-muted-foreground">点击"开始分析"按钮生成分析报告</p>
                  <div className="flex justify-center gap-2 pt-4">
                    <Button variant="outline">
                      <Download className="mr-2 h-4 w-4" />
                      下载报告
                    </Button>
                    <Button>
                      <Mail className="mr-2 h-4 w-4" />
                      发送报告
                    </Button>
                  </div>
                </div>
              ) : (
                <div className="text-center text-muted-foreground">
                  <Users className="h-16 w-16 mx-auto mb-4" />
                  <p className="text-lg">请完成所有分析步骤</p>
                  <Button
                    variant="outline"
                    className="mt-4 bg-transparent"
                    onClick={() => setIsUserGroupDialogOpen(true)}
                  >
                    <Users className="mr-2 h-4 w-4" />
                    开始设置
                  </Button>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="marketing-strategy" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>AI 营销策略</CardTitle>
              <CardDescription>使用AI生成针对性的营销策略和建议</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* 第1步：选择目标用户分群 */}
              <div className={`space-y-4 ${strategyStep !== 1 ? "opacity-60" : ""}`}>
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-medium flex items-center">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
                      1
                    </div>
                    选择目标用户分群
                  </h3>
                  {strategyStep > 1 ? (
                    <Button variant="outline" size="sm" onClick={() => setStrategyStep(1)}>
                      修改
                    </Button>
                  ) : (
                    <Button variant="outline" onClick={() => setIsUserGroupDialogOpen(true)}>
                      <Users className="mr-2 h-4 w-4" />
                      选择用户分群
                    </Button>
                  )}
                </div>

                {selectedUserGroup && (
                  <div className="p-4 border rounded-lg bg-muted/50">
                    <div className="flex justify-between items-center">
                      <div className="flex items-center gap-2">
                        <Users className="h-5 w-5 text-muted-foreground" />
                        <span className="font-medium">已选择用户分群：</span>
                        <Badge className="bg-blue-100 text-blue-800">{selectedUserGroup}</Badge>
                      </div>
                      {strategyStep === 1 && (
                        <Button
                          onClick={() => {
                            setStrategyStep(2)
                          }}
                          disabled={!selectedUserGroup}
                        >
                          下一步 <ChevronRight className="ml-1 h-4 w-4" />
                        </Button>
                      )}
                    </div>
                  </div>
                )}
              </div>

              <Separator />

              {/* 第2步：选择策略类型 */}
              <div
                className={`space-y-4 ${strategyStep !== 2 ? (strategyStep > 2 ? "opacity-60" : "opacity-40") : ""}`}
              >
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-medium flex items-center">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
                      2
                    </div>
                    选择策略类型
                  </h3>
                  {strategyStep > 2 && (
                    <Button variant="outline" size="sm" onClick={() => setStrategyStep(2)}>
                      修改
                    </Button>
                  )}
                </div>

                {strategyStep >= 2 && (
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <Card
                      className={`border-2 cursor-pointer hover:shadow-md transition-all ${strategyType === "sales" ? "border-primary" : "border-transparent"}`}
                      onClick={() => setStrategyType("sales")}
                    >
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">销售预测</CardTitle>
                      </CardHeader>
                      <CardContent className="text-sm text-muted-foreground">
                        预测未来销售趋势并提供增长建议
                      </CardContent>
                      <CardFooter>
                        {strategyType === "sales" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
                      </CardFooter>
                    </Card>
                    <Card
                      className={`border-2 cursor-pointer hover:shadow-md transition-all ${strategyType === "reach" ? "border-primary" : "border-transparent"}`}
                      onClick={() => setStrategyType("reach")}
                    >
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">用户触达策略</CardTitle>
                      </CardHeader>
                      <CardContent className="text-sm text-muted-foreground">
                        生成针对性的用户触达和转化策略
                      </CardContent>
                      <CardFooter>
                        {strategyType === "reach" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
                      </CardFooter>
                    </Card>
                    <Card
                      className={`border-2 cursor-pointer hover:shadow-md transition-all ${strategyType === "content" ? "border-primary" : "border-transparent"}`}
                      onClick={() => setStrategyType("content")}
                    >
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">内容营销策略</CardTitle>
                      </CardHeader>
                      <CardContent className="text-sm text-muted-foreground">
                        生成针对目标用户的内容营销策略
                      </CardContent>
                      <CardFooter>
                        {strategyType === "content" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
                      </CardFooter>
                    </Card>
                  </div>
                )}

                {strategyStep === 2 && strategyType && (
                  <div className="flex justify-end">
                    <Button onClick={() => setStrategyStep(3)}>
                      下一步 <ChevronRight className="ml-1 h-4 w-4" />
                    </Button>
                  </div>
                )}
              </div>

              <Separator />

              {/* 第3步：策略参数设置 */}
              <div className={`space-y-4 ${strategyStep !== 3 ? "opacity-40" : ""}`}>
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-medium flex items-center">
                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
                      3
                    </div>
                    策略参数设置
                  </h3>
                </div>

                {strategyStep >= 3 && (
                  <>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="strategy-goal">营销目标</Label>
                        <Select defaultValue="conversion">
                          <SelectTrigger id="strategy-goal">
                            <SelectValue placeholder="选择营销目标" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="awareness">提升品牌认知</SelectItem>
                            <SelectItem value="engagement">增加用户互动</SelectItem>
                            <SelectItem value="conversion">提高转化率</SelectItem>
                            <SelectItem value="retention">提升用户留存</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="strategy-budget">预算范围</Label>
                        <Select defaultValue="medium">
                          <SelectTrigger id="strategy-budget">
                            <SelectValue placeholder="选择预算范围" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="low">低预算</SelectItem>
                            <SelectItem value="medium">中等预算</SelectItem>
                            <SelectItem value="high">高预算</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="strategy-notes">补充说明</Label>
                      <Textarea
                        id="strategy-notes"
                        placeholder="请输入任何补充说明或特殊要求..."
                        className="min-h-[100px]"
                      />
                    </div>
                    <div className="space-y-4">
                      <div className="flex flex-col space-y-2">
                        <Label htmlFor="email-strategy">发送策略报告至</Label>
                        <Input
                          id="email-strategy"
                          type="email"
                          placeholder="输入邮箱地址"
                          value={emailAddress}
                          onChange={(e) => setEmailAddress(e.target.value)}
                        />
                      </div>
                      <div className="flex items-center space-x-2">
                        <Switch id="schedule-strategy" checked={scheduleReport} onCheckedChange={setScheduleReport} />
                        <Label htmlFor="schedule-strategy">定期更新策略</Label>
                      </div>
                      {scheduleReport && (
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
                          <div className="space-y-2">
                            <Label htmlFor="update-frequency">更新频率</Label>
                            <Select defaultValue="monthly">
                              <SelectTrigger id="update-frequency">
                                <SelectValue placeholder="选择更新频率" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="weekly">每周</SelectItem>
                                <SelectItem value="biweekly">每两周</SelectItem>
                                <SelectItem value="monthly">每月</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </div>
                      )}
                    </div>
                  </>
                )}
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button
                variant="outline"
                onClick={() => {
                  setStrategyStep(1)
                  setStrategyType("")
                }}
              >
                重置
              </Button>
              <Button disabled={strategyStep < 3 || !emailAddress}>
                <Sparkles className="mr-2 h-4 w-4" />
                生成策略
              </Button>
            </CardFooter>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>策略建议预览</CardTitle>
              <CardDescription>AI生成的营销策略建议</CardDescription>
            </CardHeader>
            <CardContent className="h-96 flex items-center justify-center">
              {selectedUserGroup && strategyStep === 3 ? (
                <div className="text-center space-y-4">
                  <TrendingUp className="h-16 w-16 mx-auto text-primary" />
                  <p className="text-lg font-medium">策略建议将在这里显示</p>
                  <p className="text-muted-foreground">点击"生成策略"按钮生成营销策略</p>
                  <div className="flex justify-center gap-2 pt-4">
                    <Button variant="outline">
                      <Download className="mr-2 h-4 w-4" />
                      下载策略
                    </Button>
                    <Button>
                      <Mail className="mr-2 h-4 w-4" />
                      发送策略
                    </Button>
                  </div>
                </div>
              ) : (
                <div className="text-center text-muted-foreground">
                  <Users className="h-16 w-16 mx-auto mb-4" />
                  <p className="text-lg">请完成所有策略步骤</p>
                  <Button
                    variant="outline"
                    className="mt-4 bg-transparent"
                    onClick={() => setIsUserGroupDialogOpen(true)}
                  >
                    <Users className="mr-2 h-4 w-4" />
                    开始设置
                  </Button>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      <UserGroupSelectionDialog
        isOpen={isUserGroupDialogOpen}
        setIsOpen={setIsUserGroupDialogOpen}
        onSelect={setSelectedUserGroup}
      />
    </div>
  )
}

// 用户分群选择对话框
function UserGroupSelectionDialog({
  isOpen,
  setIsOpen,
  onSelect,
}: {
  isOpen: boolean
  setIsOpen: (open: boolean) => void
  onSelect: (group: string) => void
}) {
  // 模拟用户分群数据
  const userGroups = [
    {
      id: "1",
      name: "高价值用户",
      description: "消费能力强，购买频率高的用户",
      count: 12456,
      category: "用户资产",
      lastUpdated: "2023-07-20",
    },
    {
      id: "2",
      name: "活跃用户",
      description: "近30天内有活动的用户",
      count: 45678,
      category: "用户资产",
      lastUpdated: "2023-07-20",
    },
    {
      id: "3",
      name: "地摊商户",
      description: "从事地摊相关业务的用户",
      count: 8765,
      category: "地摊相关",
      lastUpdated: "2023-07-19",
    },
    {
      id: "4",
      name: "樊登读书会员",
      description: "樊登读书平台的会员用户",
      count: 15678,
      category: "樊登读书",
      lastUpdated: "2023-07-18",
    },
    {
      id: "5",
      name: "魔兽玩家",
      description: "魔兽世界游戏的活跃玩家",
      count: 23456,
      category: "魔兽世界",
      lastUpdated: "2023-07-17",
    },
    {
      id: "6",
      name: "流失风险用户",
      description: "有流失风险的高价值用户",
      count: 5678,
      category: "用户资产",
      lastUpdated: "2023-07-16",
    },
  ]

  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")

  // 过滤用户分群
  const filteredGroups = userGroups.filter((group) => {
    const matchesSearch =
      group.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      group.description.toLowerCase().includes(searchQuery.toLowerCase())

    const matchesCategory = selectedCategory === "all" || group.category === selectedCategory

    return matchesSearch && matchesCategory
  })

  // 获取所有分类
  const categories = ["all", ...new Set(userGroups.map((group) => group.category))]

  const handleSelect = (group: string) => {
    onSelect(group)
    setIsOpen(false)
  }

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>选择用户分群</DialogTitle>
          <DialogDescription>从用户画像中选择要分析的用户分群</DialogDescription>
        </DialogHeader>
        <div className="py-4 space-y-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-1">
              <Input
                placeholder="搜索用户分群..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <Select value={selectedCategory} onValueChange={setSelectedCategory}>
              <SelectTrigger className="w-full md:w-[180px]">
                <SelectValue placeholder="选择场景分类" />
              </SelectTrigger>
              <SelectContent>
                {categories.map((category) => (
                  <SelectItem key={category} value={category}>
                    {category === "all" ? "所有场景" : category}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="max-h-[300px] overflow-y-auto space-y-2">
            {filteredGroups.map((group) => (
              <div
                key={group.id}
                className="p-3 border rounded-lg hover:bg-muted/50 cursor-pointer"
                onClick={() => handleSelect(group.name)}
              >
                <div className="flex justify-between items-start">
                  <div>
                    <div className="font-medium">{group.name}</div>
                    <div className="text-sm text-muted-foreground">{group.description}</div>
                  </div>
                  <Badge className="bg-blue-100 text-blue-800">{group.category}</Badge>
                </div>
                <div className="flex justify-between items-center mt-2 text-sm text-muted-foreground">
                  <div className="flex items-center">
                    <Users className="h-3 w-3 mr-1" />
                    {group.count.toLocaleString()} 用户
                  </div>
                  <div className="flex items-center">
                    <Clock className="h-3 w-3 mr-1" />
                    更新于 {group.lastUpdated}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setIsOpen(false)}>
            取消
          </Button>
          <Button onClick={() => setIsOpen(false)}>创建新分群</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}