"use client"

import type { ReactNode } from "react"
import { Search, X } from "lucide-react"

import { Button } from "@/shared/components/ui/button"
import { Input } from "@/shared/components/ui/input"
import { cn } from "@/shared/lib/utils"

/**
 * 筛选栏容器：统一的筛选控件布局壳。
 *
 * 覆盖以下重复模式（6+ 个文件共享相同布局）：
 * - ExamFilters: 搜索 + Select + Reset
 * - TextbookFilters: 搜索 + Select + Reset
 * - QuestionFilters: 搜索 + Select + Select + Reset
 * - AuditLogFilters: Select + Input + Select + date + date + Reset
 * - LoginLogFilters: Select + Select + date + date + Reset
 *
 * 布局：移动端纵向排列，桌面端横向排列（可选 wrap/justify-between）。
 * 注意：URL 状态管理方式（nuqs/router/callback）由各模块自行处理，
 * 本组件只负责布局壳和 Reset 按钮的视觉统一。
 */
interface FilterBarProps {
  /** 筛选控件（搜索框、Select、日期等） */
  children: ReactNode
  /** 是否有激活的筛选条件（控制 Reset 按钮显示） */
  hasFilters?: boolean
  /** 重置回调 */
  onReset?: () => void
  /** 布局变体：默认=横向, wrap=允许换行, between=两端对齐 */
  layout?: "default" | "wrap" | "between"
  /** 容器间距类名（默认 "gap-3"） */
  gapClassName?: string
  /** 容器额外类名 */
  className?: string
  /** Reset 按钮额外类名（如 h-8 px-2） */
  resetClassName?: string
}

export function FilterBar({
  children,
  hasFilters = false,
  onReset,
  layout = "default",
  gapClassName = "gap-3",
  className,
  resetClassName,
}: FilterBarProps) {
  const layoutClass =
    layout === "wrap"
      ? "md:flex-wrap"
      : layout === "between"
        ? "md:justify-between"
        : ""

  return (
    <div
      className={cn(
        "flex flex-col",
        gapClassName,
        "md:flex-row md:items-center",
        layoutClass,
        className,
      )}
    >
      {children}
      {hasFilters && onReset ? (
        <FilterResetButton onClick={onReset} className={resetClassName} />
      ) : null}
    </div>
  )
}

/**
 * 筛选栏搜索框：带 Search 图标的 Input。
 *
 * 覆盖 exam-filters/textbook-filters/question-filters 中重复的搜索框模式。
 */
interface FilterSearchInputProps {
  value: string
  onChange: (value: string) => void
  placeholder?: string
  className?: string
  inputClassName?: string
}

export function FilterSearchInput({
  value,
  onChange,
  placeholder = "Search...",
  className,
  inputClassName,
}: FilterSearchInputProps) {
  return (
    <div className={cn("relative w-full md:w-80", className)}>
      <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground/50" />
      <Input
        placeholder={placeholder}
        className={cn("pl-9 bg-background border-muted-foreground/20", inputClassName)}
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  )
}

interface FilterResetButtonProps {
  onClick: () => void
  className?: string
}

export function FilterResetButton({ onClick, className }: FilterResetButtonProps) {
  return (
    <Button
      variant="ghost"
      onClick={onClick}
      className={cn("h-10 px-3", className)}
    >
      Reset
      <X className="ml-2 h-4 w-4" />
    </Button>
  )
}
