import AppsOutlined from "@mui/icons-material/AppsOutlined";
import CardGiftcardOutlined from "@mui/icons-material/CardGiftcardOutlined";
import CasinoOutlined from "@mui/icons-material/CasinoOutlined";
import InsightsOutlined from "@mui/icons-material/InsightsOutlined";
import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
import { useCallback, useEffect, useMemo, useState } from "react";
import { PERMISSIONS } from "@/app/permissions";
import { Button } from "@/shared/ui/Button.jsx";
import { DataState } from "@/shared/ui/DataState.jsx";
import { PageHead } from "@/shared/ui/PageHead.jsx";
import { useToast } from "@/shared/ui/ToastProvider.jsx";
import { adjustLuckyGiftPool, DEFAULT_POOL_ID, fetchOpsDashboard, saveLuckyGiftConfig } from "./api.js";
import { AppsView } from "./components/AppsView.jsx";
import { ConfigsView } from "./components/ConfigsView.jsx";
import { DrawsView } from "./components/DrawsView.jsx";
import { LuckyGiftConfigDialog } from "./components/LuckyGiftConfigDialog.jsx";
import { LuckyGiftPoolAdjustmentDialog } from "./components/LuckyGiftPoolAdjustmentDialog.jsx";
import { OpsShell } from "./components/OpsShell.jsx";
import { OverviewView } from "./components/OverviewView.jsx";
import { formatNumber } from "./format.js";

const views = [
    { icon: InsightsOutlined, key: "overview", label: "数据总览" },
    { icon: CardGiftcardOutlined, key: "configs", label: "幸运礼物配置" },
    { icon: CasinoOutlined, key: "draws", label: "抽奖记录" },
    { icon: AppsOutlined, key: "apps", label: "应用列表" },
];
const viewKeys = new Set(views.map((view) => view.key));

const initialDashboard = {
    apps: [],
    appSummaries: [],
    luckyGifts: [],
    poolBalances: [],
    summary: {},
};

export function initialOpsCenterView(search = globalThis.location?.search || "") {
    const requested = new URLSearchParams(search).get("view") || "";
    return viewKeys.has(requested) ? requested : "overview";
}

const denyPermission = () => false;

