<template>
    <div class="p-4 bg-gradient-to-b from-blue-50/30 to-gray-50 min-h-screen">
        <!-- 资产卡片 -->
        <div class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-blue-50/70 to-blue-100/50 p-6">
            <div class="flex justify-between items-center mb-3">
                <div class="flex items-center">
                    <van-icon name="balance-pay" class="text-blue-500 text-xl mr-2" />
                    <span class="text-lg font-bold text-gray-800">余额</span>
                </div>
                <span class="text-3xl text-blue-600 font-bold">¥ {{ (data?.balance || 0).toFixed(2) }}</span>
            </div>
            <div class="text-sm text-gray-500 mb-2">累计收益：¥ {{ (data?.total_earnings || 0).toFixed(2) }}</div>
            <div class="text-sm text-gray-500 mb-6">冻结余额：¥ {{ (data?.frozen_balance || 0).toFixed(2) }}</div>
            <div class="grid grid-cols-2 gap-3">
                <button @click="toWithdraw" class="bg-gradient-to-r from-blue-500 to-blue-400 text-white rounded-full py-2 px-4 
                             shadow-md flex items-center justify-center">
                    <van-icon name="gold-coin" class="mr-1" />
                    提现
                </button>
                <button @click="toWithdrawDetails" class="bg-white/90 text-gray-600 border border-gray-200/50 rounded-full py-2 px-4 
                            shadow-sm flex items-center justify-center">
                    <van-icon name="notes" class="mr-1" />
                    提现记录
                </button>
            </div>
        </div>

        <!-- 直推报告收益 -->
        <div class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-blue-50/40 to-cyan-50/50 p-6">
            <div class="flex justify-between items-center mb-4">
                <div class="flex items-center">
                    <van-icon name="balance-list" class="text-blue-400 text-xl mr-2" />
                    <span class="text-lg font-bold text-gray-800">直推报告收益</span>
                </div>
                <div class="text-right">
                    <div class="text-2xl text-blue-600 font-bold">¥ {{ (data?.direct_push?.total_commission ||
                        0).toFixed(2) }}</div>
                    <div class="text-sm text-gray-500 mt-1">有效报告 {{ data?.direct_push?.total_report || 0 }} 份</div>
                </div>
            </div>

            <!-- 日期选择 -->
            <div class="grid grid-cols-3 gap-2 mb-6">
                <button v-for="item in promoteDateOptions" :key="item.value" @click="selectedPromoteDate = item.value"
                    class="rounded-full transition-all py-1 px-4 text-sm" :class="[
                        selectedPromoteDate === item.value
                            ? 'bg-blue-500 text-white shadow-md'
                            : 'bg-white/90 text-gray-600 border border-gray-200/50'
                    ]">
                    {{ item.label }}
                </button>
            </div>

            <div class="grid grid-cols-2 gap-4 mb-6">
                <div class="bg-blue-50/60 p-3 rounded-lg backdrop-blur-sm">
                    <div class="flex items-center text-sm text-gray-500">
                        <van-icon name="gold-coin" class="mr-1" />本日收益
                    </div>
                    <div class="text-xl text-blue-600 font-bold mt-1">¥ {{ currentPromoteData.commission?.toFixed(2) ||
                        '0.00' }}</div>
                </div>
                <div class="bg-blue-50/60 p-3 rounded-lg backdrop-blur-sm">
                    <div class="flex items-center text-sm text-gray-500">
                        <van-icon name="description" class="mr-1" />有效报告
                    </div>
                    <div class="text-xl text-blue-600 font-bold mt-1">{{ currentPromoteData.report || 0 }} 份</div>
                </div>
            </div>

            <div class="flex items-center justify-between text-blue-500 text-sm font-semibold cursor-pointer pt-4"
                @click="goToPromoteDetail">
                <span>查看收益明细</span>
                <span class="text-lg">→</span>
            </div>
        </div>

        <!-- 活跃下级奖励 -->
        <div class="rounded-xl shadow-lg bg-gradient-to-r from-green-50/40 to-cyan-50/30 p-6">
            <div class="flex justify-between items-center mb-4">
                <div class="flex items-center">
                    <van-icon name="friends" class="text-green-500 text-xl mr-2" />
                    <span class="text-lg font-bold text-gray-800">活跃下级奖励</span>
                </div>
                <div class="text-right">
                    <div class="text-2xl text-green-600 font-bold">¥ {{ (data?.active_reward?.total_reward ||
                        0).toFixed(2) }}</div>
                    <div class="text-sm text-gray-500 mt-1">活跃下级 0 位</div>
                </div>
            </div>

            <!-- 日期选择 -->
            <div class="grid grid-cols-3 gap-2 mb-6">
                <button v-for="item in activeDateOptions" :key="item.value" @click="selectedActiveDate = item.value"
                    class="rounded-full transition-all py-1 px-4 text-sm" :class="[
                        selectedActiveDate === item.value
                            ? 'bg-green-500 text-white shadow-md'
                            : 'bg-white/90 text-gray-600 border border-gray-200/50'
                    ]">
                    {{ item.label }}
                </button>
            </div>

            <div class="grid grid-cols-2 gap-2 mb-6">
                <div class="bg-green-50/60 p-3 rounded-lg backdrop-blur-sm">
                    <div class="flex items-center text-sm text-gray-500">
                        <van-icon name="medal" class="mr-1" />本日奖励
                    </div>
                    <div class="text-xl text-green-600 font-bold mt-1">¥ {{ (currentActiveData.active_reward ||
                        0).toFixed(2) }}</div>
                </div>
                <div class="bg-green-50/60 p-3 rounded-lg backdrop-blur-sm">
                    <div class="flex items-center text-sm text-gray-500">
                        <van-icon name="discount" class="mr-1" />下级推广奖励
                    </div>
                    <div class="text-xl text-green-600 font-bold mt-1">¥ {{ (currentActiveData.sub_promote_reward ||
                        0).toFixed(2) }}</div>
                </div>
                <div class="bg-green-50/60 p-3 rounded-lg backdrop-blur-sm">
                    <div class="flex items-center text-sm text-gray-500">
                        <van-icon name="contact" class="mr-1" />新增活跃奖励
                    </div>
                    <div class="text-xl text-green-600 font-bold mt-1">¥ {{ (currentActiveData.sub_upgrade_reward ||
                        0).toFixed(2) }}</div>
                </div>
                <div class="bg-green-50/60 p-3 rounded-lg backdrop-blur-sm">
                    <div class="flex items-center text-sm text-gray-500">
                        <van-icon name="fire" class="mr-1" />下级转化奖励
                    </div>
                    <div class="text-xl text-green-600 font-bold mt-1">¥ {{ (currentActiveData.sub_withdraw_reward ||
                        0).toFixed(2) }}</div>
                </div>
            </div>

            <div class="flex items-center justify-between text-green-500 text-sm font-semibold cursor-pointer pt-4"
                @click="goToActiveDetail">
                <span>查看奖励明细</span>
                <span class="text-lg">→</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
