import { useState, useEffect } from 'react';
import { WifiOff, RefreshCw, X, Eye } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface NetworkErrorBannerProps {
  isOffline: boolean;
  pendingCount?: number;
  onRetryNow?: () => Promise<void>;
  onViewQueue?: () => void;
  estimatedRetryTime?: Date;
}

export function NetworkErrorBanner({
  isOffline,
  pendingCount = 0,
  onRetryNow,
  onViewQueue,
  estimatedRetryTime,
}: NetworkErrorBannerProps) {
  const [isVisible, setIsVisible] = useState(false);
  const [isRetrying, setIsRetrying] = useState(false);
  const [countdown, setCountdown] = useState<number | null>(null);

  useEffect(() => {
    setIsVisible(isOffline || pendingCount > 0);
  }, [isOffline, pendingCount]);

  useEffect(() => {
    if (!estimatedRetryTime) {
      setCountdown(null);
      return;
    }

    const interval = setInterval(() => {
      const now = Date.now();
      const remaining = Math.max(0, estimatedRetryTime.getTime() - now);
      setCountdown(Math.ceil(remaining / 1000));

      if (remaining <= 0) {
        clearInterval(interval);
        setCountdown(null);
      }
    }, 1000);

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

  const handleRetryNow = async () => {
    if (!onRetryNow) return;
    
    setIsRetrying(true);
    try {
      await onRetryNow();
    } finally {
      setIsRetrying(false);
    }
  };

  if (!isVisible) return null;

  return (
    <div
      className={cn(
        "fixed top-0 left-0 right-0 z-50 transition-transform duration-300",
        isVisible ? "translate-y-0" : "-translate-y-full"
      )}
    >
      <div className="bg-destructive/90 backdrop-blur-sm text-destructive-foreground shadow-lg">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center justify-between gap-4">
            <div className="flex items-center gap-3 flex-1">
              <WifiOff className="h-5 w-5 flex-shrink-0" />
              <div className="flex-1 min-w-0">
                <p className="font-semibold text-sm">
                  {isOffline ? 'You are offline' : 'Network Issue Detected'}
                </p>
                <p className="text-xs opacity-90 truncate">
                  {pendingCount > 0 ? (
                    <>
                      {pendingCount} submission{pendingCount !== 1 ? 's' : ''} pending
                      {countdown !== null && countdown > 0 && (
                        <span className="ml-2">
                          · Retrying in {countdown}s
                        </span>
                      )}
                    </>
                  ) : (
                    'Changes will sync when connection is restored'
                  )}
                </p>
              </div>
            </div>

            <div className="flex items-center gap-2 flex-shrink-0">
              {pendingCount > 0 && onViewQueue && (
                <Button
                  size="sm"
                  variant="secondary"
                  onClick={onViewQueue}
                  className="h-8 text-xs bg-background/20 hover:bg-background/30"
                >
                  <Eye className="h-3.5 w-3.5 mr-1.5" />
                  View Queue ({pendingCount})
                </Button>
              )}

              {onRetryNow && (
                <Button
                  size="sm"
                  variant="secondary"
                  onClick={handleRetryNow}
                  disabled={isRetrying}
                  className="h-8 text-xs bg-background/20 hover:bg-background/30"
                >
                  <RefreshCw className={cn(
                    "h-3.5 w-3.5 mr-1.5",
                    isRetrying && "animate-spin"
                  )} />
                  {isRetrying ? 'Retrying...' : 'Retry Now'}
                </Button>
              )}

              <Button
                size="sm"
                variant="ghost"
                onClick={() => setIsVisible(false)}
                className="h-8 w-8 p-0 hover:bg-background/20"
              >
                <X className="h-4 w-4" />
                <span className="sr-only">Dismiss</span>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}