users/components/home/user-search.tsx

'use client'

import { useEffect, useMemo, useState } from 'react'
import { Slider } from '@/components/ui/slider'
import { Checkbox } from '@/components/ui/checkbox'
import { Button } from '@/components/ui/button'
import UserList from './user-list'
import useDebounce from '@/hooks/use-debounce'

type UserStatus = '活跃' | '沉睡' | '流失风险'

export default function UserSearch({ query }: { query: string }) {
  const [status, setStatus] = useState<UserStatus[]>([])
  const [rfm, setRfm] = useState<[number, number]>([0, 100])

  const debouncedQ = useDebounce(query, 300)

  const qs = useMemo(() => {
    const p = new URLSearchParams()
    if (debouncedQ.trim()) p.set('q', debouncedQ.trim())
    if (status.length) p.set('status', status.join(','))
    if (rfm[0] !== 0) p.set('rfmMin', String(rfm[0]))
    if (rfm[1] !== 100) p.set('rfmMax', String(rfm[1]))
    p.set('page', '1')
    p.set('pageSize', '20')
    return p.toString()
  }, [debouncedQ, status, rfm])

  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
      {/* 过滤区 */}
      <div className="rounded-lg border bg-white p-4 md:sticky md:top-4 h-max">
        <div className="space-y-4">
          <div>
            <div className="text-sm font-medium mb-2">状态</div>
            <div className="grid gap-2 text-sm">
              {(['活跃', '沉睡', '流失风险'] as UserStatus[]).map((s) => {
                const checked = status.includes(s)
                return (
                  <label key={s} className="flex items-center gap-2">
                    <Checkbox
                      checked={checked}
                      onCheckedChange={(v) =>
                        setStatus((prev) => (v ? [...prev, s] : prev.filter((x) => x !== s)))
                      }
                    />
                    <span>{s}</span>
                  </label>
                )
              })}
            </div>
          </div>

          <div>
            <div className="text-sm font-medium mb-2">RFM 区间</div>
            <Slider value={rfm} min={0} max={100} step={1} onValueChange={(v) => setRfm([v[0], v[1]] as any)} />
            <div className="mt-2 text-xs text-gray-500">{rfm[0]} - {rfm[1]}</div>
          </div>

          <div className="flex gap-2">
            <Button variant="outline" onClick={() => { setStatus([]); setRfm([0, 100]) }}>重置</Button>
            <Button
              onClick={() => {
                // 触发一次刷新：依赖于 qs 的变化，列表会自动刷新，这里可以空操作
              }}
            >
              应用
            </Button>
          </div>
        </div>
      </div>

      {/* 列表区 */}
      <div className="md:col-span-3">
        <UserList queryString={qs} />
      </div>
    </div>
  )
}