import Add from "@mui/icons-material/Add";
import CodeOutlined from "@mui/icons-material/CodeOutlined";
import DeleteOutlineOutlined from "@mui/icons-material/DeleteOutlineOutlined";
import EditOutlined from "@mui/icons-material/EditOutlined";
import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
import SportsEsportsOutlined from "@mui/icons-material/SportsEsportsOutlined";
import SyncOutlined from "@mui/icons-material/SyncOutlined";
import { AdminSwitch } from "@/shared/ui/AdminSwitch.jsx";
import Checkbox from "@mui/material/Checkbox";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import { AdminFormDialog, AdminFormFieldGrid, AdminFormSection } from "@/shared/ui/AdminFormDialog.jsx";
import { Button } from "@/shared/ui/Button.jsx";
import { DataState } from "@/shared/ui/DataState.jsx";
import { DataTable } from "@/shared/ui/DataTable.jsx";
import { JsonEditorField } from "@/shared/ui/JsonEditorField.jsx";
import {
    AdminActionIconButton,
    AdminListBody,
    AdminListPage,
    AdminListToolbar,
    AdminRowActions,
} from "@/shared/ui/AdminListLayout.jsx";
import { createOptionsColumnFilter } from "@/shared/ui/tableFilters.js";
import { UploadField } from "@/shared/ui/UploadField.jsx";
import { formatMillis } from "@/shared/utils/time.js";
import { useGamesPage } from "@/features/games/hooks/useGamesPage.js";
import styles from "@/features/games/games.module.css";

const statusOptions = [
    ["", "全部状态"],
    ["active", "Active"],
    ["maintenance", "Maintenance"],
    ["disabled", "Disabled"],
];

const orientationOptions = [
    ["portrait", "Portrait"],
    ["landscape", "Landscape"],
];
const launchModeOptions = [
    ["full_screen", "全屏"],
    ["half_screen", "半屏"],
    ["three_quarter_screen", "3/4屏"],
];
// 这里的值必须和 game-service 的 adapter_type 白名单一致；新增厂商先后端登记，再放到后台可选项。
const adapterTypeOptions = [
    ["yomi_v4", "小游 Yomi V4"],
    ["leadercc_v1", "灵仙 LeaderCC V1"],
    ["zeeone_v1", "ZeeOne V1"],
    ["baishun_v1", "百顺 BAISHUN V1"],
    ["vivagames_v1", "VIVAGAMES V1"],
    ["reyou_v1", "热游 Reyou V1"],
];

const baseColumns = [
    {
        key: "game",
        label: "游戏",
        width: "minmax(290px, 1.5fr)",
        render: (game) => <GameIdentity game={game} />,
    },
    {
        key: "platform",
        label: "平台",
        width: "minmax(160px, 0.75fr)",
        render: (game) => (
            <div className={styles.stack}>
                <span>{game.platformCode}</span>
                <span className={styles.meta}>{game.providerGameId}</span>
            </div>
        ),
    },
    {
        key: "launch",
        label: "启动",
        width: "minmax(150px, 0.75fr)",
        render: (game) => (
            <div className={styles.stack}>
                <span>{launchModeLabel(game.launchMode)}</span>
                <span className={styles.meta}>
                    {game.orientation} · 安全高 {formatNumber(game.safeHeight)}
                </span>
            </div>
        ),
    },
    {
        key: "coin",
        label: "最低金币",
        width: "minmax(116px, 0.55fr)",
        render: (game) => formatNumber(game.minCoin),
    },
    {
        key: "status",
        label: "状态",
        width: "minmax(120px, 0.6fr)",
    },
    {
        key: "updatedAt",
        label: "更新时间",
        width: "minmax(170px, 0.9fr)",
        render: (game) => formatMillis(game.updatedAtMs || game.createdAtMs),
    },
    {
        key: "actions",
        label: "操作",
        width: "minmax(112px, 0.5fr)",
    },
];

