"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Search, Plus, Filter, Play, Pause, Edit, Trash2, MoreHorizontal, FileText, Clock } from "lucide-react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { RuleEditor } from "@/components/tag-rules/rule-editor"
import { RuleExecutionHistory } from "@/components/tag-rules/rule-execution-history"

interface TagRule {
  id: string
  name: string
  description: string
  targetTag: string
  condition: string
  status: "active" | "inactive" | "draft"
  priority: number
  createdAt: string
  lastRun: string
  affectedUsers: number
}

const mockRules: TagRule[] = [
  {
    id: "1",
    name: "高价值用户识别",
    description: "根据用户消费金额和频次识别高价值用户",
    targetTag: "高价值用户",
    condition: "消费金额 > 5000 AND 消费频次 > 10",
    status: "active",
    priority: 1,
    createdAt: "2023-05-12",
    lastRun: "2023-07-21 15:30",
    affectedUsers: 1250,
  },
  {
    id: "2",
    name: "游戏爱好者标记",
    description: "根据用户浏览和购买行为识别游戏爱好者",
    targetTag: "游戏爱好者",
    condition: "游戏类目浏览时长 > 30min OR 游戏类目购买次数 > 2",
    status: "active",
    priority: 2,
    createdAt: "2023-04-18",
    lastRun: "2023-07-21 14:45",
    affectedUsers: 2840,
  },
  {
    id: "3",
    name: "流失风险预警",
    description: "识别30天内可能流失的用户",
    targetTag: "流失风险高",
    condition: "最近登录时间 > 15天 AND 最近30天活跃度下降率 > 50%",
    status: "active",
    priority: 1,
    createdAt: "2023-06-30",
    lastRun: "2023-07-21 13:20",
    affectedUsers: 890,
  },
  {
    id: "4",
    name: "周末活跃用户",
    description: "识别周末活跃度高的用户",
    targetTag: "周末活跃",
    condition: "周末活跃时长 > 工作日活跃时长 * 1.5",
    status: "inactive",
    priority: 3,
    createdAt: "2023-05-28",
    lastRun: "2023-07-10 09:15",
    affectedUsers: 3520,
  },
  {
    id: "5",
    name: "潜在高转化用户",
    description: "识别浏览量高但未转化的潜在用户",
    targetTag: "潜在高转化",
    condition: "浏览商品数 > 20 AND 加购次数 > 5 AND 购买次数 = 0",
    status: "draft",
    priority: 2,
    createdAt: "2023-07-15",
    lastRun: "-",
    affectedUsers: 0,
  },
]

