import { NavLink, useLocation, useNavigate } from 'react-router-dom';
import { LayoutDashboard, Receipt, Users, FileBarChart, Settings, Sparkles, Home, BookOpen, Menu, X, Wallet } from 'lucide-react';


export default function Sidebar({ isOpen, onClose, isCollapsed, onToggle, isMobile }) {

  const location = useLocation();
  const navigate = useNavigate();

  const menuItems = [
    { path: 'dashboard', icon: LayoutDashboard, label: 'Dashboard' },
    { path: 'ledger', icon: Home, label: 'My Ledger' },
    { path: 'expenses', icon: Wallet, label: 'Expenses' },
    { path: 'cashbook', icon: BookOpen, label: 'Cashbook' },
    { path: 'transactions', icon: Receipt, label: 'Transactions' },
    { path: 'customers', icon: Users, label: 'Customers' },
    { path: 'reports', icon: FileBarChart, label: 'Reports' },
    { path: 'settings', icon: Settings, label: 'Settings' },
  ];

  const handleMenuClick = () => {
    // Close sidebar on mobile after navigation
    if (isMobile) {
      onClose();
    }
  };

  const handleNavigate = () => {
    if (location.pathname !== '/dashboard') {
      navigate('/dashboard');
      handleMenuClick();
    }
  }


  return (
    <>
      {/* Mobile Overlay */}
      <div
        className={`fixed inset-0 lg:hidden transition-opacity duration-500
    ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
        style={{
          zIndex: 7,
          backdropFilter: "blur(1px)",
          backgroundColor: "rgba(0,0,0,0.4)",
          height: "100vh",
        }}
        onClick={onClose}
      />

      <aside
        className={`bg-white border-r border-[#E5E7EB] left-0 top-0 h-screen flex flex-col transition-all duration-150 ease-in-out
           ${isMobile ? 'fixed' : ''}
           ` }
        style={{
          width: isCollapsed && !isMobile ? '80px' : '280px',
          transform: (isMobile && !isOpen) ? 'translateX(-100%)' : 'translateX(0)',
          zIndex: 8,
          boxShadow: '0 0 15px rgba(0, 0, 0, 0.08)'
        }}
      >
        {/* Logo & Toggle Button */}
        <div className={`border-b border-[#E5E7EB] ${isCollapsed ? 'p-2' : 'px-3 py-2.5'} block`}>
          {isCollapsed ? (
            // Collapsed: Logo + Hamburger (Desktop only)
            <div className="flex flex-col items-center gap-3">
              <div className="w-10 h-10 bg-gradient-to-br from-[#FF6B00] to-[#FF8534] rounded-xl flex items-center justify-center shadow-lg">
                <span className="text-white text-xl font-bold">P</span>
              </div>
              {!isMobile && (
                <button
                  className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                  onClick={onToggle}
                  title="Expand sidebar"
                >
                  <Menu className="w-5 h-5 text-gray-600" />
                </button>
              )}
            </div>
          ) : (
            // Expanded: Logo + Text + Toggle/Close button
            <div className="flex items-center justify-between gap-3 ">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-gradient-to-br from-[#FF6B00] to-[#FF8534] rounded-xl flex items-center justify-center shadow-lg cursor-pointer" onClick={handleNavigate}>
                  <span className="text-white text-xl font-bold text-white">P</span>
                </div>
                <span className="text-xl font-bold text-gray-900 whitespace-nowrap flex items-center cursor-pointer" onClick={handleNavigate}>
                  <div className='text-[#c1282b]'>Pozo</div>
                  <div className='text-[#29282e]'>Accounts</div>
                </span>
              </div>
              {!isMobile ? (
                // Desktop: Hamburger for collapse
                <button
                  className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                  onClick={onToggle}
                  title="Collapse sidebar"
                >
                  <Menu className="w-5 h-5 text-gray-600" />
                </button>
              ) : (
                // Mobile: X button to close
                <button
                  className="hover:bg-gray-100 rounded-lg transition-colors
                   flex items-center justify-center max-md:hidden"
                  onClick={onClose}
                  title="Close sidebar"
                >
                  <X className="w-5 h-5 text-gray-600 " />
                </button>
              )}
            </div>
          )}
        </div>

        {/* Main Navigation */}
        <nav className="flex-1 p-4 overflow-y-auto">
          <div className="space-y-1">
            {menuItems.map((item) => {
              const Icon = item.icon;
              return (
                <NavLink
                  key={item.path}
                  to={item.path}
                  end
                  onClick={handleMenuClick}
                  title={isCollapsed ? item.label : ''}
                  className={({ isActive }) =>
                    `w-full flex items-center gap-3 rounded-xl transition-all duration-200 ${isCollapsed ? 'justify-center px-4 py-3' : 'px-4 py-3'
                    } ${isActive
                      ? 'bg-[#FF6B00] shadow-lg text-white '
                      : 'text-gray-600 hover:bg-[#FFF4F0] hover:text-[#FF6B00]'
                    }`
                  }
                >
                  {({ isActive }) => (
                    <>
                      <Icon className="w-5 h-5 flex-shrink-0" strokeWidth={isActive ? 2.5 : 2} />
                      <span className={`text-sm transition-all duration-300 overflow-hidden whitespace-nowrap ${isCollapsed ? 'w-0 opacity-0 hidden' : 'w-auto opacity-100'
                        } ${isActive ? 'font-semibold' : 'font-medium'}
                      `}
                        style={{
                          trasnsition: 'opacity 0.5s ease-in-out',
                        }}>
                        {item.label}
                      </span>
                    </>
                  )}
                </NavLink>
              );
            })}
          </div>
        </nav>

        {/* Upgrade Section */}
        <div className={`border-t border-[#E5E7EB] transition-all duration-300 overflow-hidden ${isCollapsed ? 'max-h-0 p-0' : 'max-h-96 p-4'
          }`}>
          <div className="bg-gradient-to-br from-[#FFF4F0] to-[#FFE8DC] rounded-xl p-3 border border-orange-100">
            <div className="flex items-center justify-center gap-2 mb-2">
              <Sparkles className="w-5 h-5 text-[#FF6B00]" />
              <span className="text-sm font-bold text-gray-900">Upgrade to Pro</span>
            </div>
            <p className="text-xs text-gray-600 text-center mb-3 leading-relaxed">
              Unlock premium features and advanced analytics
            </p>
            <button className="w-full bg-black bg-gradient-to-r from-[#FF6B00] to-[#FF8534] text-white py-2 px-3 cursor-pointer rounded-lg text-sm font-semibold hover:shadow-lg hover:shadow-orange-200 transition-all duration-200">
              UPGRADE NOW
            </button>
          </div>
        </div>

        {/* Collapsed Upgrade Icon */}
        {isCollapsed && (
          <div className="p-4 border-t border-[#E5E7EB] flex justify-center">
            <button
              className="p-3 bg-gradient-to-br from-[#FFF4F0] to-[#FFE8DC] rounded-lg hover:shadow-lg transition-all"
              title="Upgrade to Pro"
            >
              <Sparkles className="w-5 h-5 text-[#FF6B00]" />
            </button>
          </div>
        )}
      </aside>
    </>
  );
}
