<template>
  <div class="page-container-flex">
    <van-nav-bar title="预算管理" placeholder>
      <template #right>
        <van-icon
          v-if="activeTab !== BudgetCategory.Savings"
          name="plus" 
          size="20" 
          @click="budgetEditRef.open({ category: activeTab })" 
        />
        <van-icon
          v-else
          name="info-o" 
          size="20" 
          @click="savingsConfigRef.open()"
        />
      </template>
    </van-nav-bar>



    <van-tabs v-model:active="activeTab" type="card" class="budget-tabs">
      <van-tab title="支出" :name="BudgetCategory.Expense">
        <BudgetSummary 
          v-if="activeTab !== BudgetCategory.Savings"
          :stats="overallStats" 
          :title="activeTabTitle" 
          :get-value-class="getValueClass" 
        />
        <div class="scroll-content">
          <div class="budget-list">
            <template v-if="expenseBudgets?.length > 0">
              <van-swipe-cell v-for="budget in expenseBudgets" :key="budget.id">
                <BudgetCard 
                  :budget="budget"
                  :progress-color="getProgressColor(budget)"
                  :percent-class="{ 'warning': (budget.current / budget.limit) > 0.8 }"
                  :period-label="getPeriodLabel(budget.type)"
                  @toggle-stop="handleToggleStop"
                  @switch-period="(dir) => handleSwitchPeriod(budget, dir)"
                  @click="budgetEditRef.open({
                    data: budget,
                    isEditFlag: true,
                    category: budget.category
                  })"
                >
                  <template #amount-info>
                    <div class="info-item">
                      <div class="label">当前</div>
                      <div class="value expense">¥{{ formatMoney(budget.current) }}</div>
                    </div>
                    <div class="info-item">
                      <div class="label">预算</div>
                      <div class="value">¥{{ formatMoney(budget.limit) }}</div>
                    </div>
                    <div class="info-item">
                      <div class="label">结余</div>
                      <div class="value" :class="budget.limit - budget.current >= 0 ? 'income' : 'expense'">
                        ¥{{ formatMoney(budget.limit - budget.current) }}
                      </div>
                    </div>
                  </template>
                </BudgetCard>
                <template #right>
                  <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
                </template>
              </van-swipe-cell>
            </template>
            <van-empty v-else description="暂无支出预算" />
          </div>
          <!-- 底部安全距离 -->
          <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
        </div>
        </van-tab>

        <van-tab title="收入" :name="BudgetCategory.Income">
          <BudgetSummary 
            v-if="activeTab !== BudgetCategory.Savings"
            :stats="overallStats" 
            :title="activeTabTitle" 
            :get-value-class="getValueClass" 
          />
          <div class="scroll-content">
            <div class="budget-list">
            <template v-if="incomeBudgets?.length > 0">
              <van-swipe-cell v-for="budget in incomeBudgets" :key="budget.id">
                <BudgetCard 
                  :budget="budget"
                  :progress-color="getIncomeProgressColor(budget)"
                  :percent-class="{ 'income': (budget.current / budget.limit) >= 1 }"
                  :period-label="getPeriodLabel(budget.type)"
                  @toggle-stop="handleToggleStop"
                  @switch-period="(dir) => handleSwitchPeriod(budget, dir)"
                  @click="budgetEditRef.open({
                    data: budget,
                    isEditFlag: true,
                    category: budget.category
                  })"
                >
                  <template #amount-info>
                    <div class="info-item">
                      <div class="label">当前已收</div>
                      <div class="value income">¥{{ formatMoney(budget.current) }}</div>
                    </div>
                    <div class="info-item">
                      <div class="label">目标收入</div>
                      <div class="value">¥{{ formatMoney(budget.limit) }}</div>
                    </div>
                    <div class="info-item">
                      <div class="label">差额</div>
                      <div class="value" :class="budget.current >= budget.limit ? 'income' : 'expense'">
                        ¥{{ formatMoney(Math.abs(budget.limit - budget.current)) }}
                      </div>
                    </div>
                  </template>
                </BudgetCard>
                <template #right>
                  <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(budget)" />
                </template>
              </van-swipe-cell>
            </template>
            <van-empty v-else description="暂无收入预算" />
          </div>
          <!-- 底部安全距离 -->
          <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
        </div>
        </van-tab>

        <van-tab title="存款" :name="BudgetCategory.Savings">
          <div class="scroll-content" style="padding-top:4px">
            <div class="budget-list">
            <template v-if="savingsBudgets?.length > 0">
              <BudgetCard 
                  v-for="budget in savingsBudgets" 
                  :key="budget.id"
                  :budget="budget"
                  progress-color="#07c160"
                  :percent-class="{ 'income': (budget.current / budget.limit) >= 1 }"
                  :period-label="getPeriodLabel(budget.type)"
                  style="margin: 0 12px 12px;"
                  @switch-period="(dir) => handleSwitchPeriod(budget, dir)"
                >
                  <template #amount-info>
                    <div class="info-item">
                      <div class="label">已存</div>
                      <div class="value income">¥{{ formatMoney(budget.current) }}</div>
                    </div>
                    <div class="info-item">
                      <div class="label">目标</div>
                      <div class="value">¥{{ formatMoney(budget.limit) }}</div>
                    </div>
                    <div class="info-item">
                      <div class="label">还差</div>
                      <div class="value expense">
                        ¥{{ formatMoney(Math.max(0, budget.limit - budget.current)) }}
                      </div>
                    </div>
                  </template>
              </BudgetCard>
            </template>
            <van-empty v-else description="暂无存款计划" />
          </div>
          <!-- 底部安全距离 -->
          <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
        </div>
        </van-tab>
      </van-tabs>

    <!-- 添加/编辑预算弹窗 -->
    <BudgetEditPopup 
      ref="budgetEditRef"
      @success="fetchBudgetList" 
    />
    <SavingsConfigPopup
      ref="savingsConfigRef"
      @success="fetchBudgetList"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { showToast, showConfirmDialog } from 'vant'
