<template>
  <view class="container">
    <!-- 1. 自定义悬浮顶部导航栏（带安全区） -->
    <view class="header-nav" :style="{ paddingTop: topSafeArea + 'px' }">
      <view class="nav-back-btn" @click="goBack">
        <uni-icons type="left" size="20" color="#ffffff" />
      </view>
    </view>

    <!-- 2. 顶部背景大图 -->
    <view class="banner-wrapper">
      <image :src="backgroundImage || DEFAULT_BG_IMAGE" class="banner-img" mode="aspectFill"></image>
      <view class="banner-mask"></view>
    </view>

    <!-- 3. 主体内容区域（自然滚动流） -->
    <view class="main-card">
      <!-- 个人信息头部 -->
      <view class="profile-header">
        <view class="avatar-box">
          <image :src="avatar || DEFAULT_AVATAR" class="avatar-img" mode="aspectFill"></image>
        </view>
        <view class="user-meta">
          <text class="nickname">{{ nickname || '运动达人' }}</text>
          <view class="badge-tag">
            <uni-icons type="fire-filled" size="12" color="#ff6600" />
            <text class="badge-text">运动爱好者</text>
          </view>
        </view>
        <view class="edit-btn" @click="openPopup">
          <uni-icons type="compose" size="14" color="#ffffff" />
          <text class="btn-text">编辑</text>
        </view>
      </view>

      <!-- 个性签名 -->
      <view class="signature-wrapper" @click="goToEditSignature">
        <text class="signature-text">{{ signature || '点击这里，填写你的专属签名...' }}</text>
        <uni-icons type="right" size="12" color="#c0c4cc" />
      </view>

      <!-- 核心运动数据统计看板 -->
      <view class="stats-card">
        <view class="stat-item">
          <view class="stat-num-box">
            <text class="stat-num">{{ exerciseMinuteCount || 0 }}</text>
            <text class="stat-unit">min</text>
          </view>
          <text class="stat-label">运动时长</text>
        </view>

      </view>

      <!-- 运动轨迹打卡阵列 -->
      <view class="trajectory-section">
        <view class="section-header">
          <text class="section-title">运动轨迹</text>
          <text class="section-sub">记录坚持的每一个脚印</text>
        </view>

        <view class="track-grid-container">
          <!-- 星期侧栏 -->
          <view class="week-column">
            <text class="week-label" v-for="(week, idx) in WEEK_LABELS" :key="idx">
              {{ VISIBLE_WEEK_DAYS.includes(week) ? week : '' }}
            </text>
          </view>

          <!-- 右侧点阵与月份标题 -->
          <view class="dots-area">
            <!-- 月份横轴 -->
            <view class="month-row">
              <text class="month-label" v-for="(month, idx) in motionXAxis" :key="idx">
                {{ month }}
              </text>
            </view>

            <!-- 7行打卡点阵 -->
            <view class="grid-matrix">
              <view class="dot-row" v-for="(row, rowIdx) in motionMatrix" :key="rowIdx">
                <view class="dot-item" v-for="(isActive, colIdx) in row" :key="colIdx" :class="{ active: isActive }">
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作弹窗 -->
    <uni-popup ref="popup" background-color="transparent" type="bottom">
      <view class="action-sheet">
        <view class="sheet-group">
          <view class="sheet-item" @click="goToEditProfile">编辑资料</view>
          <view class="sheet-item" @click="handleChangeBg">更换背景图</view>
        </view>
        <view class="sheet-group cancel-group">
          <view class="sheet-item cancel-item" @click="handleCancel">取消</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import UserApi from '@/sheep/api/member/user.js';
import FileApi from '@/sheep/api/infra/file.js';
import { onShow } from '@dcloudio/uni-app';
import { getTopSafeArea } from '@/utils/safeArea';

// ==================== 常量定义 ====================
const DEFAULT_AVATAR =
  'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260526/默认头像_1779779926983.png';
const DEFAULT_BG_IMAGE =
  'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260724/健身模板_1784871730506.png';
const WEEK_LABELS = ['一', '二', '三', '四', '五', '六', '日'];
const VISIBLE_WEEK_DAYS = ['一', '三', '五', '日']; // 运动轨迹仅显示一三五日

let topSafeArea = 0;
// #ifdef MP-WEIXIN
topSafeArea = getTopSafeArea();
// #endif

