import Add from "@mui/icons-material/Add";
import SyncOutlined from "@mui/icons-material/SyncOutlined";
import { DataState } from "@/shared/ui/DataState.jsx";
import {
  AdminActionIconButton,
  AdminListBody,
  AdminListPage,
  AdminListToolbar,
  AdminSearchBox
} from "@/shared/ui/AdminListLayout.jsx";
import { MenuFormDrawer } from "@/features/menus/components/MenuFormDrawer.jsx";
import { MenuTable } from "@/features/menus/components/MenuTable.jsx";
import { PermissionFormDrawer } from "@/features/menus/components/PermissionFormDrawer.jsx";
import { PermissionTable } from "@/features/menus/components/PermissionTable.jsx";
import { useMenusPage } from "@/features/menus/hooks/useMenusPage.js";

export function MenuManagementPage() {
  const page = useMenusPage();

  return (
    <>
      <AdminListPage>
        <AdminListToolbar
          filters={<AdminSearchBox value={page.query} onChange={page.changeQuery} placeholder="搜索菜单、权限码..." />}
          actions={(
            <>
              {page.abilities.canSyncPermission ? (
                <AdminActionIconButton label="同步权限" onClick={page.syncDefaultPermissions}>
                  <SyncOutlined fontSize="small" />
                </AdminActionIconButton>
              ) : null}
              {page.abilities.canCreatePermission ? (
                <AdminActionIconButton label="新增权限" onClick={page.openCreatePermission}>
                  <Add fontSize="small" />
                </AdminActionIconButton>
              ) : null}
              {page.abilities.canCreateMenu ? (
                <AdminActionIconButton label="新增菜单" primary onClick={page.openCreateMenu}>
                  <Add fontSize="small" />
                </AdminActionIconButton>
              ) : null}
            </>
          )}
        />

        <DataState error={page.error} loading={page.loading} onRetry={page.reload}>
          <AdminListBody>
            <section className="permission-page-grid">
              <MenuTable
                abilities={page.abilities}
                flatMenus={page.flatMenus}
                onEdit={page.openEditMenu}
                onReorder={page.reorderMenu}
                onRemove={page.removeMenu}
                onToggleVisible={page.toggleVisible}
              />
              <PermissionTable
                abilities={page.abilities}
                onEdit={page.openEditPermission}
                onRemove={page.removePermission}
                permissions={page.permissions}
              />
            </section>
          </AdminListBody>
        </DataState>
      </AdminListPage>

      <MenuFormDrawer
        editingMenu={page.editingMenu}
        form={page.menuForm}
        onClose={page.closeMenuDrawer}
        onSubmit={page.submitMenu}
        open={page.menuDrawerOpen}
        setForm={page.setMenuForm}
      />
      <PermissionFormDrawer
        editingPermission={page.editingPermission}
        form={page.permissionForm}
        onClose={page.closePermissionDrawer}
        onSubmit={page.submitPermission}
        open={page.permissionDrawerOpen}
        setForm={page.setPermissionForm}
      />
    </>
  );
}