import type { ReactNode } from "react"
import { Suspense } from "react"
import Link from "next/link"
import { getTranslations } from "next-intl/server"
import {
  CalendarCheck,
  CalendarClock,
  FolderOpen,
  Megaphone,
  Upload,
} from "lucide-react"

import { Card, CardContent } from "@/shared/components/ui/card"
import { PageHeader } from "@/shared/components/ui/page-header"
import { Button } from "@/shared/components/ui/button"
import { Badge } from "@/shared/components/ui/badge"
import { Skeleton } from "@/shared/components/ui/skeleton"
import { DashboardSection } from "../dashboard-section"
import { DashboardTimeRangeFilter } from "../dashboard-time-range-filter"
import type { AdminDashboardStreams } from "../../streams"
import {
  AdminContentCard,
  AdminHeaderBadges,
  AdminHomeworkActivityCard,
  AdminRecentUsersTable,
  AdminStatsBar,
  AdminTrendCharts,
  AdminUserRolesCard,
} from "./admin-sections"

/**
 * 管理员仪表盘视图（P2-1 流式架构）
 *
 * 页面外壳（标题 + 快捷操作）立即渲染；各数据分区用 React `use()` 独立消费 streams 中的 Promise，
 * 在各自的 `<DashboardSection>` Suspense 边界内流式填充，互不阻塞。
 */
export async function AdminDashboardView({ streams }: { streams: AdminDashboardStreams }) {
  const t = await getTranslations("dashboard")

  return (
    <div className="flex h-full flex-col space-y-8 p-8">
      <PageHeader
        title={t("title.admin")}
        description={t("description.admin")}
        actions={
          <>
            <Button asChild variant="outline" size="sm" className="gap-2">
              <Link href="/admin/users/import">
                <Upload className="h-4 w-4" />
                {t("quickActions.importUsers")}
              </Link>
            </Button>
            <Button asChild size="sm" className="gap-2">
              <Link href="/admin/announcements">
                <Megaphone className="h-4 w-4" />
                {t("quickActions.newAnnouncement")}
              </Link>
            </Button>
            <Suspense fallback={<HeaderBadgeSkeleton />}>
              <AdminHeaderBadges t={t} streams={streams} />
            </Suspense>
          </>
        }
      />

      <DashboardSection variant="stats" ariaLabel={t("sections.quickStats")}>
        <AdminStatsBar t={t} streams={streams} />
      </DashboardSection>

      {/* L2: 时间范围筛选器 — 当前为 UI 占位，趋势数据接入后生效 */}
      <div className="flex justify-end">
        <DashboardTimeRangeFilter />
      </div>

      {/* 快捷操作 — 纯静态，无需数据获取 */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <QuickActionCard
          href="/admin/users/import"
          icon={Upload}
          title={t("quickActions.importUsers")}
          description={t("quickActions.importUsersDesc")}
        />
        <QuickActionCard
          href="/admin/announcements"
          icon={Megaphone}
          title={t("quickActions.newAnnouncement")}
          description={t("quickActions.newAnnouncementDesc")}
        />
        <QuickActionCard
          href="/admin/scheduling/changes"
          icon={CalendarClock}
          title={t("quickActions.approveSchedule")}
          description={t("quickActions.approveScheduleDesc")}
        />
        <QuickActionCard
          href="/admin/scheduling/auto"
          icon={CalendarClock}
          title={t("quickActions.autoSchedule")}
          description={t("quickActions.autoScheduleDesc")}
        />
        <QuickActionCard
          href="/admin/files"
          icon={FolderOpen}
          title={t("quickActions.fileManagement")}
          description={t("quickActions.fileManagementDesc")}
        />
        <QuickActionCard
          href="/admin/attendance"
          icon={CalendarCheck}
          title={t("quickActions.attendanceOverview")}
          description={t("quickActions.attendanceOverviewDesc")}
        />
      </div>

      <DashboardSection variant="chart" ariaLabel={t("sections.trends")}>
        <AdminTrendCharts t={t} />
      </DashboardSection>

      <div className="grid gap-6 lg:grid-cols-3">
        <DashboardSection variant="card" ariaLabel={t("sections.userRoles")}>
          <AdminUserRolesCard t={t} streams={streams} />
        </DashboardSection>
        <DashboardSection variant="card" ariaLabel={t("sections.content")}>
          <AdminContentCard t={t} streams={streams} />
        </DashboardSection>
        <DashboardSection variant="card" ariaLabel={t("sections.homeworkActivity")}>
          <AdminHomeworkActivityCard t={t} streams={streams} />
        </DashboardSection>
      </div>

      <DashboardSection variant="table" ariaLabel={t("sections.recentUsers")}>
        <AdminRecentUsersTable t={t} streams={streams} />
      </DashboardSection>
    </div>
  )
}

function HeaderBadgeSkeleton(): ReactNode {
  return (
    <>
      <Badge variant="outline" className="gap-2">
        <Skeleton className="h-4 w-4" />
        <Skeleton className="h-3 w-16" />
      </Badge>
      <Badge variant="outline" className="gap-2">
        <Skeleton className="h-4 w-4" />
        <Skeleton className="h-3 w-12" />
      </Badge>
    </>
  )
}

function QuickActionCard({
  href,
  icon: Icon,
  title,
  description,
}: {
  href: string
  icon: React.ComponentType<{ className?: string }>
  title: string
  description: string
}) {
  return (
    <Link href={href}>
      <Card className="transition-colors hover:border-primary/50 hover:bg-accent/50">
        <CardContent className="flex items-center gap-4 pt-6">
          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10">
            <Icon className="h-6 w-6 text-primary" />
          </div>
          <div className="space-y-1">
            <div className="font-medium">{title}</div>
            <div className="text-sm text-muted-foreground">{description}</div>
          </div>
        </CardContent>
      </Card>
    </Link>
  )
}
