<script lang='ts' setup>
import {
  alertCircleOutline,
  arrowDownOutline,
  arrowUpOutline,
  cardOutline,
  chatbubblesOutline,
  chevronForwardOutline,
  documentTextOutline,
  exitOutline,
  homeOutline,
  listOutline,
  locationOutline,
  lockClosedOutline,
  personOutline,
  settingsOutline,
  shieldCheckmarkOutline,
  walletOutline,
} from "ionicons/icons";

// 用户信息
const userInfo = ref({
  name: "周少华",
  phone: "138****1234",
  inviteCode: "ABCD1234",
  avatar: "@/assets/images/avatar.jpg",
});

// 钱包余额
const wallet = ref({
  profitBalance: 15286.50, // 收益钱包余额
  accountBalance: 32150.80, // 账户余额
});

// 我的应用列表
const myApps = ref([
  {
    id: 1,
    name: "实名认证",
    icon: shieldCheckmarkOutline,
    color: "#c32120",
    path: "/real-name",
  },
  {
    id: 2,
    name: "收货地址",
    icon: locationOutline,
    color: "#c32120",
    path: "/address",
  },
  {
    id: 3,
    name: "收款方式",
    icon: cardOutline,
    color: "#c32120",
    path: "/payment",
  },
  {
    id: 4,
    name: "在线客服",
    icon: chatbubblesOutline,
    color: "#c32120",
    path: "/customer-service",
  },
  {
    id: 5,
    name: "个人设置",
    icon: settingsOutline,
    color: "#c32120",
    path: "/settings",
  },
  {
    id: 6,
    name: "安全中心",
    icon: lockClosedOutline,
    color: "#c32120",
    path: "/security",
  },
  {
    id: 7,
    name: "资产明细",
    icon: listOutline,
    color: "#c32120",
    path: "/asset-details",
  },
]);

function handleRecharge() {
  console.log("快捷充值");
  // TODO: 实现充值功能
}

function handleWithdraw() {
  console.log("快捷提现");
  // TODO: 实现提现功能
}

function handleAppClick(app: any) {
  console.log("点击应用:", app.name);
  // TODO: 跳转到对应页面
}

function handleLogout() {
  console.log("退出登录");
  // TODO: 实现退出登录功能
}
</script>

<template>
  <ion-page>
    <ion-content>
      <!-- 顶部横幅和用户信息 -->
      <div class="relative -z-1">
        <img src="@/assets/images/profile-banner.jpg" class="h-50 w-full object-cover" alt="我的横幅">

        <div class="absolute top-10 left-5 flex items-center gap-3">
          <ion-avatar class="size-18 border-3 border-white shadow-lg">
            <img alt="用户头像" src="@/assets/images/avatar.jpg">
          </ion-avatar>
          <div>
            <div class="text-primary text-xl font-bold">
              {{ userInfo.name }}
            </div>
            <div class="text-primary text-sm font-semibold opacity-90">
              手机号：{{ userInfo.phone }}
            </div>
            <div class="text-primary text-sm font-semibold opacity-90">
              邀请码：{{ userInfo.inviteCode }}
            </div>
          </div>
        </div>
      </div>

      <div class="ion-padding">
        <!-- 钱包余额卡片 -->
        <section class="mb-4 -mt-12">
          <div class="card rounded-2xl shadow-lg p-5">
            <div class="flex items-center gap-2 mb-4">
              <ion-icon :icon="walletOutline" class="text-2xl text-[#c41e3a]" />
              <div class="text-lg font-bold text-[#1a1a1a] m-0">
                我的钱包
              </div>
            </div>

            <!-- 余额展示 -->
            <div class="grid grid-cols-2 gap-4 mb-4">
              <div class="bg-gradient-to-br from-[#fff7f0] to-[#ffe8e8] rounded-xl p-4">
                <div class="text-xs mb-1">
                  收益钱包
                </div>
                <div class="text-2xl font-bold text-[#c41e3a] mb-1">
                  ¥{{ wallet.profitBalance.toFixed(2) }}
                </div>
              </div>
              <div class="bg-gradient-to-br from-[#fff7f0] to-[#ffe8e8] rounded-xl p-4">
                <div class="text-xs mb-1">
                  账户余额
                </div>
                <div class="text-2xl font-bold text-[#c41e3a] mb-1">
                  ¥{{ wallet.accountBalance.toFixed(2) }}
                </div>
              </div>
            </div>

            <!-- 快捷操作按钮 -->
            <div class="flex gap-3">
              <ion-button
                expand="block"
                class="flex-1 recharge-btn"
                @click="handleRecharge"
              >
                <ion-icon slot="start" :icon="arrowDownOutline" />
                快捷充值
              </ion-button>
              <ion-button
                expand="block"
                class="flex-1 withdraw-btn"
                fill="outline"
                @click="handleWithdraw"
              >
                <ion-icon slot="start" :icon="arrowUpOutline" />
                快捷提现
              </ion-button>
            </div>
          </div>
        </section>

        <!-- 我的应用 -->
        <section class="my-5">
          <div class="card rounded-2xl shadow-lg p-5">
            <div class="flex items-center gap-2 mb-4">
              <ion-icon :icon="homeOutline" class="text-2xl text-[#c41e3a]" />
              <div class="text-lg font-bold text-[#1a1a1a] m-0">
                我的应用
              </div>
            </div>

            <div class="grid grid-cols-4 gap-y-5 gap-x-2">
              <div
                v-for="app in myApps"
                :key="app.id"
                class="flex flex-col items-center gap-2 cursor-pointer transition-transform active:scale-95"
                @click="handleAppClick(app)"
              >
                <div
                  class="app-item w-13 h-13 rounded-xl flex-center shadow-md"
                >
                  <ion-icon :icon="app.icon" class="text-2xl text-white" />
                </div>
                <span class="text-xs text-[#333] font-medium text-center leading-tight">{{ app.name }}</span>
              </div>
            </div>
          </div>
        </section>

        <!-- 退出登录按钮 -->
        <section class="mb-5">
          <ion-button expand="block" fill="outline" @click="handleLogout">
            <ion-icon slot="start" :icon="exitOutline" />
            安全退出登录
          </ion-button>
        </section>
      </div>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped>
.card {
  background: linear-gradient(180deg, #ffeef1, #ffffff 15%);
}
.recharge-btn {
  --background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
  --background-activated: linear-gradient(135deg, #8b1a2e 0%, #c41e3a 100%);
  --border-radius: 12px;
  --box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
  font-weight: 600;
  font-size: 14px;
  height: 44px;
  text-transform: none;
}

.withdraw-btn {
  --border-color: #c41e3a;
  --color: #c41e3a;
  --border-radius: 12px;
  --border-width: 2px;
  font-weight: 600;
  font-size: 14px;
  height: 44px;
  text-transform: none;
}

.withdraw-btn::part(native) {
  font-weight: 600;
}
.app-item {
  background: linear-gradient(135deg, rgb(249 103 102 / 93%), rgb(195, 33, 32));
}
</style>