import { getBudgetList, deleteBudget, toggleStopBudget, getBudgetStatistics } from '@/api/budget'
import { BudgetPeriodType, BudgetCategory } from '@/constants/enums'
import BudgetCard from '@/components/Budget/BudgetCard.vue'
import BudgetSummary from '@/components/Budget/BudgetSummary.vue'
import BudgetEditPopup from '@/components/Budget/BudgetEditPopup.vue'
import SavingsConfigPopup from '@/components/Budget/SavingsConfigPopup.vue'

const activeTab = ref(BudgetCategory.Expense)
const budgetEditRef = ref(null)
const savingsConfigRef = ref(null)

const expenseBudgets = ref([])
const incomeBudgets = ref([])
const savingsBudgets = ref([])

const activeTabTitle = computed(() => {
  if (activeTab.value === BudgetCategory.Expense) return '使用'
  return '达成'
})

const overallStats = computed(() => {
  const allBudgetsList = [...expenseBudgets.value, ...incomeBudgets.value, ...savingsBudgets.value]
  
  const getStats = (statType) => {
    const category = activeTab.value
    // 获取当前 tab 类别下所有未停止的预算
    const relevant = allBudgetsList.filter(b => b.category === category && !b.isStopped)
    
    if (relevant.length === 0) return { rate: '0.0', current: 0, limit: 0, count: 0 }
    
    let totalC = 0
    let totalL = 0
    
    relevant.forEach(b => {
      // 限额折算
      let itemLimit = b.limit || 0
      if (statType === BudgetPeriodType.Month && b.type === BudgetPeriodType.Year) {
        itemLimit = b.limit / 12
      } else if (statType === BudgetPeriodType.Year && b.type === BudgetPeriodType.Month) {
        itemLimit = b.limit * 12
      }
      totalL += itemLimit

      // 当前值累加
      // 注意：由于前端 items 只有当前周期的 current，如果是跨周期统计，这里只能视为一种“参考”或“当前进度”
      if (b.type === statType) {
        totalC += (b.current || 0)
      } else {
        // 如果周期不匹配（例如在年度统计中统计月度预算），
        // 只有在当前是 1 月的情况下，月度支出才等同于年度累计。
        // 为保持统计的严谨性，这里仅在类型匹配时计入 Current，或者根据业务需求进行估计。
        // 但为了解决用户反馈的“统计不对”，我们需要把所有的匹配项都算进来。
        if (statType === BudgetPeriodType.Year) {
          // 在年度视图下，月度预算我们也计入它当前的 current（作为它对年度目前的贡献）
          totalC += (b.current || 0)
        }
        // 月度视图下，年度预算的 current 无法直接折算，此处暂不计入支出。
      }
    })
    
    const rate = totalL > 0 ? (totalC / totalL) * 100 : 0
    return {
      rate: rate.toFixed(1),
      current: totalC,
      limit: totalL,
      count: relevant.length
    }
  }

  return {
    month: getStats(BudgetPeriodType.Month),
    year: getStats(BudgetPeriodType.Year)
  }
})