export function GameListPage() {
    const page = useGamesPage();
    const items = page.data.items || [];
    const platformFilterOptions = [["", "全部平台"], ...page.platformOptions];
    const columns = baseColumns.map((column) => {
        if (column.key === "platform") {
            return {
                ...column,
                filter: createOptionsColumnFilter({
                    options: platformFilterOptions,
                    placeholder: "搜索平台",
                    value: page.platformCode,
                    onChange: page.setPlatformCode,
                }),
            };
        }
        if (column.key === "status") {
            return {
                ...column,
                filter: createOptionsColumnFilter({
                    options: statusOptions,
                    placeholder: "搜索状态",
                    value: page.status,
                    onChange: page.setStatus,
                }),
                render: (game) => <GameStatusSwitch game={game} page={page} />,
            };
        }
        if (column.key === "actions") {
            return {
                ...column,
                render: (game) => <GameRowActions game={game} page={page} />,
            };
        }
        return column;
    });

    return (
        <AdminListPage>
            <AdminListToolbar
                actions={
                    <>
                        {page.abilities.canUpdate ? (
                            <AdminActionIconButton label="JS 桥接" onClick={page.openBridgeScript}>
                                <CodeOutlined fontSize="small" />
                            </AdminActionIconButton>
                        ) : null}
                        {page.abilities.canUpdate ? (
                            <AdminActionIconButton label="平台配置" onClick={page.openManagePlatforms}>
                                <SettingsOutlined fontSize="small" />
                            </AdminActionIconButton>
                        ) : null}
                        {page.abilities.canUpdate ? (
                            <AdminActionIconButton label="添加平台" onClick={page.openCreatePlatform}>
                                <SportsEsportsOutlined fontSize="small" />
                            </AdminActionIconButton>
                        ) : null}
                        {page.abilities.canCreate ? (
                            <AdminActionIconButton label="添加游戏" primary onClick={page.openCreateGame}>
                                <Add fontSize="small" />
                            </AdminActionIconButton>
                        ) : null}
                    </>
                }
            />
            <DataState error={page.error} loading={page.loading} onRetry={page.reload}>
                <AdminListBody>
                    <DataTable
                        columns={columns}
                        infiniteScroll={{
                            doneLabel: "",
                            hasMore: Boolean(page.data.nextCursor),
                            loading: page.loadingMore,
                            loadingLabel: "加载中...",
                            onLoadMore: page.loadNextPage,
                        }}
                        items={items}
                        minWidth="1240px"
                        pagination={{
                            hasNextPage: Boolean(page.data.nextCursor),
                            itemCount: items.length,
                            page: page.page,
                            pageSize: page.pageSize,
                            total: page.data.total,
                            totalPages: page.data.totalPages,
                        }}
                        rowKey={(game) => game.gameId}
                    />
                </AdminListBody>
            </DataState>
            <GameFormDialog
                form={page.gameForm}
                loading={page.loadingAction === page.activeAction}
                mode={page.activeAction === "edit-game" ? "edit" : "create"}
                open={page.activeAction === "create-game" || page.activeAction === "edit-game"}
                page={page}
                onClose={page.closeAction}
                onSubmit={page.submitGame}
            />
            <PlatformFormDialog
                form={page.platformForm}
                loading={page.loadingAction === page.activeAction}
                mode={page.activeAction === "edit-platform" ? "edit" : "create"}
                open={page.activeAction === "create-platform" || page.activeAction === "edit-platform"}
                page={page}
                onClose={page.closeAction}
                onSubmit={page.submitPlatform}
            />
            <BridgeScriptDialog
                form={page.bridgeScriptForm}
                loading={page.loadingAction === "bridge-script"}
                open={page.activeAction === "bridge-script"}
                page={page}
                onClose={page.closeAction}
                onSubmit={page.submitBridgeScript}
            />
            <PlatformManageDialog
                open={page.activeAction === "manage-platforms"}
                page={page}
                onClose={page.closeAction}
            />
            <ProviderGameListDialog open={page.activeAction === "sync-games"} page={page} onClose={page.closeAction} />
        </AdminListPage>
    );
}

