frontend/src/components/BackendHealthCheck.tsx

import { useState, useEffect } from "react";
import { BACKEND_URL, APP_CONFIG } from "../config/constants";

interface BackendHealthCheckProps {
  backendUrl?: string;
  checkInterval?: number;
}

export function BackendHealthCheck({ 
  checkInterval = APP_CONFIG.HEALTH_CHECK_INTERVAL
}: BackendHealthCheckProps) {
  const [backendStatus, setBackendStatus] = useState<'loading' | 'online' | 'offline'>('loading');
  const healthCheckUrl = `${BACKEND_URL}/api/health`;

  useEffect(() => {
    const checkBackendHealth = async () => {
      try {
        const response = await fetch(healthCheckUrl);
        if (response.ok) {
          const data = await response.json();
          if (data.status === 'ok') {
            setBackendStatus('online');
          } else {
            setBackendStatus('offline');
          }
        } else {
          setBackendStatus('offline');
        }
      } catch (error) {
        setBackendStatus('offline');
      }
    };

    checkBackendHealth();
    
    // Check health at specified interval
    const interval = setInterval(checkBackendHealth, checkInterval);
    
    return () => clearInterval(interval);
  }, [healthCheckUrl, checkInterval]);

  const getStatusColor = () => {
    switch (backendStatus) {
      case 'online':
        return 'bg-green-500';
      case 'offline':
        return 'bg-red-500';
      case 'loading':
        return 'bg-yellow-500';
      default:
        return 'bg-gray-500';
    }
  };

  const getStatusText = () => {
    switch (backendStatus) {
      case 'online':
        return 'Backend Online';
      case 'offline':
        return 'Backend Offline';
      case 'loading':
        return 'Checking Backend...';
      default:
        return 'Unknown Status';
    }
  };

  return (
    <div className="absolute top-4 right-4 flex items-center space-x-2 bg-gray-800 rounded-lg px-3 py-2">
      <div className={`w-3 h-3 rounded-full ${getStatusColor()} animate-pulse`}></div>
      <span className="text-sm font-medium">{getStatusText()}</span>
    </div>
  );
}