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

import { Skeleton } from './skeleton';

interface PageSkeletonProps {
  /** Number of content rows to render. Default: 4 */
  rows?: number;
  /** Show a header/title skeleton above rows. Default: true */
  showHeader?: boolean;
  /** Show a stats row (3 metric cards). Default: false */
  showStats?: boolean;
  className?: string;
}

/**
 * Full-page loading skeleton for site-scoped pages.
 * Use when the page is navigating and the primary data hasn't loaded yet.
 *
 * Usage:
 *   if (isLoading) return <PageSkeleton />;
 *   if (isLoading) return <PageSkeleton showStats rows={6} />;
 */
export function PageSkeleton({
  rows = 4,
  showHeader = true,
  showStats = false,
  className,
}: PageSkeletonProps) {
  return (
    <div
      role="status"
      aria-label="Loading page content"
      aria-busy="true"
      className={cn('space-y-6', className)}
    >
      {showHeader && (
        <div className="space-y-2">
          <Skeleton className="h-8 w-56" />
          <Skeleton className="h-4 w-80" />
        </div>
      )}

      {showStats && (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
          {[0, 1, 2].map((i) => (
            <div key={i} className="rounded-lg border bg-card p-4 space-y-2">
              <Skeleton className="h-4 w-24" />
              <Skeleton className="h-8 w-16" />
            </div>
          ))}
        </div>
      )}

      <div className="rounded-lg border bg-card p-4 space-y-3">
        {Array.from({ length: rows }, (_, i) => (
          <div key={i} className="flex items-center gap-3">
            <Skeleton className="h-4 w-4 shrink-0 rounded-full" />
            <Skeleton className={cn('h-4', i % 3 === 0 ? 'w-full' : i % 3 === 1 ? 'w-3/4' : 'w-1/2')} />
          </div>
        ))}
      </div>


    </div>
  );
}