import { cn } from "@/lib/utils";

/**
 * 文章骨架屏组件。
 *
 * ## 为什么本项目没有使用路由级 `loading.tsx`
 *
 * 路由级 `loading.tsx` 会创建 Suspense 边界，Next.js 会**立即以 200 状态**
 * 流式输出骨架屏；之后页面内的 `notFound()` 只能替换内容，无法再改写已经
 * 发出的状态码。
 *
 * 实测结果（Next.js 16.3.8）：
 * - 存在 `app/[locale]/loading.tsx` 时，`/zh/posts/<草稿>` 与
 *   `/zh/posts/<不存在>` 均返回 **200**（内容却是 404 页面）；
 * - 移除后，二者正确返回 **404**。
 *
 * 对博客而言，让不存在的 URL 返回 200 会被搜索引擎当作有效页面收录，
 * 属于必须避免的 SEO 缺陷。因此这里**牺牲路由级骨架屏**，
 * 保证状态码正确；骨架屏仅作为组件按需使用（例如包裹已知存在的
 * 慢速数据区块）。
 */
export function PostListSkeleton({ count = 6 }: { count?: number }) {
	return (
		<div
			className="grid grid-cols-1 gap-lg sm:grid-cols-2 lg:grid-cols-3"
			aria-hidden="true"
		>
			{Array.from({ length: count }).map((_, index) => (
				<div
					// 骨架屏为静态占位，使用索引作 key 不会引起状态错位
					key={index}
					className={cn(
						"flex flex-col gap-sm rounded-lg border border-hairline bg-canvas p-xl",
					)}
				>
					{/* 日期 + 阅读时长 */}
					<div className="h-4 w-40 animate-pulse rounded-sm bg-hairline-soft" />
					{/* 标题 */}
					<div className="h-6 w-full animate-pulse rounded-md bg-hairline" />
					{/* 摘要两行 */}
					<div className="h-4 w-full animate-pulse rounded-sm bg-hairline-soft" />
					<div className="h-4 w-3/4 animate-pulse rounded-sm bg-hairline-soft" />
					{/* 标签 */}
					<div className="mt-xs flex gap-xs">
						<div className="h-5 w-14 animate-pulse rounded-sm bg-hairline-soft" />
						<div className="h-5 w-16 animate-pulse rounded-sm bg-hairline-soft" />
					</div>
				</div>
			))}
		</div>
	);
}

/** 文章详情页正文骨架 */
export function PostBodySkeleton() {
	return (
		<div className="mt-xl flex flex-col gap-md" aria-hidden="true">
			{Array.from({ length: 10 }).map((_, index) => (
				<div
					key={index}
					className="h-4 animate-pulse rounded-sm bg-hairline-soft"
					style={{ width: `${[100, 96, 88, 100, 92, 100, 84][index % 7]}%` }}
				/>
			))}
			<div className="mt-md h-40 w-full animate-pulse rounded-md bg-surface-code/20" />
		</div>
	);
}