import type { ReactNode } from "react"
import Link from "next/link"
import { getTranslations } from "next-intl/server"
import {
  CalendarCheck,
  CalendarDays,
  GraduationCap,
  Megaphone,
  Users,
} from "lucide-react"

import { Card, CardContent } from "@/shared/components/ui/card"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { getGreetingKey } from "@/modules/dashboard/lib/dashboard-utils"

/**
 * 家长仪表盘视图组件（V4 P1-4 从 parent 模块迁移至 dashboard 模块）。
 *
 * 通过组合（slots）注入家长专属子组件，避免直接 import parent 模块组件，
 * 符合"模块内部组件绝不直接 import 其他业务模块"的解耦原则。
 *
 * @param parentName 家长名称
 * @param childrenCount 关联子女数
 * @param childrenSlot 子女卡片列表（由调用方注入 ChildCard 组件）
 * @param attentionBannerSlot 关注横幅（由调用方注入 ParentAttentionBanner 组件）
 * @param aiSummarySlot AI 学情摘要区域（由调用方注入 AiChildSummary 组件，可选）
 */
export async function ParentDashboard({
  parentName,
  childrenCount,
  childrenSlot,
  attentionBannerSlot,
  aiSummarySlot,
}: {
  parentName: string
  childrenCount: number
  childrenSlot: ReactNode
  attentionBannerSlot: ReactNode
  aiSummarySlot?: ReactNode
}) {
  const t = await getTranslations("dashboard")
  const hasChildren = childrenCount > 0
  const greetingKey = getGreetingKey(new Date())

  const QUICK_ENTRIES = [
    { href: "/parent/grades", label: t("quickActions.grades"), icon: GraduationCap },
    { href: "/parent/attendance", label: t("quickActions.attendance"), icon: CalendarCheck },
    { href: "/announcements", label: t("quickActions.announcements"), icon: Megaphone },
    { href: "/parent/leave", label: t("quickActions.leaveRequest"), icon: CalendarDays },
  ] as const

  return (
    <div className="space-y-6">
      <div className="space-y-1">
        <h1 className="text-2xl font-bold tracking-tight">{t("title.parent")}</h1>
        <div className="text-sm text-muted-foreground">
          {t(`greeting.${greetingKey}`)}
          {parentName ? `, ${parentName}` : ""}. {t("description.parent")}
        </div>
      </div>

      {hasChildren ? (
        <>
          {attentionBannerSlot}

          <nav
            aria-label={t("quickActions.announcements")}
            className="grid grid-cols-2 gap-3 sm:grid-cols-4"
          >
            {QUICK_ENTRIES.map((entry) => (
              <Link
                key={entry.href}
                href={entry.href}
                className="group"
                aria-label={entry.label}
              >
                <Card className="h-full transition-colors hover:bg-muted/50 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
                  <CardContent className="flex flex-col items-center justify-center gap-2 p-4 text-center">
                    <entry.icon
                      className="h-6 w-6 text-muted-foreground group-hover:text-foreground"
                      aria-hidden
                    />
                    <span className="text-sm font-medium">{entry.label}</span>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </nav>

          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Users className="h-4 w-4" aria-hidden />
            <span>
              {t("badge.childrenLinked", { count: childrenCount })}
            </span>
          </div>

          {childrenSlot}

          {aiSummarySlot}
        </>
      ) : (
        <EmptyState
          icon={Users}
          title={t("empty.noChildren")}
          description={t("empty.noChildrenDesc")}
          className="border-none shadow-none"
          action={{
            label: t("empty.contactSupport"),
            href: "/messages",
          }}
        />
      )}
    </div>
  )
}
