<template>
    <scroll-view scroll-y class="scroll-container theme-light">
        <view class="member-page">
            <!-- Header: 用户信息区 -->
            <view class="profile-header">
                <view class="profile-header__toolbar" :style="toolbarStyle">
                    <view class="profile-header__nav">
                        <view class="profile-header__nav-left">
                            <image
                                class="profile-header__icon-bell"
                                src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png"
                                mode="aspectFit"
                            />
                            <image
                                class="profile-header__icon-settings"
                                src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/settings.png"
                                mode="aspectFit"
                            />
                        </view>
                        <text class="profile-header__title">个人中心</text>
                        <view class="profile-header__nav-right" :style="navRightStyle"></view>
                    </view>
                </view>
                <view class="profile-header__toolbar-spacer" :style="toolbarSpacerStyle"></view>
                <view class="profile-header__hero">
                    <view class="profile-header__inner">
                        <view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goUserInfo">
                            <view class="profile-header__user-inner">
                                <view class="profile-header__avatar-wrap">
                                    <view class="profile-header__avatar-ring">
                                        <image
                                            class="profile-header__avatar"
                                            :key="userInfo.avatar"
                                            :src="displayAvatar"
                                            mode="aspectFill"
                                        />
                                    </view>
                                    <view class="profile-header__avatar-badge">
                                        <image
                                            class="profile-header__avatar-badge-icon"
                                            src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/camera.png"
                                            mode="aspectFit"
                                        />
                                    </view>
                                </view>
                                <view class="profile-header__user-meta">
                                    <view class="profile-header__user-meta-inner">
                                        <text class="profile-header__name">{{ userInfo.name }}</text>
                                        <text class="profile-header__phone">{{ userInfo.phone }}</text>
                                        <view class="profile-header__badge">
                                            <image
                                                class="profile-header__badge-icon"
                                                src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/crown0.png"
                                                mode="aspectFit"
                                            />
                                            <text class="profile-header__level">{{ userInfo.memberLevel }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="profile-header__stats">
                            <view class="profile-header__stats-inner">
                                <view class="profile-header__stat">
                                    <view class="profile-header__stat-inner">
                                        <text class="profile-header__stat-value">{{ stats.checkInCount }}</text>
                                        <text class="profile-header__stat-label">累计签到</text>
                                    </view>
                                </view>
                                <view class="profile-header__stat-divider"></view>
                                <view class="profile-header__stat">
                                    <view class="profile-header__stat-inner">
                                        <text class="profile-header__stat-value">{{ stats.trainingHours }}</text>
                                        <text class="profile-header__stat-label">训练时长</text>
                                    </view>
                                </view>
                                <view class="profile-header__stat-divider"></view>
                                <view class="profile-header__stat">
                                    <view class="profile-header__stat-inner">
                                        <text class="profile-header__stat-value">{{ stats.pointsBalance }}</text>
                                        <text class="profile-header__stat-label">累计积分</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="member-page__body">
                <view class="member-page__sections">
                    <!-- 快过期会员卡提醒 -->
                    <view class="expiring-cards-section" v-if="expiringCards.length > 0">
                        <view class="expiring-cards__inner">
                            <view class="expiring-cards__header">
                                <view class="expiring-cards__header-inner">
                                    <view class="expiring-cards__title-row">
                                        <image class="expiring-cards__warn-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock1.png" mode="aspectFit" />
                                        <text class="expiring-cards__title">会员卡即将到期</text>
                                    </view>
                                    <view class="expiring-cards__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goMemberCard">
                                        <text class="expiring-cards__link-text">查看全部</text>
                                        <image class="expiring-cards__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright12.png" mode="aspectFit" />
                                    </view>
                                </view>
                            </view>
                            <view class="expiring-cards__list">
                                <view
                                    v-for="(card, index) in expiringCards"
                                    :key="card.id || index"
                                    class="expiring-card-item"
                                    hover-class="mi-tap-row--hover"
                                    :hover-stay-time="150"
                                    @tap="goMemberCard"
                                >
                                    <view class="expiring-card-item__inner">
                                        <view class="expiring-card-item__icon-wrap">
                                            <image class="expiring-card-item__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png" mode="aspectFit" />
                                        </view>
                                        <view class="expiring-card-item__info">
                                            <text class="expiring-card-item__name">{{ card.name }}</text>
                                            <text class="expiring-card-item__validity">{{ card.validity }}</text>
                                        </view>
                                        <view class="expiring-card-item__days">
                                            <text class="expiring-card-item__days-num">{{ computeRemainingDays(card.validityEnd) }}</text>
                                            <text class="expiring-card-item__days-unit">天后到期</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 会员卡区域 -->
                    <view class="member-card-section">
                        <view class="member-card-section__inner">
                            <view class="member-card-section__head">
                                <view class="member-card-section__head-inner">
                                    <text class="member-card-section__title">我的会员卡</text>
                                    <view class="member-card-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goMemberCard">
                                        <text class="member-card-section__link-text">查看全部</text>
                                        <image class="member-card-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright12.png" mode="aspectFit" />
                                    </view>
                                </view>
                            </view>
                            <view class="member-card-preview" hover-class="mi-tap-card--hover" :hover-stay-time="150" @tap="goMemberCard">
                                <view class="member-card-preview__inner">
                                    <view class="member-card-preview__head">
                                        <view class="member-card-preview__head-inner">
                                            <view class="member-card-preview__type-row">
                                                <view class="member-card-preview__icon-wrap">
                                                    <view class="member-card-preview__icon-border">
                                                        <view class="member-card-preview__icon-bg"></view>
                                                        <view class="member-card-preview__icon-stroke"></view>
                                                    </view>
                                                    <image class="member-card-preview__icon-line" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Line_2_468.png" mode="aspectFill" />
                                                </view>
                                                <text class="member-card-preview__name">{{ cardInfo.name }}</text>
                                            </view>
                                            <view class="member-card-preview__tag">
                                                <text class="member-card-preview__tag-text">{{ cardInfo.detailTag || '详情' }}</text>
                                            </view>
                                        </view>
                                    </view>
                                    <text class="member-card-preview__expire">{{ cardInfo.expireDate }}</text>
                                    <view class="member-card-preview__footer">
                                        <view class="member-card-preview__footer-inner">
                                            <view class="member-card-preview__days">
                                                <text class="member-card-preview__days-num">{{ cardInfo.remainingDays }}</text>
                                                <text class="member-card-preview__days-unit">天剩余</text>
                                            </view>
                                            <view class="member-card-preview__renew" hover-class="mi-tap-btn--hover" :hover-stay-time="150" @tap.stop="onRenewCard">
                                                <text class="member-card-preview__renew-text">续费</text>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="member-card-tip">
                                <view class="member-card-tip__inner">
                                    <view class="member-card-tip__content">
                                        <image class="member-card-tip__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock1.png" mode="aspectFit" />
                                        <text class="member-card-tip__text">{{ cardInfo.tip }}</text>
                                    </view>
                                </view>
                                <view class="member-card-tip__border"></view>
                            </view>
                        </view>
                    </view>

                    <!-- 快捷操作区域 -->
                    <view class="quick-actions">
                        <view class="quick-actions__inner">
                            <view class="quick-actions__grid">
                                <view class="quick-actions__grid-inner">
                                    <view v-for="item in quickActionsRow1" :key="item.key" class="quick-actions__item" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="onQuickAction(item.key)">
                                        <view class="quick-actions__item-inner">
                                            <view class="quick-actions__icon-wrap">
                                                <view class="quick-actions__icon-wrap-inner">
                                                    <view v-if="item.key === 'booking'" class="quick-actions__icon">
                                                        <image class="quick-actions__icon-part" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_490.png" mode="aspectFit" />
                                                        <image class="quick-actions__icon-part" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_491.png" mode="aspectFit" />
                                                        <view class="quick-actions__border-wrap">
                                                            <view class="quick-actions__rect"></view>
                                                            <view class="quick-actions__border"></view>
                                                        </view>
                                                        <image class="quick-actions__icon-part" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_493.png" mode="aspectFit" />
                                                        <image class="quick-actions__icon-part" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_494.png" mode="aspectFit" />
                                                    </view>
                                                    <image v-else class="quick-actions__icon-img" :src="item.icon" mode="aspectFit" />
                                                </view>
                                            </view>
                                            <text :class="item.textClass">{{ item.label }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="quick-actions__divider"></view>
                            <view class="quick-actions__grid">
                                <view class="quick-actions__grid-inner">
                                    <view v-for="item in quickActionsRow2" :key="item.key" class="quick-actions__item" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="onQuickAction(item.key)">
                                        <view class="quick-actions__item-inner">
                                            <view class="quick-actions__icon-wrap">
                                                <view class="quick-actions__icon-wrap-inner">
                                                    <image class="quick-actions__icon-img" :src="item.icon" mode="aspectFit" />
                                                </view>
                                            </view>
                                            <text :class="item.textClass">{{ item.label }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 预约课程区域 -->
                    <view class="booking-section">
                        <view class="booking-section__inner">
                            <view class="booking-section__header">
                                <view class="booking-section__header-inner">
                                    <text class="booking-section__title">我的预约</text>
                                    <view class="booking-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goBooking">
                                        <text class="booking-section__view-all">预约记录</text>
                                        <image class="booking-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright4.png" mode="aspectFit" />
                                    </view>
                                </view>
                            </view>
                            <view v-for="item in bookingPreview" :key="item.id" class="booking-section__item" hover-class="mi-tap-row--hover" :hover-stay-time="150" @tap="goBooking">
                                <view class="booking-section__item-inner">
                                    <view class="booking-section__date">
                                        <view class="booking-section__date-inner">
                                            <text class="booking-section__num">{{ item.dateDay }}</text>
                                            <text class="booking-section__date-sub">{{ item.dateMonth }}</text>
                                        </view>
                                    </view>
                                    <view class="booking-section__content">
                                        <view class="booking-section__content-inner">
                                            <text class="booking-section__desc">{{ item.desc }}</text>
                                            <view class="booking-section__meta">
                                                <view class="booking-section__meta-inner">
                                                    <image class="booking-section__icon-coach" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/user2.png" mode="aspectFit" />
                                                    <text class="booking-section__coach">教练：{{ item.coach }}</text>
                                                    <image class="booking-section__icon-location" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin1.png" mode="aspectFit" />
                                                    <text class="booking-section__text">{{ item.location }}</text>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                    <view class="booking-section__status-wrap">
                                        <view class="booking-section__status-badge" :class="'booking-section__status-badge--' + item.status">
                                            <text class="booking-section__status-text" :class="{ 'booking-section__status-text--pending': item.status === 'pending' }">{{ item.statusLabel }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view v-if="!bookingPreview.length" class="booking-section__empty">
                                <text class="booking-section__empty-text">暂无进行中的预约</text>
                            </view>
                        </view>
                    </view>

                    <!-- 签到记录区域 -->
                    <view class="checkin-section">
                        <view class="checkin-section__inner">
                            <view class="checkin-section__header">
                                <view class="checkin-section__header-inner">
                                    <text class="checkin-section__title">签到记录</text>
                                    <view class="checkin-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goCheckInHistory">
                                        <text class="checkin-section__view-all">查看全部</text>
                                        <image class="checkin-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright2.png" mode="aspectFit" />
                                    </view>
                                </view>
                            </view>
                            <view class="checkin-section__list">
                                <view class="checkin-section__list-inner">
                                    <view v-for="(item, index) in checkIns" :key="item.id" class="checkin-section__row">
                                        <view v-if="index > 0" class="checkin-section__divider"></view>
                                        <view class="checkin-section__item" hover-class="mi-tap-row--hover" :hover-stay-time="150" @tap="onCheckInTap(item)">
                                            <view class="checkin-section__item-inner">
                                                <view class="checkin-section__dot" :class="'checkin-section__dot--' + item.tagTheme"></view>
                                                <view class="checkin-section__content">
                                                    <view class="checkin-section__content-inner">
                                                        <text class="checkin-section__desc">{{ item.title }}</text>
                                                        <text class="checkin-section__text">{{ item.time }}</text>
                                                    </view>
                                                </view>
                                                <view class="checkin-section__tag-badge" :class="'checkin-section__tag-badge--' + item.tagTheme">
                                                    <text class="checkin-section__tag-text" :class="'checkin-section__tag-text--' + item.tagTheme">{{ item.tag }}</text>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 体测报告区域 -->
                    <view class="body-report-section">
                        <view class="body-report-section__inner">
                            <view class="body-report-section__header">
                                <view class="body-report-section__header-inner">
                                    <text class="body-report-section__title">体测报告</text>
                                    <view class="body-report-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goBodyTestHistory">
                                        <text class="body-report-section__history-link">历史记录</text>
                                        <image class="body-report-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright3.png" mode="aspectFit" />
                                    </view>
                                </view>
                            </view>
                            <view class="body-report-section__card">
                                <view class="body-report-section__card-inner">
                                    <view class="body-report-section__card-head">
                                        <view class="body-report-section__card-head-inner">
                                            <text class="body-report-section__desc">最新数据 · {{ bodyReport.date }}</text>
                                            <view class="body-report-section__view-btn" hover-class="mi-tap-btn--hover" :hover-stay-time="150" @tap="goBodyReport">
                                                <image class="body-report-section__view-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/filetext.png" mode="aspectFit" />
                                                <text class="body-report-section__view-report">查看报告</text>
                                            </view>
                                        </view>
                                    </view>
                                    <view class="body-report-section__metrics">
                                        <view class="body-report-section__metrics-inner">
                                            <view class="body-report-section__metric">
                                                <view class="body-report-section__metric-inner">
                                                    <text class="body-report-section__text">{{ bodyReport.weight }}</text>
                                                    <text class="body-report-section__metric-value">体重(kg)</text>
                                                </view>
                                            </view>
                                            <view class="body-report-section__metric-divider"></view>
                                            <view class="body-report-section__metric">
                                                <view class="body-report-section__metric-inner">
                                                    <text class="body-report-section__text-2">{{ bodyReport.bmi }}</text>
                                                    <text class="body-report-section__text-3">BMI</text>
                                                </view>
                                            </view>
                                            <view class="body-report-section__metric-divider"></view>
                                            <view class="body-report-section__metric">
                                                <view class="body-report-section__metric-inner">
                                                    <text class="body-report-section__text-4">{{ bodyReport.bodyFat }}</text>
                                                    <text class="body-report-section__metric-label">体脂率</text>
                                                </view>
                                            </view>
                                            <view class="body-report-section__metric-divider"></view>
                                            <view class="body-report-section__metric">
                                                <view class="body-report-section__metric-inner">
                                                    <text class="body-report-section__num">{{ bodyReport.bmr }}</text>
                                                    <text class="body-report-section__text-5">BMR</text>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                    <view class="body-report-section__summary">
                                        <view class="body-report-section__summary-inner">
                                            <view class="body-report-section__goal">
                                                <image class="body-report-section__goal-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/target.png" mode="aspectFit" />
                                                <text class="body-report-section__goal-text">状态：{{ bodyReport.status }}</text>
                                            </view>
                                            <view class="body-report-section__change">
                                                <image class="body-report-section__change-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/trendingdown.png" mode="aspectFit" />
                                                <text class="body-report-section__metric-value-2">较上次 {{ bodyReport.change }}</text>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 优惠券&积分区域 -->
                    <view class="coupon-section">
                        <view class="coupon-section__inner">
                            <view class="coupon-section__header">
                                <view class="coupon-section__header-inner">
                                    <text class="coupon-section__title">优惠券 & 积分</text>
                                    <view class="coupon-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goCoupons">
                                        <text class="coupon-section__view-all">更多详情</text>
                                        <image class="coupon-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright5.png" mode="aspectFit" />
                                    </view>
                                </view>
                            </view>
                            <view class="coupon-section__cards">
                                <view class="coupon-section__cards-inner">
                                    <view class="coupon-section__coupon" hover-class="mi-tap-card--hover" :hover-stay-time="150" @tap="goCoupons">
                                        <view class="coupon-section__coupon-inner">
                                            <text class="coupon-section__amount">{{ couponPoints.amount }}</text>
                                            <text class="coupon-section__desc">{{ couponPoints.couponDesc }}</text>
                                            <view class="coupon-section__coupon-status">
                                                <text class="coupon-section__status">{{ couponPoints.couponAction }}</text>
                                            </view>
                                        </view>
                                    </view>
                                    <view class="coupon-section__points" hover-class="mi-tap-card--hover" :hover-stay-time="150" @tap="goPoints">
                                        <view class="coupon-section__points-inner">
                                            <text class="coupon-section__num">{{ couponPoints.points }}</text>
                                            <text class="coupon-section__points-label">{{ couponPoints.pointsLabel }}</text>
                                            <view class="coupon-section__points-action">
                                                <text class="coupon-section__text">{{ couponPoints.pointsAction }}</text>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 推荐奖励区域 -->
                    <view class="referral-section">
                        <view class="referral-section__inner">
                            <view class="referral-section__header">
                                <text class="referral-section__title">推荐奖励</text>
                                <view class="referral-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goReferral">
                                    <text class="referral-section__records-link">规则说明</text>
                                    <image class="referral-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright11.png" mode="aspectFit" />
                                </view>
                            </view>
                            <view class="referral-section__code-row">
                                <view class="referral-section__code-box">
                                    <text class="referral-section__code-label">我的邀请码</text>
                                    <text class="referral-section__code-value">{{ referral.code }}</text>
                                </view>
                                <view class="referral-section__copy-btn" hover-class="mi-tap-btn--hover" :hover-stay-time="150" @tap="copyReferralCode">
                                    <view class="referral-section__copy-icon">
                                        <view class="referral-section__copy-sheet referral-section__copy-sheet--back"></view>
                                        <view class="referral-section__copy-sheet referral-section__copy-sheet--front"></view>
                                    </view>
                                    <text class="referral-section__copy-text">复制</text>
                                </view>
                            </view>
                            <view class="referral-section__stats">
                                <view class="referral-section__stat">
                                    <text class="referral-section__stat-num referral-section__stat-num--orange">{{ referral.invited }}</text>
                                    <text class="referral-section__stat-label">已推荐</text>
                                </view>
                                <view class="referral-section__stat-divider"></view>
                                <view class="referral-section__stat">
                                    <text class="referral-section__stat-num referral-section__stat-num--green">{{ referral.registered }}</text>
                                    <text class="referral-section__stat-label">已注册</text>
                                </view>
                                <view class="referral-section__stat-divider"></view>
                                <view class="referral-section__stat">
                                    <text class="referral-section__stat-num referral-section__stat-num--amber">{{ referral.purchased }}</text>
                                    <text class="referral-section__stat-label">已购课</text>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 设置区域 -->
                    <view class="settings-section">
                        <view class="settings-section__inner">
                            <text class="settings-section__title">设置与安全</text>
                            <view class="settings-section__list">
                                <view class="settings-section__list-inner">
                                    <view v-for="(item, index) in settingsItems" :key="item.key">
                                        <view v-if="index > 0" class="settings-section__item-divider"></view>
                                        <view class="settings-section__item" :class="{ 'settings-section__item--tall': item.subtitle }" hover-class="mi-tap-row--hover" :hover-stay-time="150" @tap="onSetting(item.key)">
                                            <view class="settings-section__item-inner">
                                                <view class="settings-section__item-icon-wrap" :class="item.iconWrapClass">
                                                    <image class="settings-section__item-icon" :src="item.icon" mode="aspectFit" />
                                                </view>
                                                <view v-if="item.subtitle" class="settings-section__item-texts">
                                                    <text class="settings-section__item-title">{{ item.label }}</text>
                                                    <text class="settings-section__item-desc">{{ item.subtitle }}</text>
                                                </view>
                                                <text v-else class="settings-section__item-label" :class="item.labelClass">{{ item.label }}</text>
                                                <image class="settings-section__item-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright10.png" mode="aspectFit" />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 退出登录 -->
                    <view class="logout-section">
                        <view class="logout-section__btn" hover-class="mi-tap-btn--hover" :hover-stay-time="150" @tap="handleLogout">
                            <image class="logout-section__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/logout.png" mode="aspectFit" />
                            <text class="logout-section__text">退出登录</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>

    <!-- 固定 TabBar -->
    <view class="tabbar-fixed">
        <TabBar />
    </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
import { getCenterPageData, renewMemberCard, computeRemainingDays, saveMemberStore } from '@/common/memberInfo/store.js'
import { getMemberId } from '@/utils/request.js'
import { getMyMemberCards } from '@/api/main.js'
import TabBar from '@/components/TabBar.vue'

// 页面数据
const userInfo = ref({})
const stats = ref({})
const cardInfo = ref({})
const expiringCards = ref([])
const bookingPreview = ref([])
const checkIns = ref([])
const bodyReport = ref({})
const couponPoints = ref({})
const referral = ref({})

// 导航栏样式
const toolbarStyle = ref({})
const toolbarSpacerStyle = ref({})
const navRightStyle = ref({})

// 快捷操作配置
const quickActionsRow1 = ref([
    { key: 'booking', label: '预约课程', textClass: 'quick-actions__title', icon: '' },
    { key: 'bodyTest', label: '智能体测', textClass: 'quick-actions__title-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin2.png' },
    { key: 'bodyReport', label: '体测报告', textClass: 'quick-actions__title-3', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png' },
    { key: 'trainReport', label: '训练报告', textClass: 'quick-actions__coach', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png' }
])

const quickActionsRow2 = ref([
    { key: 'coupon', label: '我的优惠券', textClass: 'quick-actions__text', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png' },
    { key: 'points', label: '我的积分', textClass: 'quick-actions__points-desc', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/star.png' },
    { key: 'referral', label: '邀请好友', textClass: 'quick-actions__title-4', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/share2.png' },
    { key: 'course', label: '我的课程', textClass: 'quick-actions__text-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/play.png' }
])

// 设置项配置
const settingsItems = ref([
    {
        key: 'notify',
        label: '通知设置',
        icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png',
        iconWrapClass: ''
    },
    {
        key: 'password',
        label: '修改密码',
        icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_727.png',
        iconWrapClass: 'settings-section__item-icon-wrap--blue'
    },
    {
        key: 'privacy',
        label: '隐私政策',
        icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/shield.png',
        iconWrapClass: 'settings-section__item-icon-wrap--green'
    },
    {
        key: 'nfc',
        label: 'NFC 门禁卡',
        subtitle: '已绑定',
        icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png',
        iconWrapClass: ''
    },
    {
        key: 'delete',
        label: '注销账户',
        icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/userx.png',
        iconWrapClass: 'settings-section__item-icon-wrap--red',
        labelClass: 'settings-section__item-label--danger'
    }
])

// 计算属性
const displayAvatar = computed(() => {
    return userInfo.value.avatar || 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/AvatarEditWrap.png'
})

// 方法
function syncNavSafeArea() {
    try {
        const sys = uni.getSystemInfoSync()
        const statusBarHeight = sys.statusBarHeight || 0
        const navHeight = 44
        const menu = uni.getMenuButtonBoundingClientRect?.()

        toolbarStyle.value = {
            paddingTop: `${statusBarHeight}px`
        }

        toolbarSpacerStyle.value = {
            height: `${statusBarHeight + navHeight}px`
        }

        if (menu && menu.width) {
            const capsuleGap = sys.windowWidth - menu.left + 8
            navRightStyle.value = {
                width: `${capsuleGap}px`,
                minWidth: `${capsuleGap}px`
            }
        }
    } catch (e) {
        toolbarSpacerStyle.value = { height: '44px' }
    }
}

function refreshFromStore() {
    const store = loadMemberStore()
    const pageData = getCenterPageData(store)
    userInfo.value = pageData.userInfo
    stats.value = pageData.stats
    cardInfo.value = pageData.cardInfo
    expiringCards.value = pageData.expiringCards || []
    bookingPreview.value = pageData.bookingPreview
    checkIns.value = pageData.checkIns
    bodyReport.value = pageData.bodyReport
    couponPoints.value = pageData.couponPoints
    referral.value = pageData.referral
}

async function refreshCardsFromServer() {
    const memberId = getMemberId()
    if (!memberId) return

    try {
        const res = await getMyMemberCards(memberId)
        let cards = []
        if (Array.isArray(res)) {
            cards = res
        } else if (res.code === 200 && res.data) {
            cards = res.data
        } else if (Array.isArray(res.data)) {
            cards = res.data
        }

        if (cards.length > 0) {
            const allCards = cards.map(myCard => {
                const cardName = myCard.memberCardName || myCard.cardName || myCard.name || `会员卡#${myCard.memberCardId || myCard.id}`
                const validityEnd = myCard.validityEnd || myCard.expireTime
                const validityStart = myCard.validityStart || myCard.purchaseTime || myCard.createdAt
                return {
                    id: myCard.id,
                    name: cardName,
                    status: myCard.status || 'active',
                    validity: validityEnd ? `有效期至 ${validityEnd}` : '永久有效',
                    validityEnd: validityEnd,
                    validityStart: validityStart
                }
            })

            store.cards = allCards

            const myCard = cards[0]
            const cardName = myCard.memberCardName || myCard.cardName || myCard.name || `会员卡#${myCard.memberCardId || myCard.id}`
            const validityEnd = myCard.validityEnd || myCard.expireTime
            const validityStart = myCard.validityStart || myCard.purchaseTime || myCard.createdAt

            store.card = {
                id: myCard.id,
                name: cardName,
                status: myCard.status || 'active',
                validity: validityEnd ? `有效期至 ${validityEnd}` : '永久有效',
                validityEnd: validityEnd,
                validityStart: validityStart
            }
            store.cardInfo = {
                expireDate: validityEnd ? `有效期至 ${validityEnd}` : '永久有效',
                remainingDays: computeRemainingDays(validityEnd)
            }

            saveMemberStore(store)
            refreshFromStore()
        }
    } catch (e) {
        console.error('[MemberCenter] 刷新会员卡数据失败:', e)
    }
}

function goUserInfo() {
    navigateToPage(PAGE.USER_INFO)
}

function goMemberCard() {
    navigateToPage(PAGE.MEMBER_CARD)
}

function goBooking() {
    navigateToPage(PAGE.BOOKING)
}

function goCheckInHistory() {
    navigateToPage(PAGE.CHECK_IN_HISTORY)
}

function goBodyTestHistory() {
    navigateToPage(PAGE.BODY_TEST_HISTORY)
}

function goBodyReport() {
    const id = bodyReport.value?.recordId
    const url = id ? `${PAGE.BODY_TEST_REPORT}?id=${id}` : PAGE.BODY_TEST_HISTORY
    navigateToPage(url)
}

function goCoupons() {
    navigateToPage(PAGE.COUPONS)
}

function goPoints() {
    navigateToPage(PAGE.POINTS)
}

function goReferral() {
    navigateToPage(PAGE.REFERRAL)
}

function onRenewCard() {
    uni.showModal({
        title: '续费会员卡',
        content: '确认续费 90 天？',
        success: (res) => {
            if (!res.confirm) return
            const store = loadMemberStore()
            renewMemberCard(store, 90)
            refreshFromStore()
            uni.showToast({ title: '续费成功', icon: 'success' })
        }
    })
}

function onQuickAction(type) {
    const routes = {
        booking: PAGE.COURSE_LIST,
        bodyTest: PAGE.BODY_TEST_HOME,
        bodyReport: PAGE.BODY_TEST_HISTORY,
        trainReport: PAGE.TRAIN_REPORT,
        coupon: PAGE.COUPONS,
        points: PAGE.POINTS,
        referral: PAGE.REFERRAL,
        course: PAGE.MY_COURSES
    }
    if (routes[type]) {
        navigateToPage(routes[type])
    }
}

function onCheckInTap(item) {
    uni.showModal({
        title: item.title,
        content: item.time,
        showCancel: false
    })
}

function copyReferralCode() {
    uni.setClipboardData({
        data: referral.value.code,
        success: () => {
            uni.showToast({ title: '已复制', icon: 'success' })
        }
    })
}

function onSetting(key) {
    const labels = {
        notify: '通知设置',
        password: '修改密码',
        privacy: '隐私政策',
        nfc: 'NFC 门禁卡',
        delete: '注销账户'
    }
    if (key === 'delete') {
        uni.showModal({
            title: '注销账户',
            content: '注销后数据将无法恢复，确定继续吗？',
            confirmColor: '#E74C3C'
        })
        return
    }
    if (key === 'privacy') {
        uni.showModal({
            title: '隐私政策',
            content: '我们重视您的隐私，详细政策请前往官网查看。',
            showCancel: false
        })
        return
    }
    uni.showToast({
        title: `${labels[key] || '设置'}开发中`,
        icon: 'none'
    })
}

function handleLogout() {
    uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: (res) => {
            if (res.confirm) {
                uni.showToast({ title: '已退出', icon: 'success' })
            }
        }
    })
}

onMounted(() => {
    syncNavSafeArea()
    refreshFromStore()
})

onShow(() => {
    refreshCardsFromServer()
})
</script>

<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/member-info-page.css';
@import '@/common/style/memberInfo/member-info-header.css';
@import '@/common/style/memberInfo/member-info-member-card.css';
@import '@/common/style/memberInfo/member-info-quick-actions.css';
@import '@/common/style/memberInfo/member-info-booking-list.css';
@import '@/common/style/memberInfo/member-info-check-in-list.css';
@import '@/common/style/memberInfo/member-info-body-report.css';
@import '@/common/style/memberInfo/member-info-coupon-points.css';
@import '@/common/style/memberInfo/member-info-referral.css';
@import '@/common/style/memberInfo/member-info-settings.css';
@import '@/common/style/memberInfo/member-info-logout.css';

.tabbar-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: transparent;
}

.booking-section__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.booking-section__empty-text {
    font-size: 14px;
    color: #8A99B4;
}

.expiring-cards-section {
    margin: 0 16px 12px;
    background: linear-gradient(135deg, #FFF7E6 0%, #FFE4CC 100%);
    border-radius: 16px;
    overflow: hidden;
}

.expiring-cards__inner {
    padding: 16px;
}

.expiring-cards__header {
    margin-bottom: 12px;
}

.expiring-cards__header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.expiring-cards__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.expiring-cards__warn-icon {
    width: 20px;
    height: 20px;
}

.expiring-cards__title {
    font-size: 16px;
    font-weight: 600;
    color: #D46B08;
}

.expiring-cards__link {
    display: flex;
    align-items: center;
    gap: 4px;
}

.expiring-cards__link-text {
    font-size: 13px;
    color: #D46B08;
}

.expiring-cards__link-arrow {
    width: 12px;
    height: 12px;
}

.expiring-cards__list {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 4px 0;
}

.expiring-card-item {
    padding: 12px;
}

.expiring-card-item__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.expiring-card-item__icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.expiring-card-item__icon {
    width: 24px;
    height: 24px;
}

.expiring-card-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.expiring-card-item__name {
    font-size: 14px;
    font-weight: 600;
    color: #1A202C;
}

.expiring-card-item__validity {
    font-size: 12px;
    color: #718096;
}

.expiring-card-item__days {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.expiring-card-item__days-num {
    font-size: 20px;
    font-weight: 700;
    color: #E74C3C;
}

.expiring-card-item__days-unit {
    font-size: 11px;
    color: #E74C3C;
}
</style>
