users/components/traffic-pool/traffic-pool-list.tsx

"use client"

import { useState } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Checkbox } from "@/components/ui/checkbox"
import { MoreHorizontal, Edit, Trash2, BarChart2, Tag } from "lucide-react"

interface TrafficPool {
  id: string
  keyword: string
  source: string
  category: string
  volume: "high" | "medium" | "low"
  matchedUsers: number
  createdAt: Date
  updatedAt: Date
  tags: string[]
}

interface TrafficPoolListProps {
  searchQuery: string
}

export function TrafficPoolList({ searchQuery }: TrafficPoolListProps) {
  const [selectedKeywords, setSelectedKeywords] = useState<string[]>([])

  // 模拟数据
  const keywords: TrafficPool[] = [
    {
      id: "1",
      keyword: "数字营销",
      source: "搜索引擎",
      category: "营销",
      volume: "high",
      matchedUsers: 1250,
      createdAt: new Date(2023, 5, 15),
      updatedAt: new Date(2023, 6, 20),
      tags: ["高意向", "B端客户"],
    },
    {
      id: "2",
      keyword: "用户画像",
      source: "社交媒体",
      category: "数据分析",
      volume: "high",
      matchedUsers: 980,
      createdAt: new Date(2023, 4, 10),
      updatedAt: new Date(2023, 6, 18),
      tags: ["数据分析", "企业客户"],
    },
    {
      id: "3",
      keyword: "流量获取",
      source: "广告投放",
      category: "营销",
      volume: "medium",
      matchedUsers: 645,
      createdAt: new Date(2023, 3, 5),
      updatedAt: new Date(2023, 5, 25),
      tags: ["获客", "营销人员"],
    },
    {
      id: "4",
      keyword: "数据可视化",
      source: "内容营销",
      category: "数据分析",
      volume: "medium",
      matchedUsers: 520,
      createdAt: new Date(2023, 2, 20),
      updatedAt: new Date(2023, 6, 19),
      tags: ["技术", "数据分析师"],
    },
    {
      id: "5",
      keyword: "精准营销",
      source: "搜索引擎",
      category: "营销",
      volume: "high",
      matchedUsers: 1100,
      createdAt: new Date(2023, 1, 15),
      updatedAt: new Date(2023, 4, 10),
      tags: ["高转化", "营销经理"],
    },
  ]

  // 过滤关键词
  const filteredKeywords = keywords.filter(
    (keyword) =>
      keyword.keyword.toLowerCase().includes(searchQuery.toLowerCase()) ||
      keyword.source.toLowerCase().includes(searchQuery.toLowerCase()) ||
      keyword.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
      keyword.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase())),
  )

  const toggleSelectAll = () => {
    if (selectedKeywords.length === filteredKeywords.length) {
      setSelectedKeywords([])
    } else {
      setSelectedKeywords(filteredKeywords.map((k) => k.id))
    }
  }

  const toggleSelectKeyword = (id: string) => {
    if (selectedKeywords.includes(id)) {
      setSelectedKeywords(selectedKeywords.filter((k) => k !== id))
    } else {
      setSelectedKeywords([...selectedKeywords, id])
    }
  }

  const getVolumeBadge = (volume: string) => {
    switch (volume) {
      case "high":
        return <Badge className="bg-green-500">高</Badge>
      case "medium":
        return <Badge className="bg-blue-500">中</Badge>
      case "low":
        return <Badge className="bg-gray-500">低</Badge>
      default:
        return <Badge>未知</Badge>
    }
  }

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

  return (
    <div className="space-y-4">
      {selectedKeywords.length > 0 && (
        <div className="bg-muted p-2 rounded-md flex items-center justify-between">
          <span className="text-sm">已选择 {selectedKeywords.length} 项</span>
          <div className="space-x-2">
            <Button variant="outline" size="sm">
              <Tag className="mr-2 h-4 w-4" />
              批量标记
            </Button>
            <Button variant="outline" size="sm" className="text-red-500">
              <Trash2 className="mr-2 h-4 w-4" />
              批量删除
            </Button>
          </div>
        </div>
      )}

      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12">
                <Checkbox
                  checked={selectedKeywords.length === filteredKeywords.length && filteredKeywords.length > 0}
                  onCheckedChange={toggleSelectAll}
                  aria-label="Select all"
                />
              </TableHead>
              <TableHead>关键词</TableHead>
              <TableHead>来源</TableHead>
              <TableHead>分类</TableHead>
              <TableHead>流量</TableHead>
              <TableHead>匹配用户数</TableHead>
              <TableHead>创建时间</TableHead>
              <TableHead>更新时间</TableHead>
              <TableHead>标签</TableHead>
              <TableHead className="text-right">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredKeywords.map((keyword) => (
              <TableRow key={keyword.id}>
                <TableCell>
                  <Checkbox
                    checked={selectedKeywords.includes(keyword.id)}
                    onCheckedChange={() => toggleSelectKeyword(keyword.id)}
                    aria-label={`Select ${keyword.keyword}`}
                  />
                </TableCell>
                <TableCell className="font-medium">{keyword.keyword}</TableCell>
                <TableCell>{keyword.source}</TableCell>
                <TableCell>{keyword.category}</TableCell>
                <TableCell>{getVolumeBadge(keyword.volume)}</TableCell>
                <TableCell>{keyword.matchedUsers.toLocaleString()}</TableCell>
                <TableCell>{formatDate(keyword.createdAt)}</TableCell>
                <TableCell>{formatDate(keyword.updatedAt)}</TableCell>
                <TableCell>
                  <div className="flex flex-wrap gap-1">
                    {keyword.tags.map((tag) => (
                      <Badge key={tag} variant="outline" className="text-xs">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                </TableCell>
                <TableCell className="text-right">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">打开菜单</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel>操作</DropdownMenuLabel>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem>
                        <Edit className="mr-2 h-4 w-4" />
                        编辑
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <BarChart2 className="mr-2 h-4 w-4" />
                        查看分析
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Tag className="mr-2 h-4 w-4" />
                        管理标签
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem className="text-red-500">
                        <Trash2 className="mr-2 h-4 w-4" />
                        删除
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}