function GameIdentity({ game }) {
    return (
        <div className={styles.identity}>
            {game.iconUrl ? (
                <img alt="" className={styles.icon} src={game.iconUrl} />
            ) : (
                <span className={styles.icon} />
            )}
            <div className={styles.identityText}>
                <span className={styles.name}>{game.gameName || game.gameId}</span>
                <span className={styles.meta}>{game.gameId}</span>
            </div>
        </div>
    );
}

function GameStatusSwitch({ page, game }) {
    const disabled = !page.abilities.canStatus || page.loadingAction === `status-${game.gameId}`;
    return (
        <AdminSwitch
            checked={game.status === "active"}
            checkedLabel="启用"
            disabled={disabled}
            label={`${game.gameName || game.gameId} 状态`}
            size="small"
            uncheckedLabel={game.status === "disabled" ? "下架" : "维护"}
            onChange={(event) => page.changeGameStatus(game, event.target.checked)}
        />
    );
}

function GameRowActions({ page, game }) {
    return (
        <AdminRowActions>
            <AdminActionIconButton
                disabled={!page.abilities.canUpdate}
                label="编辑游戏"
                onClick={() => page.openEditGame(game)}
            >
                <EditOutlined fontSize="small" />
            </AdminActionIconButton>
            <AdminActionIconButton
                disabled={!page.abilities.canDelete || page.loadingAction === `delete-${game.gameId}`}
                label="删除游戏"
                onClick={() => page.deleteGame(game)}
            >
                <DeleteOutlineOutlined fontSize="small" />
            </AdminActionIconButton>
        </AdminRowActions>
    );
}

function GameFormDialog({ form, loading, mode, open, page, onClose, onSubmit }) {
    const disabled = mode === "edit" ? !page.abilities.canUpdate : !page.abilities.canCreate;
    return (
        <AdminFormDialog
            disabled={disabled}
            loading={loading}
            open={open}
            size="wide"
            submitLabel={mode === "edit" ? "保存游戏" : "创建游戏"}
            title={mode === "edit" ? "编辑游戏" : "添加游戏"}
            onClose={onClose}
            onSubmit={onSubmit}
        >
            <AdminFormSection title="基础信息">
                <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
                    <TextField
                        disabled={mode === "edit"}
                        label="游戏 ID"
                        required
                        value={form.gameId}
                        onChange={(event) => page.setGameForm({ ...form, gameId: event.target.value })}
                    />
                    <TextField
                        label="平台"
                        required
                        select={page.platformOptions.length > 0}
                        value={form.platformCode}
                        onChange={(event) => page.setGameForm({ ...form, platformCode: event.target.value })}
                    >
                        {page.platformOptions.map(([value, label]) => (
                            <MenuItem key={value} value={value}>
                                {label || value}
                            </MenuItem>
                        ))}
                    </TextField>
                    <TextField
                        label="平台游戏 ID"
                        required
                        value={form.providerGameId}
                        onChange={(event) => page.setGameForm({ ...form, providerGameId: event.target.value })}
                    />
                    <TextField
                        label="游戏名称"
                        required
                        value={form.gameName}
                        onChange={(event) => page.setGameForm({ ...form, gameName: event.target.value })}
                    />
                    <TextField
                        label="类目"
                        value={form.category}
                        onChange={(event) => page.setGameForm({ ...form, category: event.target.value })}
                    />
                </AdminFormFieldGrid>
            </AdminFormSection>
            <AdminFormSection title="启动与状态">
                <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
                    <TextField
                        label="启动模式"
                        select
                        value={form.launchMode}
                        onChange={(event) => page.setGameForm({ ...form, launchMode: event.target.value })}
                    >
                        {launchModeOptions.map(([value, label]) => (
                            <MenuItem key={value} value={value}>
                                {label}
                            </MenuItem>
                        ))}
                    </TextField>
                    <TextField
                        label="方向"
                        select
                        value={form.orientation}
                        onChange={(event) => page.setGameForm({ ...form, orientation: event.target.value })}
                    >
                        {orientationOptions.map(([value, label]) => (
                            <MenuItem key={value} value={value}>
                                {label}
                            </MenuItem>
                        ))}
                    </TextField>
                    <TextField
                        label="安全高"
                        type="number"
                        value={form.safeHeight}
                        onChange={(event) => page.setGameForm({ ...form, safeHeight: event.target.value })}
                    />
                    <TextField
                        label="游戏 URL"
                        className={styles.fullField}
                        minRows={2}
                        multiline
                        placeholder="填写当前游戏的 H5 测试/正式 URL"
                        value={form.gameUrl}
                        onChange={(event) => page.setGameForm({ ...form, gameUrl: event.target.value })}
                    />
                    <TextField
                        label="最低金币"
                        type="number"
                        value={form.minCoin}
                        onChange={(event) => page.setGameForm({ ...form, minCoin: event.target.value })}
                    />
                    <TextField
                        label="排序"
                        type="number"
                        value={form.sortOrder}
                        onChange={(event) => page.setGameForm({ ...form, sortOrder: event.target.value })}
                    />
                    <SwitchOnlyField
                        checked={form.status === "active"}
                        checkedLabel="启用"
                        disabled={disabled}
                        label="游戏启用状态"
                        uncheckedLabel="维护"
                        onChange={(checked) =>
                            page.setGameForm({
                                ...form,
                                status: checked ? "active" : form.status === "disabled" ? "disabled" : "maintenance",
                            })
                        }
                    />
                </AdminFormFieldGrid>
            </AdminFormSection>
            <AdminFormSection title="素材与标签">
                <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
                    <UploadField
                        disabled={disabled || !page.abilities.canUpload}
                        label="图标"
                        value={form.iconUrl}
                        onChange={(iconUrl) => page.setGameForm({ ...form, iconUrl })}
                    />
                    <UploadField
                        disabled={disabled || !page.abilities.canUpload}
                        label="封面"
                        value={form.coverUrl}
                        onChange={(coverUrl) => page.setGameForm({ ...form, coverUrl })}
                    />
                    <TextField
                        className={styles.fullField}
                        label="标签"
                        value={form.tagsText}
                        onChange={(event) => page.setGameForm({ ...form, tagsText: event.target.value })}
                    />
                </AdminFormFieldGrid>
            </AdminFormSection>
        </AdminFormDialog>
    );
}

