<template>
  <view class="login-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>

    <!-- 主要内容 -->
    <view class="main-content">
      <!-- Logo和标题 -->
      <view class="header-section">
        <view class="app-logo">
          <uni-icons type="heart-filled" size="80" color="#FF6B9D"></uni-icons>
        </view>
        <text class="app-title">情侣菜谱</text>
        <text class="app-subtitle">记录我们的美食时光</text>
      </view>

      <!-- 功能介绍 -->
      <view class="features-section">
        <view class="feature-item">
          <uni-icons type="book" size="24" color="#FF6B9D"></uni-icons>
          <text class="feature-text">私人菜谱管理</text>
        </view>
        <view class="feature-item">
          <uni-icons type="compose" size="24" color="#52c41a"></uni-icons>
          <text class="feature-text">记录美好时光</text>
        </view>
        <view class="feature-item">
          <uni-icons type="target" size="24" color="#1890ff"></uni-icons>
          <text class="feature-text">打卡目标完成</text>
        </view>
        <view class="feature-item">
          <uni-icons type="cart" size="24" color="#722ed1"></uni-icons>
          <text class="feature-text">便捷点餐服务</text>
        </view>
      </view>

      <!-- 登录按钮 -->
      <view class="login-section">
        <view class="login-tips">
          <text class="tips-text">登录后即可使用全部功能</text>
        </view>
        
        <button 
          class="wechat-login-btn"
          @click="onGetUserInfo"
          :loading="isLogging"
          :disabled="isLogging"
        >
          <view class="btn-content">
            <text class="btn-text">{{ isLogging ? '登录中...' : '微信一键登录' }}</text>
          </view>
        </button>



        <view class="privacy-tips">
          <text class="privacy-text">登录即表示同意</text>
          <text class="privacy-link" @click="viewPrivacy">《用户协议》</text>
          <text class="privacy-text">和</text>
          <text class="privacy-link" @click="viewPrivacy">《隐私政策》</text>
        </view>
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="bottom-decoration">
      <view class="wave wave-1"></view>
      <view class="wave wave-2"></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/user.js'
import api from '@/api'

const userStore = useUserStore()

// 响应式数据
const isLogging = ref(false)

