"use client"

import * as React from "react"
import { cn } from "../../lib/utils"
import { Skeleton } from "../ui/skeleton"

/**
 * ListPageLoadingFallback — a skeleton that mirrors the real `ListPageTemplate`
 * chrome so the first paint after a route change already feels like the final hub.
 *
 * Use it as the `fallback` for any `<Suspense>` that wraps a hub route that
 * renders `<ListPageTemplate ...>`.
 *
 * It shows:
 *  - A header bar placeholder
 *  - The view segmented toolbar (fake tabs + count pills)
 *  - A flat KeyMetrics band skeleton
 *  - A DataTable header row + several data rows
 *
 * This prevents the "empty white → full chrome" flash the user complained about.
 */
export function ListPageLoadingFallback({
  showMetrics = true,
  tabCount = 4,
  rowCount = 6,
  className,
}: {
  /** Whether to show the metrics band skeleton (match the real page) */
  showMetrics?: boolean
  /** How many fake view tabs to render in the toolbar skeleton */
  tabCount?: number
  /** How many data rows to show under the table header */
  rowCount?: number
  className?: string
}) {
  return (
    <div
      role="status"
      aria-live="polite"
      className={cn("flex min-h-0 flex-1 flex-col", className)}
      aria-busy="true"
      aria-label="Loading hub"
    >
      {/* Header area (title + actions) */}
      <div className="mx-4 mt-4 lg:mx-6">
        <Skeleton className="h-9 w-72 max-w-full" />
        <div className="mt-2 flex items-center gap-2">
          <Skeleton className="h-5 w-40" />
          <Skeleton className="h-5 w-24" />
        </div>
      </div>

      {/* Optional metrics strip (flat band style) */}
      {showMetrics && (
        <div className="mx-4 mt-4 lg:mx-6">
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
            {Array.from({ length: 4 }).map((_, i) => (
              <div key={i} className="rounded-xl border border-border bg-card p-3">
                <Skeleton className="h-4 w-16" />
                <Skeleton className="mt-2 h-7 w-20" />
                <Skeleton className="mt-1 h-3 w-24" />
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Views toolbar skeleton (matches the real segmented control) */}
      <div className="mx-4 mt-4 lg:mx-6">
        <div className="flex w-max items-center gap-1 py-1.5">
          {Array.from({ length: tabCount }).map((_, i) => (
            <div
              key={i}
              className="inline-flex h-8 min-w-[92px] items-center gap-2 rounded-md border border-border bg-muted/30 px-3"
            >
              <Skeleton className="size-3.5 rounded" />
              <Skeleton className="h-3.5 w-12" />
              {/* Fake count pill */}
              <Skeleton className="ms-1 h-4 w-6 rounded-full" />
            </div>
          ))}
          {/* Add view ghost — a square, because the real trigger is a lone
              glyph and a label-width placeholder would shuffle the rail on
              hydrate. */}
          <div className="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground">
            <Skeleton className="size-3.5 rounded" />
          </div>
        </div>
      </div>

      {/* Table header + rows skeleton */}
      <div className="mx-4 mt-2 min-h-0 flex-1 overflow-hidden lg:mx-6">
        <div className="rounded-t-lg border border-b-0 border-border bg-card">
          {/* Header row */}
          <div className="flex h-9 items-center border-b border-border bg-dt-header-bg px-3 text-xs">
            <Skeleton className="h-3 w-4" />
            <div className="ms-4 flex flex-1 items-center gap-4">
              <Skeleton className="h-3 w-28" />
              <Skeleton className="h-3 w-20" />
              <Skeleton className="h-3 w-16" />
              <Skeleton className="h-3 w-24" />
            </div>
            <Skeleton className="h-3 w-8" />
          </div>

          {/* Data rows */}
          {Array.from({ length: rowCount }).map((_, i) => (
            <div key={i} className="flex h-11 items-center border-b border-border px-3 last:border-b-0">
              <Skeleton className="h-3.5 w-4" />
              <div className="ms-4 flex flex-1 items-center gap-4">
                <Skeleton className="h-3.5 w-44" />
                <Skeleton className="h-3.5 w-28" />
                <Skeleton className="h-3.5 w-16" />
                <Skeleton className="h-3.5 w-20" />
              </div>
              <Skeleton className="h-3.5 w-6" />
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}