// Navbar.jsx - Enhanced Navigation Component
const { useState, useEffect } = React;

function Navbar({ currentPage, onNavigate, isAdmin, onLogout, enrollments, onMarkEnrollmentRead, onClearEnrollments }) {
    const [isScrolled, setIsScrolled] = useState(false);
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

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

    const navItems = [
        { id: 'home', label: 'Home' },
        { id: 'classes', label: 'Classes' },
        { id: 'courses', label: 'Courses' },
        { id: 'gallery', label: 'Gallery' },
        { id: 'about', label: 'About' }
    ];

    const handleNavClick = (id) => {
        onNavigate(id);
        setMobileMenuOpen(false);

        if (!['home', 'admin', 'admin-dashboard'].includes(id)) {
            scrollToSection(id);
        }
    };

    const scrollToSection = (sectionId) => {
        const sections = {
            'classes': 'upcoming-classes',
            'courses': 'courses',
            'gallery': 'gallery',
            'about': 'about'
        };

        const element = document.getElementById(sections[sectionId]);
        if (element) {
            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
        } else {
            onNavigate('home');
            setTimeout(() => {
                const element = document.getElementById(sections[sectionId]);
                if (element) {
                    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            }, 100);
        }
    };

    return (
        <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
            isScrolled
                ? 'bg-white/95 backdrop-blur-md shadow-md py-3'
                : 'bg-transparent py-5'
        }`}>
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex items-center justify-between">
                    {/* Logo */}
                    <div
                        className="flex items-center cursor-pointer group"
                        onClick={() => handleNavClick('home')}
                    >
                        <div className="relative">
                            <svg className="w-10 h-10 text-crimson transition-transform group-hover:scale-110" viewBox="0 0 50 50" fill="none">
                                <circle cx="25" cy="25" r="23" stroke="currentColor" strokeWidth="2"/>
                                <path d="M15 35 Q25 15 35 35" stroke="currentColor" strokeWidth="2" fill="none"/>
                                <circle cx="25" cy="25" r="5" fill="currentColor"/>
                            </svg>
                        </div>
                        <span className="ml-3 font-serif text-xl font-semibold text-charcoal">
                            Arpita Art Academy
                        </span>
                    </div>

                    {/* Desktop Navigation */}
                    <div className="hidden lg:flex items-center gap-1">
                        {navItems.map(item => (
                            <button
                                key={item.id}
                                onClick={() => handleNavClick(item.id)}
                                className={`relative px-4 py-2 font-medium transition-colors ${
                                    currentPage === item.id ? 'text-crimson' : 'text-charcoal-light hover:text-crimson'
                                }`}
                            >
                                {item.label}
                                {currentPage === item.id && (
                                    <span className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-crimson rounded-full"></span>
                                )}
                            </button>
                        ))}
                        {isAdmin && (
                            <button
                                onClick={() => handleNavClick('admin-dashboard')}
                                className={`px-4 py-2 font-medium transition-colors ${
                                    currentPage === 'admin-dashboard' ? 'text-crimson' : 'text-charcoal-light hover:text-crimson'
                                }`}
                            >
                                Dashboard
                            </button>
                        )}
                    </div>

                    {/* CTA Buttons */}
                    <div className="hidden md:flex items-center gap-4">
                        {!isAdmin ? (
                            <>
                                <button
                                    onClick={() => handleNavClick('admin')}
                                    className="text-charcoal-light hover:text-crimson font-medium text-sm"
                                >
                                    Login
                                </button>
                                <button
                                    onClick={() => handleNavClick('classes')}
                                    className="bg-crimson text-white px-6 py-2.5 rounded-full font-medium hover:bg-crimson-dark hover-lift shadow-md hover:shadow-lg"
                                >
                                    Enroll Now
                                </button>
                            </>
                        ) : (
                            <>
                                <NotificationCenter
                                    enrollments={enrollments || []}
                                    onMarkAsRead={onMarkEnrollmentRead}
                                    onClearAll={onClearEnrollments}
                                />
                                <button
                                    onClick={onLogout}
                                    className="text-crimson border-2 border-crimson px-6 py-2 rounded-full font-medium hover:bg-crimson hover:text-white transition-all"
                                >
                                    Logout
                                </button>
                            </>
                        )}
                    </div>

                    {/* Mobile Menu Button */}
                    <button
                        className="md:hidden p-2 hover:bg-gray-100 rounded-lg transition-colors"
                        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                    >
                        <svg className="w-6 h-6 text-charcoal" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            {mobileMenuOpen ? (
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                            ) : (
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                            )}
                        </svg>
                    </button>
                </div>

                {/* Mobile Menu */}
                {mobileMenuOpen && (
                    <div className="md:hidden mt-4 pb-4 border-t border-border-gray">
                        <div className="pt-4 space-y-2">
                            {navItems.map(item => (
                                <button
                                    key={item.id}
                                    onClick={() => handleNavClick(item.id)}
                                    className={`block w-full text-left px-4 py-3 rounded-lg transition-colors ${
                                        currentPage === item.id
                                            ? 'bg-crimson/10 text-crimson font-medium'
                                            : 'text-charcoal hover:bg-gray-100'
                                    }`}
                                >
                                    {item.label}
                                </button>
                            ))}
                            {isAdmin && (
                                <button
                                    onClick={() => handleNavClick('admin-dashboard')}
                                    className="block w-full text-left px-4 py-3 bg-crimson/10 text-crimson font-medium rounded-lg"
                                >
                                    Dashboard
                                </button>
                            )}
                            <div className="pt-4 space-y-2">
                                {!isAdmin ? (
                                    <>
                                        <button
                                            onClick={() => handleNavClick('admin')}
                                            className="block w-full text-left px-4 py-3 text-charcoal hover:bg-gray-100 rounded-lg"
                                        >
                                            Admin Login
                                        </button>
                                        <button
                                            onClick={() => handleNavClick('classes')}
                                            className="block w-full bg-crimson text-white px-4 py-3 rounded-lg font-medium text-center hover:bg-crimson-dark"
                                        >
                                            Enroll Now
                                        </button>
                                    </>
                                ) : (
                                    <button
                                        onClick={onLogout}
                                        className="block w-full text-crimson border-2 border-crimson px-4 py-3 rounded-lg font-medium text-center"
                                    >
                                        Logout
                                    </button>
                                )}
                            </div>
                        </div>
                    </div>
                )}
            </div>
        </nav>
    );
}

window.Navbar = Navbar;