<template>
    <div class="p-4 bg-gradient-to-b from-gray-50/50 to-gray-100/30 min-h-screen">
        <!-- 资产卡片 -->
        <div class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-primary-50/70 to-primary-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-xl mr-2" style="color: var(--van-theme-primary);" />
                    <span class="text-lg font-bold" style="color: var(--van-text-color);">余额</span>
                </div>
                <span class="text-3xl font-bold" style="color: var(--van-theme-primary);">¥ {{ (data?.balance ||
                    0).toFixed(2) }}</span>
            </div>
            <div class="text-sm mb-2" style="color: var(--van-text-color-2);">
                累计收益：¥ {{ (data?.total_earnings || 0).toFixed(2) }}
            </div>
            <div class="text-sm mb-6 flex items-center" style="color: var(--van-text-color-2);">
                待结账金额：¥ {{ (data?.frozen_balance || 0).toFixed(2) }}
                <van-popover v-model:show="showTooltip" placement="bottom-start" :offset="10">
                    <template #reference>
                        <van-icon name="question-o" class="ml-2 cursor-help" @mouseenter="showTooltip = true"
                            @mouseleave="showTooltip = false" />
                    </template>
                    <div class="p-2 text-sm" style="max-width: 200px;">
                        待结账金额将在订单创建24小时后自动结账。
                    </div>
                </van-popover>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <button @click="toWithdraw"
                    class="text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center"
                    style="background: linear-gradient(135deg, var(--van-theme-primary), var(--van-theme-primary-dark));">
                    <van-icon name="gold-coin" class="mr-1" />
                    提现
                </button>
                <button @click="toWithdrawDetails"
                    class="bg-white/90 border rounded-full py-2 px-4 shadow-sm flex items-center justify-center"
                    style="color: var(--van-text-color-2); border-color: var(--van-border-color);">
                    <van-icon name="notes" class="mr-1" />
                    提现记录
                </button>
            </div>
        </div>

        <!-- 直推报告收益 -->
        <div class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-warning-50/60 to-warning-100/50 p-6">
            <div class="flex justify-between items-center mb-4">
                <div class="flex items-center">
                    <van-icon name="balance-list" class="text-xl mr-2" style="color: var(--color-warning);" />
                    <span class="text-lg font-bold" style="color: var(--van-text-color);">直推报告收益</span>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-bold" style="color: var(--color-warning);">
                        ¥
                        {{
                            (data?.direct_push?.total_commission || 0).toFixed(
                                2
                            )
                        }}
                    </div>
                    <div class="text-sm mt-1" style="color: var(--van-text-color-2);">
                        有效报告 {{ 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
                            ? 'text-white shadow-md'
                            : 'bg-white/90 border',
                    ]" :style="selectedPromoteDate === item.value
                        ? 'background-color: var(--color-warning);'
                        : 'color: var(--van-text-color-2); border-color: var(--van-border-color);'">
                    {{ item.label }}
                </button>
            </div>

            <div class="grid grid-cols-2 gap-4 mb-6">
                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(245, 158, 11, 0.08);">
                    <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                        <van-icon name="gold-coin" class="mr-1" />本日收益
                    </div>
                    <div class="text-xl font-bold mt-1" style="color: var(--color-warning);">
                        ¥
                        {{
                            currentPromoteData.commission?.toFixed(2) || "0.00"
                        }}
                    </div>
                </div>
                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(245, 158, 11, 0.08);">
                    <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                        <van-icon name="description" class="mr-1" />有效报告
                    </div>
                    <div class="text-xl font-bold mt-1" style="color: var(--color-warning);">
                        {{ currentPromoteData.report || 0 }} 份
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
                style="color: var(--color-warning);" @click="goToPromoteDetail">
                <span>查看收益明细</span>
                <span class="text-lg">→</span>
            </div>
        </div>

        <!-- 活跃下级奖励 -->
        <div class="rounded-xl shadow-lg bg-gradient-to-r from-success-50/50 to-success-100/40 p-6">
            <div class="flex justify-between items-center mb-4">
                <div class="flex items-center">
                    <van-icon name="friends" class="text-xl mr-2" style="color: var(--color-success);" />
                    <span class="text-lg font-bold" style="color: var(--van-text-color);">活跃下级奖励</span>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-bold" style="color: var(--color-success);">
                        ¥
                        {{
                            (data?.active_reward?.total_reward || 0).toFixed(2)
                        }}
                    </div>
                    <!-- <div class="text-sm mt-1" style="color: var(--van-text-color-2);">活跃下级 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
                            ? 'text-white shadow-md'
                            : 'bg-white/90 border',
                    ]" :style="selectedActiveDate === item.value
                        ? 'background-color: var(--color-success);'
                        : 'color: var(--van-text-color-2); border-color: var(--van-border-color);'">
                    {{ item.label }}
                </button>
            </div>

            <div class="grid grid-cols-2 gap-2 mb-6">
                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(16, 185, 129, 0.08);">
                    <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                        <van-icon name="medal" class="mr-1" />{{ activeDateText }}奖励
                    </div>
                    <div class="text-xl font-bold mt-1" style="color: var(--color-success);">
                        ¥
                        {{ (currentActiveData.active_reward || 0).toFixed(2) }}
                    </div>
                </div>
                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(16, 185, 129, 0.08);">
                    <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                        <van-icon name="discount" class="mr-1" />下级推广奖励
                    </div>
                    <div class="text-xl font-bold mt-1" style="color: var(--color-success);">
                        ¥
                        {{
                            (currentActiveData.sub_promote_reward || 0).toFixed(
                                2
                            )
                        }}
                    </div>
                </div>
                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(16, 185, 129, 0.08);">
                    <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                        <van-icon name="fire" class="mr-1" />下级转化奖励
                    </div>
                    <div class="text-xl font-bold mt-1" style="color: var(--color-success);">
                        ¥
                        {{
                            (
                                currentActiveData.sub_upgrade_reward || 0
                            ).toFixed(2)
                        }}
                    </div>
                </div>
                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(16, 185, 129, 0.08);">
                    <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                        <van-icon name="cashier-o" class="mr-1" />下级提现奖励
                    </div>
                    <div class="text-xl font-bold mt-1" style="color: var(--color-success);">
                        ¥
                        {{ (currentActiveData.sub_withdraw_reward || 0).toFixed(2) }}
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
                style="color: var(--color-success);" @click="goToActiveDetail">
                <span>查看奖励明细</span>
                <span class="text-lg">→</span>
            </div>

            <!-- 添加查看下级按钮 -->
            <div class="mt-4">
                <button @click="toSubordinateList"
                    class="w-full text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center bg-success"
                    style="background: linear-gradient(135deg, var(--color-success), var(--color-success-600));">
                    <van-icon name="friends" class="mr-1" />
                    查看我的下级
                </button>
            </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 showTooltip = ref(false);

// 日期选项映射
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 dateTextMap = {
    today: "今日",
    week: "近7天",
    month: "近1月",
};

// 计算当前直推数据
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 activeDateText = computed(
    () => dateTextMap[selectedActiveDate.value] || "今日"
);

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" });

// 添加跳转到下级列表的方法
const toSubordinateList = () => {
    router.push("/agent/subordinateList");
};
</script>

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

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