"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 { Search, Plus, Filter, Download, Tag, Edit, Trash2, MoreHorizontal } 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 { Checkbox } from "@/components/ui/checkbox"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { TagCategoryChart } from "@/components/tag-management/tag-category-chart"
import { TagUsageStats } from "@/components/tag-management/tag-usage-stats"
import { TagRelationshipGraph } from "@/components/tag-management/tag-relationship-graph"

interface TagItem {
  id: string
  name: string
  category: string
  type: "system" | "custom" | "derived"
  source: string
  coverage: number
  createdAt: string
  updatedAt: string
}

const mockTags: TagItem[] = [
  {
    id: "1",
    name: "高价值用户",
    category: "用户价值",
    type: "derived",
    source: "RFM模型",
    coverage: 15.3,
    createdAt: "2023-05-12",
    updatedAt: "2023-07-15",
  },
  {
    id: "2",
    name: "90后",
    category: "人口属性",
    type: "system",
    source: "注册信息",
    coverage: 42.7,
    createdAt: "2023-01-05",
    updatedAt: "2023-01-05",
  },
  {
    id: "3",
    name: "游戏爱好者",
    category: "兴趣爱好",
    type: "custom",
    source: "行为分析",
    coverage: 28.4,
    createdAt: "2023-04-18",
    updatedAt: "2023-06-22",
  },
  {
    id: "4",
    name: "流失风险高",
    category: "流失风险",
    type: "derived",
    source: "预测模型",
    coverage: 8.9,
    createdAt: "2023-06-30",
    updatedAt: "2023-07-20",
  },
  {
    id: "5",
    name: "北京地区",
    category: "地理位置",
    type: "system",
    source: "IP分析",
    coverage: 12.5,
    createdAt: "2023-02-15",
    updatedAt: "2023-02-15",
  },
  {
    id: "6",
    name: "周末活跃",
    category: "活跃时间",
    type: "custom",
    source: "行为分析",
    coverage: 35.2,
    createdAt: "2023-05-28",
    updatedAt: "2023-07-10",
  },
]

const tagCategories = ["用户价值", "人口属性", "兴趣爱好", "流失风险", "地理位置", "活跃时间", "消费能力", "渠道来源"]

