<script setup lang="ts">
/**
 * 提现管理账户信息卡
 * 模拟真实银行卡质感（炭灰金质感，非蓝紫）+ 带右上角图标的玻璃质感统计岛
 * 设计规范：fintech skeuomorphic bank card + glassmorphism stat tiles
 */
import { computed, ref } from 'vue';

import { IconifyIcon as VbenIcon } from '@vben/icons';

import { Button } from 'ant-design-vue';

import { desensitize } from '#/util/tool';

defineOptions({
  name: 'AccountInfoCard',
});

const props = defineProps<{
  /** 银行卡信息 */
  myCard: Record<string, any> | null;
  /** 是否门店账号（隐藏未确认收货冻结） */
  isStoreUser: boolean;
  /** 是否平台账号（展示累计代付手续费） */
  isPlatformUser: boolean;
  balance: number;
  pendingEarnings: number;
  totalEarnings: number;
  withdrawnAmount: number;
  withdrawnFrozenAmount: number;
  frozenAmount: number;
  /** 累计代付手续费（平台 charge） */
  fee: number;
}>();

const emit = defineEmits<{
  apply: [];
  editCard: [];
  refresh: [];
}>();

/** 鼠标在银行卡上的相对位置（用于光泽跟随），-1 表示未进入 */
const glowX = ref(-1);
const glowY = ref(-1);

/** 尊重用户的动效偏好（accessibility: prefers-reduced-motion） */
const prefersReduced = ref(false);
if (typeof window !== 'undefined' && window.matchMedia) {
  const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
  prefersReduced.value = mq.matches;
}

function onCardMove(e: MouseEvent) {
  if (prefersReduced.value) return;
  const el = e.currentTarget as HTMLElement;
  const rect = el.getBoundingClientRect();
  glowX.value = e.clientX - rect.left;
  glowY.value = e.clientY - rect.top;
}

function onCardLeave() {
  glowX.value = -1;
  glowY.value = -1;
}

/** 主体展示名：优先卡上用户名，再回落到门店/供应商 */
const subjectName = computed(() => {
  const card = props.myCard;
  if (!card) return '账户信息';
  return (
    card.user_name ||
    card.store?.name ||
    card.supplier?.name ||
    card.platform?.name ||
    '账户信息'
  );
});

/** 脱敏卡号，无卡时占位 */
const maskedCard = computed(() => {
  const raw = props.myCard?.bank_card;
  if (!raw) return '**** **** **** ----';
  return desensitize(String(raw), 'bankCard') || '**** **** **** ----';
});

/**
 * 组装统计岛：核心字段优先，平台额外展示累计代付手续费
 * 每项配一个 SVG iconify 图标（规范：不用 emoji），放在卡片右上角
 */
const statItems = computed(() => {
  const items: {
    key: string;
    label: string;
    value: number;
    icon: string;
    emphasize?: boolean;
  }[] = [
    {
      key: 'balance',
      label: '可提现余额',
      value: Number(props.balance || 0),
      icon: 'lucide:scale',
    },
    {
      key: 'reviewing',
      label: '审核中金额',
      value: Number(props.withdrawnFrozenAmount || 0),
      icon: 'lucide:clock',
    },
    {
      key: 'pending',
      label: '待结算收益',
      value: Number(props.pendingEarnings || 0),
      icon: 'lucide:hourglass',
    },
    {
      key: 'withdrawn',
      label: '已提现金额',
      value: Number(props.withdrawnAmount || 0),
      icon: 'lucide:check-circle',
    },
    {
      key: 'total',
      label: '累计收益',
      value: Number(props.totalEarnings || 0),
      icon: 'lucide:trending-up',
    },
  ];
  if (!props.isStoreUser) {
    items.splice(3, 0, {
      key: 'frozen',
      label: '未确认收货冻结',
      value: Number(props.frozenAmount || 0),
      icon: 'lucide:snowflake',
    });
  }
  if (props.isPlatformUser) {
    items.push({
      key: 'fee',
      label: '累计代付手续费',
      value: Number(props.fee || 0),
      icon: 'lucide:receipt',
      emphasize: true,
    });
  }
  return items;
});

/** 金额展示为两位小数 */
function formatMoney(val: number) {
  const n = Number(val || 0);
  return n.toFixed(2);
}
</script>

