import { NavLink, Outlet, useNavigate } from 'react-router-dom';
import { useAuth } from '../AuthContext';

const NAV = [
  { to: '/admin', end: true, label: 'Overview' },
  { to: '/admin/players', label: 'Players' },
  { to: '/admin/cases', label: 'Cases' },
  { to: '/admin/items', label: 'Items' },
  { to: '/admin/categories', label: 'Categories' },
  { to: '/admin/drops', label: 'Drops' },
];

export default function AdminLayout() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

  return (
    <div className="admin-shell">
      <aside className="admin-sidebar">
        <div className="admin-sidebar-brand">
          <span className="brand">CaseOrion</span>
          <span className="admin-sidebar-tag">Admin</span>
        </div>
        <nav className="admin-side-nav">
          {NAV.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              end={item.end}
              className={({ isActive }) => (isActive ? 'active' : undefined)}
            >
              {item.label}
            </NavLink>
          ))}
        </nav>
        <div className="admin-sidebar-foot">
          <div className="muted admin-sidebar-user">@{user?.username}</div>
          <button
            type="button"
            className="btn ghost"
            onClick={async () => {
              await logout();
              navigate('/login');
            }}
          >
            Logout
          </button>
        </div>
      </aside>
      <div className="admin-main">
        <Outlet />
      </div>
    </div>
  );
}