import { useState } from 'react'
import { IoMenu, IoClose, IoGridOutline, IoPeopleOutline, IoListOutline, IoNotificationsOutline } from 'react-icons/io5'
import { useTheme } from '../../utils/hooks'
import { useAuth } from '../../utils/hooks'
import { useNavigate, useLocation, Link } from 'react-router-dom'
import Button from './Button'

const Sidebar = () => {
  const [isOpen, setIsOpen] = useState(true)
  const { isDark, toggleTheme } = useTheme()
  const { logout } = useAuth()
  const navigate = useNavigate()
  const location = useLocation()

  const handleLogout = () => {
    logout()
    navigate('/login')
  }

  const menuItems = [
    { label: 'Dashboard', href: '/dashboard', icon: <IoGridOutline size={20} /> },
    { label: 'Users', href: '/users', icon: <IoPeopleOutline size={20} /> },
    { label: 'Notifications', href: '/notifications', icon: <IoNotificationsOutline size={20} /> },
    { label: 'Logs', href: '/logs', icon: <IoListOutline size={20} /> },
  ]

  const isActive = (href) => location.pathname === href

  return (
    <>
      {/* Mobile Toggle */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="fixed top-4 left-4 z-40 md:hidden p-2.5 bg-[#2AA8B8] text-white rounded-lg transition-all shadow-lg hover:bg-[#1E8E9E]"
      >
        {isOpen ? <IoClose size={24} /> : <IoMenu size={24} />}
      </button>

      {/* Sidebar */}
      <aside
        className={`
          fixed left-0 top-0 h-screen shadow-2xl
          transition-all duration-300 z-30 flex flex-col
          bg-gradient-to-b from-[#1A6878] to-[#0F4A5C]
          ${isOpen ? 'w-64' : 'w-0 md:w-20'}
          md:sticky md:top-0 md:h-screen
        `}
      >
        <div className="flex flex-col h-full overflow-hidden">
          {/* Logo */}
          <div className="p-5 border-b border-white/10 bg-gradient-to-r from-[#2AA8B8] to-[#1A6878]">
            {isOpen ? (
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-xl bg-[#F5A623] flex items-center justify-center text-white font-black text-lg shadow-md">
                  N
                </div>
                <div>
                  <div className="text-ls font-bold text-white leading-tight">Numerology Master Program</div>
                  {/*<div className="text-xs text-[#B2E0E8] font-medium">Admin CMS</div>*/}
                </div>
              </div>
            ) : (
              <div className="flex justify-center">
                <div className="w-9 h-9 rounded-xl bg-[#F5A623] flex items-center justify-center text-white font-black text-lg shadow-md">
                  N
                </div>
              </div>
            )}
          </div>

          {/* Menu Items */}
          <nav className="flex-1 p-3 space-y-1 overflow-hidden">
            {menuItems.map((item) => (
              <Link
                key={item.href}
                to={item.href}
                className={`
                  flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 font-bold
                  ${isActive(item.href)
                    ? 'bg-[#F5A623] text-white shadow-lg shadow-orange-500/20'
                    : 'text-[#B2E0E8] hover:bg-white/10 hover:text-white'
                  }
                  ${!isOpen ? 'justify-center' : ''}
                `}
                title={!isOpen ? item.label : ''}
              >
                <span className="shrink-0">{item.icon}</span>
                {isOpen && <span className="text-base">{item.label}</span>}
              </Link>
            ))}
          </nav>

          {/* Footer */}
          <div className="p-3 border-t border-white/10 space-y-2">
         {/*   <button
              onClick={toggleTheme}
              className="w-full px-4 py-3 rounded-xl text-[#B2E0E8] hover:bg-white/10 hover:text-white transition-all font-medium text-sm flex items-center gap-2 justify-center"
              title="Toggle theme"
            >
              {isDark ? '☀️' : '🌙'}
              {isOpen && <span>{isDark ? 'Light Mode' : 'Dark Mode'}</span>}
            </button>*/}

            <Button
              onClick={handleLogout}
              variant="danger"
              size="sm"
              className="w-full"
            >
              {isOpen ? '🚪 Logout' : '🚪'}
            </Button>
          </div>
        </div>
      </aside>

      {/* Mobile Overlay */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black/50 md:hidden z-20"
          onClick={() => setIsOpen(false)}
        />
      )}
    </>
  )
}

export default Sidebar
