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

export function RiskConfigPage() {
    const page = useRiskConfigPage();
    const canSave = page.abilities.canUpdate && page.loadingAction !== "save";

    return (
        <AdminListPage>
            <AdminListToolbar
                actions={
                    page.abilities.canUpdate ? (
                        <AdminActionIconButton
                            disabled={!canSave}
                            form="risk-config-form"
                            label="保存"
                            primary
                            type="submit"
                        >
                            <SaveOutlined fontSize="small" />
                        </AdminActionIconButton>
                    ) : null
                }
            />
            <DataState error={page.error} loading={page.loading} onRetry={page.reload}>
                <AdminListBody>
                    <form id="risk-config-form" className={styles.configForm} onSubmit={page.submitConfig}>
                        <section className={styles.configSection}>
                            <div className={styles.configHeader}>
                                <span className={styles.configIcon}>
                                    <ShieldOutlined fontSize="small" />
                                </span>
                                <div className={styles.configTitle}>
                                    <h2>注册限制</h2>
                                    <span>
                                        {page.form.updatedAtMs ? (
                                            <TimeText value={page.form.updatedAtMs} />
                                        ) : (
                                            "默认配置"
                                        )}
                                    </span>
                                </div>
                            </div>

                            <TextField
                                disabled={!page.abilities.canUpdate}
                                inputProps={{ min: 1, step: 1 }}
                                label="单设备最大账号数"
                                type="number"
                                value={page.form.maxAccountsPerDevice}
                                onChange={(event) => page.changeMaxAccountsPerDevice(event.target.value)}
                            />
                        </section>
                    </form>
                </AdminListBody>
            </DataState>
        </AdminListPage>
    );
}
