"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, Filter, X } from "lucide-react"

export function UserPoolFilters() {
  const [searchQuery, setSearchQuery] = useState("")
  const [userType, setUserType] = useState("all")
  const [userSource, setUserSource] = useState("all")
  const [userValue, setUserValue] = useState("all")
  const [showFilters, setShowFilters] = useState(false)

  const clearFilters = () => {
    setSearchQuery("")
    setUserType("all")
    setUserSource("all")
    setUserValue("all")
  }

  return (
    <div className="space-y-4">
      <div className="flex flex-col md:flex-row gap-4">
        <div className="flex-1 relative">
          <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" onClick={() => setShowFilters(!showFilters)}>
          <Filter className="mr-2 h-4 w-4" />
          筛选
        </Button>
        {(userType !== "all" || userSource !== "all" || userValue !== "all") && (
          <Button variant="ghost" onClick={clearFilters}>
            <X className="mr-2 h-4 w-4" />
            清除筛选
          </Button>
        )}
      </div>
      {showFilters && (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Select value={userType} onValueChange={setUserType}>
            <SelectTrigger>
              <SelectValue placeholder="用户类型" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部类型</SelectItem>
              <SelectItem value="new">新用户</SelectItem>
              <SelectItem value="active">活跃用户</SelectItem>
              <SelectItem value="inactive">非活跃用户</SelectItem>
              <SelectItem value="lost">流失用户</SelectItem>
            </SelectContent>
          </Select>
          <Select value={userSource} onValueChange={setUserSource}>
            <SelectTrigger>
              <SelectValue placeholder="用户来源" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部来源</SelectItem>
              <SelectItem value="wechat">微信</SelectItem>
              <SelectItem value="douyin">抖音</SelectItem>
              <SelectItem value="xiaohongshu">小红书</SelectItem>
              <SelectItem value="website">官网</SelectItem>
              <SelectItem value="other">其他</SelectItem>
            </SelectContent>
          </Select>
          <Select value={userValue} onValueChange={setUserValue}>
            <SelectTrigger>
              <SelectValue placeholder="用户价值" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部价值</SelectItem>
              <SelectItem value="high">高价值</SelectItem>
              <SelectItem value="medium">中价值</SelectItem>
              <SelectItem value="low">低价值</SelectItem>
            </SelectContent>
          </Select>
        </div>
      )}
    </div>
  )
}