users/components/traffic-pool/user-tag-mapping.tsx

"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 { 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 { Checkbox } from "@/components/ui/checkbox"
import { PlusCircle, Search, Tag, ArrowRight } from "lucide-react"

interface TagMapping {
  id: string
  keywordId: string
  keyword: string
  tagId: string
  tagName: string
  tagCategory: string
  matchRule: string
  priority: number
  createdAt: Date
  status: "active" | "inactive"
}

export function UserTagMapping() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedMappings, setSelectedMappings] = useState<string[]>([])

  // 模拟数据
  const mappings: TagMapping[] = [
    {
      id: "1",
      keywordId: "1",
      keyword: "数字营销",
      tagId: "101",
      tagName: "营销决策者",
      tagCategory: "职业角色",
      matchRule: "精确匹配",
      priority: 1,
      createdAt: new Date(2023, 5, 15),
      status: "active",
    },
    {
      id: "2",
      keywordId: "2",
      keyword: "用户画像",
      tagId: "102",
      tagName: "数据分析师",
      tagCategory: "职业角色",
      matchRule: "包含匹配",
      priority: 2,
      createdAt: new Date(2023, 4, 10),
      status: "active",
    },
    {
      id: "3",
      keywordId: "3",
      keyword: "流量获取",
      tagId: "103",
      tagName: "营销专员",
      tagCategory: "职业角色",
      matchRule: "精确匹配",
      priority: 3,
      createdAt: new Date(2023, 3, 5),
      status: "active",
    },
    {
      id: "4",
      keywordId: "4",
      keyword: "数据可视化",
      tagId: "104",
      tagName: "技术人员",
      tagCategory: "职业角色",
      matchRule: "包含匹配",
      priority: 2,
      createdAt: new Date(2023, 2, 20),
      status: "inactive",
    },
    {
      id: "5",
      keywordId: "5",
      keyword: "精准营销",
      tagId: "105",
      tagName: "营销经理",
      tagCategory: "职业角色",
      matchRule: "精确匹配",
      priority: 1,
      createdAt: new Date(2023, 1, 15),
      status: "active",
    },
  ]

  // 过滤映射
  const filteredMappings = mappings.filter(
    (mapping) =>
      mapping.keyword.toLowerCase().includes(searchQuery.toLowerCase()) ||
      mapping.tagName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      mapping.tagCategory.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  const toggleSelectAll = () => {
    if (selectedMappings.length === filteredMappings.length) {
      setSelectedMappings([])
    } else {
      setSelectedMappings(filteredMappings.map((m) => m.id))
    }
  }

  const toggleSelectMapping = (id: string) => {
    if (selectedMappings.includes(id)) {
      setSelectedMappings(selectedMappings.filter((m) => m !== id))
    } else {
      setSelectedMappings([...selectedMappings, id])
    }
  }

  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>

      <Card>
        <CardHeader>
          <CardTitle>流量词与用户标签映射规则</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <div className="flex space-x-2">
                <Select defaultValue="all">
                  <SelectTrigger className="w-[150px]">
                    <SelectValue placeholder="状态" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部状态</SelectItem>
                    <SelectItem value="active">已启用</SelectItem>
                    <SelectItem value="inactive">已禁用</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all">
                  <SelectTrigger className="w-[150px]">
                    <SelectValue placeholder="标签分类" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部分类</SelectItem>
                    <SelectItem value="role">职业角色</SelectItem>
                    <SelectItem value="interest">兴趣爱好</SelectItem>
                    <SelectItem value="behavior">行为特征</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>

            {selectedMappings.length > 0 && (
              <div className="bg-muted p-2 rounded-md flex items-center justify-between">
                <span className="text-sm">已选择 {selectedMappings.length} 项</span>
                <div className="space-x-2">
                  <Button variant="outline" size="sm">
                    启用
                  </Button>
                  <Button variant="outline" size="sm">
                    禁用
                  </Button>
                  <Button variant="outline" size="sm" className="text-red-500">
                    删除
                  </Button>
                </div>
              </div>
            )}

            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-12">
                      <Checkbox
                        checked={selectedMappings.length === filteredMappings.length && filteredMappings.length > 0}
                        onCheckedChange={toggleSelectAll}
                        aria-label="Select all"
                      />
                    </TableHead>
                    <TableHead>流量词</TableHead>
                    <TableHead className="w-12 text-center">映射</TableHead>
                    <TableHead>用户标签</TableHead>
                    <TableHead>标签分类</TableHead>
                    <TableHead>匹配规则</TableHead>
                    <TableHead>优先级</TableHead>
                    <TableHead>创建时间</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead className="text-right">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredMappings.map((mapping) => (
                    <TableRow key={mapping.id}>
                      <TableCell>
                        <Checkbox
                          checked={selectedMappings.includes(mapping.id)}
                          onCheckedChange={() => toggleSelectMapping(mapping.id)}
                          aria-label={`Select ${mapping.keyword} to ${mapping.tagName} mapping`}
                        />
                      </TableCell>
                      <TableCell className="font-medium">{mapping.keyword}</TableCell>
                      <TableCell className="text-center">
                        <ArrowRight className="h-4 w-4 mx-auto" />
                      </TableCell>
                      <TableCell>
                        <Badge variant="outline" className="font-normal">
                          <Tag className="mr-1 h-3 w-3" />
                          {mapping.tagName}
                        </Badge>
                      </TableCell>
                      <TableCell>{mapping.tagCategory}</TableCell>
                      <TableCell>{mapping.matchRule}</TableCell>
                      <TableCell>{mapping.priority}</TableCell>
                      <TableCell>{formatDate(mapping.createdAt)}</TableCell>
                      <TableCell>
                        <Badge
                          variant={mapping.status === "active" ? "default" : "secondary"}
                          className={mapping.status === "active" ? "bg-green-500" : ""}
                        >
                          {mapping.status === "active" ? "已启用" : "已禁用"}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-right">
                        <Button variant="ghost" size="sm">
                          编辑
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}