"use client"

import { 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="mt-8">
      <h2 className="text-xl font-semibold mb-4">用户搜索与筛选</h2>
      <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 cursor-pointer">
                      <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 [number, number])}
                className="w-full"
              />
              <div className="mt-2 text-xs text-gray-500 flex justify-between">
                <span>{rfm[0]}</span>
                <span>{rfm[1]}</span>
              </div>
            </div>

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

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