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

import { Badge } from "@/shared/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { EmptyState } from "@/shared/components/ui/empty-state"

import {
  COURSE_SELECTION_STATUS_BADGE_VARIANTS,
  COURSE_SELECTION_STATUS_LABEL_KEYS,
} from "../constants"
import type { CourseSelectionWithDetails } from "../types"

/**
 * 家长视角下查看子女选课的只读视图。
 *
 * 设计原则：
 * - 只读：家长不能替子女选/退课，仅展示已选记录
 * - 复用：复用 Badge variant 映射 + i18n key，与 StudentSelectionView 一致
 * - 安全：组件本身不依赖 studentId，由父页面注入已过滤的数据
 */
export function ParentSelectionView({
  selections,
  studentName,
}: {
  selections: CourseSelectionWithDetails[]
  studentName: string
}) {
  const t = useTranslations("elective")

  const activeSelections = selections.filter((s) =>
    ["selected", "enrolled", "waitlist"].includes(s.status)
  )

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold border-b pb-2">{studentName}</h3>
        <span className="text-sm text-muted-foreground">
          {activeSelections.length}
        </span>
      </div>
      {activeSelections.length === 0 ? (
        <EmptyState
          title={t("parent.noRecordsTitle")}
          description={t("parent.noRecordsDescription")}
          icon={BookOpen}
          className="h-auto border-none shadow-none"
        />
      ) : (
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
          {activeSelections.map((sel) => (
            <Card key={sel.id}>
              <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0">
                <CardTitle className="text-base">
                  {sel.courseName ?? t("errors.notFound")}
                </CardTitle>
                <Badge variant={COURSE_SELECTION_STATUS_BADGE_VARIANTS[sel.status]}>
                  {t(COURSE_SELECTION_STATUS_LABEL_KEYS[sel.status])}
                </Badge>
              </CardHeader>
              <CardContent className="space-y-2">
                {sel.courseCapacity !== null && sel.courseEnrolledCount !== null ? (
                  <p className="text-xs text-muted-foreground">
                    {t("fields.enrolled")}: {sel.courseEnrolledCount}/{sel.courseCapacity}
                  </p>
                ) : null}
                {sel.lotteryRank ? (
                  <p className="text-xs text-muted-foreground">
                    #{sel.lotteryRank}
                  </p>
                ) : null}
                {sel.selectedAt ? (
                  <p className="text-xs text-muted-foreground">
                    {t("export.selectedAtHeader")}: {new Date(sel.selectedAt).toLocaleDateString()}
                  </p>
                ) : null}
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}
