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/red-packets/red-packets.module.css";

export function RedPacketConfigSummary({ canUpdate, config, configLoading, onEdit, onRefresh }) {
    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="数量档位">{formatTiers(config?.countTiers)}</SummaryItem>
                <SummaryItem label="金额档位">{formatTiers(config?.amountTiers)}</SummaryItem>
                <SummaryItem label="延迟/过期">
                    {Number(config?.delayedOpenSeconds || 0)}s / 24h
                </SummaryItem>
                <SummaryItem label="每日上限">{Number(config?.dailySendLimit || 0)} 次</SummaryItem>
                <SummaryItem label="规则 URL">{config?.ruleUrl || "-"}</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 formatTiers(values) {
    if (!values?.length) {
        return "-";
    }
    const visible = values.slice(0, 4).join("、");
    return values.length > 4 ? `${visible} +${values.length - 4}` : visible;
}