<template>
  <div class="account-info-card">
    <div class="card-header">
      <div class="header-title">
        <span class="title-dot" />
        {{ subjectName }} · 账户信息
      </div>
      <div class="header-actions">
        <Button type="primary" size="small" @click="emit('apply')">申请提现</Button>
        <Button size="small" @click="emit('editCard')">编辑账户</Button>
        <Button size="small" type="text" @click="emit('refresh')">
          <template #icon>
            <VbenIcon icon="lucide:refresh-cw" />
          </template>
          刷新
        </Button>
      </div>
    </div>

    <!--
      左右布局：左侧银行卡纵向撑满，右侧统计岛两列网格（平台 7 个 → 4 行，门店/供应商 5/6 个）
      响应式：窄屏折回上下，统计岛变两列
    -->
    <div class="card-layout">
      <!--
        真实银行卡质感：
        - 深炭灰底（#1a1d29 → #0d0f17），非蓝紫
        - 金色细节（芯片、品牌点、分隔线），高端卡常用配色
        - 多层：拉丝纹理 + 装饰几何 + 鼠标光泽 + 扫光
      -->
      <section
        class="bank-card"
        aria-label="银行卡信息"
        @mousemove="onCardMove"
        @mouseleave="onCardLeave"
      >
        <div class="bank-bg" />
        <div class="bank-brush" />
        <div class="bank-decorator decorator-a" />
        <div class="bank-decorator decorator-b" />
        <div
          v-if="glowX >= 0"
          class="bank-glow"
          :style="{ left: `${glowX}px`, top: `${glowY}px` }"
        />
        <div v-if="!prefersReduced" class="bank-sheen" />

        <div class="bank-content">
          <header class="bank-row bank-row--top">
            <div class="bank-brand">
              <span class="bank-chip" />
              <span class="bank-name">{{ myCard?.bank_name || '未绑定银行卡' }}</span>
            </div>
            <div class="bank-logo">
              <VbenIcon icon="lucide:credit-card" />
              <span class="bank-tag">{{ myCard?.bank_account_type_txt || '未配置' }}</span>
            </div>
          </header>

          <div class="bank-number">{{ maskedCard }}</div>

          <div class="bank-row bank-row--bottom">
            <div class="bank-meta">
              <VbenIcon class="bank-meta-icon" icon="lucide:user" />
              <span class="bank-holder">{{ myCard?.bank_user_name || '-' }}</span>
            </div>
            <span class="bank-currency">CNY</span>
          </div>

          <div v-if="myCard?.bank_no" class="bank-row bank-row--extra">
            <div class="bank-meta">
              <VbenIcon class="bank-meta-icon" icon="lucide:building-2" />
              <span class="bank-no">{{ myCard.bank_no }}</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 右侧统计岛：固定两列网格，平台 7 个 → 4 行 -->
      <div class="stats-col">
        <article
          v-for="item in statItems"
          :key="item.key"
          class="stat-island"
          :class="{ 'stat-island--fee': item.emphasize }"
          :aria-label="item.label"
        >
          <div class="stat-island-glow" />
          <!-- 右上角图标（规范：SVG 图标，固定尺寸） -->
          <VbenIcon class="stat-icon" :icon="item.icon" />
          <div class="stat-label">{{ item.label }}</div>
          <div class="stat-val">
            <span class="stat-val-prefix">¥</span>{{ formatMoney(item.value) }}
          </div>
        </article>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.account-info-card {
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--card, var(--background)));
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.header-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.title-dot {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  /* 金色，呼应银行卡金质感 */
  background: linear-gradient(180deg, #d4a73a 0%, #b88a2a 100%);
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* ===== 左右布局：左侧银行卡收紧，右侧统计岛一行四个 ===== */
.card-layout {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

/* 银行卡：左侧适中宽度，纵向撑满 */
.bank-card {
  flex: 0 0 360px;
  min-width: 0;
}

/* 统计岛列：右侧一行四个，自动折行 */
.stats-col {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

/* 窄屏：折回上下，银行卡在上 */
@media (max-width: 1199px) {
  .card-layout {
    flex-direction: column;
  }

  .bank-card {
    flex: 1 1 auto;
  }

  .stats-col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .stats-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== 银行卡：炭灰金质感（模拟真实银行卡） ===== */
.bank-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 14px;
  color: #f5f5f7;
  isolation: isolate;
  cursor: default;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow:
    0 8px 20px rgb(0 0 0 / 30%),
    0 2px 6px rgb(0 0 0 / 20%);
}

.bank-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgb(0 0 0 / 40%),
    0 4px 10px rgb(0 0 0 / 25%);
}

/* 底层：深炭灰渐变，模拟高端银行卡底色 */
.bank-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, #2a2d3a 0%, #1a1d29 45%, #0d0f17 100%);
}

/* 暗色模式：略提亮以保持对比 */
.dark .bank-bg {
  background: linear-gradient(135deg, #353846 0%, #252836 45%, #161821 100%);
}

/* 拉丝纹理（极淡），增强材质感 */
.bank-brush {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgb(255 255 255 / 0.012) 0px,
      rgb(255 255 255 / 0.012) 1px,
      transparent 1px,
      transparent 3px
    );
  pointer-events: none;
}

/* 顶部金色高光 + 底部暗影 */
.bank-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 0% 0%, rgb(212 167 58 / 14%), transparent 55%),
    radial-gradient(100% 80% at 100% 100%, rgb(0 0 0 / 35%), transparent 60%);
}

