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

/**
 * SSR-safe fallback UI.
 *
 * Rendered identically on the server, during hydration (`ClientOnly` fallback)
 * and while a route transition is pending, so a page never flashes blank.
 * Contains no dates, randomness or browser reads — it is fully deterministic.
 */
export function PageFallback({ label = "Loading…" }: { label?: string }) {
  return (
    <div className="space-y-6" role="status" aria-busy="true" aria-live="polite">
      <span className="sr-only">{label}</span>
      <div className="space-y-2">
        <Skeleton className="h-7 w-64" />
        <Skeleton className="h-4 w-96 max-w-full" />
      </div>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {[0, 1, 2, 3].map((i) => (
          <Skeleton key={i} className="h-24 rounded-xl" />
        ))}
      </div>
      <div className="space-y-2 rounded-xl border border-border p-4">
        <Skeleton className="h-5 w-40" />
        {[0, 1, 2, 3, 4].map((i) => (
          <Skeleton key={i} className="h-10 w-full" />
        ))}
      </div>
    </div>
  );
}

/** Full app-shell placeholder: sidebar rail + header + page skeleton. */
export function AppShellFallback() {
  return (
    <div className="flex min-h-screen w-full" role="status" aria-busy="true">
      <span className="sr-only">Loading workspace…</span>
      <div className="hidden w-64 shrink-0 border-r border-border bg-sidebar p-4 md:block">
        <Skeleton className="mb-6 h-10 w-40" />
        {Array.from({ length: 10 }, (_, i) => (
          <Skeleton key={i} className="mb-3 h-6 w-full" />
        ))}
      </div>
      <div className="min-w-0 flex-1">
        <div className="flex h-14 items-center justify-between border-b border-border px-4">
          <Skeleton className="size-8" />
          <Skeleton className="h-8 w-24" />
        </div>
        <div className="p-4 sm:p-6">
          <PageFallback label="Loading workspace…" />
        </div>
      </div>
    </div>
  );
}