<script setup>
import { ref, computed, onMounted } from "vue";
import Toast from "primevue/toast";
import { useToast } from "primevue/usetoast";
import { userApi } from "../../api/user";
import dayjs from "dayjs";

const toast = useToast();
const showRecharge = ref(false);
const selectedAmount = ref(50);
const customAmount = ref("");
const balance = ref(0);
const transactions = ref([]);
const loading = ref(false);
const paymentMethod = ref("wechat");

const displayAmount = computed(() => {
  return customAmount.value
    ? Number(customAmount.value).toFixed(2)
    : selectedAmount.value.toFixed(2);
});

const formatDate = (date) => {
  return dayjs(date).format("YYYY-MM-DD HH:mm");
};

const fetchWallet = async () => {
  try {
    const res = await userApi.getWallet();
    balance.value = res.balance || 0;
    transactions.value = res.transactions || [];
  } catch (error) {
    console.error("Failed to fetch wallet:", error);
    toast.add({
      severity: "error",
      summary: "错误",
      detail: "获取钱包信息失败",
      life: 3000,
    });
  }
};

const handleRecharge = async () => {
  const amount = Number(displayAmount.value);
  if (!amount || amount <= 0) {
    toast.add({
      severity: "warn",
      summary: "提示",
      detail: "请输入有效的充值金额",
      life: 3000,
    });
    return;
  }

  loading.value = true;
  try {
    await userApi.recharge({ amount: amount, method: paymentMethod.value });
    toast.add({
      severity: "success",
      summary: "成功",
      detail: "充值成功",
      life: 3000,
    });
    showRecharge.value = false;
    fetchWallet(); // Refresh balance
  } catch (error) {
    console.error("Recharge failed:", error);
    toast.add({
      severity: "error",
      summary: "错误",
      detail: error.message || "充值失败",
      life: 3000,
    });
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchWallet();
});
</script>

<template>
  <div
    class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8"
  >
    <h1 class="text-2xl font-bold text-slate-900 mb-8">我的钱包</h1>

    <!-- Balance Card -->
    <div
      class="bg-gradient-to-r from-blue-600 to-blue-500 rounded-2xl p-8 text-white shadow-lg mb-10 relative overflow-hidden"
    >
      <!-- Background Decor -->
      <div
        class="absolute -right-10 -bottom-10 w-48 h-48 bg-white/10 rounded-full blur-2xl"
      ></div>

      <div
        class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-6"
      >
        <div>
          <div class="text-blue-100 text-sm font-medium mb-1">
            账户余额 (元)
          </div>
          <div class="text-5xl font-bold font-mono">
            {{ balance.toFixed(2) }}
          </div>
        </div>
        <button
          @click="showRecharge = !showRecharge"
          class="px-8 py-3 bg-white text-blue-600 font-bold rounded-full shadow-sm hover:bg-blue-50 transition-all active:scale-95 cursor-pointer"
        >
          立即充值
        </button>
      </div>
    </div>

    <!-- Recharge Section (Collapsible) -->
    <div
      v-if="showRecharge"
      class="mb-10 p-6 bg-slate-50 rounded-xl border border-slate-200 animate-in fade-in slide-in-from-top-4 duration-300"
    >
      <h3 class="font-bold text-slate-900 mb-4">充值金额</h3>
      <div class="grid grid-cols-3 sm:grid-cols-4 gap-4 mb-6">
        <button
          v-for="amount in [10, 30, 50, 100, 200, 500]"
          :key="amount"
          @click="
            selectedAmount = amount;
            customAmount = '';
          "
          class="h-14 rounded-lg border-2 font-bold text-lg transition-all cursor-pointer active:scale-95"
          :class="
            selectedAmount === amount
              ? 'border-blue-600 bg-blue-50 text-blue-600'
              : 'border-slate-200 bg-white text-slate-600 hover:border-blue-300'
          "
        >
          {{ amount }}元
        </button>
        <div class="col-span-2 sm:col-span-2 relative">
          <input
            v-model="customAmount"
            @focus="selectedAmount = null"
            type="number"
            placeholder="自定义金额"
            class="w-full h-14 pl-4 pr-4 rounded-lg border-2 border-slate-200 focus:border-blue-600 focus:outline-none text-lg font-bold transition-colors"
          />
        </div>
      </div>

      <h3 class="font-bold text-slate-900 mb-4">支付方式</h3>
      <div class="flex gap-4 mb-8">
        <button
          @click="paymentMethod = 'wechat'"
          class="flex items-center gap-2 px-6 py-3 border-2 rounded-lg font-medium cursor-pointer active:scale-95 transition-transform"
          :class="
            paymentMethod === 'wechat'
              ? 'border-blue-600 bg-blue-50 text-blue-700'
              : 'border-slate-200 text-slate-600 hover:bg-white hover:border-slate-300'
          "
        >
          <i class="pi pi-wechat text-xl text-green-600"></i> 微信支付
        </button>
        <button
          @click="paymentMethod = 'alipay'"
          class="flex items-center gap-2 px-6 py-3 border-2 rounded-lg font-medium cursor-pointer active:scale-95 transition-transform"
          :class="
            paymentMethod === 'alipay'
              ? 'border-blue-600 bg-blue-50 text-blue-700'
              : 'border-slate-200 text-slate-600 hover:bg-white hover:border-slate-300'
          "
        >
          <i class="pi pi-alipay text-xl text-blue-500"></i> 支付宝
        </button>
      </div>

      <button
        @click="handleRecharge"
        :disabled="loading"
        class="w-full py-4 bg-blue-600 text-white rounded-xl font-bold text-lg hover:bg-blue-700 transition-all shadow-lg shadow-blue-200 cursor-pointer active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
      >
        <i v-if="loading" class="pi pi-spin pi-spinner mr-2"></i>
        确认支付 ¥ {{ displayAmount }}
      </button>
    </div>

    <!-- Transaction History -->
    <div>
      <h3 class="text-xl font-bold text-slate-900 mb-6 flex items-center gap-2">
        <i class="pi pi-history text-slate-400"></i> 交易明细
      </h3>

      <div v-if="transactions.length > 0" class="space-y-4">
        <div
          v-for="item in transactions"
          :key="item.id"
          class="flex items-center justify-between p-4 border-b border-slate-50 hover:bg-slate-50 rounded-lg transition-colors"
        >
          <div class="flex items-center gap-4">
            <div
              class="w-10 h-10 rounded-full flex items-center justify-center"
              :class="
                item.type === 'income'
                  ? 'bg-green-100 text-green-600'
                  : 'bg-slate-100 text-slate-500'
              "
            >
              <i
                class="pi"
                :class="item.type === 'income' ? 'pi-plus' : 'pi-minus'"
              ></i>
            </div>
            <div>
              <div class="font-bold text-slate-900">
                {{ item.title || (item.type === "income" ? "充值" : "消费") }}
              </div>
              <div class="text-xs text-slate-400">
                {{ formatDate(item.date) }}
              </div>
            </div>
          </div>
          <div
            class="font-mono font-bold text-lg"
            :class="
              item.type === 'income' ? 'text-green-600' : 'text-slate-900'
            "
          >
            {{ item.type === "income" ? "+" : "-" }}
            {{ item.amount.toFixed(2) }}
          </div>
        </div>
      </div>
      <div v-else class="text-center py-10 text-slate-400">暂无交易记录</div>
    </div>

    <Toast />
  </div>
</template>