/* 装饰几何 */
.bank-decorator {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.decorator-a {
  top: -40px;
  right: -30px;
  width: 150px;
  height: 150px;
  border: 20px solid rgb(212 167 58 / 8%);
}

.decorator-b {
  bottom: -55px;
  right: 50px;
  width: 110px;
  height: 110px;
  border: 16px solid rgb(255 255 255 / 5%);
}

/* 鼠标光泽跟随（毛玻璃质感的核心） */
.bank-glow {
  position: absolute;
  width: 220px;
  height: 220px;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgb(255 255 255 / 18%) 0%,
    rgb(255 255 255 / 6%) 35%,
    transparent 70%
  );
  mix-blend-mode: screen;
  filter: blur(2px);
}

/* 周期扫光（金色，更克制） */
.bank-sheen {
  position: absolute;
  top: 0;
  left: -60%;
  z-index: 2;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgb(212 167 58 / 14%) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: bank-sheen 6s ease-in-out infinite;
}

@keyframes bank-sheen {
  0%,
  60% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}

.bank-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bank-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* 金色芯片，模拟实体卡芯片 */
.bank-chip {
  flex-shrink: 0;
  width: 24px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(135deg, #f0d27a 0%, #c89a35 50%, #a37c28 100%);
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 25%),
    inset 0 -2px 4px rgb(0 0 0 / 20%);
  position: relative;
}

/* 芯片纹理 */
.bank-chip::after {
  content: '';
  position: absolute;
  inset: 3px 4px;
  border-left: 1px solid rgb(0 0 0 / 30%);
  border-right: 1px solid rgb(0 0 0 / 30%);
}

.bank-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgb(0 0 0 / 40%);
  white-space: nowrap;
}

.bank-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d4a73a;
}

.bank-logo :deep(svg) {
  width: 16px;
  height: 16px;
}

.bank-tag {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: rgb(255 255 255 / 82%);
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(212 167 58 / 30%);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.bank-number {
  font-family: 'DIN Alternate', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-shadow: 0 1px 3px rgb(0 0 0 / 50%);
}

.bank-row--bottom,
.bank-row--extra {
  font-size: 12px;
  color: rgb(255 255 255 / 72%);
}

.bank-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.bank-meta-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: #d4a73a;
}

.bank-holder,
.bank-no {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.bank-currency {
  flex-shrink: 0;
  padding: 1px 6px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #d4a73a;
  border: 1px solid rgb(212 167 58 / 40%);
  border-radius: 4px;
}

/* ===== 统计岛：玻璃质感 + 右上角图标 + 淡荧光 ===== */
.stat-island {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    hsl(var(--primary) / 0.04),
    hsl(var(--card, var(--background)))
  );
  backdrop-filter: blur(8px);
  cursor: default;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.stat-island:hover {
  transform: translateY(-3px);
  border-color: hsl(var(--primary) / 0.4);
  box-shadow:
    0 8px 20px hsl(var(--primary) / 0.14),
    0 2px 6px rgb(0 0 0 / 6%);
}

/* 角落局部高光，强化荧光感 */
.stat-island-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 110px;
  height: 110px;
  pointer-events: none;
  background: radial-gradient(
    circle,
    hsl(var(--primary) / 0.18) 0%,
    transparent 70%
  );
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.stat-island:hover .stat-island-glow {
  opacity: 1;
}

/* 累计代付手续费：稍强荧光 + primary 色字 */
.stat-island--fee {
  border-color: hsl(var(--primary) / 0.3);
  background: linear-gradient(
    135deg,
    hsl(var(--primary) / 0.1),
    hsl(var(--card, var(--background)))
  );
}

.stat-island--fee .stat-island-glow {
  opacity: 0.85;
}

/* 右上角图标：固定 24x24，主色调 */
.stat-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  color: hsl(var(--primary) / 0.7);
  transition: color 0.2s ease;
}

.stat-island:hover .stat-icon {
  color: hsl(var(--primary));
}

.stat-island--fee .stat-icon {
  color: hsl(var(--primary));
}

.stat-label {
  position: relative;
  z-index: 1;
  margin-bottom: 6px;
  padding-right: 32px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  line-height: 1.2;
}

.stat-val {
  position: relative;
  z-index: 1;
  font-family: 'DIN Alternate', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  font-weight: 700;
  color: hsl(var(--foreground));
  line-height: 1.2;
}

.stat-val-prefix {
  margin-right: 2px;
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

.stat-island--fee .stat-val {
  color: hsl(var(--primary));
}
</style>
