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 Sidebar() {
  const navigate = useNavigate()
  const logout = useAuthStore((s) => s.logout)

  return (
    <div className="h-[100svh] sticky top-0 p-4">
      <div className="h-full rounded-2xl border border-white/10 bg-white/5 backdrop-blur p-4 flex flex-col">
        <div className="flex items-center gap-3 px-2 py-3">
          <div className="h-11 w-11 rounded-2xl bg-gradient-to-br from-purple-500 to-fuchsia-500 flex items-center justify-center font-bold">
            SH
          </div>
          <div className="leading-tight">
            <div className="font-semibold">StockHub</div>
            <div className="text-xs text-slate-400">SMS 2026</div>
          </div>
        </div>

        <nav className="mt-2 flex-1 space-y-1">
          {menu.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              className={({ isActive }) =>
                `flex items-center gap-3 px-3 py-2.5 rounded-xl transition ${
                  isActive ? 'bg-fuchsia-500/15 border border-fuchsia-400/30 text-white' : 'text-slate-300 hover:bg-white/5'
                }`
              }
            >
              <span className="w-2 h-2 rounded-full bg-fuchsia-400/70" />
              <span className="font-medium text-sm">{item.label}</span>
            </NavLink>
          ))}
        </nav>

        <div className="pt-3">
          <button
            onClick={async () => {
              await logout()
              navigate('/login', { replace: true })
            }}
            className="w-full flex items-center justify-center gap-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>
    </div>
  )
}

