import { Card } from "@/components/ui/Card";
import { PageContainer } from "@/components/ui/PageContainer";
import { Skeleton } from "@/components/ui/Skeleton";

// 全站加载骨架：与作品库结构近似（标题条 + 工具条 + 卡片网格），
// motion-safe 脉冲，尊重 prefers-reduced-motion。
export default function Loading() {
  return (
    <main className="min-h-screen bg-bg">
      <PageContainer>
        <div role="status" aria-label="加载中" className="space-y-8">
          <span className="sr-only">加载中…</span>
          <HeaderSkeleton />
          <ToolbarSkeleton />
          <GridSkeleton />
        </div>
      </PageContainer>
    </main>
  );
}

// 标题区：大标题条 + 说明条 + 右侧两枚按钮位。
function HeaderSkeleton() {
  return (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
      <div className="space-y-3">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-4 w-72 max-w-full" />
      </div>
      <div className="flex gap-2">
        <Skeleton className="h-9 w-28" />
        <Skeleton className="h-9 w-24" />
      </div>
    </div>
  );
}

// 工具条：搜索框 + 三枚控件位。
function ToolbarSkeleton() {
  return (
    <Card flat className="grid gap-3 p-3 md:grid-cols-[1fr_auto_auto_auto]">
      <Skeleton className="h-9 w-full" />
      <Skeleton className="h-9 w-28" />
      <Skeleton className="h-9 w-28" />
      <Skeleton className="h-9 w-20" />
    </Card>
  );
}

// 卡片网格：6 张与作品卡等高的占位卡。
function GridSkeleton() {
  return (
    <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
      {Array.from({ length: 6 }).map((_, i) => (
        <CardSkeleton key={i} />
      ))}
    </div>
  );
}

// 单张作品卡骨架：标题 + 徽章 + 三行简介 + 底部时间。
function CardSkeleton() {
  return (
    <Card flat className="flex h-full min-h-[176px] flex-col p-6">
      <div className="mb-4 flex items-start justify-between gap-3">
        <div className="min-w-0 flex-1 space-y-3">
          <Skeleton className="h-6 w-3/4" />
          <Skeleton className="h-5 w-16 rounded-full" />
        </div>
        <Skeleton className="h-8 w-8 shrink-0" />
      </div>
      <div className="space-y-2">
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-5/6" />
      </div>
      <Skeleton className="mt-auto h-3 w-28" />
    </Card>
  );
}
