import React, { useEffect, useState } from 'react';
import { NavLink } from 'react-router-dom';
import { navLinks } from '../routes.jsx';
import mainLogo from '../assets/main_logo.png';
import './Navbar.css';

const Navbar = () => {
    const [menuOpen, setMenuOpen] = useState(false);
    const closeMenu = () => setMenuOpen(false);

    useEffect(() => {
        document.body.style.overflow = menuOpen ? 'hidden' : '';
        return () => {
            document.body.style.overflow = '';
        };
    }, [menuOpen]);

    return (
        <>
            {/* 모바일 오버레이 */}
            <div
                className={`sidebar__overlay${menuOpen ? ' is-visible' : ''}`}
                onClick={closeMenu}
                aria-hidden="true"
            />

            {/* 모바일 토글 버튼 */}
            <button
                type="button"
                className="sidebar-toggle"
                onClick={() => setMenuOpen((prev) => !prev)}
                aria-label="메뉴 열기/닫기"
                aria-expanded={menuOpen}
            >
                <span className={`sidebar-toggle__icon${menuOpen ? ' is-open' : ''}`}>
                    <span />
                    <span />
                    <span />
                </span>
            </button>

            {/* 사이드바 본체 */}
            <aside className={`sidebar${menuOpen ? ' is-open' : ''}`}>
                {/* 브랜드 섹션 */}
                <div className="sidebar__brand">
                    <img src={mainLogo} alt="Logo" className="sidebar__logo" />
                    <div className="sidebar__brand-text">
                        <p className="sidebar__brand-name">Jaeoh</p>
                        <p className="sidebar__brand-sub">MANAGEMENT ROOM</p>
                    </div>
                </div>

                {/* 구분선 */}
                <div className="sidebar__divider" />

                {/* 네비게이션 */}
                <nav className="sidebar__nav">
                    <p className="sidebar__section-label">NAVIGATION</p>
                    {navLinks.map((link) => (
                        <NavLink
                            key={link.id}
                            to={link.path}
                            onClick={closeMenu}
                            className={({ isActive }) =>
                                `sidebar__item${isActive ? ' is-active' : ''}`
                            }
                            style={{ '--item-accent': link.accent }}
                            end={link.path === '/'}
                        >
                            <span className="sidebar__item-icon">{link.icon}</span>
                            <span className="sidebar__item-label">{link.label}</span>
                            <span className="sidebar__item-dot" />
                        </NavLink>
                    ))}
                </nav>

                {/* 사이드바 푸터 */}
                <div className="sidebar__footer">
                    <div className="sidebar__divider" />
                    <div className="sidebar__footer-content">
                        <div className="sidebar__status">
                            <span className="sidebar__status-dot" />
                            <span className="sidebar__status-text">System Online</span>
                        </div>
                        <p className="sidebar__version">v2.0.0</p>
                    </div>
                </div>
            </aside>
        </>
    );
};

export default Navbar;
