import {
  Skeleton,
  SkeletonStats,
  SkeletonTable,
  SkeletonText,
} from "@/components/ui/LoadingSkeleton";

/**
 * Route-level loading state for the leaderboard home. Mirrors the page
 * skeleton-for-skeleton: kicker + headline + lede, dataset chip strip,
 * anchor-dataset stats band, then filter controls and the table. All shimmer
 * comes from the `.skeleton` class, which the global prefers-reduced-motion
 * override settles to a static placeholder.
 */
export default function Loading() {
  return (
    <div aria-busy="true" className="flex flex-col gap-12 md:gap-16">
      <p role="status" className="sr-only">
        Loading the leaderboard…
      </p>

      {/* ---------- hero ---------- */}
      <section aria-hidden>
        <Skeleton className="h-3" width={220} />
        <Skeleton className="mt-5 h-12 md:h-14" width="min(38rem, 95%)" />
        <Skeleton className="mt-3 h-12 md:h-14" width="min(22rem, 65%)" />
        <SkeletonText className="mt-6 max-w-xl" lines={2} lastLineWidth="45%" />
        {/* dataset chip strip */}
        <div className="mt-8 flex flex-wrap items-center gap-2">
          <Skeleton className="h-3.5" width={64} />
          <Skeleton className="h-[26px]" width={92} />
          <Skeleton className="h-[26px]" width={108} />
          <Skeleton className="h-[26px]" width={132} />
        </div>
      </section>

      {/* ---------- anchor-dataset stats band ---------- */}
      <section aria-hidden className="flex flex-col gap-px">
        <Skeleton className="h-9 rounded-b-none" />
        <SkeletonStats
          className="grid-cols-2 rounded-t-none md:grid-cols-4"
          count={4}
        />
      </section>

      {/* ---------- leaderboard: title + controls + table ---------- */}
      <section aria-hidden className="flex flex-col gap-4">
        <Skeleton className="h-8" width="min(24rem, 80%)" />
        <div className="flex flex-wrap items-center gap-2">
          <Skeleton className="h-7" width={140} />
          <Skeleton className="h-7" width={176} />
          <Skeleton className="h-7" width={232} />
          <Skeleton className="ml-auto h-8 w-full max-w-52" />
        </div>
        <SkeletonTable rows={10} columns={8} />
      </section>
    </div>
  );
}