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

export function CumulativeRechargeRewardConfigSummary({
    canUpdate,
    config,
    configLoading,
    resourceGroups,
    onEdit,
    onRefresh,
}) {
    const tiers = config?.tiers || [];
    const activeTiers = tiers.filter((tier) => tier.status === "active");

    return (
        <div className={styles.summaryPanel}>
            <div className={styles.summaryItems}>
                <SummaryItem label="状态">
                    <span
                        className={[
                            styles.statusBadge,
                            config?.enabled ? styles.statusActive : styles.statusInactive,
                        ].join(" ")}
                    >
                        {config?.enabled ? "启用" : "停用"}
                    </span>
                </SummaryItem>
                <SummaryItem label="档位">
                    {activeTiers.length}/{tiers.length}
                </SummaryItem>
                <SummaryItem label="金额">{thresholdSummary(activeTiers)}</SummaryItem>
                <SummaryItem label="资源组">{resourceGroupSummary(tiers, resourceGroups)}</SummaryItem>
            </div>
            <div className={styles.summaryActions}>
                <Button disabled={configLoading} startIcon={<RefreshOutlined fontSize="small" />} onClick={onRefresh}>
                    刷新
                </Button>
                {canUpdate ? (
                    <Button
                        disabled={configLoading}
                        startIcon={<EditOutlined fontSize="small" />}
                        variant="primary"
                        onClick={onEdit}
                    >
                        编辑配置
                    </Button>
                ) : null}
            </div>
        </div>
    );
}

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

function thresholdSummary(tiers) {
    if (!tiers.length) {
        return "-";
    }
    const thresholds = tiers.map((tier) => tier.thresholdUsdMinor || 0).filter((value) => value > 0);
    if (!thresholds.length) {
        return "-";
    }
    const min = Math.min(...thresholds);
    const max = Math.max(...thresholds);
    return min === max ? formatUSD(min) : `${formatUSD(min)} - ${formatUSD(max)}`;
}

function resourceGroupSummary(tiers, resourceGroups) {
    if (!tiers.length) {
        return "-";
    }
    const names = tiers.slice(0, 2).map((tier) =>
        groupName(
            resourceGroups.find((group) => group.groupId === tier.resourceGroupId),
            tier.resourceGroupId,
        ),
    );
    const suffix = tiers.length > names.length ? ` +${tiers.length - names.length}` : "";
    return `${names.join("、")}${suffix}`;
}

function groupName(group, fallbackId) {
    return group?.name || group?.groupCode || `资源组 #${fallbackId}`;
}

function formatUSD(value) {
    return `$${(Number(value || 0) / 100).toFixed(2)}`;
}