const getValueClass = (rate) => {
  const numRate = parseFloat(rate)
  if (numRate === 0) return ''
  if (activeTab.value === BudgetCategory.Expense) {
    if (numRate >= 100) return 'expense'
    if (numRate >= 80) return 'warning'
    return 'income'
  } else {
    if (numRate >= 100) return 'income'
    if (numRate >= 80) return 'warning'
    return 'expense'
  }
}

const fetchBudgetList = async () => {
  try {
    const res = await getBudgetList()
    if (res.success) {
      const data = res.data || []
      expenseBudgets.value = data.filter(b => b.category === BudgetCategory.Expense)
      incomeBudgets.value = data.filter(b => b.category === BudgetCategory.Income)
      savingsBudgets.value = data.filter(b => b.category === BudgetCategory.Savings)
    }
  } catch (err) {
    console.error('加载预算列表失败', err)
  }
}

onMounted(async () => {
  try {
    await fetchBudgetList()
  } catch (err) {
    console.error('获取初始化数据失败', err)
  }
})

const formatMoney = (val) => {
  return parseFloat(val || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

const getPeriodLabel = (type) => {
  const map = {
    [BudgetPeriodType.Month]: '本月',
    [BudgetPeriodType.Year]: '本年'
  }
  return map[type] || '周期'
}

const getProgressColor = (budget) => {
  const ratio = budget.current / budget.limit
  if (ratio >= 1) return '#ee0a24' // 危险红色
  if (ratio > 0.8) return '#ff976a' // 警告橙色
  return '#1989fa' // 正常蓝色
}

const getIncomeProgressColor = (budget) => {
  const ratio = budget.current / budget.limit
  if (ratio >= 1) return '#07c160' // 完成绿色
  return '#1989fa' // 蓝色
}

const refDateMap = {}

const handleSwitchPeriod = async (budget, direction) => {
  // 获取或初始化该预算的参考日期
  let currentRefDate = refDateMap[budget.id] || new Date()
  const date = new Date(currentRefDate)

  if (budget.type === BudgetPeriodType.Month) {
    date.setMonth(date.getMonth() + direction)
  } else if (budget.type === BudgetPeriodType.Year) {
    date.setFullYear(date.getFullYear() + direction)
  }

  try {
    const res = await getBudgetStatistics(budget.id, date.toISOString())
    if (res.success) {
      refDateMap[budget.id] = date
      // 更新当前列表中的预算对象信息
      Object.assign(budget, res.data)
    }
  } catch (err) {
    showToast('加载历史统计失败')
    console.error('加载预算历史统计失败', err)
  }
}

const handleDelete = (budget) => {
  showConfirmDialog({
    title: '确认删除',
    message: `确定要删除预算 "${budget.name}" 吗？`,
  }).then(async () => {
    try {
      const res = await deleteBudget(budget.id)
      if (res.success) {
        showToast('已删除')
        fetchBudgetList()
      }
    } catch (err) {
      showToast('删除失败')
      console.error('删除预算失败', err)
    }
  }).catch(() => {})
}

const handleToggleStop = async (budget) => {
  try {
    const res = await toggleStopBudget(budget.id)
    if (res.success) {
      showToast(budget.isStopped ? '已恢复' : '已停止')
      // 切换停止状态后刷新列表
      fetchBudgetList()
    }
  } catch (err) {
    showToast('操作失败')
    console.error('切换预算状态失败', err)
  }
}
</script>

<style scoped>
.budget-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 12px;
}

:deep(.van-tabs__content) {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:deep(.van-tab__panel) {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.budget-list {
  padding-top: 8px;
  padding-bottom: 20px;
}

.budget-list :deep(.van-swipe-cell) {
  margin: 0 12px 12px;
}

.delete-button {
  height: 100%;
}

:deep(.van-tabs__nav--card) {
  margin: 0 12px;
}
</style>
