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

export function RoomTurnoverRewardConfigSummary({ canUpdate, config, configLoading, onEdit, onRefresh }) {
    const tiers = config?.tiers || [];
    const activeTiers = tiers.filter((tier) => tier.status !== "inactive");
    return (
        <section className={styles.summaryPanel}>
            <div className={styles.summaryItems}>
                <div className={styles.summaryItem}>
                    <span className={styles.summaryLabel}>状态</span>
                    <span
                        className={[
                            styles.statusBadge,
                            config?.enabled ? styles.statusActive : styles.statusInactive,
                        ].join(" ")}
                    >
                        {config?.enabled ? "开启" : "关闭"}
                    </span>
                </div>
                <div className={styles.summaryItem}>
                    <span className={styles.summaryLabel}>启用档位</span>
                    <span className={styles.summaryValue}>{activeTiers.length}</span>
                </div>
                <div className={styles.summaryItem}>
                    <span className={styles.summaryLabel}>最高奖励</span>
                    <span className={styles.summaryValue}>{formatNumber(maxReward(activeTiers))} 金币</span>
                </div>
                <div className={styles.summaryItem}>
                    <span className={styles.summaryLabel}>更新时间</span>
                    <span className={styles.summaryValue}>
                        {config?.updatedAtMs ? <TimeText value={config.updatedAtMs} /> : configLoading ? "加载中" : "-"}
                    </span>
                </div>
            </div>
            <div className={styles.summaryActions}>
                <Button disabled={configLoading} startIcon={<RefreshOutlined fontSize="small" />} onClick={onRefresh}>
                    {configLoading ? <CircularProgress color="inherit" size={16} /> : null}
                    刷新
                </Button>
                <Button
                    disabled={!canUpdate || configLoading}
                    startIcon={<EditOutlined fontSize="small" />}
                    variant="primary"
                    onClick={onEdit}
                >
                    编辑配置
                </Button>
            </div>
        </section>
    );
}

function maxReward(tiers) {
    return tiers.reduce((max, tier) => Math.max(max, Number(tier.rewardCoinAmount || 0)), 0);
}

function formatNumber(value) {
    return new Intl.NumberFormat("zh-CN").format(Number(value || 0));
}
