import React, { useState, useRef } from 'react';
import { Link } from 'react-router-dom';
import { 
  Hotel, 
  User, 
  LogOut, 
  Menu, 
  X, 
  LogIn, 
  UserPlus,
  Heart,
  Phone,
  Mail,
  Calendar,
  Star,
  Users,
} from 'lucide-react';
import { useClickOutside } from '../../hooks/useClickOutside';
import { useCompanySettings } from '../../contexts/CompanySettingsContext';
import { useAuthModal } from '../../contexts/AuthModalContext';
import { normalizeImageUrl } from '../../utils/imageUtils';
import InAppNotificationBell from '../notifications/InAppNotificationBell';

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 { openModal } = useAuthModal();

  
  const displayPhone = settings.company_phone || '+1 (234) 567-890';
  const displayEmail = settings.company_email || 'info@luxuryhotel.com';
  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);

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

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

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

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

  return (
    <header className="bg-gradient-to-b from-[#1a1a1a] to-[#0f0f0f] sticky top-0 z-50 border-b border-[#d4af37]/20 shadow-2xl">
      <div className="hidden lg:block bg-[#0a0a0a]/50 border-b border-[#d4af37]/10">
        <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-[#d4af37] hover:text-[#f5d76e] 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-[#d4af37] hover:text-[#f5d76e] 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div className="flex items-center justify-between">
          <Link 
            to="/" 
            className="flex items-center space-x-3 
              group transition-all duration-300 hover:opacity-90"
          >
            {logoUrl ? (
              <div className="relative">
                <img 
                  src={logoUrl}
                  alt={settings.company_name}
                  className="h-10 w-auto object-contain drop-shadow-lg"
                />
              </div>
            ) : (
              <div className="relative">
                <div className="absolute inset-0 bg-gradient-to-br from-[#d4af37] to-[#f5d76e] rounded-full blur-md opacity-30 group-hover:opacity-50 transition-opacity duration-300"></div>
                <Hotel className="relative w-10 h-10 text-[#d4af37] drop-shadow-lg" />
              </div>
            )}
            <div className="flex flex-col">
              <span className="text-2xl font-display font-semibold text-white tracking-tight leading-tight">
                {settings.company_name}
              </span>
              <span className="text-[10px] text-[#d4af37] tracking-[0.2em] uppercase font-light">
                {settings.company_tagline || 'Excellence Redefined'}
              </span>
            </div>
          </Link>

          {}
          <nav className="hidden md:flex items-center 
            space-x-1"
          >
            <Link 
              to="/" 
              className="text-white/90 hover:text-[#d4af37] 
                transition-all duration-300 font-light px-4 py-2 
                relative group tracking-wide"
            >
              <span className="relative z-10">Home</span>
              <span className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/0 via-[#d4af37]/10 to-[#d4af37]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </Link>
            <Link 
              to="/rooms" 
              className="text-white/90 hover:text-[#d4af37] 
                transition-all duration-300 font-light px-4 py-2 
                relative group tracking-wide"
            >
              <span className="relative z-10">Rooms</span>
              <span className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/0 via-[#d4af37]/10 to-[#d4af37]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </Link>
            <Link 
              to="/about" 
              className="text-white/90 hover:text-[#d4af37] 
                transition-all duration-300 font-light px-4 py-2 
                relative group tracking-wide"
            >
              <span className="relative z-10">About</span>
              <span className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/0 via-[#d4af37]/10 to-[#d4af37]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </Link>
            <Link 
              to="/contact" 
              className="text-white/90 hover:text-[#d4af37] 
                transition-all duration-300 font-light px-4 py-2 
                relative group tracking-wide"
            >
              <span className="relative z-10">Contact</span>
              <span className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/0 via-[#d4af37]/10 to-[#d4af37]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </Link>
          </nav>

          {}
          <div className="hidden md:flex items-center 
            space-x-3"
          >
            {!isAuthenticated ? (
              <>
                <button
                  onClick={() => openModal('login')}
                  className="flex items-center space-x-2 
                    px-5 py-2 text-white/90 
                    hover:text-[#d4af37] transition-all duration-300 
                    font-light tracking-wide relative group"
                >
                  <LogIn className="w-4 h-4 relative z-10" />
                  <span className="relative z-10">Login</span>
                  <span className="absolute inset-0 border border-[#d4af37]/30 rounded-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                </button>
                <button
                  onClick={() => openModal('register')}
                  className="flex items-center space-x-2 
                    px-6 py-2.5 bg-gradient-to-r from-[#d4af37] to-[#c9a227] 
                    text-[#0f0f0f] rounded-sm hover:from-[#f5d76e] 
                    hover:to-[#d4af37] transition-all duration-300 
                    font-medium tracking-wide shadow-lg shadow-[#d4af37]/20 
                    hover:shadow-[#d4af37]/30 relative overflow-hidden group"
                >
                  <span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></span>
                  <UserPlus className="w-4 h-4 relative z-10" />
                  <span className="relative z-10">Register</span>
                </button>
              </>
            ) : (
              <div className="flex items-center gap-3">
                <InAppNotificationBell />
                <div className="relative" ref={userMenuRef}>
                  <button
                    onClick={toggleUserMenu}
                    className="flex items-center space-x-3 
                      px-3 py-2 rounded-sm hover:bg-white/10 
                      transition-all duration-300 border border-transparent 
                      hover:border-[#d4af37]/30"
                  >
                    {userInfo?.avatar ? (
                      <img 
                        src={normalizeImageUrl(userInfo.avatar)} 
                        alt={userInfo.name}
                        className="w-9 h-9 rounded-full 
                          object-cover ring-2 ring-[#d4af37]/50"
                      />
                    ) : (
                      <div className="w-9 h-9 bg-gradient-to-br from-[#d4af37] to-[#c9a227] 
                        rounded-full flex items-center 
                        justify-center ring-2 ring-[#d4af37]/50 shadow-lg"
                      >
                        <span className="text-[#0f0f0f] 
                          font-semibold text-sm"
                        >
                          {userInfo?.name?.charAt(0)
                            .toUpperCase()}
                        </span>
                      </div>
                    )}
                    <span className="font-light text-white/90 tracking-wide">
                      {userInfo?.name}
                    </span>
                  </button>

                  {isUserMenuOpen && (
                  <div className="absolute right-0 mt-2 
                    w-52 bg-gradient-to-b from-[#1a1a1a] to-[#0f0f0f] 
                    rounded-sm shadow-2xl py-2 border border-[#d4af37]/20 
                    z-50 backdrop-blur-xl animate-fade-in"
                  >
                    <Link
                      to="/profile"
                      onClick={() => setIsUserMenuOpen(false)}
                      className="flex items-center space-x-3 
                        px-4 py-2.5 text-white/90 
                        hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                        transition-all duration-300 border-l-2 border-transparent 
                        hover:border-[#d4af37]"
                    >
                      <User className="w-4 h-4" />
                      <span className="font-light tracking-wide">Profile</span>
                    </Link>
                    {userInfo?.role !== 'admin' && userInfo?.role !== 'staff' && userInfo?.role !== 'accountant' && (
                      <>
                        <Link
                          to="/favorites"
                          onClick={() => setIsUserMenuOpen(false)}
                          className="flex items-center space-x-3 
                            px-4 py-2.5 text-white/90 
                            hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                            transition-all duration-300 border-l-2 border-transparent 
                            hover:border-[#d4af37]"
                        >
                          <Heart className="w-4 h-4" />
                          <span className="font-light tracking-wide">Favorites</span>
                        </Link>
                        <Link
                          to="/bookings"
                          onClick={() => setIsUserMenuOpen(false)}
                          className="flex items-center space-x-3 
                            px-4 py-2.5 text-white/90 
                            hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                            transition-all duration-300 border-l-2 border-transparent 
                            hover:border-[#d4af37]"
                        >
                          <Calendar className="w-4 h-4" />
                          <span className="font-light tracking-wide">My Bookings</span>
                        </Link>
                        <Link
                          to="/loyalty"
                          onClick={() => setIsUserMenuOpen(false)}
                          className="flex items-center space-x-3 
                            px-4 py-2.5 text-white/90 
                            hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                            transition-all duration-300 border-l-2 border-transparent 
                            hover:border-[#d4af37]"
                        >
                          <Star className="w-4 h-4" />
                          <span className="font-light tracking-wide">Loyalty Program</span>
                        </Link>
                        <Link
                          to="/group-bookings"
                          onClick={() => setIsUserMenuOpen(false)}
                          className="flex items-center space-x-3 
                            px-4 py-2.5 text-white/90 
                            hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                            transition-all duration-300 border-l-2 border-transparent 
                            hover:border-[#d4af37]"
                        >
                          <Users className="w-4 h-4" />
                          <span className="font-light tracking-wide">Group Bookings</span>
                        </Link>
                      </>
                    )}
                    {userInfo?.role === 'admin' && (
                      <Link
                        to="/admin"
                        onClick={() => 
                          setIsUserMenuOpen(false)
                        }
                        className="flex items-center 
                          space-x-3 px-4 py-2.5 text-white/90 
                          hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                          transition-all duration-300 border-l-2 border-transparent 
                          hover:border-[#d4af37]"
                      >
                        <User className="w-4 h-4" />
                        <span className="font-light tracking-wide">Admin</span>
                      </Link>
                    )}
                    {userInfo?.role === 'staff' && (
                      <Link
                        to="/staff"
                        onClick={() => 
                          setIsUserMenuOpen(false)
                        }
                        className="flex items-center 
                          space-x-3 px-4 py-2.5 text-white/90 
                          hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                          transition-all duration-300 border-l-2 border-transparent 
                          hover:border-[#d4af37]"
                      >
                        <User className="w-4 h-4" />
                        <span className="font-light tracking-wide">Staff Dashboard</span>
                      </Link>
                    )}
                    {userInfo?.role === 'accountant' && (
                      <Link
                        to="/accountant"
                        onClick={() => 
                          setIsUserMenuOpen(false)
                        }
                        className="flex items-center 
                          space-x-3 px-4 py-2.5 text-white/90 
                          hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                          transition-all duration-300 border-l-2 border-transparent 
                          hover:border-[#d4af37]"
                      >
                        <User className="w-4 h-4" />
                        <span className="font-light tracking-wide">Accountant Dashboard</span>
                      </Link>
                    )}
                    <div className="border-t border-[#d4af37]/20 my-1"></div>
                    <button
                      onClick={handleLogout}
                      className="w-full flex items-center 
                        space-x-3 px-4 py-2.5 text-red-400/90 
                        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"
                    >
                      <LogOut className="w-4 h-4" />
                      <span className="font-light tracking-wide">Logout</span>
                    </button>
                  </div>
                  )}
                </div>
              </div>
            )}
            
            <button
              onClick={toggleMobileMenu}
              className="md:hidden p-2 rounded-sm 
                hover:bg-white/10 border border-transparent 
                hover:border-[#d4af37]/30 transition-all duration-300"
            >
              {isMobileMenuOpen ? (
                <X className="w-6 h-6 text-[#d4af37]" />
              ) : (
                <Menu className="w-6 h-6 text-white/90" />
              )}
            </button>
          </div>

          {isMobileMenuOpen && (
            <div className="md:hidden py-4 border-t border-[#d4af37]/20 mt-4 bg-[#0a0a0a]/50 backdrop-blur-xl animate-fade-in rounded-b-sm">
              <div className="flex flex-col space-y-1">
                <Link 
                  to="/"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="px-4 py-3 text-white/90 
                    hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                    rounded-sm transition-all duration-300 
                    border-l-2 border-transparent 
                    hover:border-[#d4af37] font-light tracking-wide"
                >
                  Home
                </Link>
                <Link 
                  to="/rooms"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="px-4 py-3 text-white/90 
                    hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                    rounded-sm transition-all duration-300 
                    border-l-2 border-transparent 
                    hover:border-[#d4af37] font-light tracking-wide"
                >
                  Rooms
                </Link>
                <Link 
                  to="/about"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="px-4 py-3 text-white/90 
                    hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                    rounded-sm transition-all duration-300 
                    border-l-2 border-transparent 
                    hover:border-[#d4af37] font-light tracking-wide"
                >
                  About
                </Link>
                <Link 
                  to="/contact"
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="px-4 py-3 text-white/90 
                    hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                    rounded-sm transition-all duration-300 
                    border-l-2 border-transparent 
                    hover:border-[#d4af37] font-light tracking-wide"
                >
                  Contact
                </Link>
                
                <div className="border-t border-[#d4af37]/20 
                pt-3 mt-3"
              >
                {!isAuthenticated ? (
                  <>
                    <button
                      onClick={() => {
                        setIsMobileMenuOpen(false);
                        openModal('login');
                      }}
                      className="flex items-center 
                        space-x-2 px-4 py-3 text-white/90 
                        hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                        rounded-sm transition-all duration-300 
                        border-l-2 border-transparent 
                        hover:border-[#d4af37] font-light tracking-wide w-full text-left"
                    >
                      <LogIn className="w-4 h-4" />
                      <span>Login</span>
                    </button>
                    <button
                      onClick={() => {
                        setIsMobileMenuOpen(false);
                        openModal('register');
                      }}
                      className="flex items-center 
                        space-x-2 px-4 py-3 bg-gradient-to-r 
                        from-[#d4af37] to-[#c9a227] text-[#0f0f0f] 
                        rounded-sm hover:from-[#f5d76e] 
                        hover:to-[#d4af37] transition-all 
                        duration-300 font-medium tracking-wide 
                        mt-2 w-full text-left"
                    >
                      <UserPlus className="w-4 h-4" />
                      <span>Register</span>
                    </button>
                  </>
                ) : (
                  <>
                    <div className="px-4 py-2 text-sm 
                      text-[#d4af37]/70 font-light tracking-wide"
                    >
                      Hello, {userInfo?.name}
                    </div>
                    <Link
                      to="/profile"
                      onClick={() => 
                        setIsMobileMenuOpen(false)
                      }
                      className="flex items-center 
                        space-x-2 px-4 py-3 text-white/90 
                        hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                        rounded-sm transition-all duration-300 
                        border-l-2 border-transparent 
                        hover:border-[#d4af37] font-light tracking-wide"
                    >
                      <User className="w-4 h-4" />
                      <span>Profile</span>
                    </Link>
                    {userInfo?.role !== 'admin' && userInfo?.role !== 'staff' && (
                      <>
                        <Link
                          to="/favorites"
                          onClick={() => 
                            setIsMobileMenuOpen(false)
                          }
                          className="flex items-center 
                            space-x-2 px-4 py-3 text-white/90 
                            hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                            rounded-sm transition-all duration-300 
                            border-l-2 border-transparent 
                            hover:border-[#d4af37] font-light tracking-wide"
                        >
                          <Heart className="w-4 h-4" />
                          <span>Favorites</span>
                        </Link>
                        <Link
                          to="/bookings"
                          onClick={() => 
                            setIsMobileMenuOpen(false)
                          }
                          className="flex items-center 
                            space-x-2 px-4 py-3 text-white/90 
                            hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                            rounded-sm transition-all duration-300 
                            border-l-2 border-transparent 
                            hover:border-[#d4af37] font-light tracking-wide"
                        >
                          <Calendar className="w-4 h-4" />
                          <span>My Bookings</span>
                        </Link>
                      </>
                    )}
                    {userInfo?.role === 'admin' && (
                      <Link
                        to="/admin"
                        onClick={() => 
                          setIsMobileMenuOpen(false)
                        }
                        className="flex items-center 
                          space-x-2 px-4 py-3 text-white/90 
                          hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                          rounded-sm transition-all duration-300 
                          border-l-2 border-transparent 
                          hover:border-[#d4af37] font-light tracking-wide"
                      >
                        <User className="w-4 h-4" />
                        <span>Admin</span>
                      </Link>
                    )}
                    {userInfo?.role === 'staff' && (
                      <Link
                        to="/staff"
                        onClick={() => 
                          setIsMobileMenuOpen(false)
                        }
                        className="flex items-center 
                          space-x-2 px-4 py-3 text-white/90 
                          hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                          rounded-sm transition-all duration-300 
                          border-l-2 border-transparent 
                          hover:border-[#d4af37] font-light tracking-wide"
                      >
                        <User className="w-4 h-4" />
                        <span>Staff Dashboard</span>
                      </Link>
                    )}
                    <button
                      onClick={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"
                    >
                      <LogOut className="w-4 h-4" />
                      <span>Logout</span>
                    </button>
                  </>
                )}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </header>
  );
};

export default Header;