export function OpsCenterApp({ can = denyPermission }) {
    // 主后台旧入口通过 ?view=configs 进入独立 HTML；只接受白名单视图，异常参数仍回到总览。
    const [activeView, setActiveView] = useState(() => initialOpsCenterView());
    const [state, setState] = useState({ data: initialDashboard, error: "", loaded: false, loading: true });
    const [dialog, setDialog] = useState(null);
    const [poolDialog, setPoolDialog] = useState(null);
    const [adjustingPool, setAdjustingPool] = useState(false);
    const [savingConfig, setSavingConfig] = useState(false);
    const { showToast } = useToast();
    const canCreditPool = can(PERMISSIONS.luckyGiftPoolCredit);
    const canDebitPool = can(PERMISSIONS.luckyGiftPoolDebit);
    const canUpdateConfig = can(PERMISSIONS.luckyGiftUpdate);

    const loadDashboard = useCallback(async () => {
        setState((current) => ({ ...current, error: "", loading: true }));
        try {
            const data = await fetchOpsDashboard();
            setState({ data, error: "", loaded: true, loading: false });
        } catch (error) {
            // 接口灰度期间保留已加载的数据和页面结构，单次失败只提示、不整页白屏。
            setState((current) => ({
                data: current.data || initialDashboard,
                error: error.message || "运营接口暂不可用",
                loaded: current.loaded,
                loading: false,
            }));
        }
    }, []);

    useEffect(() => {
        loadDashboard();
    }, [loadDashboard]);

    const { data } = state;

    const appOptions = useMemo(
        () =>
            data.apps.map((item) => [
                item.app_code ?? item.appCode,
                `${item.app_name ?? item.appName ?? ""} (${item.app_code ?? item.appCode})`,
            ]),
        [data.apps],
    );

    // 抽奖记录页的奖池下拉：配置和真实水位都可能先于对方存在（先发布未入账 / 老池子停用后仍有流水），取并集。
    const poolIDsByApp = useMemo(() => {
        const byApp = new Map();
        const add = (appCode, poolID) => {
            if (!appCode || !poolID) {
                return;
            }
            if (!byApp.has(appCode)) {
                byApp.set(appCode, new Set());
            }
            byApp.get(appCode).add(poolID);
        };
        data.luckyGifts.forEach((config) => add(config.app_code, config.pool_id));
        data.poolBalances.forEach((pool) => add(pool.app_code ?? pool.appCode, pool.pool_id ?? pool.poolId));
        return new Map(Array.from(byApp.entries(), ([appCode, poolIDs]) => [appCode, Array.from(poolIDs).sort()]));
    }, [data.luckyGifts, data.poolBalances]);

    const openCreateConfig = useCallback(() => {
        const firstAppCode = data.apps
            .map((item) =>
                String(item.app_code ?? item.appCode ?? "")
                    .trim()
                    .toLowerCase(),
            )
            .find(Boolean);
        if (!firstAppCode) {
            showToast("暂无可添加配置的应用", "warning");
            return;
        }
        // 金额门槛和六维上限按 App 金币口径配置，绝不能复制第一条已发布规则给另一个 App。
        // 仅传规则身份，让 configToForm 生成 disabled dynamic_v3 安全草稿；金额字段保持 0，运营补齐后才能启用。
        setDialog({
            config: {
                app_code: firstAppCode,
                enabled: false,
                is_default: true,
                pool_id: DEFAULT_POOL_ID,
                rule_version: 0,
                strategy_version: "dynamic_v3",
            },
            mode: "create",
        });
    }, [data.apps, showToast]);

    const openEditConfig = useCallback((config) => {
        setDialog({ config: structuredClone(config), mode: "edit" });
    }, []);

    const openPoolAdjustment = useCallback((pool, direction) => {
        if (!pool) {
            return;
        }
        // 幂等键绑定一次弹窗会话，而不是一次 fetch；网络超时或 409 后弹窗保留，后续重试不会重复入账。
        setPoolDialog({
            adjustmentId: createPoolAdjustmentID(),
            direction,
            pool: structuredClone(pool),
        });
    }, []);

    const handleSaveConfig = useCallback(
        async (config) => {
            setSavingConfig(true);
            try {
                await saveLuckyGiftConfig(config);
                showToast(`已发布 ${config.app_code} / ${config.pool_id} 的新规则版本`, "success");
                setDialog(null);
                await loadDashboard();
            } catch (error) {
                // 保存失败保持弹窗打开，运营修完参数可直接重试，不丢已填内容。
                showToast(error.message || "保存幸运礼物配置失败", "error");
            } finally {
                setSavingConfig(false);
            }
        },
        [loadDashboard, showToast],
    );

    const handleAdjustPool = useCallback(
        async (request) => {
            setAdjustingPool(true);
            try {
                const result = await adjustLuckyGiftPool(request);
                const adjustment = result.adjustment || {};
                const action = request.direction === "out" ? "扣减" : "添加";
                showToast(
                    `已${action}水位 ${request.appCode} / ${request.poolId} / ${request.strategyVersion}：${formatNumber(
                        adjustment.balance_before,
                    )} → ${formatNumber(adjustment.balance_after)}`,
                    "success",
                );
                setPoolDialog(null);
                await loadDashboard();
            } catch (error) {
                // owner 可能已经成功但响应丢失；保留表单与 adjustment_id，用户重试时由 owner 返回首次结果而不重复调整。
                showToast(error.message || "调整奖池水位失败", "error");
            } finally {
                setAdjustingPool(false);
            }
        },
        [loadDashboard, showToast],
    );

    const defaultAppCode = data.apps[0]?.app_code ?? data.apps[0]?.appCode ?? "";

    return (
        <OpsShell activeView={activeView} onViewChange={setActiveView} views={views}>
            <div className="ops-page">
                <PageHead meta="跨应用幸运礼物配置与抽奖数据面板" title="运营配置中心">
                    <span className={state.loading ? "ops-status is-loading" : "ops-status"}>
                        {state.loading ? "同步中" : "已就绪"}
                    </span>
                    <Button
                        disabled={state.loading}
                        startIcon={<RefreshOutlined fontSize="small" />}
                        onClick={loadDashboard}
                    >
                        刷新
                    </Button>
                </PageHead>
                {/* 首屏失败走 DataState 的错误重试页；已有数据时刷新失败只弹提示条，保留旧数据可用。 */}
                {state.error && state.loaded ? (
                    <div className="ops-alert" role="alert">
                        {state.error}
                    </div>
                ) : null}
                <DataState
                    error={state.loaded ? "" : state.error}
                    loading={state.loading && !state.loaded}
                    onRetry={loadDashboard}
                >
                    {activeView === "overview" ? (
                        <OverviewView
                            canCredit={canCreditPool}
                            canDebit={canDebitPool}
                            data={data}
                            disabled={adjustingPool || state.loading}
                            onCredit={(pool) => openPoolAdjustment(pool, "in")}
                            onDebit={(pool) => openPoolAdjustment(pool, "out")}
                        />
                    ) : null}
                    {activeView === "configs" ? (
                        <ConfigsView
                            apps={data.apps}
                            canCredit={canCreditPool}
                            canDebit={canDebitPool}
                            canUpdate={canUpdateConfig}
                            disabled={adjustingPool || state.loading}
                            luckyGifts={data.luckyGifts}
                            poolBalances={data.poolBalances}
                            saving={savingConfig}
                            onCreate={openCreateConfig}
                            onCredit={(pool) => openPoolAdjustment(pool, "in")}
                            onDebit={(pool) => openPoolAdjustment(pool, "out")}
                            onEdit={openEditConfig}
                        />
                    ) : null}
                    {activeView === "draws" ? (
                        <DrawsView apps={data.apps} defaultAppCode={defaultAppCode} poolIDsByApp={poolIDsByApp} />
                    ) : null}
                    {activeView === "apps" ? <AppsView apps={data.apps} /> : null}
                </DataState>
                {dialog ? (
                    <LuckyGiftConfigDialog
                        appOptions={appOptions}
                        config={dialog.config}
                        mode={dialog.mode}
                        saving={savingConfig}
                        onClose={() => setDialog(null)}
                        onSubmit={handleSaveConfig}
                    />
                ) : null}
                {poolDialog ? (
                    <LuckyGiftPoolAdjustmentDialog
                        adjustmentId={poolDialog.adjustmentId}
                        direction={poolDialog.direction}
                        pool={poolDialog.pool}
                        submitting={adjustingPool}
                        onClose={() => setPoolDialog(null)}
                        onSubmit={handleAdjustPool}
                    />
                ) : null}
            </div>
        </OpsShell>
    );
}

let fallbackAdjustmentSequence = 0;

function createPoolAdjustmentID() {
    if (typeof globalThis.crypto?.randomUUID === "function") {
        return globalThis.crypto.randomUUID();
    }
    fallbackAdjustmentSequence += 1;
    return `pool-adjust-${Date.now().toString(36)}-${fallbackAdjustmentSequence.toString(36)}`;
}