const agentStore = useAgentStore()
const { isAgent } = storeToRefs(agentStore)
const router = useRouter();
const data = ref(null);

// 日期选项映射
const dateRangeMap = {
    today: 'today',
    week: 'last7d',
    month: 'last30d'
};

// 直推报告数据
const promoteDateOptions = [
    { label: '今日', value: 'today' },
    { label: '近7天', value: 'week' },
    { label: '近1月', value: 'month' }
];
const selectedPromoteDate = ref('today');

// 活跃下级数据
const activeDateOptions = [
    { label: '今日', value: 'today' },
    { label: '近7天', value: 'week' },
    { label: '近1月', value: 'month' }
];
const selectedActiveDate = ref('today');

// 计算当前直推数据
const currentPromoteData = computed(() => {
    const range = dateRangeMap[selectedPromoteDate.value];
    return data.value?.direct_push?.[range] || { commission: 0, report: 0 };
});

// 计算当前活跃数据
const currentActiveData = computed(() => {
    const range = dateRangeMap[selectedActiveDate.value];
    return data.value?.active_reward?.[range] || {
        active_reward: 0,
        sub_promote_reward: 0,
        sub_upgrade_reward: 0,
        sub_withdraw_reward: 0
    };
});

const getData = async () => {
    const { data: res, error } = await useApiFetch("/agent/revenue")
        .get()
        .json();

    if (res.value?.code === 200 && !error.value) {
        data.value = res.value.data;
    }
};

onMounted(() => {
    if (isAgent.value) {
        getData();
    }
});

// 路由跳转
const goToPromoteDetail = () => router.push({ name: "promoteDetails" });
const goToActiveDetail = () => router.push({ name: "rewardsDetails" });

const toWithdraw = () => router.push({ name: "withdraw" });

const toWithdrawDetails = () => router.push({ name: "withdrawDetails" });

</script>

<style>
/* 添加按钮悬停效果 */
button {
    transition: all 0.2s ease;
}

button:hover {
    transform: translateY(-1px);
}
</style>