import Link from "next/link"

import { cn } from "@/shared/lib/utils"

/**
 * Chip 导航组：用于通过 URL search params 切换筛选维度的 chip/button 组。
 *
 * 覆盖以下重复模式：
 * - stats-class-selector（班级 + 学科 chip 组）
 * - attendance-stats-class-selector（班级 chip 组）
 * - analytics-filters（班级 + 学科 + 年级 chip 组）
 *
 * 每个 chip 是一个 Link，点击后通过 buildHref 构造的 URL 跳转。
 */
interface ChipNavOption {
  id: string
  name: string
}

interface ChipNavProps {
  /** 可选项列表 */
  options: ChipNavOption[]
  /** 当前选中项 id */
  currentId: string
  /** 根据选项 id 构造跳转 href */
  buildHref: (id: string) => string
  /** chip 尺寸："sm"（默认）或 "xs"（更紧凑） */
  size?: "sm" | "xs"
  /** 可选的 "全部" 选项，放在最前 */
  allOption?: { id: string; label: string }
  /** 额外类名 */
  className?: string
}

export function ChipNav({
  options,
  currentId,
  buildHref,
  size = "sm",
  allOption,
  className,
}: ChipNavProps) {
  const sizeClass =
    size === "xs" ? "px-2.5 py-1 text-xs" : "px-3 py-1.5 text-sm"

  const chipClass = (active: boolean): string =>
    cn(
      "rounded-md border transition-colors",
      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      sizeClass,
      active
        ? "border-primary bg-primary text-primary-foreground"
        : "bg-card hover:bg-accent"
    )

  return (
    <div className={cn("flex flex-wrap gap-2", className)}>
      {allOption ? (
        <Link
          key={allOption.id}
          href={buildHref(allOption.id)}
          className={chipClass(currentId === allOption.id)}
        >
          {allOption.label}
        </Link>
      ) : null}
      {options.map((option) => (
        <Link
          key={option.id}
          href={buildHref(option.id)}
          className={chipClass(currentId === option.id)}
        >
          {option.name}
        </Link>
      ))}
    </div>
  )
}
