import type { ReactElement } from "react"
import Link from "next/link"
import { getTranslations } from "next-intl/server"
import { Calendar, GraduationCap } from "lucide-react"

import { getTeacherProfileOverviewData } from "@/modules/settings/data-access-profile-overview"
import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Separator } from "@/shared/components/ui/separator"

interface ProfileTeacherOverviewProps {
  /** 传入空字符串表示使用当前会话教师 */
  teacherId?: string
}

/**
 * 教师概览区块（Server Component）
 *
 * 独立获取教师数据并渲染，可被 Suspense + ErrorBoundary 包裹实现流式渲染与局部容错。
 * 数据获取通过 settings 模块自身的 data-access-profile-overview 层调用，
 * 不直接 import classes 的 data-access。
 */
export async function ProfileTeacherOverview(
  _props: ProfileTeacherOverviewProps = {}
): Promise<ReactElement> {
  const t = await getTranslations("settings.profile.teacherOverview")

  const { subjects, classes } = await getTeacherProfileOverviewData()

  return (
    <div className="space-y-6">
      <Separator />
      <div className="space-y-1">
        <h2 className="text-xl font-semibold tracking-tight">{t("title")}</h2>
        <div className="text-sm text-muted-foreground">{t("description")}</div>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <GraduationCap className="h-5 w-5" />
              {t("teachingSubjects")}
            </CardTitle>
            <CardDescription>{t("teachingSubjectsDesc")}</CardDescription>
          </CardHeader>
          <CardContent>
            {subjects.length === 0 ? (
              <div className="text-sm text-muted-foreground">{t("noSubjects")}</div>
            ) : (
              <div className="flex flex-wrap gap-2">
                {subjects.map((subject) => (
                  <Badge key={subject} variant="secondary">
                    {subject}
                  </Badge>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Calendar className="h-5 w-5" />
              {t("teachingClasses")}
            </CardTitle>
            <CardDescription>{t("teachingClassesDesc")}</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            {classes.length === 0 ? (
              <div className="text-sm text-muted-foreground">{t("noClasses")}</div>
            ) : (
              classes.map((cls) => (
                <div key={cls.id} className="flex items-center justify-between gap-4 rounded-md border px-3 py-2">
                  <div className="min-w-0">
                    <div className="truncate text-sm font-medium">{cls.name}</div>
                    <div className="text-xs text-muted-foreground">
                      {cls.grade}
                      {cls.homeroom ? ` • ${cls.homeroom}` : ""}
                    </div>
                  </div>
                  <Button asChild variant="outline" size="sm">
                    <Link href={`/teacher/classes/my/${encodeURIComponent(cls.id)}`}>{t("view")}</Link>
                  </Button>
                </div>
              ))
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

/**
 * 教师概览骨架屏
 */
export function ProfileTeacherOverviewSkeleton(): ReactElement {
  return (
    <div className="space-y-6">
      <Separator />
      <div className="space-y-2">
        <div className="h-6 w-40 animate-pulse rounded bg-muted" />
        <div className="h-4 w-64 animate-pulse rounded bg-muted" />
      </div>
      <div className="grid gap-6 lg:grid-cols-2">
        <div className="h-48 animate-pulse rounded-lg bg-muted" />
        <div className="h-48 animate-pulse rounded-lg bg-muted" />
      </div>
    </div>
  )
}
