import type { JSX } from "react"
import { getTranslations } from "next-intl/server"

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 }>
  exams: Array<{ id: string; title: string }>
  currentClassId: string
  currentSubjectId: string
  currentGradeId: string
  currentExamId: string
  currentSemester: string
}

export async function AnalyticsFilters({
  classes,
  grades,
  subjects,
  exams,
  currentClassId,
  currentSubjectId,
  currentGradeId,
  currentExamId,
  currentSemester,
}: AnalyticsFiltersProps): Promise<JSX.Element> {
  const t = await getTranslations("grades")
  const buildHref = (overrides: {
    classId?: string
    subjectId?: string
    gradeId?: string
    examId?: string
    semester?: 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
      )
    }
    // v3-P2-7: examId 筛选
    const examId = overrides.examId !== undefined ? overrides.examId : currentExamId
    if (examId && examId !== "all") {
      params.set("examId", examId)
    }
    // v3-P2-7: semester 筛选
    const semester = overrides.semester !== undefined ? overrides.semester : currentSemester
    if (semester && semester !== "all") {
      params.set("semester", semester)
    }
    return `/teacher/grades/analytics?${params.toString()}`
  }

  const semesterOptions = [
    { id: "all", name: t("analytics.semesterAll") },
    { id: "1", name: t("analytics.semester1") },
    { id: "2", name: t("analytics.semester2") },
  ]

  const examOptions = [
    { id: "all", name: t("analytics.examAll") },
    ...exams.map((e) => ({ id: e.id, name: e.title })),
  ]

  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">{t("analytics.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">{t("analytics.subject")}</div>
          <ChipNav
            options={subjects}
            currentId={currentSubjectId}
            buildHref={(id) => buildHref({ subjectId: id })}
            size="xs"
            allOption={{ id: "all", label: t("analytics.allOption") }}
            className="gap-1.5"
          />
        </div>

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

      {/* v3-P2-7: 学期和考试筛选 */}
      <div className="mt-4 grid grid-cols-1 gap-4 border-t pt-4 md:grid-cols-2">
        <div className="space-y-2">
          <div className="text-xs font-medium text-muted-foreground">{t("analytics.semester")}</div>
          <ChipNav
            options={semesterOptions}
            currentId={currentSemester}
            buildHref={(id) => buildHref({ semester: id })}
            size="xs"
            className="gap-1.5"
          />
        </div>

        <div className="space-y-2">
          <div className="text-xs font-medium text-muted-foreground">{t("analytics.exam")}</div>
          {examOptions.length > 1 ? (
            <ChipNav
              options={examOptions}
              currentId={currentExamId}
              buildHref={(id) => buildHref({ examId: id })}
              size="xs"
              className="gap-1.5"
            />
          ) : (
            <p className="text-xs text-muted-foreground">{t("analytics.noExams")}</p>
          )}
        </div>
      </div>
    </div>
  )
}
