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

interface PageLoadingProps {
  label?: string;
  className?: string;
}

/** Centered spinner for route-level loading states. */
export function PageLoading({
  label = "Loading…",
  className,
}: PageLoadingProps) {
  return (
    <div
      className={cn(
        "flex flex-1 flex-col items-center justify-center gap-3 p-8",
        className
      )}
    >
      <div
        className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent"
        aria-hidden
      />
      <p className="text-sm text-muted">{label}</p>
    </div>
  );
}

/** Pulse skeleton for stat cards on dashboard/admin. */
export function StatGridSkeleton({ count = 4 }: { count?: number }) {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="h-[104px] animate-pulse rounded border border-border bg-card"
        />
      ))}
    </div>
  );
}

/** Generic table/card skeleton. */
export function CardSkeleton({ rows = 6 }: { rows?: number }) {
  return (
    <div className="animate-pulse rounded-lg border border-border bg-card shadow">
      <div className="border-b border-border px-5 py-4">
        <div className="h-4 w-40 rounded bg-border" />
      </div>
      <div className="space-y-0 p-2">
        {Array.from({ length: rows }).map((_, i) => (
          <div key={i} className="mx-3 my-2 h-10 rounded bg-bg" />
        ))}
      </div>
    </div>
  );
}

/** Dashboard page skeleton inside AppShell content area. */
export function DashboardSkeleton() {
  return (
    <div className="flex-1 overflow-y-auto p-4 sm:p-[26px]">
      <div className="mb-6">
        <StatGridSkeleton />
      </div>
      <div className="mb-[18px] flex flex-wrap gap-3">
        <div className="h-9 w-24 animate-pulse rounded-full bg-border" />
        <div className="h-9 w-20 animate-pulse rounded-full bg-border" />
        <div className="h-9 w-32 animate-pulse rounded-full bg-border" />
      </div>
      <CardSkeleton rows={8} />
    </div>
  );
}

/** Analytics page skeleton. */
export function AnalyticsSkeleton() {
  return (
    <div className="flex-1 space-y-5 overflow-y-auto p-4 sm:p-[26px]">
      <div className="h-12 animate-pulse rounded-lg border border-border bg-card" />
      <StatGridSkeleton />
      <div className="grid gap-4 lg:grid-cols-2">
        <div className="h-[240px] animate-pulse rounded-lg border border-border bg-card" />
        <div className="h-[240px] animate-pulse rounded-lg border border-border bg-card" />
      </div>
      <CardSkeleton rows={4} />
    </div>
  );
}