function BridgeScriptDialog({ form, loading, open, page, onClose, onSubmit }) {
    const disabled = !page.abilities.canUpdate;
    const submitDisabled = disabled || loading || !form.bridgeScriptUrl.trim() || !form.bridgeScriptVersion.trim();
    return (
        <AdminFormDialog
            disabled={disabled}
            loading={loading}
            open={open}
            submitDisabled={submitDisabled}
            submitLabel="保存桥接"
            title="JS 桥接配置"
            onClose={onClose}
            onSubmit={onSubmit}
        >
            <AdminFormSection title="通用桥接脚本">
                <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
                    <TextField
                        label="bridge_script_version"
                        required
                        value={form.bridgeScriptVersion}
                        onChange={(event) =>
                            page.setBridgeScriptForm({ ...form, bridgeScriptVersion: event.target.value })
                        }
                    />
                    <TextField
                        className={styles.fullField}
                        label="bridge_script_url"
                        minRows={2}
                        multiline
                        required
                        value={form.bridgeScriptUrl}
                        onChange={(event) => page.setBridgeScriptForm({ ...form, bridgeScriptUrl: event.target.value })}
                    />
                </AdminFormFieldGrid>
            </AdminFormSection>
        </AdminFormDialog>
    );
}

function PlatformFormDialog({ form, loading, mode, open, page, onClose, onSubmit }) {
    const isLeaderCC = form.adapterType === "leadercc_v1";
    return (
        <AdminFormDialog
            disabled={!page.abilities.canUpdate}
            loading={loading}
            open={open}
            submitLabel={mode === "edit" ? "保存平台" : "创建平台"}
            title={mode === "edit" ? "编辑平台" : "添加平台"}
            onClose={onClose}
            onSubmit={onSubmit}
        >
            <AdminFormSection title="平台信息">
                <AdminFormFieldGrid>
                    <TextField
                        disabled={mode === "edit"}
                        label="平台 Code"
                        required
                        value={form.platformCode}
                        onChange={(event) => page.setPlatformForm({ ...form, platformCode: event.target.value })}
                    />
                    <TextField
                        label="平台名称"
                        required
                        value={form.platformName}
                        onChange={(event) => page.setPlatformForm({ ...form, platformName: event.target.value })}
                    />
                    <SwitchOnlyField
                        checked={form.status === "active"}
                        checkedLabel="启用"
                        disabled={!page.abilities.canUpdate}
                        label="游戏平台启用状态"
                        uncheckedLabel="维护"
                        onChange={(checked) =>
                            page.setPlatformForm({
                                ...form,
                                status: checked ? "active" : form.status === "disabled" ? "disabled" : "maintenance",
                            })
                        }
                    />
                    <TextField
                        label="排序"
                        type="number"
                        value={form.sortOrder}
                        onChange={(event) => page.setPlatformForm({ ...form, sortOrder: event.target.value })}
                    />
                </AdminFormFieldGrid>
            </AdminFormSection>
            <AdminFormSection title="接入配置">
                <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
                    {/* 适配器决定服务端启动参数、签名/解密和错误码映射。 */}
                    <TextField
                        label="适配器"
                        select
                        value={form.adapterType}
                        onChange={(event) => page.setPlatformForm({ ...form, adapterType: event.target.value })}
                    >
                        {adapterTypeOptions.map(([value, label]) => (
                            <MenuItem key={value} value={value}>
                                {label}
                            </MenuItem>
                        ))}
                    </TextField>
                    {!isLeaderCC ? (
                        <TextField
                            label="H5/Auth/API URL"
                            required={form.adapterType === "yomi_v4" || form.adapterType === "baishun_v1"}
                            value={form.apiBaseUrl}
                            onChange={(event) => page.setPlatformForm({ ...form, apiBaseUrl: event.target.value })}
                        />
                    ) : null}
                    {/* 后台直接回显当前厂商 key；清空保存时后端保持旧密钥，输入新值才轮换。 */}
                    <TextField
                        label="回调密钥"
                        value={form.callbackSecret}
                        onChange={(event) => page.setPlatformForm({ ...form, callbackSecret: event.target.value })}
                    />
                    {!isLeaderCC ? (
                        <TextField
                            label="IP 白名单"
                            minRows={3}
                            multiline
                            value={form.callbackIpWhitelistText}
                            onChange={(event) =>
                                page.setPlatformForm({ ...form, callbackIpWhitelistText: event.target.value })
                            }
                        />
                    ) : null}
                    {/* 厂商差异字段放 JSON：如 uid_mode、default_lang、token_ttl_seconds、game_level_uid。 */}
                    <JsonEditorField
                        className={styles.fullField}
                        label="适配器配置 JSON"
                        minRows={5}
                        value={form.adapterConfigJson}
                        onChange={(adapterConfigJson) => page.setPlatformForm({ ...form, adapterConfigJson })}
                    />
                </AdminFormFieldGrid>
            </AdminFormSection>
        </AdminFormDialog>
    );
}

