import { Suspense, ReactNode } from 'react'

interface LoadingSpinnerProps {
  size?: 'sm' | 'md' | 'lg'
  message?: string
}

function LoadingSpinner({ size = 'md', message }: LoadingSpinnerProps) {
  const sizeClasses = {
    sm: 'w-6 h-6',
    md: 'w-10 h-10',
    lg: 'w-16 h-16'
  }

  return (
    <div className="flex flex-col items-center justify-center py-12 space-y-4">
      <div className={`${sizeClasses[size]} border-4 border-slate-200 dark:border-slate-700 border-t-blue-500 rounded-full animate-spin`} />
      {message && (
        <p className="text-slate-500 dark:text-slate-400 text-sm">{message}</p>
      )}
    </div>
  )
}

interface PageSkeletonProps {
  showHeader?: boolean
  showFilters?: boolean
  gridCount?: number
}

function PageSkeleton({ showHeader = true, showFilters = true, gridCount = 20 }: PageSkeletonProps) {
  return (
    <div className="space-y-6 animate-pulse">
      {/* Header skeleton */}
      {showHeader && (
        <div className="flex items-center justify-between">
          <div>
            <div className="h-8 w-48 bg-slate-200 dark:bg-slate-800 rounded" />
            <div className="h-4 w-64 bg-slate-200 dark:bg-slate-800 rounded mt-2" />
          </div>
          <div className="flex gap-3">
            <div className="h-10 w-32 bg-slate-200 dark:bg-slate-800 rounded" />
            <div className="h-10 w-32 bg-slate-200 dark:bg-slate-800 rounded" />
          </div>
        </div>
      )}

      {/* Filters skeleton */}
      {showFilters && (
        <div className="bg-slate-100 dark:bg-slate-800/50 rounded-xl p-4 space-y-4">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {[...Array(4)].map((_, i) => (
              <div key={i} className="h-10 bg-slate-200 dark:bg-slate-700 rounded-lg" />
            ))}
          </div>
          <div className="h-10 bg-slate-200 dark:bg-slate-700 rounded-lg" />
        </div>
      )}

      {/* Grid skeleton */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
        {[...Array(gridCount)].map((_, i) => (
          <div key={i} className="aspect-square bg-slate-200 dark:bg-slate-800 rounded-lg" />
        ))}
      </div>
    </div>
  )
}

interface SuspenseBoundaryProps {
  children: ReactNode
  fallback?: ReactNode
  loadingMessage?: string
  showHeader?: boolean
  showFilters?: boolean
  gridCount?: number
}

export default function SuspenseBoundary({
  children,
  fallback,
  loadingMessage,
  showHeader = true,
  showFilters = true,
  gridCount = 20,
}: SuspenseBoundaryProps) {
  const defaultFallback = fallback || (
    loadingMessage
      ? <LoadingSpinner message={loadingMessage} />
      : <PageSkeleton showHeader={showHeader} showFilters={showFilters} gridCount={gridCount} />
  )

  return (
    <Suspense fallback={defaultFallback}>
      {children}
    </Suspense>
  )
}

// Export individual components for flexible use
export { LoadingSpinner, PageSkeleton }
