<template>
  <view class="container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info" v-if="userStore.isAuthenticated">
        <image :src="userStore.avatar" class="avatar" />
        <view class="user-details">
          <text class="username">{{ userStore.nickname }}</text>
          <text class="user-desc">{{ userStore.userInfo?.phone || '未绑定手机号' }}</text>
        </view>
        <text class="settings-btn" @tap="goToSettings">设置</text>
      </view>
      
      <!-- 未登录状态 -->
      <view class="login-prompt" v-else @tap="goToLogin">
        <image src="/static/images/default-avatar.png" class="avatar" />
        <view class="user-details">
          <text class="username">点击登录</text>
          <text class="user-desc">登录后享受更多服务</text>
        </view>
        <text class="login-arrow">></text>
      </view>
    </view>
    
    <!-- 统计数据 -->
    <view class="stats-section" v-if="userStore.isAuthenticated">
      <view class="stats-grid">
        <view class="stats-item" @tap="goToPolicies">
          <text class="stats-number">{{ stats.policies }}</text>
          <text class="stats-label">我的保单</text>
        </view>
        <view class="stats-item" @tap="goToClaims">
          <text class="stats-number">{{ stats.claims }}</text>
          <text class="stats-label">理赔申请</text>
        </view>
        <view class="stats-item" @tap="goToApplications">
          <text class="stats-number">{{ stats.applications }}</text>
          <text class="stats-label">投保申请</text>
        </view>
      </view>
    </view>
    
    <!-- 功能菜单 -->
    <view class="menu-section">
      <!-- 我的服务 -->
      <view class="menu-group">
        <text class="group-title">我的服务</text>
        
        <view class="menu-item" @tap="goToPolicies">
          <image src="/static/images/menu-policy.png" class="menu-icon" />
          <text class="menu-text">我的保单</text>
          <text class="menu-arrow">></text>
        </view>
        
        <view class="menu-item" @tap="goToClaims">
          <image src="/static/images/menu-claim.png" class="menu-icon" />
          <text class="menu-text">理赔申请</text>
          <text class="menu-arrow">></text>
        </view>
        
        <view class="menu-item" @tap="goToApplications">
          <image src="/static/images/menu-application.png" class="menu-icon" />
          <text class="menu-text">投保申请</text>
          <text class="menu-arrow">></text>
        </view>
        
        <view class="menu-item" @tap="goToProfile">
          <image src="/static/images/menu-profile.png" class="menu-icon" />
          <text class="menu-text">个人资料</text>
          <text class="menu-arrow">></text>
        </view>
      </view>
      
      <!-- 帮助中心 -->
      <view class="menu-group">
        <text class="group-title">帮助中心</text>
        
        <view class="menu-item" @tap="goToHelp">
          <image src="/static/images/menu-help.png" class="menu-icon" />
          <text class="menu-text">常见问题</text>
          <text class="menu-arrow">></text>
        </view>
        
        <view class="menu-item" @tap="contactService">
          <image src="/static/images/menu-service.png" class="menu-icon" />
          <text class="menu-text">联系客服</text>
          <text class="menu-arrow">></text>
        </view>
        
        <view class="menu-item" @tap="goToFeedback">
          <image src="/static/images/menu-feedback.png" class="menu-icon" />
          <text class="menu-text">意见反馈</text>
          <text class="menu-arrow">></text>
        </view>
      </view>
      
      <!-- 其他 -->
      <view class="menu-group">
        <text class="group-title">其他</text>
        
        <view class="menu-item" @tap="goToAbout">
          <image src="/static/images/menu-about.png" class="menu-icon" />
          <text class="menu-text">关于我们</text>
          <text class="menu-arrow">></text>
        </view>
        
        <view class="menu-item" @tap="checkUpdate">
          <image src="/static/images/menu-update.png" class="menu-icon" />
          <text class="menu-text">检查更新</text>
          <text class="menu-arrow">></text>
        </view>
      </view>
    </view>
    
    <!-- 退出登录按钮 -->
    <view class="logout-section" v-if="userStore.isAuthenticated">
      <button class="logout-btn" @tap="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import { useInsuranceStore } from '@/store/insurance'

// 状态管理
const userStore = useUserStore()
const insuranceStore = useInsuranceStore()

// 响应式数据
const stats = reactive({
  policies: 0,
  claims: 0,
  applications: 0
})