// ==================== 响应式状态 ====================
const popup = ref(null);
const backgroundImage = ref('');
const nickname = ref('');
const avatar = ref('');
const signature = ref('');
const exerciseMinuteCount = ref(0);
const calorieCount = ref(0);
const motionXAxis = ref([]);
const motionMatrix = ref([]);
const medalList = ref([]);

// ==================== 生命周期 ====================
onShow(() => {
  fetchUserProfile();
});

// ==================== 数据获取 ====================
const fetchUserProfile = async () => {
  try {
    const { data } = await UserApi.getTrajectory();
    nickname.value = data.nickname;
    avatar.value = data.avatar;
    signature.value = data.signature;
    exerciseMinuteCount.value = data.exerciseMinuteCount;
    calorieCount.value = data.calorieCount;
    motionXAxis.value = data.motionXAxis || [];
    motionMatrix.value = data.motionMatrix || [];
    backgroundImage.value = data.backgroundImage;
    medalList.value = data.medalList || [];
  } catch (err) {
    uni.showToast({ title: '数据加载失败', icon: 'none' });
  }
};

// ==================== 页面导航 ====================
const goBack = () => {
  const pages = getCurrentPages();
  if (pages.length > 1) {
    uni.navigateBack();
  } else {
    uni.reSwitch({ url: '/pages/index/index' });
  }
};

const goToEditProfile = () => {
  popup.value.close();
  uni.navigateTo({ url: '/pages5/pages/user/wode-geren-ziliao' });
};

