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 { TimeRangeFilter } from "@/shared/ui/TimeRangeFilter.jsx";
import styles from "@/features/registration-reward/registration-reward.module.css";

export function RegistrationRewardConfigSummary({
    canUpdate,
    config,
    configLoading,
    onEdit,
    onRefresh,
    onTimeRangeChange,
    resourceGroups,
    timeRange,
    todayClaimedCount,
}) {
    return (
        <section className={styles.summaryPanel}>
            <div className={styles.summaryHeader}>
                <span className={styles.title}>注册奖励配置</span>
            </div>
            <div className={styles.summaryItems}>
                <SummaryItem label="发放状态">
                    <ConfigStatus config={config} loading={configLoading} />
                </SummaryItem>
                <SummaryItem label="今日已领">{formatNumber(todayClaimedCount)} 份</SummaryItem>
                <SummaryItem label="每日限制">{config ? formatNumber(config.dailyLimit) : configLoading ? "加载中" : "-"}</SummaryItem>
                <SummaryItem label="奖励">{config ? rewardLabel(config, resourceGroups) : configLoading ? "加载中" : "-"}</SummaryItem>
            </div>
            <div className={styles.summaryActions}>
                <TimeRangeFilter label="领取时间" value={timeRange} onChange={onTimeRangeChange} />
                <AdminActionIconButton disabled={configLoading} label="刷新配置" type="button" onClick={onRefresh}>
                    <RefreshOutlined fontSize="small" />
                </AdminActionIconButton>
                <Button
                    disabled={!canUpdate || configLoading || !config}
                    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 rewardLabel(config, resourceGroups) {
    if (config.rewardType === "resource_group") {
        const group = resourceGroups.find((item) => Number(item.groupId) === Number(config.resourceGroupId));
        return `资源组 / ${group?.name || group?.groupCode || (config.resourceGroupId ? `#${config.resourceGroupId}` : "-")}`;
    }

    return `${formatNumber(config.coinAmount)} 金币`;
}

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