"use client"

import { Plus } from "lucide-react"
import { useTranslations } from "next-intl"

import type { SchoolListItem } from "../types"
import { Button } from "@/shared/components/ui/button"
import { Input } from "@/shared/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select"

type GradeListToolbarProps = {
  q: string
  setQ: (value: string | null) => void
  school: string
  setSchool: (value: string | null) => void
  head: string
  setHead: (value: string | null) => void
  sort: string
  setSort: (value: string | null) => void
  hasFilters: boolean
  onReset: () => void
  schools: SchoolListItem[]
  onCreate: () => void
  isWorking: boolean
}

/**
 * 年级列表工具栏。
 *
 * 展示搜索框、学校筛选、年级主任筛选、排序选择器以及「新建年级」按钮。
 * 筛选状态由父组件通过 nuqs useQueryState 管理，本组件仅负责渲染与回调。
 */
export function GradeListToolbar({
  q,
  setQ,
  school,
  setSchool,
  head,
  setHead,
  sort,
  setSort,
  hasFilters,
  onReset,
  schools,
  onCreate,
  isWorking,
}: GradeListToolbarProps) {
  const t = useTranslations("school")

  return (
    <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
      <div className="flex flex-1 flex-col gap-2 md:flex-row md:items-center">
        <div className="flex-1 md:max-w-sm">
          <Input placeholder={t("grades.filters.search")} value={q} onChange={(e) => setQ(e.target.value || null)} />
        </div>

        <Select value={school} onValueChange={(v) => setSchool(v === "all" ? null : v)}>
          <SelectTrigger className="w-full md:w-[220px]">
            <SelectValue placeholder={t("grades.filters.school")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("grades.filters.allSchools")}</SelectItem>
            {schools.map((s) => (
              <SelectItem key={s.id} value={s.id}>
                {s.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Select value={head} onValueChange={(v) => setHead(v === "all" ? null : v)}>
          <SelectTrigger className="w-full md:w-[220px]">
            <SelectValue placeholder={t("grades.filters.head")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("grades.filters.allHeads")}</SelectItem>
            <SelectItem value="missing">{t("grades.filters.missing")}</SelectItem>
            <SelectItem value="missing_grade_head">{t("grades.filters.missingGradeHead")}</SelectItem>
            <SelectItem value="missing_teaching_head">{t("grades.filters.missingTeachingHead")}</SelectItem>
          </SelectContent>
        </Select>

        <Select value={sort} onValueChange={(v) => setSort(v === "default" ? null : v)}>
          <SelectTrigger className="w-full md:w-[220px]">
            <SelectValue placeholder={t("grades.filters.sort")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="default">{t("grades.filters.defaultSort")}</SelectItem>
            <SelectItem value="updated_desc">{t("grades.filters.updatedDesc")}</SelectItem>
            <SelectItem value="updated_asc">{t("grades.filters.updatedAsc")}</SelectItem>
            <SelectItem value="name_asc">{t("grades.filters.nameAsc")}</SelectItem>
            <SelectItem value="name_desc">{t("grades.filters.nameDesc")}</SelectItem>
            <SelectItem value="order_asc">{t("grades.filters.orderAsc")}</SelectItem>
            <SelectItem value="order_desc">{t("grades.filters.orderDesc")}</SelectItem>
          </SelectContent>
        </Select>

        {hasFilters ? (
          <Button variant="outline" onClick={onReset}>
            {t("grades.filters.reset")}
          </Button>
        ) : null}
      </div>

      <Button onClick={onCreate} disabled={isWorking || schools.length === 0}>
        <Plus className="mr-2 h-4 w-4" />
        {t("grades.new")}
      </Button>
    </div>
  )
}
