import { Menu, X } from 'lucide-react'
import { useState } from 'react'

import { NavLink, useNavigate } from 'react-router-dom'
import { useAuthStore } from '../context/authStore'

const menu = [
  { to: '/dashboard', label: 'Dashboard' },
  { to: '/products', label: 'Products' },
  { to: '/warehouses', label: 'Warehouses' },
  { to: '/transactions', label: 'Transactions' },
  { to: '/reports', label: 'Reports' },
]

export default function Navbar() {
  const navigate = useNavigate()
  const logout = useAuthStore((s) => s.logout)
  const [open, setOpen] = useState(false)



  const handleLogout = async () => {
    await logout()
    navigate('/login', { replace: true })
  }

  return (
    <header className="md:hidden sticky top-0 z-30 border-b border-white/10 bg-slate-950/70 backdrop-blur">
      <div className="px-4 py-3 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="h-9 w-9 rounded-xl bg-gradient-to-br from-purple-500 to-fuchsia-500 flex items-center justify-center font-bold text-sm">
            SH
          </div>
          <div>
            <div className="font-semibold text-sm">StockHub</div>
            <div className="text-xs text-slate-400">Inventory Management</div>
          </div>
        </div>

        <button
          onClick={() => setOpen((s) => !s)}
          className="h-10 w-10 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition flex items-center justify-center"
          aria-label="Toggle navigation"
        >
          {open ? <X size={18} /> : <Menu size={18} />}
        </button>
      </div>

      {open ? (
        <div className="px-4 pb-4">
          <div className="rounded-2xl border border-white/10 bg-white/5 p-2 space-y-1">
            {menu.map((item) => (
              <NavLink
                key={item.to}
                to={item.to}
                onClick={() => setOpen(false)}
                className={({ isActive }) =>
                  `block px-3 py-2.5 rounded-xl transition text-sm font-medium ${
                    isActive ? 'bg-fuchsia-500/15 border border-fuchsia-400/30 text-white' : 'text-slate-300 hover:bg-white/5'
                  }`
                }
              >
                {item.label}
              </NavLink>
            ))}

            <button
              onClick={handleLogout}
              className="w-full mt-2 px-3 py-2.5 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition text-sm font-medium"
            >
              Logout
            </button>
          </div>
        </div>
      ) : null}
    </header>
  )
}