// 加载用户统计数据（动态调用保险端后端）
const loadUserStats = async () => {
  if (!userStore.isAuthenticated) return
  
  try {
    // 这里可以添加专门的统计接口调用
    // 暂时使用模拟数据
    stats.policies = 3
    stats.claims = 1
    stats.applications = 2
    
    console.log('用户统计数据加载成功')
  } catch (error) {
    console.error('加载用户统计数据失败:', error)
  }
}

// 页面跳转方法
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  })
}

const goToSettings = () => {
  uni.navigateTo({
    url: '/pages/settings/settings'
  })
}

const goToPolicies = () => {
  if (!userStore.isAuthenticated) {
    goToLogin()
    return
  }
  uni.navigateTo({
    url: '/pages/policies/policies'
  })
}

const goToClaims = () => {
  if (!userStore.isAuthenticated) {
    goToLogin()
    return
  }
  uni.navigateTo({
    url: '/pages/claims/claims'
  })
}

const goToApplications = () => {
  if (!userStore.isAuthenticated) {
    goToLogin()
    return
  }
  uni.navigateTo({
    url: '/pages/applications/applications'
  })
}

const goToProfile = () => {
  if (!userStore.isAuthenticated) {
    goToLogin()
    return
  }
  uni.navigateTo({
    url: '/pages/profile/profile'
  })
}

const goToHelp = () => {
  uni.navigateTo({
    url: '/pages/help/help'
  })
}

const contactService = () => {
  uni.showActionSheet({
    itemList: ['拨打客服电话', '在线客服'],
    success: (res) => {
      if (res.tapIndex === 0) {
        uni.makePhoneCall({
          phoneNumber: '400-888-8888'
        })
      } else if (res.tapIndex === 1) {
        uni.showToast({
          title: '在线客服功能开发中',
          icon: 'none'
        })
      }
    }
  })
}

const goToFeedback = () => {
  uni.navigateTo({
    url: '/pages/feedback/feedback'
  })
}

const goToAbout = () => {
  uni.navigateTo({
    url: '/pages/about/about'
  })
}

const checkUpdate = () => {
  uni.showLoading({
    title: '检查中...'
  })
  
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '当前已是最新版本',
      icon: 'success'
    })
  }, 1500)
}

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          // 调用用户状态管理的退出方法
          await userStore.logout()
          
          // 清理统计数据
          stats.policies = 0
          stats.claims = 0
          stats.applications = 0
          
          uni.showToast({
            title: '已退出登录',
            icon: 'success'
          })
        } catch (error) {
          console.error('退出登录失败:', error)
          uni.showToast({
            title: '退出失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 下拉刷新
const onPullDownRefresh = async () => {
  try {
    if (userStore.isAuthenticated) {
      await Promise.all([
        userStore.getUserProfile(),
        loadUserStats()
      ])
    }
  } catch (error) {
    console.error('刷新失败:', error)
  } finally {
    uni.stopPullDownRefresh()
  }
}

// 生命周期
onMounted(() => {
  loadUserStats()
})

// 页面显示时刷新数据
onShow(() => {
  if (userStore.isAuthenticated) {
    loadUserStats()
  }
})
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.user-card {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
}

.user-info,
.login-prompt {
  display: flex;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 30rpx;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.user-details {
  flex: 1;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10rpx;
  display: block;
}

.user-desc {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
}

.settings-btn,
.login-arrow {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  padding: 10rpx 20rpx;
}

.stats-section {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
}

.stats-grid {
  display: flex;
  justify-content: space-around;
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stats-number {
  font-size: 48rpx;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 10rpx;
}

.stats-label {
  font-size: 26rpx;
  color: #666;
}

.menu-section {
  background: #fff;
  margin-bottom: 20rpx;
}

.menu-group {
  margin-bottom: 20rpx;
}

.group-title {
  display: block;
  font-size: 28rpx;
  color: #999;
  padding: 30rpx 30rpx 20rpx;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f8f8f8;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 30rpx;
}

.menu-text {
  flex: 1;
  font-size: 30rpx;
  color: #333;
}

.menu-arrow {
  font-size: 28rpx;
  color: #999;
}

.logout-section {
  padding: 30rpx;
}

.logout-btn {
  width: 100%;
  height: 88rpx;
  background: #fff;
  color: #f5222d;
  border: 1px solid #f5222d;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.logout-btn:active {
  background: #fff2f0;
}
</style>