import React, { useEffect, useState } from 'react';
import { useNetworkStability } from '../hooks/useNetworkStability';

interface NetworkStatusProps {
  onNetworkChange?: (isOnline: boolean, isStable: boolean) => void;
}

export const NetworkStatus: React.FC<NetworkStatusProps> = ({ onNetworkChange }) => {
  const networkState = useNetworkStability();
  const [showStatus, setShowStatus] = useState(false);
  const [statusMessage, setStatusMessage] = useState('');

  useEffect(() => {
    onNetworkChange?.(networkState.isOnline, networkState.isStable);

    if (!networkState.isOnline) {
      setStatusMessage(`Connection lost. Attempting to reconnect... (${networkState.reconnectAttempts})`);
      setShowStatus(true);
    } else if (!networkState.isStable) {
      setStatusMessage(`Network switching detected (${networkState.connectionType}). Stabilizing...`);
      setShowStatus(true);
    } else if (networkState.isOnline && showStatus) {
      setStatusMessage('Connection restored');
      setShowStatus(true);
      
      // Hide the status after 3 seconds when connection is restored
      setTimeout(() => setShowStatus(false), 3000);
    }
  }, [networkState, onNetworkChange, showStatus]);

  if (!showStatus) return null;

  const getStatusClass = () => {
    if (!networkState.isOnline) return 'network-status offline';
    if (!networkState.isStable) return 'network-status unstable';
    return 'network-status online';
  };

  return (
    <div className={getStatusClass()}>
      <div className="network-status-content">
        <span className="network-icon">
          {!networkState.isOnline ? '⚠️' : !networkState.isStable ? '🔄' : '✅'}
        </span>
        <span className="network-message">{statusMessage}</span>
      </div>
    </div>
  );
};