import { Search, Menu, Wifi, WifiOff, Star, ArrowLeft, AlertTriangle } from 'lucide-react';
import { useState, useEffect, useMemo, useCallback, memo } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Button } from '@/components/ui/button';

interface HeaderProps {
  onSearchClick: () => void;
  onMenuClick: () => void;
}

// Memoizar iconos para evitar re-renders
const MenuIcon = memo(() => <Menu className="w-5 h-5 text-muted-foreground" />);
MenuIcon.displayName = 'MenuIcon';

const SearchIcon = memo(() => <Search className="w-5 h-5 text-muted-foreground" />);
SearchIcon.displayName = 'SearchIcon';

const Header = memo(({ onSearchClick, onMenuClick }: HeaderProps) => {
  const navigate = useNavigate();
  const location = useLocation();
  
  // Mostrar botón de retroceso si no estamos en la página principal
  const showBackButton = useMemo(() => location.pathname !== '/', [location.pathname]);
  const isUrgenciasActive = useMemo(() => location.pathname === '/urgencias', [location.pathname]);
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

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

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

  const handleBack = useCallback(() => {
    if (window.history.length > 1) {
      navigate(-1);
    } else {
      navigate('/');
    }
  }, [navigate]);

  // Memoizar handlers para evitar re-renders
  const handleMenuClick = useCallback(() => {
    // Usar requestAnimationFrame para no bloquear
    requestAnimationFrame(() => {
      onMenuClick();
    });
  }, [onMenuClick]);

  const handleSearchClick = useCallback(() => {
    // Usar requestAnimationFrame para no bloquear
    requestAnimationFrame(() => {
      onSearchClick();
    });
  }, [onSearchClick]);

  // Memoizar clases del estado online
  const onlineStatusClasses = useMemo(() => 
    isOnline
      ? 'bg-success/20 text-success'
      : 'bg-warning/20 text-warning',
    [isOnline]
  );

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-card border-b border-border">
      <div className="flex items-center justify-between h-14 px-4">
        <div className="flex items-center gap-3">
          {showBackButton && (
            <Button
              onClick={handleBack}
              variant="ghost"
              size="icon"
              className="w-9 h-9"
              aria-label="Volver"
            >
              <ArrowLeft className="w-5 h-5" />
            </Button>
          )}
          <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
            <span className="text-primary-foreground font-bold text-sm">TES</span>
          </div>
          <div className="hidden sm:block">
            <h1 className="font-semibold text-foreground text-sm uppercase tracking-tighter">codigo0</h1>
            <p className="text-xs text-muted-foreground">Guía Profesional para TES</p>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <button
            onClick={() => {
              if (isUrgenciasActive) {
                if (window.history.length > 1) {
                  navigate(-1);
                } else {
                  navigate('/');
                }
                return;
              }
              navigate('/urgencias');
            }}
            className={`w-10 h-10 flex items-center justify-center rounded-lg transition-all ${
              isUrgenciasActive
                ? 'bg-[hsl(var(--emergency-high))]/15 text-[hsl(var(--emergency-high))] border border-[hsl(var(--emergency-high))]/40'
                : 'bg-[hsl(var(--emergency-high))] text-white hover:opacity-90'
            } active:scale-95`}
            aria-label={isUrgenciasActive ? 'Salir del modo urgencias' : 'Activar modo urgencias'}
          >
            <AlertTriangle className="w-5 h-5" />
          </button>
          {isUrgenciasActive && (
            <span className="px-2 py-1 rounded-full text-[10px] font-semibold tracking-wide bg-[hsl(var(--emergency-high))]/15 text-[hsl(var(--emergency-high))] border border-[hsl(var(--emergency-high))]/40">
              URG
            </span>
          )}
          <div
            className={`flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium ${
              isOnline
                ? 'bg-success/20 text-success'
                : 'bg-warning/20 text-warning'
            }`}
          >
            {isOnline ? (
              <>
                <Wifi className="w-3 h-3" />
                <span className="hidden sm:inline">Online</span>
              </>
            ) : (
              <>
                <WifiOff className="w-3 h-3" />
                <span className="hidden sm:inline">Offline</span>
              </>
            )}
          </div>

          <button
            onClick={handleSearchClick}
            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-muted active:bg-accent active:scale-95 transition-all"
            aria-label="Buscar"
          >
            <SearchIcon />
          </button>

          <button
            onClick={handleMenuClick}
            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-muted active:bg-accent active:scale-95 transition-all"
            aria-label="Menú"
          >
            <MenuIcon />
          </button>
        </div>
      </div>
      {isUrgenciasActive && (
        <div className="h-1 w-full bg-[hsl(var(--emergency-high))]" />
      )}
    </header>
  );
});

Header.displayName = 'Header';

export default Header;