const goToEditSignature = () => {
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-wode-qianming?signature=${encodeURIComponent(signature.value || '')}`,
  });
};

// ==================== 弹窗控制 ====================
const openPopup = () => {
  popup.value.open();
};

const handleCancel = () => {
  popup.value.close();
};

// ==================== 图片更换交互 ====================
const handleChangeBg = async () => {
  let tempFilePath = '';
  try {
    // #ifdef MP-WEIXIN
    const wxRes = await new Promise((resolve, reject) => {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        success: resolve,
        fail: reject,
      });
    });
    tempFilePath = wxRes.tempFiles[0].tempFilePath;
    // #endif

    // #ifndef MP-WEIXIN
    const h5Res = await new Promise((resolve, reject) => {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: resolve,
        fail: reject,
      });
    });
    tempFilePath = h5Res.tempFilePaths[0];
    // #endif

    popup.value.close();
    uni.showLoading({ title: '上传中...' });
    const uploadRes = await FileApi.uploadFile(tempFilePath);
    uni.hideLoading();

    if (!uploadRes || !uploadRes.data) {
      uni.showToast({ title: '上传失败', icon: 'none' });
      return;
    }

    await UserApi.updateBgImage({ data: uploadRes.data });
    await fetchUserProfile();
    uni.showToast({ title: '背景更换成功', icon: 'success' });
  } catch (err) {
    popup.value.close();
    uni.hideLoading();
    if (err?.errMsg?.includes('cancel')) return;
    uni.showToast({ title: '更换背景失败', icon: 'none' });
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f7f8fa;
  position: relative;
}

/* 顶部固定导航按钮 */
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-left: 24rpx;

  .nav-back-btn {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12rpx;
  }
}

/* 顶部背景图容器 */
.banner-wrapper {
  width: 100%;
  height: 420rpx;
  position: relative;

  .banner-img {
    width: 100%;
    height: 100%;
  }

  .banner-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  }
}

/* 主体内容卡片（自然流向上覆盖） */
.main-card {
  position: relative;
  margin-top: -60rpx;
  background-color: #ffffff;
  border-top-left-radius: 36rpx;
  border-top-right-radius: 36rpx;
  padding: 32rpx 28rpx 60rpx;
  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.04);

  /* 个人信息 */
  .profile-header {
    display: flex;
    align-items: flex-end;
    margin-bottom: 24rpx;

    .avatar-box {
      width: 130rpx;
      height: 130rpx;
      border-radius: 50%;
      border: 6rpx solid #ffffff;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
      margin-top: -70rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
      overflow: hidden;
      background-color: #ffffff;

      .avatar-img {
        width: 100%;
        height: 100%;
      }
    }

    .user-meta {
      flex: 1;

      .nickname {
        font-size: 32rpx;
        font-weight: 700;
        color: #1d2129;
        line-height: 44rpx;
        display: block;
        margin-bottom: 8rpx;
      }

      .badge-tag {
        display: inline-flex;
        align-items: center;
        background-color: #fff0e6;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;

        .badge-text {
          font-size: 20rpx;
          font-weight: 600;
          color: #ff6600;
          margin-left: 4rpx;
        }
      }
    }

    .edit-btn {
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, #ff8533 0%, #ff6600 100%);
      padding: 12rpx 24rpx;
      border-radius: 30rpx;
      box-shadow: 0 4rpx 12rpx rgba(255, 102, 0, 0.25);

      .btn-text {
        font-size: 24rpx;
        color: #ffffff;
        font-weight: 500;
        margin-left: 4rpx;
      }
    }
  }

  /* 签名框 */
  .signature-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f7f8fa;
    padding: 16rpx 20rpx;
    border-radius: 12rpx;
    margin-bottom: 32rpx;

    .signature-text {
      font-size: 24rpx;
      color: #86909c;
      flex: 1;
      margin-right: 12rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* 运动统计看板 */
  .stats-card {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #2b303d 0%, #1d2129 100%);
    border-radius: 20rpx;
    padding: 32rpx 24rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 8rpx 20rpx rgba(29, 33, 41, 0.12);

    .stat-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      .stat-num-box {
        display: flex;
        align-items: baseline;

        .stat-num {
          font-size: 44rpx;
          font-weight: 800;
          color: #ffffff;
          font-family: 'DIN Alternate', sans-serif;
        }

        .stat-unit {
          font-size: 22rpx;
          color: #ff9e59;
          margin-left: 6rpx;
          font-weight: 600;
        }
      }

      .stat-label {
        font-size: 22rpx;
        color: #a4a9b3;
        margin-top: 6rpx;
      }
    }

    .stat-divider {
      width: 2rpx;
      height: 48rpx;
      background-color: rgba(255, 255, 255, 0.15);
    }
  }

  /* 运动轨迹区块 */
  .trajectory-section {
    background-color: #ffffff;

    .section-header {
      margin-bottom: 24rpx;

      .section-title {
        font-size: 30rpx;
        font-weight: 700;
        color: #1d2129;
        margin-right: 12rpx;
      }

      .section-sub {
        font-size: 22rpx;
        color: #86909c;
      }
    }

    /* 点阵网格系统 */
    .track-grid-container {
      display: flex;
      align-items: flex-start;
      background-color: #fafafa;
      border-radius: 16rpx;
      padding: 20rpx 16rpx;
      border: 1rpx solid #f2f3f5;

      /* 星期标签列 */
      .week-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 16rpx;
        padding-top: 36rpx; // 避开月份行的高度
        height: 180rpx; // 匹配 7 行点阵的高

        .week-label {
          font-size: 18rpx;
          color: #c0c4cc;
          height: 20rpx;
          line-height: 20rpx;
          text-align: center;
        }
      }

      /* 点阵与月份区 */
      .dots-area {
        flex: 1;

        .month-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12rpx;

          .month-label {
            font-size: 20rpx;
            color: #86909c;
          }
        }

        .grid-matrix {
          display: flex;
          flex-direction: column;
          gap: 8rpx;

          .dot-row {
            display: flex;
            justify-content: space-between;

            .dot-item {
              width: 18rpx;
              height: 18rpx;
              border-radius: 4rpx;
              background-color: #ebedf0;
              transition: all 0.2s ease;

              &.active {
                background-color: #ff6600;
                box-shadow: 0 2rpx 8rpx rgba(255, 102, 0, 0.35);
              }
            }
          }
        }
      }
    }
  }
}

/* 底部操作弹窗 ActionSheet */
.action-sheet {
  padding: 0 20rpx 40rpx;

  .sheet-group {
    background-color: #ffffff;
    border-radius: 24rpx;
    overflow: hidden;
    margin-bottom: 16rpx;

    .sheet-item {
      font-size: 30rpx;
      color: #1d2129;
      text-align: center;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f2f3f5;

      &:last-child {
        border-bottom: none;
      }

      &:active {
        background-color: #f7f8fa;
      }
    }

    &.cancel-group {
      margin-bottom: 0;

      .cancel-item {
        color: #ff4d4f;
        font-weight: 600;
      }
    }
  }
}
</style>