import React, { useState, useEffect } from 'react';
import { DashboardView } from '../types';

interface NavbarProps {
  activeView: DashboardView;
  onViewChange: (view: DashboardView) => void;
  onLogout: () => void;
  onBackToCoordinatorHub?: () => void;
}

const Navbar: React.FC<NavbarProps> = ({ activeView, onViewChange, onLogout, onBackToCoordinatorHub }) => {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const menuItems: { id: DashboardView; label: string }[] = [
    { id: 'HOME', label: 'HOME' },
    { id: 'EVENTS', label: 'EVENTS' },
    { id: 'REGISTRATIONS', label: 'REGISTRATIONS' },
    { id: 'PROFILE', label: 'PROFILE' },
    { id: 'ABOUT', label: 'ABOUT' },
    { id: 'CONTACT', label: 'CONTACT' },
  ];

  return (
    <nav className={`fixed top-0 left-0 w-full z-[100] transition-all duration-500 px-8 py-5 flex items-center justify-between ${
      isScrolled 
        ? 'bg-white/90 backdrop-blur-2xl py-4 shadow-sm' 
        : 'bg-transparent py-6'
    }`}>
      {/* Brand Logo (Top Left) */}
      <div 
        className="flex items-center cursor-pointer group transition-transform hover:scale-105" 
        onClick={() => onViewChange('HOME')}
      >
        <div className="transition-all duration-300">
          <img 
            src="https://www.facultyplus.com/wp-content/uploads/2020/11/Rit-logo.png" 
            alt="RIT Logo" 
            className={`h-12 w-auto object-contain transition-all duration-300`}
          />
        </div>
      </div>

      {/* Nav Links & Logout (Right Side) */}
      <div className="flex items-center gap-8 md:gap-12">
        <div className="hidden md:flex items-center gap-8">
          {onBackToCoordinatorHub && (
            <button
              onClick={onBackToCoordinatorHub}
              className={`text-[10px] font-black tracking-[0.2em] px-4 py-1.5 rounded-lg transition-all border border-[#f97316] text-[#f97316] hover:bg-[#f97316] hover:text-white`}
            >
              COORDINATOR HUB
            </button>
          )}
          {menuItems.map((item) => (
            <button
              key={item.id}
              onClick={() => onViewChange(item.id)}
              className={`text-xs font-serif tracking-[0.2em] transition-all relative py-1 ${
                activeView === item.id 
                  ? 'text-[#f97316]' 
                  : isScrolled ? 'text-black hover:text-[#f97316]' : 'text-black hover:text-[#f97316]'
              }`}
            >
              {item.label}
              {activeView === item.id && (
                <span className="absolute -bottom-1 left-0 w-full h-[1px] bg-[#f97316]"></span>
              )}
            </button>
          ))}
        </div>

        <button 
          onClick={onLogout} 
          className={`text-[10px] font-black tracking-[0.2em] px-6 py-2 rounded-full transition-all border bg-[#f97316] text-white border-[#f97316] hover:bg-[#ea580c] hover:border-[#ea580c]`}
        >
          LOG OUT
        </button>
      </div>
    </nav>
  );
};

export default Navbar;