"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { PlusCircle, Search, Tag, Edit, Trash2, Users, ChevronDown, ChevronRight } from "lucide-react"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"

interface UserTag {
  id: string
  name: string
  category: string
  description: string
  userCount: number
  source: string
  createdAt: Date
  updatedAt: Date
}

export function UserProfileTags() {
  const [searchQuery, setSearchQuery] = useState("")
  const [openSections, setOpenSections] = useState({
    tagList: true,
  })

  const toggleSection = (section) => {
    setOpenSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

  // 模拟数据
  const tags: UserTag[] = [
    {
      id: "1",
      name: "高价值客户",
      category: "价值分类",
      description: "消费金额高且频次高的用户",
      userCount: 2450,
      source: "系统生成",
      createdAt: new Date(2023, 5, 15),
      updatedAt: new Date(2023, 6, 20),
    },
    {
      id: "2",
      name: "数据分析师",
      category: "职业角色",
      description: "从事数据分析工作的用户",
      userCount: 980,
      source: "流量词映射",
      createdAt: new Date(2023, 4, 10),
      updatedAt: new Date(2023, 6, 18),
    },
    {
      id: "3",
      name: "营销决策者",
      category: "职业角色",
      description: "负责营销决策的管理人员",
      userCount: 645,
      source: "流量词映射",
      createdAt: new Date(2023, 3, 5),
      updatedAt: new Date(2023, 5, 25),
    },
    {
      id: "4",
      name: "技术爱好者",
      category: "兴趣爱好",
      description: "对技术有浓厚兴趣的用户",
      userCount: 1520,
      source: "行为分析",
      createdAt: new Date(2023, 2, 20),
      updatedAt: new Date(2023, 6, 19),
    },
    {
      id: "5",
      name: "活跃用户",
      category: "活跃度",
      description: "每周登录3次以上的用户",
      userCount: 8600,
      source: "系统生成",
      createdAt: new Date(2023, 1, 15),
      updatedAt: new Date(2023, 4, 10),
    },
  ]

  // 过滤标签
  const filteredTags = tags.filter(
    (tag) =>
      tag.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      tag.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
      tag.description.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  const formatDate = (date: Date) => {
    return date.toLocaleDateString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    })
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold">用户标签体系</h2>
        <Button>
          <PlusCircle className="mr-2 h-4 w-4" />
          创建新标签
        </Button>
      </div>

      <Collapsible open={openSections.tagList} onOpenChange={() => toggleSection("tagList")}>
        <div className="border rounded-md p-4">
          <CollapsibleTrigger className="flex justify-between items-center w-full mb-4">
            <h3 className="text-lg font-medium">标签列表</h3>
            {openSections.tagList ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
          </CollapsibleTrigger>
          <CollapsibleContent>
            <div className="flex justify-between items-center mb-4">
              <div className="flex space-x-2">
                <Select defaultValue="all">
                  <SelectTrigger className="w-[150px]">
                    <SelectValue placeholder="标签分类" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部���类</SelectItem>
                    <SelectItem value="value">价值分类</SelectItem>
                    <SelectItem value="role">职业角色</SelectItem>
                    <SelectItem value="interest">兴趣爱好</SelectItem>
                    <SelectItem value="activity">活跃度</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all">
                  <SelectTrigger className="w-[150px]">
                    <SelectValue placeholder="标签来源" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部来源</SelectItem>
                    <SelectItem value="system">系统生成</SelectItem>
                    <SelectItem value="keyword">流量词映射</SelectItem>
                    <SelectItem value="behavior">行为分析</SelectItem>
                    <SelectItem value="manual">手动创建</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="relative w-64">
                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="搜索标签..."
                  className="pl-8"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
            </div>

            <div className="rounded-md border">
              <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>
                  {filteredTags.map((tag) => (
                    <TableRow key={tag.id}>
                      <TableCell>
                        <div className="flex items-center">
                          <Tag className="h-4 w-4 mr-2 text-muted-foreground" />
                          <span className="font-medium">{tag.name}</span>
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge variant="outline">{tag.category}</Badge>
                      </TableCell>
                      <TableCell>{tag.description}</TableCell>
                      <TableCell>
                        <div className="flex items-center">
                          <Users className="h-4 w-4 mr-1 text-muted-foreground" />
                          {tag.userCount.toLocaleString()}
                        </div>
                      </TableCell>
                      <TableCell>{tag.source}</TableCell>
                      <TableCell>{formatDate(tag.createdAt)}</TableCell>
                      <TableCell>{formatDate(tag.updatedAt)}</TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end space-x-2">
                          <Button variant="ghost" size="icon">
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon" className="text-red-500">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CollapsibleContent>
        </div>
      </Collapsible>
    </div>
  )
}