export default function TagRulesPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
  const [newRule, setNewRule] = useState({
    name: "",
    description: "",
    targetTag: "",
    condition: "",
    priority: 2,
    status: "draft",
  })
  const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null)

  const handleCreateRule = () => {
    // 这里应该是创建规则的逻辑
    console.log("创建规则:", newRule)
    setIsCreateDialogOpen(false)
    setNewRule({
      name: "",
      description: "",
      targetTag: "",
      condition: "",
      priority: 2,
      status: "draft",
    })
  }

  const filteredRules = mockRules.filter(
    (rule) =>
      rule.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      rule.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      rule.targetTag.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  const getStatusBadge = (status: TagRule["status"]) => {
    switch (status) {
      case "active":
        return <Badge className="bg-green-100 text-green-800">运行中</Badge>
      case "inactive":
        return <Badge className="bg-yellow-100 text-yellow-800">已暂停</Badge>
      case "draft":
        return <Badge className="bg-gray-100 text-gray-800">草稿</Badge>
    }
  }

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold">标签规则引擎</h1>
          <p className="text-muted-foreground mt-1">管理和执行用户标签生成规则</p>
        </div>
        <div className="flex space-x-2">
          <Button variant="outline">
            <Clock className="mr-2 h-4 w-4" />
            执行历史
          </Button>
          <Button onClick={() => setIsCreateDialogOpen(true)}>
            <Plus className="mr-2 h-4 w-4" />
            创建规则
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">规则总数</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">24</div>
            <p className="text-xs text-muted-foreground mt-1">较上月增加 3 个</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">活跃规则</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">18</div>
            <p className="text-xs text-muted-foreground mt-1">占总规则的 75%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">今日执行次数</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">36</div>
            <p className="text-xs text-muted-foreground mt-1">影响用户 12,580 人</p>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="rules" className="space-y-4">
        <div className="flex justify-between items-center">
          <TabsList>
            <TabsTrigger value="rules">规则列表</TabsTrigger>
            <TabsTrigger value="editor">规则编辑器</TabsTrigger>
            <TabsTrigger value="history">执行历史</TabsTrigger>
          </TabsList>
          <div className="flex space-x-2">
            <div className="relative w-64">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input
                type="text"
                placeholder="搜索规则..."
                className="pl-8"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <Button variant="outline" size="icon">
              <Filter className="h-4 w-4" />
            </Button>
          </div>
        </div>

        <TabsContent value="rules" className="space-y-4">
          <Card>
            <CardContent className="p-0">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>规则名称</TableHead>
                    <TableHead>目标标签</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>优先级</TableHead>
                    <TableHead>创建时间</TableHead>
                    <TableHead>最后执行</TableHead>
                    <TableHead>影响用户数</TableHead>
                    <TableHead className="text-right">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredRules.map((rule) => (
                    <TableRow key={rule.id}>
                      <TableCell className="font-medium">
                        <div>{rule.name}</div>
                        <div className="text-xs text-muted-foreground">{rule.description}</div>
                      </TableCell>
                      <TableCell>{rule.targetTag}</TableCell>
                      <TableCell>{getStatusBadge(rule.status)}</TableCell>
                      <TableCell>{rule.priority}</TableCell>
                      <TableCell>{rule.createdAt}</TableCell>
                      <TableCell>{rule.lastRun}</TableCell>
                      <TableCell>{rule.affectedUsers.toLocaleString()}</TableCell>
                      <TableCell className="text-right">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => setSelectedRuleId(rule.id)}>
                              <Edit className="mr-2 h-4 w-4" />
                              编辑
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              {rule.status === "active" ? (
                                <>
                                  <Pause className="mr-2 h-4 w-4" />
                                  暂停
                                </>
                              ) : (
                                <>
                                  <Play className="mr-2 h-4 w-4" />
                                  启动
                                </>
                              )}
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <FileText className="mr-2 h-4 w-4" />
                              查看详情
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <Trash2 className="mr-2 h-4 w-4" />
                              删除
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="editor" className="space-y-4">
          <RuleEditor ruleId={selectedRuleId} />
        </TabsContent>

        <TabsContent value="history" className="space-y-4">
          <RuleExecutionHistory />
        </TabsContent>
      </Tabs>

      {/* 创建规则对话框 */}
      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>创建新规则</DialogTitle>
            <DialogDescription>添加新的标签生成规则</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="rule-name" className="text-right">
                规则名称
              </Label>
              <Input
                id="rule-name"
                value={newRule.name}
                onChange={(e) => setNewRule({ ...newRule, name: e.target.value })}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="rule-description" className="text-right">
                规则描述
              </Label>
              <Textarea
                id="rule-description"
                value={newRule.description}
                onChange={(e) => setNewRule({ ...newRule, description: e.target.value })}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="target-tag" className="text-right">
                目标标签
              </Label>
              <Input
                id="target-tag"
                value={newRule.targetTag}
                onChange={(e) => setNewRule({ ...newRule, targetTag: e.target.value })}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="rule-condition" className="text-right">
                规则条件
              </Label>
              <Textarea
                id="rule-condition"
                value={newRule.condition}
                onChange={(e) => setNewRule({ ...newRule, condition: e.target.value })}
                className="col-span-3"
                placeholder="例如: 消费金额 > 5000 AND 消费频次 > 10"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="rule-priority" className="text-right">
                优先级
              </Label>
              <Select
                value={newRule.priority.toString()}
                onValueChange={(value) => setNewRule({ ...newRule, priority: Number.parseInt(value) })}
              >
                <SelectTrigger className="col-span-3">
                  <SelectValue placeholder="选择优先级" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1">1 - 高</SelectItem>
                  <SelectItem value="2">2 - 中</SelectItem>
                  <SelectItem value="3">3 - 低</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="rule-status" className="text-right">
                规则状态
              </Label>
              <div className="flex items-center space-x-2 col-span-3">
                <Switch
                  id="rule-status"
                  checked={newRule.status === "active"}
                  onCheckedChange={(checked) => setNewRule({ ...newRule, status: checked ? "active" : "draft" })}
                />
                <Label htmlFor="rule-status">{newRule.status === "active" ? "立即启用" : "保存为草稿"}</Label>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
              取消
            </Button>
            <Button onClick={handleCreateRule}>创建</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}