import React, { useState, useRef, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { 
  Hotel, 
  User, 
  LogOut, 
  LogIn, 
  UserPlus,
  Heart,
  Phone,
  Mail,
  Calendar,
  Star,
  Users,
  AlertCircle,
  Bell,
  Shield,
} from 'lucide-react';
import { useClickOutside } from '../hooks/useClickOutside';
import { useCompanySettings } from '../contexts/CompanySettingsContext';
import { useTheme } from '../contexts/ThemeContext';
import { useAuthModal } from '../../features/auth/contexts/AuthModalContext';
import { normalizeImageUrl } from '../utils/imageUtils';
import InAppNotificationBell from '../../features/notifications/components/InAppNotificationBell';
import Navbar from './Navbar';
import { getThemeTextClasses } from '../utils/themeUtils';

interface HeaderProps {
  isAuthenticated?: boolean;
  userInfo?: {
    name: string;
    email: string;
    avatar?: string;
    role: string;
  } | null;
  onLogout?: () => void;
}

const Header: React.FC<HeaderProps> = ({ 
  isAuthenticated = false, 
  userInfo = null,
  onLogout 
}) => {
  const { settings } = useCompanySettings();
  const { theme } = useTheme();
  const { openModal } = useAuthModal();
  const location = useLocation();
  const textClasses = getThemeTextClasses(theme.theme_layout_mode);

  
  const displayPhone = settings.company_phone || null;
  const displayEmail = settings.company_email || null;
  const logoUrl = settings.company_logo_url
    ? (settings.company_logo_url.startsWith('http')
        ? settings.company_logo_url
        : `${import.meta.env.VITE_API_URL || 'http://localhost:8000'}${settings.company_logo_url}`)
    : null;
  const [isMobileMenuOpen, setIsMobileMenuOpen] = 
    useState(false);
  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
  const userMenuRef = useRef<HTMLDivElement>(null);

  // Track previous pathname to detect actual navigation
  const prevPathnameRef = useRef(location.pathname);
  
  // Close menu when navigation happens
  useEffect(() => {
    const prevPathname = prevPathnameRef.current;
    const currentPathname = location.pathname;
    
    // Only close menu if it's an actual navigation (pathname changed)
    if (prevPathname !== currentPathname && isMobileMenuOpen) {
      setIsMobileMenuOpen(false);
    }
    
    // Update ref for next comparison
    prevPathnameRef.current = currentPathname;
  }, [location.pathname, isMobileMenuOpen]);

  
  useClickOutside(userMenuRef, () => {
    if (isUserMenuOpen) {
      setIsUserMenuOpen(false);
    }
  });

  const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  const toggleUserMenu = () => {
    setIsUserMenuOpen(!isUserMenuOpen);
  };

  const handleLogout = () => {
    if (onLogout) {
      onLogout();
    }
    setIsUserMenuOpen(false);
    setIsMobileMenuOpen(false);
  };

  // Mobile menu content with user authentication
  const mobileMenuContent = (
    <>
      {!isAuthenticated ? (
        <>
          <button
            onClick={(e) => {
              e.stopPropagation();
              setTimeout(() => setIsMobileMenuOpen(false), 100);
              openModal('login');
            }}
            onTouchStart={(e) => {
              e.stopPropagation();
            }}
            className={`flex items-center 
              space-x-2 px-4 py-3.5 ${textClasses.primary}/95 
              hover:bg-[rgba(var(--luxury-gold-rgb),0.15)] hover:text-[var(--luxury-gold)] 
              rounded-md transition-all duration-300 
              border-l-2 border-transparent 
              hover:border-[var(--luxury-gold)] font-light tracking-wider text-sm w-full text-left group relative mx-2 cursor-pointer`}
            style={{ touchAction: 'manipulation' }}
          >
            <LogIn className="w-4 h-4" />
            <span>Login</span>
          </button>
          <button
            onClick={(e) => {
              e.stopPropagation();
              setTimeout(() => setIsMobileMenuOpen(false), 100);
              openModal('register');
            }}
            onTouchStart={(e) => {
              e.stopPropagation();
            }}
            className="flex items-center 
              space-x-2 px-4 py-3.5 bg-gradient-to-r 
              from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] text-[#0f0f0f] 
              rounded-md hover:from-[var(--luxury-gold-light)] 
              hover:to-[var(--luxury-gold)] transition-all 
              duration-300 font-medium tracking-wider text-sm
              mt-2 w-full text-left mx-2 cursor-pointer"
            style={{ touchAction: 'manipulation' }}
          >
            <UserPlus className="w-4 h-4" />
            <span>Register</span>
          </button>
        </>
      ) : (
        <>
          <div className="px-4 py-2 text-sm 
            text-text-[rgba(var(--luxury-gold-rgb),0.7)] font-light tracking-wide"
          >
            Hello, {userInfo?.name}
          </div>
          <Link
            to="/profile"
            onClick={(e) => {
              e.stopPropagation();
              setTimeout(() => setIsMobileMenuOpen(false), 100);
            }}
            onTouchStart={(e) => {
              e.stopPropagation();
            }}
            className="flex items-center 
              space-x-2 px-4 py-3.5 ${textClasses.primary}/95 
              hover:bg-[rgba(var(--luxury-gold-rgb),0.15)] hover:text-[var(--luxury-gold)] 
              rounded-md transition-all duration-300 
              border-l-2 border-transparent 
              hover:border-[var(--luxury-gold)] font-light tracking-wider text-sm group relative mx-2"
            style={{ touchAction: 'manipulation' }}
          >
            <User className="w-4 h-4" />
            <span>Profile</span>
          </Link>
          {userInfo?.role !== 'admin' && userInfo?.role !== 'staff' && userInfo?.role !== 'accountant' && userInfo?.role !== 'housekeeping' && (
            <>
              <Link
                to="/dashboard"
                onClick={(e) => {
                  e.stopPropagation();
                  setTimeout(() => setIsMobileMenuOpen(false), 100);
                }}
                onTouchStart={(e) => {
                  e.stopPropagation();
                }}
                className={`flex items-center 
                  space-x-2 px-4 py-3 ${textClasses.primary}/90 
                  hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                  rounded-sm transition-all duration-300 
                  border-l-2 border-transparent 
                  hover:border-[var(--luxury-gold)] font-light tracking-wide`}
                style={{ touchAction: 'manipulation' }}
              >
                <Calendar className="w-4 h-4" />
                <span>Dashboard</span>
              </Link>
              <Link
                to="/favorites"
                onClick={(e) => {
                  e.stopPropagation();
                  setTimeout(() => setIsMobileMenuOpen(false), 100);
                }}
                onTouchStart={(e) => {
                  e.stopPropagation();
                }}
                className={`flex items-center 
                  space-x-2 px-4 py-3 ${textClasses.primary}/90 
                  hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                  rounded-sm transition-all duration-300 
                  border-l-2 border-transparent 
                  hover:border-[var(--luxury-gold)] font-light tracking-wide`}
                style={{ touchAction: 'manipulation' }}
              >
                <Heart className="w-4 h-4" />
                <span>Favorites</span>
              </Link>
              <Link
                to="/bookings"
                onClick={(e) => {
                  e.stopPropagation();
                  setTimeout(() => setIsMobileMenuOpen(false), 100);
                }}
                onTouchStart={(e) => {
                  e.stopPropagation();
                }}
                className={`flex items-center 
                  space-x-2 px-4 py-3 ${textClasses.primary}/90 
                  hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                  rounded-sm transition-all duration-300 
                  border-l-2 border-transparent 
                  hover:border-[var(--luxury-gold)] font-light tracking-wide`}
                style={{ touchAction: 'manipulation' }}
              >
                <Calendar className="w-4 h-4" />
                <span>My Bookings</span>
              </Link>
              <Link
                to="/loyalty"
                onClick={(e) => {
                  e.stopPropagation();
                  setTimeout(() => setIsMobileMenuOpen(false), 100);
                }}
                onTouchStart={(e) => {
                  e.stopPropagation();
                }}
                className={`flex items-center 
                  space-x-2 px-4 py-3 ${textClasses.primary}/90 
                  hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                  rounded-sm transition-all duration-300 
                  border-l-2 border-transparent 
                  hover:border-[var(--luxury-gold)] font-light tracking-wide`}
                style={{ touchAction: 'manipulation' }}
              >
                <Star className="w-4 h-4" />
                <span>Loyalty Program</span>
              </Link>
              <Link
                to="/group-bookings"
                onClick={(e) => {
                  e.stopPropagation();
                  setTimeout(() => setIsMobileMenuOpen(false), 100);
                }}
                onTouchStart={(e) => {
                  e.stopPropagation();
                }}
                className={`flex items-center 
                  space-x-2 px-4 py-3 ${textClasses.primary}/90 
                  hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                  rounded-sm transition-all duration-300 
                  border-l-2 border-transparent 
                  hover:border-[var(--luxury-gold)] font-light tracking-wide`}
                style={{ touchAction: 'manipulation' }}
              >
                <Users className="w-4 h-4" />
                <span>Group Bookings</span>
              </Link>
              <Link
                to="/complaints"
                onClick={(e) => {
                  e.stopPropagation();
                  setTimeout(() => setIsMobileMenuOpen(false), 100);
                }}
                onTouchStart={(e) => {
                  e.stopPropagation();
                }}
                className={`flex items-center 
                  space-x-2 px-4 py-3 ${textClasses.primary}/90 
                  hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                  rounded-sm transition-all duration-300 
                  border-l-2 border-transparent 
                  hover:border-[var(--luxury-gold)] font-light tracking-wide`}
                style={{ touchAction: 'manipulation' }}
              >
                <AlertCircle className="w-4 h-4" />
                <span>Complaints</span>
              </Link>
              <Link
                to="/guest-requests"
                onClick={(e) => {
                  e.stopPropagation();
                  setTimeout(() => setIsMobileMenuOpen(false), 100);
                }}
                onTouchStart={(e) => {
                  e.stopPropagation();
                }}
                className={`flex items-center 
                  space-x-2 px-4 py-3 ${textClasses.primary}/90 
                  hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                  rounded-sm transition-all duration-300 
                  border-l-2 border-transparent 
                  hover:border-[var(--luxury-gold)] font-light tracking-wide`}
                style={{ touchAction: 'manipulation' }}
              >
                <Bell className="w-4 h-4" />
                <span>Guest Requests</span>
              </Link>
              <Link
                to="/gdpr"
                onClick={(e) => {
                  e.stopPropagation();
                  setTimeout(() => setIsMobileMenuOpen(false), 100);
                }}
                onTouchStart={(e) => {
                  e.stopPropagation();
                }}
                className={`flex items-center 
                  space-x-2 px-4 py-3 ${textClasses.primary}/90 
                  hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                  rounded-sm transition-all duration-300 
                  border-l-2 border-transparent 
                  hover:border-[var(--luxury-gold)] font-light tracking-wide`}
                style={{ touchAction: 'manipulation' }}
              >
                <Shield className="w-4 h-4" />
                <span>Privacy & Data</span>
              </Link>
            </>
          )}
          {userInfo?.role === 'admin' && (
            <Link
              to="/admin"
              onClick={(e) => {
                e.stopPropagation();
                setTimeout(() => setIsMobileMenuOpen(false), 100);
              }}
              onTouchStart={(e) => {
                e.stopPropagation();
              }}
                className={`flex items-center 
                  space-x-2 px-4 py-3 ${textClasses.primary}/90
                hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                rounded-sm transition-all duration-300 
                border-l-2 border-transparent 
                hover:border-[var(--luxury-gold)] font-light tracking-wide`}
              style={{ touchAction: 'manipulation' }}
            >
              <User className="w-4 h-4" />
              <span>Admin</span>
            </Link>
          )}
          {userInfo?.role === 'staff' && (
            <Link
              to="/staff"
              onClick={(e) => {
                e.stopPropagation();
                setTimeout(() => setIsMobileMenuOpen(false), 100);
              }}
              onTouchStart={(e) => {
                e.stopPropagation();
              }}
                className={`flex items-center 
                  space-x-2 px-4 py-3 ${textClasses.primary}/90
                hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                rounded-sm transition-all duration-300 
                border-l-2 border-transparent 
                hover:border-[var(--luxury-gold)] font-light tracking-wide`}
              style={{ touchAction: 'manipulation' }}
            >
              <User className="w-4 h-4" />
              <span>Staff Dashboard</span>
            </Link>
          )}
          {userInfo?.role === 'accountant' && (
            <Link
              to="/accountant"
              onClick={(e) => {
                e.stopPropagation();
                setTimeout(() => setIsMobileMenuOpen(false), 100);
              }}
              onTouchStart={(e) => {
                e.stopPropagation();
              }}
                className={`flex items-center 
                  space-x-2 px-4 py-3 ${textClasses.primary}/90
                hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                rounded-sm transition-all duration-300 
                border-l-2 border-transparent 
                hover:border-[var(--luxury-gold)] font-light tracking-wide`}
              style={{ touchAction: 'manipulation' }}
            >
              <User className="w-4 h-4" />
              <span>Accountant Dashboard</span>
            </Link>
          )}
          {userInfo?.role === 'housekeeping' && (
            <Link
              to="/housekeeping"
              onClick={(e) => {
                e.stopPropagation();
                setTimeout(() => setIsMobileMenuOpen(false), 100);
              }}
              onTouchStart={(e) => {
                e.stopPropagation();
              }}
                className={`flex items-center 
                  space-x-2 px-4 py-3 ${textClasses.primary}/90
                hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                rounded-sm transition-all duration-300 
                border-l-2 border-transparent 
                hover:border-[var(--luxury-gold)] font-light tracking-wide`}
              style={{ touchAction: 'manipulation' }}
            >
              <User className="w-4 h-4" />
              <span>Housekeeping Dashboard</span>
            </Link>
          )}
          <div className="border-t border-[rgba(var(--luxury-gold-rgb),0.2)] my-2"></div>
          <button
            onClick={(e) => {
              e.stopPropagation();
              handleLogout();
            }}
            className="w-full flex items-center 
              space-x-2 px-4 py-3 text-red-400/90 
              hover:bg-red-500/10 hover:text-red-400 
              rounded-sm transition-all duration-300 
              border-l-2 border-transparent 
              hover:border-red-500/50 text-left 
              font-light tracking-wide cursor-pointer"
          >
            <LogOut className="w-4 h-4" />
            <span>Logout</span>
          </button>
        </>
      )}
    </>
  );

  return (
    <header 
      className={`sticky top-0 z-50 border-b backdrop-blur-sm ${
        theme.theme_layout_mode === 'light' 
          ? 'bg-gradient-to-b from-white via-gray-50 to-white border-gray-200 shadow-[0_8px_32px_rgba(0,0,0,0.1)]' 
          : 'bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f] border-[rgba(var(--luxury-gold-rgb),0.15)] shadow-[0_8px_32px_rgba(0,0,0,0.4)]'
      }`}
    >
      <div className={`hidden lg:block ${theme.theme_layout_mode === 'light' 
        ? 'bg-gray-50/80 border-gray-200' 
        : 'bg-[#0a0a0a]/50 border-[rgba(var(--luxury-gold-rgb),0.1)]'} border-b`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
          <div className="flex items-center justify-end space-x-6 text-sm">
            {displayPhone && (
              <a href={`tel:${displayPhone.replace(/\s+/g, '').replace(/[()]/g, '')}`} className="flex items-center space-x-2 text-[var(--luxury-gold)] hover:text-[var(--luxury-gold-light)] transition-colors duration-300 font-light">
                <Phone className="w-3.5 h-3.5" />
                <span className="tracking-wide">{displayPhone}</span>
              </a>
            )}
            {displayEmail && (
              <a href={`mailto:${displayEmail}`} className="flex items-center space-x-2 text-[var(--luxury-gold)] hover:text-[var(--luxury-gold-light)] transition-colors duration-300 font-light">
                <Mail className="w-3.5 h-3.5" />
                <span className="tracking-wide">{displayEmail}</span>
              </a>
            )}
          </div>
        </div>
      </div>

      <div className="w-full py-3 sm:py-4 md:py-5">
        <div className="flex items-center justify-between relative w-full">
          {/* Logo - Left - Always visible on all screens, flush with left edge */}
          <div className="flex items-center flex-shrink-0 pl-2 sm:pl-4 md:pl-6 lg:pl-8 max-w-[50%] sm:max-w-none">
            <Link 
              to="/" 
              className="flex items-center space-x-1.5 sm:space-x-2 md:space-x-3 
                group transition-all duration-300 hover:opacity-90 z-10"
            >
              {logoUrl ? (
                <div className="relative flex-shrink-0">
                  <div className="absolute inset-0 bg-gradient-to-br from-[var(--luxury-gold)]/20 to-transparent rounded-lg blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  <img 
                    src={logoUrl}
                    alt={settings.company_name}
                    className="h-8 w-8 sm:h-10 sm:w-10 md:h-12 md:w-auto object-contain drop-shadow-[0_4px_12px_rgba(var(--luxury-gold-rgb),0.3)] relative z-10 transition-transform duration-300 group-hover:scale-105"
                  />
                </div>
              ) : (
                <div className="relative flex-shrink-0">
                  <div className="absolute inset-0 bg-gradient-to-br from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] rounded-full blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-500"></div>
                  <Hotel className="relative w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-[var(--luxury-gold)] drop-shadow-[0_4px_12px_rgba(var(--luxury-gold-rgb),0.4)] transition-transform duration-300 group-hover:scale-110" />
                </div>
              )}
              <div className="flex flex-col min-w-0">
                <span className={`text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl font-display font-semibold ${textClasses.primary} tracking-tight leading-tight ${theme.theme_layout_mode === 'light' 
                  ? 'bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text' 
                  : 'bg-gradient-to-r from-white to-white/90 bg-clip-text'} truncate`}>
                  {settings.company_name}
                </span>
                <span className="text-[8px] sm:text-[9px] md:text-[10px] text-[var(--luxury-gold)] tracking-[0.25em] uppercase font-light hidden sm:block">
                  {settings.company_tagline || 'Excellence Redefined'}
                </span>
              </div>
            </Link>
          </div>

          {/* Navigation Links - Center */}
          <div className="absolute left-1/2 transform -translate-x-1/2 hidden md:block z-20">
            <Navbar 
              isMobileMenuOpen={isMobileMenuOpen}
              onMobileMenuToggle={toggleMobileMenu}
              onLinkClick={() => setIsMobileMenuOpen(false)}
              mobileMenuContent={mobileMenuContent}
            />
          </div>

          {/* Mobile Menu Button - Right (for smaller screens) */}
          <div className="flex items-center justify-end md:hidden z-20 pr-2 sm:pr-4">
            <Navbar 
              isMobileMenuOpen={isMobileMenuOpen}
              onMobileMenuToggle={toggleMobileMenu}
              onLinkClick={() => setIsMobileMenuOpen(false)}
              mobileMenuContent={mobileMenuContent}
            />
          </div>

          {/* Login/Register - Right */}
          <div className="hidden md:flex items-center 
            justify-end space-x-4 z-10 flex-shrink-0 pr-4 sm:pr-6 lg:pr-8"
          >
            {!isAuthenticated ? (
              <>
                <button
                  onClick={() => openModal('login')}
                  className={`flex items-center space-x-2 
                    px-6 py-2.5 ${textClasses.primary}/95 
                    hover:text-[var(--luxury-gold)] transition-all duration-300 
                    font-light tracking-wider relative group overflow-hidden`}
                >
                  <span className="absolute inset-0 border border-[rgba(var(--luxury-gold-rgb),0.2)] rounded-md opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:border-[rgba(var(--luxury-gold-rgb),0.5)]"></span>
                  <span className="absolute inset-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.05)] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  <LogIn className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                  <span className="relative z-10 text-sm">Login</span>
                </button>
                <button
                  onClick={() => openModal('register')}
                  className="flex items-center space-x-2 
                    px-7 py-2.5 bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold-light)] to-[var(--luxury-gold)] 
                    text-[#0f0f0f] rounded-md hover:from-[var(--luxury-gold-light)] 
                    hover:via-[var(--luxury-gold)] hover:to-[var(--luxury-gold-dark)] transition-all duration-500 
                    font-medium tracking-wider shadow-[0_4px_20px_rgba(var(--luxury-gold-rgb),0.3)] 
                    hover:shadow-[0_6px_30px_rgba(var(--luxury-gold-rgb),0.5)] relative overflow-hidden group
                    transform hover:scale-105 transition-transform duration-300"
                >
                  <span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/30 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></span>
                  <UserPlus className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:rotate-12" />
                  <span className="relative z-10 text-sm">Register</span>
                </button>
              </>
            ) : (
              <div className="flex items-center gap-3 justify-end w-full">
                {isAuthenticated && <InAppNotificationBell />}
                <div className="relative" ref={userMenuRef}>
                  <button
                    onClick={toggleUserMenu}
                    className="flex items-center space-x-3 
                      px-4 py-2.5 rounded-md hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] 
                      transition-all duration-300 border border-transparent 
                      hover:border-[rgba(var(--luxury-gold-rgb),0.3)] group"
                  >
                    {userInfo?.avatar ? (
                      <img 
                        src={normalizeImageUrl(userInfo.avatar)} 
                        alt={userInfo.name}
                        className="w-10 h-10 rounded-full 
                          object-cover ring-2 ring-[var(--luxury-gold)]/50 
                          transition-all duration-300 group-hover:ring-[var(--luxury-gold)]/80 
                          group-hover:scale-105 shadow-lg"
                      />
                    ) : (
                      <div className="w-10 h-10 bg-gradient-to-br from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] 
                        rounded-full flex items-center 
                        justify-center ring-2 ring-[var(--luxury-gold)]/50 shadow-lg
                        transition-all duration-300 group-hover:ring-[var(--luxury-gold)]/80 
                        group-hover:scale-105"
                      >
                        <span className="text-[#0f0f0f] 
                          font-semibold text-sm"
                        >
                          {userInfo?.name?.charAt(0)
                            .toUpperCase()}
                        </span>
                      </div>
                    )}
                    <span className={`font-light ${textClasses.primary}/95 tracking-wider text-sm`}>
                      {userInfo?.name}
                    </span>
                  </button>

                  {isUserMenuOpen && (
                  <div className={`absolute right-0 mt-3 
                    w-56 ${theme.theme_layout_mode === 'light' 
                      ? 'bg-gradient-to-b from-white via-gray-50 to-white border-gray-200' 
                      : 'bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f] border-[rgba(var(--luxury-gold-rgb),0.2)]'} 
                    rounded-lg ${theme.theme_layout_mode === 'light' 
                      ? 'shadow-[0_8px_32px_rgba(0,0,0,0.15)]' 
                      : 'shadow-[0_8px_32px_rgba(0,0,0,0.6)]'} py-3 border 
                    z-[9999] backdrop-blur-xl animate-fade-in`}
                  >
                    <Link
                      to="/profile"
                      onClick={() => setIsUserMenuOpen(false)}
                      className="flex items-center space-x-3 
                        px-5 py-3 ${textClasses.primary}/95 
                        hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                        transition-all duration-300 border-l-2 border-transparent 
                        hover:border-[var(--luxury-gold)] rounded-md group relative"
                    >
                      <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                      <User className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                      <span className="font-light tracking-wider text-sm relative z-10">Profile</span>
                    </Link>
                    {userInfo?.role !== 'admin' && userInfo?.role !== 'staff' && userInfo?.role !== 'accountant' && userInfo?.role !== 'housekeeping' && (
                      <>
                        <Link
                          to="/dashboard"
                          onClick={() => setIsUserMenuOpen(false)}
                          className="flex items-center space-x-3 
                            px-5 py-3 ${textClasses.primary}/95 
                            hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                            transition-all duration-300 border-l-2 border-transparent 
                            hover:border-[var(--luxury-gold)] rounded-md group relative"
                        >
                          <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                          <Calendar className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                          <span className="font-light tracking-wider text-sm relative z-10">Dashboard</span>
                        </Link>
                        <Link
                          to="/favorites"
                          onClick={() => setIsUserMenuOpen(false)}
                          className="flex items-center space-x-3 
                            px-5 py-3 ${textClasses.primary}/95 
                            hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                            transition-all duration-300 border-l-2 border-transparent 
                            hover:border-[var(--luxury-gold)] rounded-md group relative"
                        >
                          <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                          <Heart className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                          <span className="font-light tracking-wider text-sm relative z-10">Favorites</span>
                        </Link>
                        <Link
                          to="/bookings"
                          onClick={() => setIsUserMenuOpen(false)}
                          className="flex items-center space-x-3 
                            px-5 py-3 ${textClasses.primary}/95 
                            hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                            transition-all duration-300 border-l-2 border-transparent 
                            hover:border-[var(--luxury-gold)] rounded-md group relative"
                        >
                          <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                          <Calendar className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                          <span className="font-light tracking-wider text-sm relative z-10">My Bookings</span>
                        </Link>
                        <Link
                          to="/loyalty"
                          onClick={() => setIsUserMenuOpen(false)}
                          className="flex items-center space-x-3 
                            px-5 py-3 ${textClasses.primary}/95 
                            hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                            transition-all duration-300 border-l-2 border-transparent 
                            hover:border-[var(--luxury-gold)] rounded-md group relative"
                        >
                          <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                          <Star className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                          <span className="font-light tracking-wider text-sm relative z-10">Loyalty Program</span>
                        </Link>
                        <Link
                          to="/group-bookings"
                          onClick={() => setIsUserMenuOpen(false)}
                          className="flex items-center space-x-3 
                            px-5 py-3 ${textClasses.primary}/95 
                            hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                            transition-all duration-300 border-l-2 border-transparent 
                            hover:border-[var(--luxury-gold)] rounded-md group relative"
                        >
                          <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                          <Users className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                          <span className="font-light tracking-wider text-sm relative z-10">Group Bookings</span>
                        </Link>
                        <Link
                          to="/complaints"
                          onClick={() => setIsUserMenuOpen(false)}
                          className="flex items-center space-x-3 
                            px-5 py-3 ${textClasses.primary}/95 
                            hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                            transition-all duration-300 border-l-2 border-transparent 
                            hover:border-[var(--luxury-gold)] rounded-md group relative"
                        >
                          <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                          <AlertCircle className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                          <span className="font-light tracking-wider text-sm relative z-10">Complaints</span>
                        </Link>
                        <Link
                          to="/guest-requests"
                          onClick={() => setIsUserMenuOpen(false)}
                          className="flex items-center space-x-3 
                            px-5 py-3 ${textClasses.primary}/95 
                            hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                            transition-all duration-300 border-l-2 border-transparent 
                            hover:border-[var(--luxury-gold)] rounded-md group relative"
                        >
                          <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                          <Bell className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                          <span className="font-light tracking-wider text-sm relative z-10">Guest Requests</span>
                        </Link>
                        <Link
                          to="/gdpr"
                          onClick={() => setIsUserMenuOpen(false)}
                          className="flex items-center space-x-3 
                            px-5 py-3 ${textClasses.primary}/95 
                            hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                            transition-all duration-300 border-l-2 border-transparent 
                            hover:border-[var(--luxury-gold)] rounded-md group relative"
                        >
                          <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                          <Shield className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                          <span className="font-light tracking-wider text-sm relative z-10">Privacy & Data</span>
                        </Link>
                      </>
                    )}
                    {userInfo?.role === 'admin' && (
                      <Link
                        to="/admin"
                        onClick={() => 
                          setIsUserMenuOpen(false)
                        }
                        className={`flex items-center 
                          space-x-3 px-5 py-3 ${textClasses.primary}/95 
                          hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                          transition-all duration-300 border-l-2 border-transparent 
                          hover:border-[var(--luxury-gold)] rounded-md group relative`}
                      >
                        <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                        <User className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                        <span className="font-light tracking-wider text-sm relative z-10">Admin</span>
                      </Link>
                    )}
                    {userInfo?.role === 'staff' && (
                      <Link
                        to="/staff"
                        onClick={() => 
                          setIsUserMenuOpen(false)
                        }
                        className={`flex items-center 
                          space-x-3 px-5 py-3 ${textClasses.primary}/95 
                          hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                          transition-all duration-300 border-l-2 border-transparent 
                          hover:border-[var(--luxury-gold)] rounded-md group relative`}
                      >
                        <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                        <User className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                        <span className="font-light tracking-wider text-sm relative z-10">Staff Dashboard</span>
                      </Link>
                    )}
                    {userInfo?.role === 'accountant' && (
                      <Link
                        to="/accountant"
                        onClick={() => 
                          setIsUserMenuOpen(false)
                        }
                        className={`flex items-center 
                          space-x-3 px-5 py-3 ${textClasses.primary}/95 
                          hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                          transition-all duration-300 border-l-2 border-transparent 
                          hover:border-[var(--luxury-gold)] rounded-md group relative`}
                      >
                        <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                        <User className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                        <span className="font-light tracking-wider text-sm relative z-10">Accountant Dashboard</span>
                      </Link>
                    )}
                    {userInfo?.role === 'housekeeping' && (
                      <Link
                        to="/housekeeping"
                        onClick={() => 
                          setIsUserMenuOpen(false)
                        }
                        className={`flex items-center 
                          space-x-3 px-5 py-3 ${textClasses.primary}/95 
                          hover:bg-[rgba(var(--luxury-gold-rgb),0.1)] hover:text-[var(--luxury-gold)] 
                          transition-all duration-300 border-l-2 border-transparent 
                          hover:border-[var(--luxury-gold)] rounded-md group relative`}
                      >
                        <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-[rgba(var(--luxury-gold-rgb),0.1)] to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                        <User className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                        <span className="font-light tracking-wider text-sm relative z-10">Housekeeping Dashboard</span>
                      </Link>
                    )}
                    <div className="border-t border-[rgba(var(--luxury-gold-rgb),0.2)] my-2"></div>
                    <button
                      onClick={handleLogout}
                      className="w-full flex items-center 
                        space-x-3 px-5 py-3 text-red-400/95 
                        hover:bg-red-500/10 hover:text-red-400 
                        transition-all duration-300 border-l-2 border-transparent 
                        hover:border-red-500/50 text-left rounded-md group relative"
                    >
                      <span className="absolute left-0 top-0 bottom-0 w-0 bg-gradient-to-r from-red-500/10 to-transparent group-hover:w-full transition-all duration-300 rounded-md"></span>
                      <LogOut className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:scale-110" />
                      <span className="font-light tracking-wider text-sm relative z-10">Logout</span>
                    </button>
                  </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;