src/components/ApiConnectionAlert.tsx

import React, { useEffect, useState } from 'react';
import { AlertCircle, X, RefreshCw, WifiOff } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { checkApiConnection } from '@/lib/api';
import { API_BASE_URL } from '@/config';
import apiClient from '@/lib/api/axios-instance';

const ApiConnectionAlert = () => {
  const [isApiAvailable, setIsApiAvailable] = useState<boolean | null>(null);
  const [checking, setChecking] = useState(false);
  const [isVisible, setIsVisible] = useState(true);
  const [retryCount, setRetryCount] = useState(0);
  const [fadeOut, setFadeOut] = useState(false);

  const checkConnection = async () => {
    setChecking(true);
    try {
      console.log('Checking API connection...');
      const isAvailable = await checkApiConnection();
      console.log('API connection check result:', isAvailable);
      setIsApiAvailable(isAvailable);
      
      if (isAvailable) {
        // If connection is restored after previous failures, show success briefly then hide
        if (retryCount > 0) {
          setTimeout(() => {
            setFadeOut(true);
            setTimeout(() => setIsVisible(false), 300);
          }, 3000);
        }
      } else {
        setRetryCount(prev => prev + 1);
      }
    } catch (error) {
      console.error('Error checking API connection:', error);
      setIsApiAvailable(false);
      setRetryCount(prev => prev + 1);
    } finally {
      setChecking(false);
    }
  };

  useEffect(() => {
    checkConnection();
    
    // Set up automatic retry every 30 seconds if API is down
    const intervalId = setInterval(() => {
      if (isApiAvailable === false) {
        checkConnection();
      }
    }, 30000);
    
    return () => clearInterval(intervalId);
  }, [isApiAvailable]);

  const closeAlert = () => {
    setFadeOut(true);
    setTimeout(() => setIsVisible(false), 300);
  };

  if (isApiAvailable === true && !isVisible) {
    return null;
  }

  return (
    <>

      {(isApiAvailable === false || (isApiAvailable === true && retryCount > 0)) && isVisible && (

        <div 

          className={`fixed bottom-4 right-4 z-50 max-w-md w-full transition-all duration-300 ${

            fadeOut ? 'opacity-0 translate-y-5' : 'opacity-100 translate-y-0'

          }`}

        >

          <Alert

            variant={isApiAvailable === true ? "default" : "destructive"}

            className={`

              relative shadow-lg border-2 

              ${isApiAvailable === true 

                ? "bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800" 

                : "bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800"}

            `}

          >

            <Button

              variant="ghost"

              size="icon"

              className="absolute top-2 right-2 h-6 w-6 rounded-full p-0"

              onClick={closeAlert}

            >

              <X className="h-4 w-4" />

            </Button>

            

            {isApiAvailable === true ? (

              <div className="flex items-start">

                <div className="rounded-full bg-green-100 dark:bg-green-800 p-2 mr-3">

                  <RefreshCw className="h-4 w-4 text-green-600 dark:text-green-200" />

                </div>

                <div>

                  <AlertTitle className="text-green-700 dark:text-green-300">

                    API Connection Restored

                  </AlertTitle>

                  <AlertDescription className="text-green-600 dark:text-green-400">

                    <p className="mb-2">

                      Successfully connected to the API server. You can continue using the application.

                    </p>

                  </AlertDescription>

                </div>

              </div>

            ) : (

              <div className="flex items-start">

                <div className="rounded-full bg-red-100 dark:bg-red-800 p-2 mr-3">

                  <WifiOff className="h-4 w-4 text-red-600 dark:text-red-200" />

                </div>

                <div>

                  <AlertTitle className="text-red-700 dark:text-red-300">

                    API Connection Error

                  </AlertTitle>

                  <AlertDescription className="text-red-600 dark:text-red-400">

                    <p className="mb-3">

                      Cannot connect to the API server at <code className="px-1 py-0.5 bg-red-100 dark:bg-red-900/30 rounded">{API_BASE_URL}</code>.

                      Some features may not work correctly.

                    </p>

                    

                    <div className="mb-3 space-y-1 pl-5">

                      <p className="font-medium text-sm">Troubleshooting steps:</p>

                      <ul className="list-disc pl-4 text-sm space-y-1">

                        <li>Ensure the API server is running</li>

                        <li>Check your network connection</li>

                        <li>Verify that ports are not blocked by a firewall</li>

                        <li>If you're a developer, check for CORS issues</li>

                      </ul>

                    </div>

                    

                    <div className="flex justify-end gap-2 mt-2">

                      <Button 

                        variant="outline" 

                        size="sm"

                        onClick={closeAlert}

                        className="border-red-200 hover:bg-red-100 hover:text-red-800"

                      >

                        Dismiss

                      </Button>

                      <Button 

                        size="sm"

                        onClick={checkConnection} 

                        disabled={checking}

                        className="bg-red-600 hover:bg-red-700 text-white"

                      >

                        {checking ? (

                          <>

                            <RefreshCw className="h-3 w-3 mr-1 animate-spin" />

                            Checking...

                          </>

                        ) : (

                          <>

                            <RefreshCw className="h-3 w-3 mr-1" />

                            Retry Connection

                          </>

                        )}

                      </Button>

                    </div>

                  </AlertDescription>

                </div>

              </div>

            )}

          </Alert>

        </div>

      )}

    </>
  );
};

export default ApiConnectionAlert;