import DeleteOutlineOutlined from "@mui/icons-material/DeleteOutlineOutlined";
import PersonAddAltOutlined from "@mui/icons-material/PersonAddAltOutlined";
import Avatar from "@mui/material/Avatar";
import CircularProgress from "@mui/material/CircularProgress";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import TextField from "@mui/material/TextField";
import { AdminSwitch } from "@/shared/ui/AdminSwitch.jsx";
import { Button } from "@/shared/ui/Button.jsx";
import { AdminActionIconButton } from "@/shared/ui/AdminListLayout.jsx";
import { formatMillis } from "@/shared/utils/time.js";
import styles from "@/features/games/games.module.css";

export function GameWhitelistDialog({ open, page, onClose }) {
    const game = page.whitelistGame;
    const enabledLoading = page.loadingAction === `whitelist-enabled-${game?.gameId}`;
    const addLoading = page.loadingAction === `whitelist-add-${game?.gameId}`;

    return (
        <Dialog
            className={styles.whitelistDialog}
            maxWidth={false}
            open={open}
            slotProps={{ paper: { className: styles.whitelistDialogPaper } }}
            onClose={onClose}
        >
            <DialogTitle>游戏白名单 · {game?.gameName || game?.gameId || ""}</DialogTitle>
            <DialogContent className={styles.whitelistDialogContent}>
                <div className={styles.whitelistPolicyRow}>
                    <div className={styles.stack}>
                        <span className={styles.name}>仅对白名单用户开放</span>
                        <span className={styles.meta}>开启后，非成员不会在游戏列表看到此游戏，也不能直接启动。</span>
                    </div>
                    <AdminSwitch
                        checked={game?.whitelistEnabled === true}
                        checkedLabel="开启"
                        disabled={!page.abilities.canUpdate || enabledLoading}
                        label="游戏白名单状态"
                        size="small"
                        uncheckedLabel="关闭"
                        onChange={(event) => page.changeWhitelistEnabled(event.target.checked)}
                    />
                </div>

                <form className={styles.whitelistSearchRow} onSubmit={page.addWhitelistUser}>
                    <TextField
                        fullWidth
                        label="搜索用户 ID / 短号 / 靓号"
                        placeholder="输入任一用户标识，自动匹配真实用户"
                        value={page.whitelistUserId}
                        onChange={(event) => page.setWhitelistUserId(event.target.value)}
                    />
                    <Button
                        disabled={!page.abilities.canUpdate || addLoading || !page.whitelistUserId.trim()}
                        startIcon={
                            addLoading ? <CircularProgress color="inherit" size={16} /> : <PersonAddAltOutlined />
                        }
                        type="submit"
                        variant="primary"
                    >
                        添加
                    </Button>
                </form>

                <div className={styles.whitelistTable}>
                    <div className={styles.whitelistTableHeader}>
                        <span>用户</span>
                        <span>内部 ID / 当前短号</span>
                        <span>状态</span>
                        <span>加入时间</span>
                        <span>操作</span>
                    </div>
                    {page.whitelistLoading ? (
                        <div className={styles.whitelistEmpty}>
                            <CircularProgress size={24} />
                        </div>
                    ) : page.whitelistItems.length > 0 ? (
                        page.whitelistItems.map((item) => (
                            <div className={styles.whitelistTableRow} key={item.userId}>
                                <div className={styles.whitelistUserIdentity}>
                                    <Avatar className={styles.whitelistAvatar} src={item.avatar || undefined}>
                                        {(item.username || item.displayUserId || item.userId).slice(0, 1)}
                                    </Avatar>
                                    <span className={styles.name}>{item.username || "-"}</span>
                                </div>
                                <div className={styles.stack}>
                                    <span>{item.userId}</span>
                                    {item.displayUserId ? (
                                        <span className={styles.meta}>{item.displayUserId}</span>
                                    ) : null}
                                </div>
                                <span>{item.status || "-"}</span>
                                <span>{formatMillis(item.createdAtMs)}</span>
                                <AdminActionIconButton
                                    disabled={
                                        !page.abilities.canUpdate ||
                                        page.loadingAction === `whitelist-delete-${item.userId}`
                                    }
                                    label="移出白名单"
                                    onClick={() => page.removeWhitelistUser(item)}
                                >
                                    <DeleteOutlineOutlined fontSize="small" />
                                </AdminActionIconButton>
                            </div>
                        ))
                    ) : (
                        <div className={styles.whitelistEmpty}>当前没有白名单用户</div>
                    )}
                </div>
            </DialogContent>
            <DialogActions>
                <Button onClick={onClose}>关闭</Button>
            </DialogActions>
        </Dialog>
    );
}