// 方法
const onGetUserInfo = async () => {
  // 直接进行登录流程
  console.log('用户点击登录按钮，开始登录流程')
  
  try {
    isLogging.value = true
    
    // 获取微信登录code
    const loginRes = await uni.login({
      provider: 'weixin'
    })
    
    console.log('微信登录结果:', loginRes)
    
    if (loginRes.errMsg !== 'login:ok') {
      throw new Error('微信登录失败')
    }

    // 调用登录接口
    const loginResult = await api.login({
      code: loginRes.code
    })

    
    // 检查登录结果 - 处理可能被错误包装的成功响应
    if (!loginResult) {
      throw new Error('登录接口返回数据为空')
    }

    // 如果loginResult本身就是一个包含成功数据的对象，直接使用
    if (loginResult.code === 0) {
      console.log('登录成功，开始处理用户信息')
      
      // 检查必要的数据字段
      if (!loginResult.data || !loginResult.data.token || !loginResult.data.Info) {
        throw new Error('登录返回数据格式错误')
      }
      
      // 登录成功，保存token到本地缓存
      const token = loginResult.data.token
      console.log('获取到的token:', token)
      uni.setStorageSync('token', token)
      
      userStore.setToken(token)
      
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })

      // 判断是否首次登录
      if (loginResult.data.isFirstLogin) {
        // 首次登录，跳转到设置页面
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/user/setup'
          })
        }, 1500)
      } else {
        // 非首次登录，获取最新用户信息并缓存
        try {
          console.log('非首次登录，开始获取最新用户信息...')
          const userInfoResult = await api.getUserInfo()
          
          if (userInfoResult.code === 0 && userInfoResult.data) {
            console.log('获取用户信息成功:', userInfoResult.data)
            
            // 缓存用户信息到userInfo
            uni.setStorageSync('userInfo', userInfoResult.data)
            
            // 更新用户store
            userStore.setUserInfo({
              userId: userInfoResult.data.ID || userInfoResult.data.userId,
              nickname: userInfoResult.data.nick_name || userInfoResult.data.nickname,
              avatar: userInfoResult.data.avatar,
              phone: userInfoResult.data.phone
            })
            
            console.log('用户信息已缓存到userInfo:', userInfoResult.data)
          } else {
            console.warn('获取用户信息失败，使用登录返回的基础信息')
            // 如果获取失败，使用登录返回的基础信息
            const basicUserInfo = {
              ID: loginResult.data.Info.ID,
              nick_name: loginResult.data.Info.nick_name,
              avatar: loginResult.data.Info.avatar,
              phone: loginResult.data.Info.phone
            }
            uni.setStorageSync('userInfo', basicUserInfo)
          }
        } catch (error) {
          console.error('获取用户信息失败:', error)
          // 如果获取失败，使用登录返回的基础信息
          const basicUserInfo = {
            ID: loginResult.data.Info.ID,
            nick_name: loginResult.data.Info.nick_name,
            avatar: loginResult.data.Info.avatar,
            phone: loginResult.data.Info.phone
          }
          uni.setStorageSync('userInfo', basicUserInfo)
        }
        
        // 跳转到首页
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/home/home'
          })
        }, 1500)
      }
    } else {
      console.log('登录失败，错误信息:', loginResult?.msg)
      throw new Error(loginResult?.msg || '登录失败')
    }

  } catch (error) {
    // 检查是否是被错误包装的成功响应
    if (error && typeof error === 'object' && error.code === 0) {
      console.log('🔍 检测到被错误包装的成功响应，正在重新处理...')
      
      try {
        // 重新处理成功响应
        const loginResult = error
        
        if (loginResult.data && loginResult.data.token && loginResult.data.Info) {
          console.log('✅ 成功解析登录数据，开始处理用户信息')
          
          // 登录成功，保存token到本地缓存
          const token = loginResult.data.token
          console.log('🔑 获取到的token:', token)
          uni.setStorageSync('token', token)
        
          userStore.setToken(token)
          
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })

          // 判断是否首次登录
          if (loginResult.data.isFirstLogin) {
            console.log('🎯 首次登录，准备跳转设置页面')
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/user/setup'
              })
            }, 1500)
          } else {
            console.log('🏠 非首次登录，准备获取最新用户信息并跳转首页')
            
            // 非首次登录，获取最新用户信息并缓存
            try {
              const userInfoResult = await api.getUserInfo()
              
              if (userInfoResult.code === 0 && userInfoResult.data) {
                console.log('✅ 获取用户信息成功:', userInfoResult.data)
                
                // 缓存用户信息到userInfo
                uni.setStorageSync('userInfo', userInfoResult.data)
                
                // 更新用户store
                userStore.setUserInfo({
                  userId: userInfoResult.data.ID || userInfoResult.data.userId,
                  nickname: userInfoResult.data.nick_name || userInfoResult.data.nickname,
                  avatar: userInfoResult.data.avatar,
                  phone: userInfoResult.data.phone
                })
                
                console.log('🎉 用户信息已缓存到userInfo:', userInfoResult.data)
              } else {
                console.warn('⚠️ 获取用户信息失败，使用登录返回的基础信息')
                // 如果获取失败，使用登录返回的基础信息
                const basicUserInfo = {
                  ID: loginResult.data.Info.ID,
                  nick_name: loginResult.data.Info.nick_name,
                  avatar: loginResult.data.Info.avatar,
                  phone: loginResult.data.Info.phone
                }
                uni.setStorageSync('userInfo', basicUserInfo)
              }
            } catch (error) {
              console.error('❌ 获取用户信息失败:', error)
              // 如果获取失败，使用登录返回的基础信息
              const basicUserInfo = {
                ID: loginResult.data.Info.ID,
                nick_name: loginResult.data.Info.nick_name,
                avatar: loginResult.data.Info.avatar,
                phone: loginResult.data.Info.phone
              }
              uni.setStorageSync('userInfo', basicUserInfo)
            }
            
            // 跳转到首页
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/home/home'
              })
            }, 1500)
          }
          
          // 标记为已处理，避免后续错误日志
          error._handled = true
          console.log('🎉 登录流程处理完成')
          return // 成功处理，退出函数
        } else {
          console.warn('⚠️ 登录数据格式不完整，无法处理')
        }
      } catch (innerError) {
        console.error('❌ 重新处理成功响应时出错:', innerError)
      }
    }
    
    // 真正的错误处理 - 只处理未被标记的错误
    if (!error._handled) {
      console.error('❌ 登录遇到真实错误:', error)
      console.error('🚨 错误类型:', error.constructor.name)
      console.error('💬 错误消息:', error.message)
      
      // 如果是我们自定义的错误，直接显示
      if (error.message && error.message !== '登录失败，请重试') {
        uni.showToast({
          title: error.message,
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        })
      }
    }
  } finally {
    isLogging.value = false
  }
}