function PlatformManageDialog({ open, page, onClose }) {
    const platforms = page.platformData.items || [];
    return (
        <AdminFormDialog
            disabled={false}
            loading={false}
            open={open}
            submitLabel="关闭"
            title="平台配置"
            onClose={onClose}
            onSubmit={(event) => {
                event.preventDefault();
                onClose();
            }}
        >
            <div className={styles.platformList}>
                {platforms.map((platform) => (
                    <div className={styles.platformRow} key={platform.platformCode}>
                        <div className={styles.stack}>
                            <span className={styles.name}>{platform.platformName || platform.platformCode}</span>
                            <span className={styles.meta}>
                                {platform.platformCode} / {platform.adapterType || "未配置"}
                            </span>
                            {platform.apiBaseUrl ? <span className={styles.meta}>{platform.apiBaseUrl}</span> : null}
                            <span className={`${styles.meta} ${styles.secretMeta}`}>
                                密钥：{platform.callbackSecret || "未配置"}
                            </span>
                        </div>
                        <div className={styles.platformActions}>
                            <span className={styles.meta}>
                                {platform.callbackSecretSet ? "密钥已配置" : "未配置密钥"}
                            </span>
                            <AdminActionIconButton
                                disabled={!page.abilities.canUpdate}
                                label="编辑平台"
                                onClick={() => page.openEditPlatform(platform)}
                            >
                                <EditOutlined fontSize="small" />
                            </AdminActionIconButton>
                            <AdminActionIconButton
                                disabled={
                                    !page.abilities.canUpdate ||
                                    page.loadingAction === `fetch-games-${platform.platformCode}`
                                }
                                label="获取游戏列表"
                                onClick={() => page.fetchPlatformGames(platform)}
                            >
                                <SyncOutlined fontSize="small" />
                            </AdminActionIconButton>
                        </div>
                    </div>
                ))}
            </div>
        </AdminFormDialog>
    );
}

