import { ReactNode } from 'react';
import { NetworkErrorBanner } from '@/components/error/NetworkErrorBanner';
import { SubmissionQueueIndicator } from '@/components/submission/SubmissionQueueIndicator';
import { useNetworkStatus } from '@/hooks/useNetworkStatus';
import { useSubmissionQueue } from '@/hooks/useSubmissionQueue';

interface ResilienceProviderProps {
  children: ReactNode;
}

/**
 * ResilienceProvider wraps the app with network error handling
 * and submission queue management UI
 */
export function ResilienceProvider({ children }: ResilienceProviderProps) {
  const { isOnline } = useNetworkStatus();
  const {
    queuedItems,
    lastSyncTime,
    nextRetryTime,
    retryItem,
    retryAll,
    removeItem,
    clearQueue,
  } = useSubmissionQueue({
    autoRetry: true,
    retryDelayMs: 5000,
    maxRetries: 3,
  });

  return (
    <>
      {/* Network Error Banner - Shows at top when offline or errors present */}
      <NetworkErrorBanner
        isOffline={!isOnline}
        pendingCount={queuedItems.length}
        onRetryNow={retryAll}
        estimatedRetryTime={nextRetryTime || undefined}
      />

      {/* Main Content */}
      <div className="min-h-screen">
        {children}
      </div>

      {/* Floating Queue Indicator - Shows in bottom right */}
      {queuedItems.length > 0 && (
        <div className="fixed bottom-6 right-6 z-40">
          <SubmissionQueueIndicator
            queuedItems={queuedItems}
            lastSyncTime={lastSyncTime || undefined}
            onRetryItem={retryItem}
            onRetryAll={retryAll}
            onRemoveItem={removeItem}
            onClearQueue={clearQueue}
          />
        </div>
      )}
    </>
  );
}