const viewPrivacy = () => {
  uni.showToast({
    title: '隐私政策功能开发中',
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #FFE4E1 0%, #FFB6C1 50%, #E6E6FA 100%);
  position: relative;
  overflow: hidden;
}

.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  
  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    
    &.circle-1 {
      width: 200rpx;
      height: 200rpx;
      top: 10%;
      right: -50rpx;
      animation: float 6s ease-in-out infinite;
    }
    
    &.circle-2 {
      width: 150rpx;
      height: 150rpx;
      top: 30%;
      left: -30rpx;
      animation: float 8s ease-in-out infinite reverse;
    }
    
    &.circle-3 {
      width: 100rpx;
      height: 100rpx;
      top: 60%;
      right: 20%;
      animation: float 10s ease-in-out infinite;
    }
  }
}

.main-content {
  position: relative;
  z-index: 1;
  padding: 100rpx 60rpx 60rpx;
  text-align: center;
}

.header-section {
  margin-bottom: 80rpx;
  
  .app-logo {
    margin-bottom: 30rpx;
    animation: bounce 2s ease-in-out infinite;
  }
  
  .app-title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .app-subtitle {
    font-size: 28rpx;
    color: #666;
    line-height: 1.4;
  }
}

.features-section {
  margin-bottom: 80rpx;
  
  .feature-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20rpx;
    margin-bottom: 30rpx;
    
    .feature-text {
      font-size: 28rpx;
      color: #333;
    }
  }
}

.login-section {
  .login-tips {
    margin-bottom: 40rpx;
    
    .tips-text {
      font-size: 26rpx;
      color: #999;
    }
  }
  
  .wechat-login-btn {
    width: 100%;
    height: 100rpx;
    background: linear-gradient(135deg, #07c160 0%, #10ad6a 100%);
    border: none;
    border-radius: 50rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 8rpx 30rpx rgba(7, 193, 96, 0.3);
    transition: all 0.3s;
    
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 4rpx 15rpx rgba(7, 193, 96, 0.3);
    }
    
    .btn-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15rpx;
      height: 100%;
      
      .btn-text {
        color: #fff;
        font-size: 32rpx;
        font-weight: bold;
      }
    }
  }
  
  .privacy-tips {
    text-align: center;
    line-height: 1.6;
    
    .privacy-text {
      font-size: 24rpx;
      color: #999;
    }
    
    .privacy-link {
      font-size: 24rpx;
      color: #FF6B9D;
      text-decoration: underline;
    }
  }
}

.bottom-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  pointer-events: none;
  
  .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50% 50% 0 0;
    
    &.wave-1 {
      bottom: 0;
      animation: wave 4s ease-in-out infinite;
    }
    
    &.wave-2 {
      bottom: 20rpx;
      animation: wave 6s ease-in-out infinite reverse;
    }
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

@keyframes wave {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.1); }
}
</style>
