import { NavLink, Outlet, useNavigate } from "react-router-dom";

import { useAdminLogout } from "../../hooks/admin";

export function AdminLayout() {
  const logout = useAdminLogout();
  const navigate = useNavigate();

  const doLogout = async () => {
    await logout.mutateAsync().catch(() => {});
    navigate("/admin/login", { replace: true });
  };

  const tab = ({ isActive }: { isActive: boolean }) =>
    "btn small" + (isActive ? " btn-primary" : " btn-ghost");

  return (
    <div className="app-shell">
      <header className="top-bar">
        <span className="title">Админ-панель</span>
        <button className="btn btn-ghost small" onClick={doLogout}>
          Выйти
        </button>
      </header>
      <div className="admin-tabs">
        <NavLink to="/admin/records" className={tab}>
          Записи
        </NavLink>
        <NavLink to="/admin/accounts" className={tab}>
          Аккаунты
        </NavLink>
        <NavLink to="/admin/factions" className={tab}>
          Фракции
        </NavLink>
        <NavLink to="/admin/achievements" className={tab}>
          Ачивки
        </NavLink>
        <NavLink to="/admin/logs" className={tab}>
          Логи
        </NavLink>
      </div>
      <main className="app-main" style={{ paddingBottom: 24 }}>
        <Outlet />
      </main>
    </div>
  );
}