import type { JSX } from "react"

import { ChipNav } from "@/shared/components/ui/chip-nav"

interface AnalyticsFiltersProps {
  classes: Array<{ id: string; name: string }>
  grades: Array<{ id: string; name: string }>
  subjects: Array<{ id: string; name: string }>
  currentClassId: string
  currentSubjectId: string
  currentGradeId: string
}

export function AnalyticsFilters({
  classes,
  grades,
  subjects,
  currentClassId,
  currentSubjectId,
  currentGradeId,
}: AnalyticsFiltersProps): JSX.Element {
  const buildHref = (overrides: {
    classId?: string
    subjectId?: string
    gradeId?: string
  }): string => {
    const params = new URLSearchParams()
    params.set(
      "classId",
      overrides.classId !== undefined ? overrides.classId : currentClassId
    )
    params.set(
      "subjectId",
      overrides.subjectId !== undefined ? overrides.subjectId : currentSubjectId
    )
    if (
      overrides.gradeId !== undefined
        ? overrides.gradeId
        : currentGradeId
    ) {
      params.set(
        "gradeId",
        overrides.gradeId !== undefined ? overrides.gradeId : currentGradeId
      )
    }
    return `/teacher/grades/analytics?${params.toString()}`
  }

  return (
    <div className="rounded-lg border bg-card p-4">
      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        <div className="space-y-2">
          <div className="text-xs font-medium text-muted-foreground">Class</div>
          <ChipNav
            options={classes}
            currentId={currentClassId}
            buildHref={(id) => buildHref({ classId: id })}
            size="xs"
            className="gap-1.5"
          />
        </div>

        <div className="space-y-2">
          <div className="text-xs font-medium text-muted-foreground">Subject</div>
          <ChipNav
            options={subjects}
            currentId={currentSubjectId}
            buildHref={(id) => buildHref({ subjectId: id })}
            size="xs"
            allOption={{ id: "all", label: "All" }}
            className="gap-1.5"
          />
        </div>

        <div className="space-y-2">
          <div className="text-xs font-medium text-muted-foreground">
            Grade (for class comparison)
          </div>
          <ChipNav
            options={grades}
            currentId={currentGradeId}
            buildHref={(id) => buildHref({ gradeId: id })}
            size="xs"
            className="gap-1.5"
          />
        </div>
      </div>
    </div>
  )
}
