// Sidebar component displaying administrative portal tabs, collapsible submenus, and logout buttons.
import { useState } from 'react';
import { NavLink } from 'react-router-dom';
import { LayoutDashboard, Car, CalendarDays, LogOut, ChevronLeft, ChevronRight, UserPlus, Menu, X } from 'lucide-react';

const Sidebar = ({ onLogout }) => {
    const [collapsed, setCollapsed] = useState(false);
    const [mobileShow, setMobileShow] = useState(false);

    const navItems = [
        { to: '/dashboard', icon: <LayoutDashboard size={20} strokeWidth={1.5} />, label: 'Dashboard' },
        { to: '/cars', icon: <Car size={20} strokeWidth={1.5} />, label: 'Fleet' },
        { to: '/AddCustomer', icon: <UserPlus size={20} strokeWidth={1.5} />, label: 'Customers' },
        { to: '/bookings', icon: <CalendarDays size={20} strokeWidth={1.5} />, label: 'Bookings' },
    ];

    const sidebarStyle = {
        width: collapsed ? '72px' : '260px',
        background: '#11131a',
        borderRight: '1px solid rgba(255, 255, 255, 0.05)',
        transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
        zIndex: 1060, 
    };

    return (
        <>
            <div className="d-lg-none position-fixed" style={{ top: '15px', right: '15px', zIndex: 1050 }}>
                <button 
                    className="btn shadow-sm d-flex align-items-center justify-content-center" 
                    onClick={() => setMobileShow(true)}
                    style={{ 
                        background: '#11131a', 
                        color: '#a855f7', 
                        width: '45px', 
                        height: '45px', 
                        borderRadius: '10px',
                        border: '1px solid rgba(168, 85, 247, 0.3)' 
                    }}
                >
                    <Menu size={24} />
                </button>
            </div>

            <div 
                className={`d-flex flex-column vh-100 py-3 overflow-hidden flex-shrink-0 
                    ${mobileShow ? 'sidebar-mobile-show' : 'sidebar-mobile-hide'} d-lg-flex sticky-top`}
                style={{
                    ...sidebarStyle,
                    background: 'linear-gradient(180deg, rgba(15,23,42,1) 0%, rgba(30,41,59,0.95) 100%)',
                    boxShadow: '1px 0 20px rgba(0,0,0,0.3)',
                    backdropFilter: 'blur(10px)',
                    WebkitBackdropFilter: 'blur(10px)'
                }}
            >
                <div className="d-lg-none text-end px-3 mb-2">
                    <button className="btn p-0" style={{ color: '#94a3b8' }} onClick={() => setMobileShow(false)}>
                        <X size={24} />
                    </button>
                </div>

                {/* Brand Header */}
                <div className={`d-flex align-items-center px-4 mb-4 ${collapsed ? 'justify-content-center' : 'justify-content-between'}`} 
                     style={{ minHeight: '50px' }}>
                     {(!collapsed || mobileShow) ? (
                        <div className="d-flex align-items-center gap-3">
                            <div style={{
                                width: '36px', height: '36px',
                                borderRadius: '10px',
                                background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(124, 58, 237, 0.2))',
                                border: '1px solid rgba(168, 85, 247, 0.4)',
                                display: 'flex', alignItems: 'center', justifyContent: 'center',
                                boxShadow: '0 0 15px rgba(168, 85, 247, 0.3)'
                            }}>
                                <Car size={20} strokeWidth={2} color="#c084fc" />
                            </div>
                            <h2 className="m-0 fw-bold" style={{ 
                                fontSize: '1.1rem', whiteSpace: 'nowrap', 
                                background: 'linear-gradient(135deg, #f8fafc 0%, #c084fc 100%)',
                                WebkitBackgroundClip: 'text',
                                WebkitTextFillColor: 'transparent',
                                letterSpacing: '-0.3px'
                            }}>
                                Admin Portal
                            </h2>
                        </div>
                    ) : (
                        <div style={{
                            width: '36px', height: '36px',
                            borderRadius: '10px',
                            background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(124, 58, 237, 0.2))',
                            border: '1px solid rgba(168, 85, 247, 0.4)',
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                            boxShadow: '0 0 15px rgba(168, 85, 247, 0.3)'
                        }}>
                            <Car size={20} strokeWidth={2} color="#c084fc" />
                        </div>
                    )}
                    
                    <button
                        onClick={() => setCollapsed(!collapsed)}
                        className="btn border-0 d-none d-lg-flex align-items-center justify-content-center p-0 shadow-none sidebar-toggle"
                        style={{
                            background: 'rgba(255,255,255,0.03)',
                            border: '1px solid rgba(255,255,255,0.08)',
                            borderRadius: '8px',
                            color: '#94a3b8',
                            width: '28px',
                            height: '28px',
                            transition: 'all 0.2s ease'
                        }}
                    >
                        {collapsed ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
                    </button>
                </div>

                {/* Categories */}
                {(!collapsed || mobileShow) && (
                    <div className="px-4 mb-2 text-start d-flex align-items-center gap-2">
                        <span style={{ display: 'inline-block', width: '12px', height: '2px', background: 'linear-gradient(90deg, #8b5cf6, transparent)' }}></span>
                        <span style={{ fontSize: '10px', color: '#64748b', textTransform: 'uppercase', letterSpacing: '1.5px', fontWeight: '700' }}>Navigation</span>
                    </div>
                )}

                <nav className="nav flex-column gap-2 px-3 flex-grow-1 mt-2">
                    {navItems.map(({ to, icon, label }) => {
                        return (
                            <NavLink
                                key={to}
                                to={to}
                                onClick={() => setMobileShow(false)}
                                className={({ isActive }) => 
                                    `nav-link d-flex align-items-center gap-3 px-3 py-2.5 sidebar-link ${isActive ? 'active' : ''}`
                                }
                                style={({ isActive }) => ({
                                    justifyContent: (collapsed && !mobileShow) ? 'center' : 'flex-start',
                                    borderRadius: '10px',
                                    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                                    position: 'relative',
                                    overflow: 'hidden',
                                    paddingLeft: (collapsed && !mobileShow) ? '12px' : '16px'
                                })}
                            >
                                <span className="nav-icon" style={{
                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                                    transition: 'all 0.3s ease',
                                    zIndex: 2
                                }}>
                                    {icon}
                                </span>
                                {(!collapsed || mobileShow) && (
                                    <span className="overflow-hidden text-nowrap nav-label" style={{ 
                                        fontSize: '13.5px', 
                                        fontWeight: '600',
                                        letterSpacing: '0.3px',
                                        transition: 'all 0.3s ease',
                                        zIndex: 2
                                    }}>
                                        {label}
                                    </span>
                                )}
                            </NavLink>
                        );
                    })}
                </nav>

                <div className="px-3 mt-auto mb-2">
                    <button
                        onClick={onLogout}
                        className="btn w-100 d-flex align-items-center gap-3 px-3 py-2.5 border-0 shadow-none logout-btn"
                        style={{ 
                            justifyContent: (collapsed && !mobileShow) ? 'center' : 'flex-start', 
                            borderRadius: '10px',
                            transition: 'all 0.3s ease'
                        }}
                    >
                        <span className="logout-icon" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <LogOut size={20} strokeWidth={1.5} />
                        </span>
                        {(!collapsed || mobileShow) && <span className="text-nowrap logout-label" style={{ fontSize: '13.5px', fontWeight: '600', letterSpacing: '0.3px' }}>Logout</span>}
                    </button>
                </div>
            </div>

            {mobileShow && (
                <div 
                    className="position-fixed top-0 start-0 w-100 vh-100 d-lg-none" 
                    style={{ background: 'rgba(0,0,0,0.5)', zIndex: 1055 }}
                    onClick={() => setMobileShow(false)}
                />
            )}

            <style>{`
                .sidebar-link {
                    color: #94a3b8;
                    background: transparent;
                }
                .sidebar-link::before {
                    content: '';
                    position: absolute;
                    top: 0; left: 0;
                    width: 100%; height: 100%;
                    background: linear-gradient(90deg, rgba(168,85,247,0.1), rgba(124,58,237,0.02));
                    opacity: 0;
                    transition: opacity 0.3s ease;
                    z-index: 1;
                }
                .sidebar-link:hover::before { opacity: 1; }
                .sidebar-link:hover .nav-icon { color: #c084fc; transform: translateX(2px); }
                .sidebar-link:hover .nav-label { color: #f8fafc; }
                
                .sidebar-link.active {
                    background: rgba(255,255,255,0.03);
                    border: 1px solid rgba(255,255,255,0.05);
                    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
                }
                .sidebar-link.active::after {
                    content: '';
                    position: absolute;
                    left: 0; top: 50%;
                    transform: translateY(-50%);
                    width: 3px; height: 60%;
                    background: #a855f7;
                    border-radius: 0 4px 4px 0;
                    box-shadow: 0 0 10px #a855f7;
                }
                .sidebar-link.active .nav-icon { color: #ffffff; filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); }
                .sidebar-link.active .nav-label { color: #ffffff; }

                .logout-btn {
                    color: #94a3b8;
                    background: rgba(239,68,68,0.05) !important;
                    border: 1px solid transparent !important;
                }
                .logout-btn:hover {
                    background: rgba(239,68,68,0.15) !important;
                    border-color: rgba(239,68,68,0.3) !important;
                }
                .logout-btn:hover .logout-icon, .logout-btn:hover .logout-label { color: #ef4444; }
                .logout-icon { color: #f87171; transition: color 0.3s ease; }
                .logout-label { color: #f87171; transition: color 0.3s ease; }

                .sidebar-toggle:hover {
                    background: rgba(168,85,247,0.15) !important;
                    border-color: rgba(168,85,247,0.3) !important;
                    color: #c084fc !important;
                }

                @media (max-width: 991.98px) {
                    .sidebar-mobile-hide {
                        position: fixed;
                        left: -100%;
                    }
                    .sidebar-mobile-show {
                        position: fixed;
                        left: 0;
                        width: 260px !important;
                    }
                }
            `}</style>
        </>
    );
};

export default Sidebar;