"use client"

import { useEffect, useState } from "react"
import { X } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"

export type FilterValues = {
  tags: string[]
  status: Array<"活跃" | "沉睡" | "已封禁">
  rfm: [number, number]
}

interface Props {
  open: boolean
  onOpenChange: (v: boolean) => void
  allTags: string[]
  value: FilterValues
  onApply: (v: FilterValues) => void
}

export default function FilterDrawer({ open, onOpenChange, allTags, value, onApply }: Props) {
  const [local, setLocal] = useState<FilterValues>(value)

  useEffect(() => setLocal(value), [value, open])

  const toggleTag = (t: string, checked: boolean) => {
    setLocal((prev) => ({
      ...prev,
      tags: checked ? Array.from(new Set([...prev.tags, t])) : prev.tags.filter((x) => x !== t),
    }))
  }

  const toggleStatus = (s: "活跃" | "沉睡" | "已封禁", checked: boolean) => {
    setLocal((prev) => ({
      ...prev,
      status: checked ? Array.from(new Set([...prev.status, s])) : prev.status.filter((x) => x !== s),
    }))
  }

  const apply = () => {
    onApply(local)
    onOpenChange(false)
  }

  const reset = () => {
    const init: FilterValues = { tags: [], status: [], rfm: [0, 100] }
    setLocal(init)
    onApply(init)
  }

  return (
    <div
      className={`fixed inset-0 z-50 ${open ? "" : "pointer-events-none"} aria-modal`}
      role="dialog"
      aria-hidden={!open}
    >
      <div
        className={`absolute inset-0 bg-black/40 transition-opacity ${open ? "opacity-100" : "opacity-0"}`}
        onClick={() => onOpenChange(false)}
      />
      <aside
        className={`absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl transition-transform duration-300
        ${open ? "translate-x-0" : "translate-x-full"}`}
        aria-label="筛选"
      >
        <div className="flex items-center justify-between p-4 border-b">
          <h2 className="text-lg font-semibold">筛选</h2>
          <Button variant="ghost" size="icon" onClick={() => onOpenChange(false)} aria-label="关闭筛选">
            <X className="h-5 w-5" />
          </Button>
        </div>

        <div className="p-4 space-y-6 overflow-y-auto h-[calc(100%-120px)]">
          {/* RFM 区间 */}
          <section>
            <h3 className="text-sm font-medium mb-3">RFM 区间</h3>
            <div className="grid grid-cols-2 gap-2 items-center">
              <div>
                <Label htmlFor="rfmMin" className="text-xs">最小值</Label>
                <Input
                  id="rfmMin"
                  type="number"
                  min={0}
                  max={100}
                  value={local.rfm[0]}
                  onChange={(e) => {
                    const v = Math.max(0, Math.min(100, Number(e.target.value) || 0))
                    setLocal((p) => ({ ...p, rfm: [Math.min(v, p.rfm[1]), p.rfm[1]] }))
                  }}
                />
              </div>
              <div>
                <Label htmlFor="rfmMax" className="text-xs">最大值</Label>
                <Input
                  id="rfmMax"
                  type="number"
                  min={0}
                  max={100}
                  value={local.rfm[1]}
                  onChange={(e) => {
                    const v = Math.max(0, Math.min(100, Number(e.target.value) || 100))
                    setLocal((p) => ({ ...p, rfm: [p.rfm[0], Math.max(v, p.rfm[0])] }))
                  }}
                />
              </div>
            </div>
          </section>

          {/* 状态 */}
          <section>
            <h3 className="text-sm font-medium mb-3">状态</h3>
            <div className="grid gap-2">
              {(["活跃", "沉睡", "已封禁"] as const).map((s) => (
                <label key={s} className="flex items-center gap-2 text-sm">
                  <Checkbox checked={local.status.includes(s)} onCheckedChange={(ck) => toggleStatus(s, Boolean(ck))} />
                  <span>{s}</span>
                </label>
              ))}
            </div>
          </section>

          {/* 标签 */}
          <section>
            <h3 className="text-sm font-medium mb-3">标签</h3>
            <div className="grid grid-cols-2 gap-2 max-h-56 overflow-auto">
              {allTags.map((t) => (
                <label key={t} className="flex items-center gap-2 text-sm">
                  <Checkbox checked={local.tags.includes(t)} onCheckedChange={(ck) => toggleTag(t, Boolean(ck))} />
                  <span className="truncate">{t}</span>
                </label>
              ))}
              {!allTags.length && <div className="text-xs text-muted-foreground col-span-2">暂无标签数据</div>}
            </div>
          </section>
        </div>

        {/* Footer */}
        <div className="p-4 border-t flex items-center justify-between gap-2">
          <Button variant="outline" onClick={reset}>重置</Button>
          <div className="flex gap-2">
            <Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
            <Button onClick={apply}>应用</Button>
          </div>
        </div>
      </aside>
    </div>
  )
}
