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

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

    return (
        <>
            <AdminListPage>
                <AdminListToolbar
                    filters={
                        <AdminFilterResetButton disabled={!page.hasActiveFilters} onClick={page.resetFilters} />
                    }
                    actions={
                        <>
                            {page.abilities.canSyncPermission ? (
                                <AdminActionIconButton label="同步权限" onClick={page.syncDefaultPermissions}>
                                    <SyncOutlined fontSize="small" />
                                </AdminActionIconButton>
                            ) : null}
                            {page.abilities.canLoadPermissions ? (
                                <AdminActionIconButton label="权限库" onClick={page.openPermissionLibrary}>
                                    <ShieldOutlined 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="menu-permission-layout">
                            <MenuTreePanel
                                abilities={page.abilities}
                                menus={page.flatMenus}
                                query={page.menuQuery}
                                selectedMenuId={page.selectedMenu?.id}
                                total={page.menuTotal}
                                onQueryChange={page.changeMenuQuery}
                                onReorder={page.reorderMenu}
                                onSelect={page.selectMenu}
                            />
                            <MenuPermissionDetail
                                abilities={page.abilities}
                                accessPermissionQuery={page.accessPermissionQuery}
                                accessPermissions={page.accessPermissions}
                                boundPermission={page.selectedPermission}
                                menu={page.selectedMenu}
                                onAccessPermissionQueryChange={page.changeAccessPermissionQuery}
                                onBindPermission={page.bindMenuPermission}
                                onEdit={page.openEditMenu}
                                onRemove={page.removeMenu}
                                onToggleVisible={page.toggleVisible}
                            />
                        </section>
                    </AdminListBody>
                </DataState>
            </AdminListPage>

            <MenuFormDrawer
                editingMenu={page.editingMenu}
                form={page.menuForm}
                onClose={page.closeMenuDrawer}
                onSubmit={page.submitMenu}
                open={page.menuDrawerOpen}
                setForm={page.setMenuForm}
            />
            <PermissionLibraryDrawer
                abilities={page.abilities}
                open={page.permissionLibraryOpen}
                permissions={page.permissions}
                query={page.permissionLibraryQuery}
                onClose={page.closePermissionLibrary}
                onEdit={page.openEditPermission}
                onQueryChange={page.changePermissionLibraryQuery}
                onRemove={page.removePermission}
            />
            <PermissionFormDrawer
                editingPermission={page.editingPermission}
                form={page.permissionForm}
                onClose={page.closePermissionDrawer}
                onSubmit={page.submitPermission}
                open={page.permissionDrawerOpen}
                setForm={page.setPermissionForm}
            />
        </>
    );
}