veza/apps/web/src/components/OfflineIndicator.tsx

import { useEffect, useState } from 'react';
import { useOnlineStatus } from '@/hooks/useOnlineStatus';
import { offlineQueue } from '@/services/offlineQueue';
import { WifiOff, Loader2, List } from 'lucide-react';
import { hasRecentNetworkError } from '@/utils/networkErrorTracker';
import { OfflineQueueManager } from './OfflineQueueManager';

/**
 * Composant pour afficher un indicateur de mode hors ligne avec nombre de requêtes en attente
 */
export function OfflineIndicator() {
  const isOnline = useOnlineStatus();
  const [queueSize, setQueueSize] = useState(0);
  const [isProcessing, setIsProcessing] = useState(false);
  const [hasNetworkError, setHasNetworkError] = useState(false);
  const [showQueueManager, setShowQueueManager] = useState(false);

  // Mettre à jour la taille de la file d'attente
  useEffect(() => {
    const updateQueueSize = () => {
      setQueueSize(offlineQueue.getQueueSize());
    };

    // Mettre à jour immédiatement
    updateQueueSize();

    // Mettre à jour toutes les secondes
    const interval = setInterval(updateQueueSize, 1000);

    return () => clearInterval(interval);
  }, []);

  // Vérifier si la file est en cours de traitement
  useEffect(() => {
    if (isOnline && queueSize > 0) {
      setIsProcessing(true);
      // Vérifier périodiquement si le traitement est terminé
      const checkProcessing = setInterval(() => {
        const currentSize = offlineQueue.getQueueSize();
        if (currentSize === 0) {
          setIsProcessing(false);
          clearInterval(checkProcessing);
        }
      }, 500);
      return () => clearInterval(checkProcessing);
    } else {
      setIsProcessing(false);
      return undefined;
    }
  }, [isOnline, queueSize]);

  // Check for recent network errors
  useEffect(() => {
    const checkNetworkError = () => {
      setHasNetworkError(hasRecentNetworkError());
    };

    // Check immediately
    checkNetworkError();

    // Check periodically (every 2 seconds) to update when error expires
    const interval = setInterval(checkNetworkError, 2000);

    return () => clearInterval(interval);
  }, []);

  // Ne rien afficher si en ligne, aucune requête en attente, et pas d'erreur réseau récente
  if (isOnline && queueSize === 0 && !isProcessing && !hasNetworkError) {
    return null;
  }

  // Mode hors ligne ou erreur réseau récente
  if (!isOnline || hasNetworkError) {
    return (
      <>
        <div className="fixed top-0 left-0 right-0 bg-kodo-red/90 backdrop-blur-sm text-white px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-lg border-b border-kodo-red">
          <WifiOff className="w-4 h-4" />
          <span>
            Mode hors ligne
            {queueSize > 0 && (
              <span className="ml-2 font-semibold">
                - {queueSize} {queueSize === 1 ? 'requête' : 'requêtes'} en
                attente
              </span>
            )}
          </span>
          {queueSize > 0 && (
            <button
              onClick={() => setShowQueueManager(true)}
              className="ml-3 px-2 py-1 bg-white/10 hover:bg-white/20 rounded border border-white/20 transition-colors flex items-center gap-1.5 text-xs font-medium"
              title="View queued requests"
            >
              <List className="w-3.5 h-3.5" />
              View Queue
            </button>
          )}
        </div>
        <OfflineQueueManager
          open={showQueueManager}
          onClose={() => setShowQueueManager(false)}
        />
      </>
    );
  }

  // En ligne mais traitement de la file en cours
  if (isProcessing && queueSize > 0) {
    return (
      <>
        <div className="fixed top-0 left-0 right-0 bg-kodo-cyan/90 backdrop-blur-sm text-kodo-void px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-lg border-b border-kodo-cyan">
          <Loader2 className="w-4 h-4 animate-spin" />
          <span>
            Synchronisation en cours
            {queueSize > 0 && (
              <span className="ml-2 font-semibold">
                - {queueSize} {queueSize === 1 ? 'requête' : 'requêtes'} restante
                {queueSize > 1 ? 's' : ''}
              </span>
            )}
          </span>
          {queueSize > 0 && (
            <button
              onClick={() => setShowQueueManager(true)}
              className="ml-3 px-2 py-1 bg-kodo-void/20 hover:bg-kodo-void/30 rounded border border-kodo-void/30 transition-colors flex items-center gap-1.5 text-xs font-medium"
              title="View queued requests"
            >
              <List className="w-3.5 h-3.5" />
              View Queue
            </button>
          )}
        </div>
        <OfflineQueueManager
          open={showQueueManager}
          onClose={() => setShowQueueManager(false)}
        />
      </>
    );
  }

  return null;
}