import EditOutlined from "@mui/icons-material/EditOutlined";
import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
import { Button } from "@/shared/ui/Button.jsx";
import { AdminActionIconButton } from "@/shared/ui/AdminListLayout.jsx";
import { TimeText } from "@/shared/ui/TimeText.jsx";
import styles from "@/features/room-rocket/room-rocket.module.css";

const broadcastScopeLabels = {
    global: "全局广播",
    none: "不广播",
    region: "区域广播",
};

const rewardStackPolicyLabels = {
    allow_stack: "允许叠加",
    priority_only: "优先级单份",
};

export function RoomRocketConfigSummary({ canUpdate, config, configLoading, onEdit, onRefresh }) {
    return (
        <section className={styles.summaryPanel}>
            <div className={styles.summaryScrollArea}>
                <div className={styles.summaryContent}>
                    <div className={styles.summaryHeader}>
                        <span className={styles.title}>房间火箭配置</span>
                    </div>
                    <div className={styles.summaryItems}>
                        <ConfigStatus config={config} loading={configLoading} />
                        <SummaryItem label="配置版本">{config?.configVersion || "-"}</SummaryItem>
                        <SummaryItem label="发射倒计时">{formatSeconds(config?.launchDelayMs)}</SummaryItem>
                        <SummaryItem label="广播">
                            {config?.broadcastEnabled ? broadcastScopeLabels[config.broadcastScope] || config.broadcastScope : "关闭"}
                        </SummaryItem>
                        <SummaryItem label="角色奖励">{rewardStackPolicyLabels[config?.rewardStackPolicy] || "-"}</SummaryItem>
                        <SummaryItem label="更新时间">
                            {config?.updatedAtMs ? <TimeText value={config.updatedAtMs} /> : configLoading ? "加载中" : "-"}
                        </SummaryItem>
                    </div>
                    <LevelPreview config={config} loading={configLoading} />
                </div>
            </div>
            <div className={styles.summaryActions}>
                <AdminActionIconButton disabled={configLoading} label="刷新配置" type="button" onClick={onRefresh}>
                    <RefreshOutlined fontSize="small" />
                </AdminActionIconButton>
                <Button
                    disabled={!canUpdate || configLoading}
                    startIcon={<EditOutlined fontSize="small" />}
                    type="button"
                    variant="primary"
                    onClick={onEdit}
                >
                    编辑配置
                </Button>
            </div>
        </section>
    );
}

function SummaryItem({ children, label }) {
    return (
        <div className={styles.summaryItem}>
            <span className={styles.summaryLabel}>{label}</span>
            <span className={styles.summaryValue}>{children}</span>
        </div>
    );
}

function ConfigStatus({ config, loading }) {
    if (!config) {
        return (
            <span className="status-badge status-badge--stopped">
                <span className="status-point" />
                {loading ? "加载中" : "-"}
            </span>
        );
    }

    return (
        <span className={["status-badge", config.enabled ? "status-badge--running" : "status-badge--stopped"].join(" ")}>
            <span className="status-point" />
            {config.enabled ? "已开启" : "已关闭"}
        </span>
    );
}

function LevelPreview({ config, loading }) {
    if (loading && !config) {
        return <div className={styles.levelPreview}>加载中</div>;
    }
    return (
        <div className={styles.levelPreview}>
            {(config?.levels || []).map((level) => (
                <span className={styles.levelPill} key={level.level}>
                    <span>L{level.level}</span>
                    <span>{formatNumber(level.fuelThreshold)}</span>
                </span>
            ))}
        </div>
    );
}

function formatSeconds(ms) {
    if (ms === undefined || ms === null) {
        return "-";
    }
    return `${Math.round(Number(ms || 0) / 1000)} 秒`;
}

function formatNumber(value) {
    return Number(value || 0).toLocaleString("zh-CN");
}