export default function TagManagementPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedTags, setSelectedTags] = useState<string[]>([])
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
  const [newTag, setNewTag] = useState({
    name: "",
    category: "",
    type: "custom",
    source: "",
  })

  const handleSelectAllTags = (checked: boolean) => {
    if (checked) {
      setSelectedTags(mockTags.map((tag) => tag.id))
    } else {
      setSelectedTags([])
    }
  }

  const handleSelectTag = (tagId: string, checked: boolean) => {
    if (checked) {
      setSelectedTags([...selectedTags, tagId])
    } else {
      setSelectedTags(selectedTags.filter((id) => id !== tagId))
    }
  }

  const handleCreateTag = () => {
    // 这里应该是创建标签的逻辑
    console.log("创建标签:", newTag)
    setIsCreateDialogOpen(false)
    setNewTag({
      name: "",
      category: "",
      type: "custom",
      source: "",
    })
  }

  const filteredTags = mockTags.filter(
    (tag) =>
      tag.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      tag.category.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  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">
            <Download 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="flex items-center">
              <Tag className="h-5 w-5 text-blue-500 mr-2" />
              <div className="text-2xl font-bold">128</div>
            </div>
            <p className="text-xs text-muted-foreground mt-1">较上月增加 12 个</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">标签覆盖率</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">87.5%</div>
            <p className="text-xs text-muted-foreground mt-1">较上月提升 2.3%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">标签使用率</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">76.2%</div>
            <p className="text-xs text-muted-foreground mt-1">较上月提升 5.1%</p>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="list" className="space-y-4">
        <div className="flex justify-between items-center">
          <TabsList>
            <TabsTrigger value="list">标签列表</TabsTrigger>
            <TabsTrigger value="analytics">标签分析</TabsTrigger>
            <TabsTrigger value="relationships">标签关系</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="list" className="space-y-4">
          <Card>
            <CardContent className="p-0">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-12">
                      <Checkbox
                        checked={selectedTags.length === mockTags.length}
                        onCheckedChange={handleSelectAllTags}
                      />
                    </TableHead>
                    <TableHead>标签名称</TableHead>
                    <TableHead>分类</TableHead>
                    <TableHead>类型</TableHead>
                    <TableHead>数据来源</TableHead>
                    <TableHead>覆盖率</TableHead>
                    <TableHead>创建时间</TableHead>
                    <TableHead>更新时间</TableHead>
                    <TableHead className="text-right">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredTags.map((tag) => (
                    <TableRow key={tag.id}>
                      <TableCell>
                        <Checkbox
                          checked={selectedTags.includes(tag.id)}
                          onCheckedChange={(checked) => handleSelectTag(tag.id, !!checked)}
                        />
                      </TableCell>
                      <TableCell className="font-medium">{tag.name}</TableCell>
                      <TableCell>{tag.category}</TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            tag.type === "system"
                              ? "bg-blue-50 text-blue-700 border-blue-200"
                              : tag.type === "derived"
                                ? "bg-purple-50 text-purple-700 border-purple-200"
                                : "bg-green-50 text-green-700 border-green-200"
                          }
                        >
                          {tag.type === "system" ? "系统" : tag.type === "derived" ? "衍生" : "自定义"}
                        </Badge>
                      </TableCell>
                      <TableCell>{tag.source}</TableCell>
                      <TableCell>{tag.coverage}%</TableCell>
                      <TableCell>{tag.createdAt}</TableCell>
                      <TableCell>{tag.updatedAt}</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>
                              <Edit 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="analytics" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>标签分类分布</CardTitle>
                <CardDescription>按分类统计标签数量</CardDescription>
              </CardHeader>
              <CardContent>
                <TagCategoryChart />
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>标签使用统计</CardTitle>
                <CardDescription>标签在各系统中的使用情况</CardDescription>
              </CardHeader>
              <CardContent>
                <TagUsageStats />
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="relationships" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>标签关系图谱</CardTitle>
              <CardDescription>展示标签之间的关联关系</CardDescription>
            </CardHeader>
            <CardContent className="h-[500px]">
              <TagRelationshipGraph />
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* 创建标签对话框 */}
      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <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="tag-name" className="text-right">
                标签名称
              </Label>
              <Input
                id="tag-name"
                value={newTag.name}
                onChange={(e) => setNewTag({ ...newTag, name: e.target.value })}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="tag-category" className="text-right">
                标签分类
              </Label>
              <Select value={newTag.category} onValueChange={(value) => setNewTag({ ...newTag, category: value })}>
                <SelectTrigger className="col-span-3">
                  <SelectValue placeholder="选择标签分类" />
                </SelectTrigger>
                <SelectContent>
                  {tagCategories.map((category) => (
                    <SelectItem key={category} value={category}>
                      {category}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="tag-type" className="text-right">
                标签类型
              </Label>
              <Select
                value={newTag.type}
                onValueChange={(value: "system" | "custom" | "derived") => setNewTag({ ...newTag, type: value })}
              >
                <SelectTrigger className="col-span-3">
                  <SelectValue placeholder="选择标签类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="system">系统标签</SelectItem>
                  <SelectItem value="custom">自定义标签</SelectItem>
                  <SelectItem value="derived">衍生标签</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="tag-source" className="text-right">
                数据来源
              </Label>
              <Input
                id="tag-source"
                value={newTag.source}
                onChange={(e) => setNewTag({ ...newTag, source: e.target.value })}
                className="col-span-3"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
              取消
            </Button>
            <Button onClick={handleCreateTag}>创建</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}