"use client"

import { useRouter, useSearchParams } from "next/navigation"
import { cn } from "@/shared/lib/utils"
import { Badge } from "@/shared/components/ui/badge"

export interface ClassFilterItem {
  classId: string
  className: string
  /** 可选徽章文本（已翻译，如 "5 次练习" 或 "3 错题"） */
  badgeText?: string
  /** 可选次要信息文本（如 "2 待复习"） */
  secondaryText?: string
  /** 次要信息是否使用警告样式（红色） */
  secondaryWarning?: boolean
}

interface ClassFilterProps {
  classes: ClassFilterItem[]
  /** 当前选中的班级 ID（"all" 表示全部） */
  currentClassId: string
  /** URL 参数名（默认 "classId"） */
  paramName?: string
  /** "全部班级" 按钮文本（已翻译） */
  allLabel: string
  /** 无障碍标签（已翻译，如 "选择班级"） */
  ariaLabel?: string
}

/**
 * 通用班级筛选器（共享组件）。
 *
 * 通过 URL 查询参数（默认 `classId`）管理选中状态，点击切换班级。
 *
 * 解耦设计：
 * - 不依赖任何业务模块的类型或翻译
 * - 所有展示文本（allLabel、badgeText、secondaryText）由调用方翻译后传入
 * - 适用于教师/年级主任在 error-book、practice、homework 等模块的班级切换
 *
 * @example
 * // Server Component 页面调用
 * <ClassFilter
 *   classes={classes.map(c => ({
 *     classId: c.classId,
 *     className: c.className,
 *     badgeText: t("classFilter.sessionCount", { count: c.totalSessions }),
 *   }))}
 *   currentClassId={effectiveClassId}
 *   allLabel={t("classFilter.all")}
 *   ariaLabel={t("classFilter.selectClass")}
 * />
 */
export function ClassFilter({
  classes,
  currentClassId,
  paramName = "classId",
  allLabel,
  ariaLabel,
}: ClassFilterProps): React.ReactNode {
  const router = useRouter()
  const searchParams = useSearchParams()

  function handleSelect(classId: string): void {
    const params = new URLSearchParams(searchParams.toString())
    if (classId === "all") {
      params.delete(paramName)
    } else {
      params.set(paramName, classId)
    }
    router.push(`?${params.toString()}`, { scroll: false })
  }

  if (classes.length === 0) return null

  return (
    <div
      className="flex flex-wrap gap-2"
      role="tablist"
      aria-label={ariaLabel}
    >
      <button
        type="button"
        role="tab"
        aria-selected={currentClassId === "all"}
        onClick={() => handleSelect("all")}
        className={cn(
          "inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors",
          currentClassId === "all"
            ? "border-primary bg-primary text-primary-foreground"
            : "bg-card hover:bg-muted",
        )}
      >
        <span className="font-medium">{allLabel}</span>
      </button>
      {classes.map((cls) => {
        const isActive = currentClassId === cls.classId
        return (
          <button
            key={cls.classId}
            type="button"
            role="tab"
            aria-selected={isActive}
            onClick={() => handleSelect(cls.classId)}
            className={cn(
              "inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors",
              isActive
                ? "border-primary bg-primary text-primary-foreground"
                : "bg-card hover:bg-muted",
            )}
          >
            <span className="font-medium">{cls.className}</span>
            {cls.badgeText ? (
              <Badge
                variant={isActive ? "secondary" : "outline"}
                className="text-xs"
              >
                {cls.badgeText}
              </Badge>
            ) : null}
            {cls.secondaryText ? (
              <span
                className={cn(
                  "text-xs",
                  cls.secondaryWarning
                    ? isActive
                      ? "text-primary-foreground/80"
                      : "text-rose-600"
                    : "text-muted-foreground",
                )}
              >
                {cls.secondaryText}
              </span>
            ) : null}
          </button>
        )
      })}
    </div>
  )
}
