import Add from "@mui/icons-material/Add";
import { DataState } from "@/shared/ui/DataState.jsx";
import {
    AdminActionIconButton,
    AdminListBody,
    AdminListPage,
    AdminListToolbar,
} from "@/shared/ui/AdminListLayout.jsx";
import { TeamFormDrawer } from "@/features/teams/components/TeamFormDrawer.jsx";
import { TeamTable } from "@/features/teams/components/TeamTable.jsx";
import { useTeamsPage } from "@/features/teams/hooks/useTeamsPage.js";
import "@/features/users/users.css";

export function TeamManagementPage() {
    const page = useTeamsPage();

    return (
        <>
            <AdminListPage>
                <AdminListToolbar
                    actions={
                        page.abilities.canCreate ? (
                            <AdminActionIconButton label="新增团队" primary onClick={page.openCreate}>
                                <Add fontSize="small" />
                            </AdminActionIconButton>
                        ) : null
                    }
                />

                <DataState error={page.error} loading={page.loading} onRetry={page.reload}>
                    <AdminListBody>
                        <TeamTable
                            abilities={page.abilities}
                            onCreateChild={page.openCreate}
                            onEdit={page.openEdit}
                            onQueryChange={page.setQuery}
                            operationTeamId={page.operationTeamId}
                            pagination={{
                                page: 1,
                                pageSize: Math.max(page.teams.length, 1),
                                total: page.teams.length,
                            }}
                            query={page.query}
                            teams={page.teams}
                        />
                    </AdminListBody>
                </DataState>
            </AdminListPage>

            <TeamFormDrawer
                editingTeam={page.editingTeam}
                form={page.form}
                onClose={page.closeDrawer}
                onSubmit={page.submit}
                open={page.drawerOpen}
                parentOptions={page.parentOptions}
                setForm={page.setForm}
            />
        </>
    );
}
