import GroupsOutlined from "@mui/icons-material/GroupsOutlined";
import SaveOutlined from "@mui/icons-material/SaveOutlined";
import TextField from "@mui/material/TextField";
import { useRoomWhitelistPage } from "@/features/rooms/hooks/useRoomWhitelistPage.js";
import styles from "@/features/rooms/rooms.module.css";
import { AdminActionIconButton, AdminListBody, AdminListPage, AdminListToolbar } from "@/shared/ui/AdminListLayout.jsx";
import { DataState } from "@/shared/ui/DataState.jsx";
import { TimeText } from "@/shared/ui/TimeText.jsx";

export function RoomWhitelistPage() {
    const page = useRoomWhitelistPage();
    const canSave = page.abilities.canUpdateWhitelist && page.loadingAction !== "save";

    return (
        <AdminListPage>
            <AdminListToolbar
                actions={
                    page.abilities.canUpdateWhitelist ? (
                        <AdminActionIconButton
                            disabled={!canSave}
                            form="room-whitelist-form"
                            label="保存"
                            primary
                            type="submit"
                        >
                            <SaveOutlined fontSize="small" />
                        </AdminActionIconButton>
                    ) : null
                }
            />
            <DataState error={page.error} loading={page.loading} onRetry={page.reload}>
                <AdminListBody>
                    <form id="room-whitelist-form" className={styles.configForm} onSubmit={page.submitWhitelist}>
                        <section className={styles.configSection}>
                            <div className={styles.configHeader}>
                                <span className={styles.configIcon}>
                                    <GroupsOutlined fontSize="small" />
                                </span>
                                <div className={styles.configTitle}>
                                    <h2>用户 ID</h2>
                                    <span>
                                        {page.data?.updatedAtMs ? <TimeText value={page.data.updatedAtMs} /> : "未配置"}
                                    </span>
                                </div>
                            </div>

                            <TextField
                                disabled={!page.abilities.canUpdateWhitelist}
                                fullWidth
                                label="用户 ID"
                                minRows={12}
                                multiline
                                value={page.text}
                                onChange={(event) => page.setText(event.target.value)}
                            />
                        </section>
                    </form>
                </AdminListBody>
            </DataState>
        </AdminListPage>
    );
}