function ProviderGameListDialog({ open, page, onClose }) {
    const games = page.syncCandidates || [];
    const selected = new Set(page.selectedSyncGameIds || []);
    return (
        <AdminFormDialog
            loading={page.loadingAction === "import-sync-games"}
            open={open}
            size="wide"
            submitDisabled={selected.size === 0 || page.loadingAction === "import-sync-games"}
            submitLabel={`添加选中 (${selected.size})`}
            title={`厂商游戏列表 ${page.syncPlatform?.platformName || page.syncPlatform?.platformCode || ""}`}
            onClose={onClose}
            onSubmit={page.importSelectedSyncGames}
        >
            <AdminFormSection
                title="选择要添加的游戏"
                actions={
                    <Button disabled={games.length === 0} onClick={page.toggleAllSyncGames}>
                        {page.allSyncGamesSelected ? "取消全选" : "全选"}
                    </Button>
                }
            >
                <div className={styles.syncGameList}>
                    {games.length > 0 ? (
                        games.map((game) => (
                            <div className={styles.syncGameRow} key={game.providerGameId || game.gameId}>
                                <Checkbox
                                    checked={selected.has(game.providerGameId)}
                                    inputProps={{ "aria-label": `${game.gameName || game.gameId} 选择状态` }}
                                    onChange={() => page.toggleSyncGame(game.providerGameId)}
                                />
                                <GameIdentity game={game} />
                                <div className={styles.syncGameMeta}>
                                    <span className={styles.meta}>{game.providerGameId}</span>
                                    <span className={styles.meta}>默认下架</span>
                                    {game.launchUrl ? (
                                        <span className={`${styles.meta} ${styles.syncGameURL}`}>{game.launchUrl}</span>
                                    ) : null}
                                </div>
                                <AdminActionIconButton
                                    disabled={page.loadingAction === `import-sync-game-${game.providerGameId}`}
                                    label="添加单个游戏"
                                    onClick={() => page.importSingleSyncGame(game)}
                                >
                                    <Add fontSize="small" />
                                </AdminActionIconButton>
                            </div>
                        ))
                    ) : (
                        <span className={styles.meta}>暂无可添加游戏</span>
                    )}
                </div>
            </AdminFormSection>
        </AdminFormDialog>
    );
}

function SwitchOnlyField({ checked, checkedLabel, disabled, label, onChange, uncheckedLabel }) {
    return (
        <span className={styles.switchOnlyField}>
            <AdminSwitch
                checked={checked}
                checkedLabel={checkedLabel}
                disabled={disabled}
                label={label}
                uncheckedLabel={uncheckedLabel}
                onChange={(event) => onChange(event.target.checked, event)}
            />
        </span>
    );
}

function formatNumber(value) {
    return Number(value || 0).toLocaleString();
}

function launchModeLabel(value) {
    return launchModeOptions.find(([mode]) => mode === value)?.[1] || "全屏";
}