import { Link, NavLink, useNavigate } from 'react-router-dom'
import { FiLogOut, FiMenu, FiHome, FiUsers, FiGrid, FiDollarSign, FiFileText } from 'react-icons/fi'

import { useMemo, useState } from 'react'
import { useAuthStore } from '../store/authStore'
import { routes } from '../routesConfig'

const iconMap = {
  home: FiHome,
  users: FiUsers,
  building: FiGrid,
  dollar: FiDollarSign,
  file: FiFileText
}


export default function Navbar() {
  const navigate = useNavigate()
  const { logout, loading } = useAuthStore()
  const [mobileOpen, setMobileOpen] = useState(false)

  const navItems = useMemo(() => routes, [])

  const onLogout = async () => {
    await logout()
    navigate('/login')
  }

  return (
    <header className="sticky top-0 z-40 border-b bg-white/80 backdrop-blur">
      <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3 sm:px-6">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-slate-900 text-white shadow-sm">
            EP
          </div>
          <div>
            <div className="text-sm font-semibold text-slate-900">Employee Payroll Management</div>
            <div className="text-xs text-slate-500">EPMS</div>
          </div>
        </div>

        <button
          className="sm:hidden rounded-lg p-2 text-slate-600 hover:bg-slate-100"
          onClick={() => setMobileOpen((v) => !v)}
          type="button"
          aria-label="Toggle navigation"
        >
          <FiMenu className="h-5 w-5" />
        </button>

        <nav className="hidden sm:flex items-center gap-2">
          {navItems.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              className={({ isActive }) =>
                isActive
                  ? 'rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white'
                  : 'rounded-lg px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900'
              }
              end
            >
              <span className="inline-flex items-center gap-2">
                {typeof item.icon === 'string' && iconMap[item.icon] ? iconMap[item.icon]({ className: 'h-4 w-4' }) : item.icon}
                {item.label}
              </span>
            </NavLink>
          ))}

          <button
            type="button"
            onClick={onLogout}
            disabled={loading}
            className="ml-2 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900 disabled:opacity-60"
          >
            <span className="inline-flex items-center gap-2">
              <FiLogOut /> Logout
            </span>
          </button>
        </nav>

        {mobileOpen && (
          <nav className="absolute left-0 right-0 top-full z-50 border-b bg-white sm:hidden">
            <div className="mx-auto max-w-7xl px-4 py-3">
              <div className="flex flex-col gap-1">
                {navItems.map((item) => (
                  <NavLink
                    key={item.to}
                    to={item.to}
                    onClick={() => setMobileOpen(false)}
                    className={({ isActive }) =>
                      isActive
                        ? 'rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white'
                        : 'rounded-lg px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900'
                    }
                    end
                  >
                    <span className="inline-flex items-center gap-2">
                      {item.icon}
                      {item.label}
                    </span>
                  </NavLink>
                ))}
                <button
                  type="button"
                  onClick={async () => {
                    setMobileOpen(false)
                    await onLogout()
                  }}
                  disabled={loading}
                  className="mt-1 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900 disabled:opacity-60 text-left"
                >
                  <span className="inline-flex items-center gap-2">
                    <FiLogOut /> Logout
                  </span>
                </button>
              </div>
            </div>
          </nav>
        )}
      </div>
    </header>
  )
}

