import { useState, useEffect } from 'react';
import { IconWifi, IconWifiOff } from '@tabler/icons-react';

/**
 * NetworkErrorHandler - компонент для мониторинга состояния сети
 * Показывает уведомление при потере соединения
 */
function NetworkErrorHandler() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  const [wasOffline, setWasOffline] = useState(false);
  const [showReconnected, setShowReconnected] = useState(false);

  useEffect(() => {
    const handleOnline = () => {
      setIsOnline(true);
      if (wasOffline) {
        setShowReconnected(true);
        // Показываем уведомление о восстановлении на 3 секунды
        setTimeout(() => {
          setShowReconnected(false);
          setWasOffline(false);
        }, 3000);
        
        // Уведомляем через глобальную систему
        if (window.notify?.success) {
          window.notify.success('Соединение восстановлено');
        }
      }
    };

    const handleOffline = () => {
      setIsOnline(false);
      setWasOffline(true);
      
      // Уведомляем через глобальную систему
      if (window.notify?.warning) {
        window.notify.warning('Нет соединения с интернетом');
      }
    };

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, [wasOffline]);

  // Не показываем ничего если онлайн и не было офлайна
  if (isOnline && !showReconnected) {
    return null;
  }

  return (
    <div 
      className="position-fixed top-0 start-0 end-0" 
      style={{ zIndex: 1090 }}
    >
      {!isOnline ? (
        <div className="alert alert-danger mb-0 rounded-0 border-0" role="alert">
          <div className="d-flex align-items-center justify-content-center">
            <IconWifiOff className="icon me-2" />
            <strong>Нет соединения с интернетом</strong>
            <span className="ms-2 text-muted">Ожидание восстановления...</span>
          </div>
        </div>
      ) : showReconnected ? (
        <div className="alert alert-success mb-0 rounded-0 border-0" role="alert">
          <div className="d-flex align-items-center justify-content-center">
            <IconWifi className="icon me-2" />
            <strong>Соединение восстановлено</strong>
          </div>
        </div>
      ) : null}
    </div>
  );
}

export default NetworkErrorHandler;