"use client"

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select"
import { FilterSearchInput } from "@/shared/components/ui/filter-bar"
import { cn } from "@/shared/lib/utils"

/**
 * 题库筛选栏：统一的搜索 + 题型 + 难度筛选。
 *
 * 覆盖以下重复模式：
 * - exam-assembly.tsx 内嵌的题库筛选（compact 布局）
 * - question-bank-picker.tsx 内嵌的题库筛选（原生 HTML，需迁移到 shadcn）
 *
 * 注意：状态管理方式由调用方自行处理（exam-assembly 用 useState，
 * picker 用 useState 对象），本组件只负责 UI 渲染。
 */
interface QuestionBankFiltersProps {
  search: string
  onSearchChange: (value: string) => void
  type: string
  onTypeChange: (value: string) => void
  difficulty: string
  onDifficultyChange: (value: string) => void
  /** 布局变体：default=exam-assembly 风格, compact=紧凑内嵌 */
  layout?: "default" | "compact"
  className?: string
}

const TYPE_OPTIONS = [
  { value: "all", label: "All Types" },
  { value: "single_choice", label: "Single Choice" },
  { value: "multiple_choice", label: "Multiple Choice" },
  { value: "judgment", label: "True/False" },
  { value: "text", label: "Short Answer" },
]

const DIFFICULTY_OPTIONS = [
  { value: "all", label: "All" },
  { value: "1", label: "Lvl 1" },
  { value: "2", label: "Lvl 2" },
  { value: "3", label: "Lvl 3" },
  { value: "4", label: "Lvl 4" },
  { value: "5", label: "Lvl 5" },
]

export function QuestionBankFilters({
  search,
  onSearchChange,
  type,
  onTypeChange,
  difficulty,
  onDifficultyChange,
  layout = "default",
  className,
}: QuestionBankFiltersProps) {
  if (layout === "compact") {
    return (
      <div className={cn("space-y-2", className)}>
        <FilterSearchInput
          value={search}
          onChange={onSearchChange}
          placeholder="Search by content..."
          className="w-full"
          inputClassName="h-9 text-sm"
        />
        <div className="flex gap-2">
          <Select value={type} onValueChange={onTypeChange}>
            <SelectTrigger className="flex-1 h-8 text-xs bg-background">
              <SelectValue placeholder="Type" />
            </SelectTrigger>
            <SelectContent>
              {TYPE_OPTIONS.map((opt) => (
                <SelectItem key={opt.value} value={opt.value}>
                  {opt.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Select value={difficulty} onValueChange={onDifficultyChange}>
            <SelectTrigger className="w-[80px] h-8 text-xs bg-background">
              <SelectValue placeholder="Diff" />
            </SelectTrigger>
            <SelectContent>
              {DIFFICULTY_OPTIONS.map((opt) => (
                <SelectItem key={opt.value} value={opt.value}>
                  {opt.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>
    )
  }

  return (
    <div className={cn("flex gap-2", className)}>
      <FilterSearchInput
        value={search}
        onChange={onSearchChange}
        placeholder="Search by content..."
        className="flex-1"
        inputClassName="h-9 text-sm"
      />
      <Select value={type} onValueChange={onTypeChange}>
        <SelectTrigger className="w-[140px] h-9 text-sm bg-background">
          <SelectValue placeholder="Type" />
        </SelectTrigger>
        <SelectContent>
          {TYPE_OPTIONS.map((opt) => (
            <SelectItem key={opt.value} value={opt.value}>
              {opt.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <Select value={difficulty} onValueChange={onDifficultyChange}>
        <SelectTrigger className="w-[100px] h-9 text-sm bg-background">
          <SelectValue placeholder="Diff" />
        </SelectTrigger>
        <SelectContent>
          {DIFFICULTY_OPTIONS.map((opt) => (
            <SelectItem key={opt.value} value={opt.value}>
              {opt.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}
