import { Skeleton } from "@/shared/components/ui/skeleton"

export default function Loading() {
  return (
    <div
      role="status"
      aria-busy="true"
      aria-label="加载中"
      className="flex h-[calc(100vh-4rem)] flex-col overflow-hidden bg-muted/5"
    >
      {/* Reader Header Skeleton */}
      <div className="flex items-center justify-between border-b bg-background/95 backdrop-blur py-3 px-6 shrink-0">
        <div className="flex items-center gap-3 min-w-0">
          <Skeleton className="h-6 w-48" />
          <div className="flex items-center gap-2">
            <Skeleton className="h-5 w-16 rounded-full" />
            <Skeleton className="h-5 w-16 rounded-full" />
          </div>
        </div>
      </div>

      {/* Reader Body Skeleton: sidebar + content */}
      <div className="flex-1 overflow-hidden">
        <div className="h-full max-w-[1600px] mx-auto w-full grid grid-cols-1 md:grid-cols-[280px_1fr]">
          {/* Chapter Sidebar Skeleton */}
          <div className="hidden md:block border-r bg-card p-4 space-y-2 overflow-hidden">
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="flex items-center gap-2">
                <Skeleton className="h-4 w-4 rounded-sm" />
                <Skeleton className="h-6 w-full" />
              </div>
            ))}
          </div>

          {/* Content Area Skeleton */}
          <div className="p-6 space-y-4 overflow-hidden">
            <Skeleton className="h-8 w-1/3" />
            <div className="space-y-3">
              {Array.from({ length: 6 }).map((_, i) => (
                <Skeleton key={i} className="h-4 w-full" />
              ))}
            </div>
            <Skeleton className="h-32 w-full" />
          </div>
        </div>
      </div>
    </div>
  )
}