<template>
  <view class="min-h-screen bg-[#F9FAFB] pb-[200rpx] flex flex-col items-center">
    <!-- Header -->
    <NavHeader title="我的" />

    <!-- User Info Card -->
    <!-- Width: 353px -> 706rpx, Height: 124px -> 248rpx -->
    <!-- Background image from design -->
    <view
      class="w-[706rpx] h-[248rpx] mt-[40rpx] bg-white rounded-[24rpx] flex items-center px-[40rpx]"
      @tap="go('/pages/avatar/index')"
    >
      <!-- Avatar -->
      <view class="w-[160rpx] h-[160rpx] rounded-full overflow-hidden border-2 border-white shadow-sm shrink-0">
        <img class="w-full h-full object-cover" src="https://picsum.photos/seed/user/200/200" />
      </view>

      <!-- Info -->
      <view class="ml-[32rpx] flex-1 flex flex-col justify-center">
        <text class="text-[36rpx] font-bold text-gray-800 mb-[8rpx]">张三</text>
        <text class="text-[28rpx] text-gray-500 mb-[4rpx]">工号: EMP2026001</text>
        <text class="text-[24rpx] text-gray-400">点击修改头像</text>
      </view>

      <!-- Arrow -->
      <IconFont name="RectRight" size="20" color="#9CA3AF" />
    </view>

    <!-- Menu List -->
    <!-- Width: 353px -> 706rpx, Radius: 12px -> 24rpx, Padding: 16px -> 32rpx -->
    <view class="w-[706rpx] bg-white rounded-[24rpx] p-[32rpx] mt-[32rpx]">
      <view
        v-for="(item, index) in menuItems"
        :key="index"
        class="flex flex-col"
        @tap="handleMenuClick(item)"
      >
        <view class="flex items-center justify-between py-[24rpx]">
          <view class="flex items-center">
            <!-- Icon Size: 40px -> 80rpx. Using IconFont to match request, centered in a box if needed, or just large icon -->
            <!-- Design had 40px images. I'll use 32px (64rpx) IconFont for balance or 40px if needed. -->
            <view class="w-[80rpx] h-[80rpx] bg-blue-50 rounded-[16rpx] flex items-center justify-center mr-[24rpx]">
              <IconFont :name="item.icon" size="24" color="#2563EB" />
            </view>
            <text class="text-[32rpx] text-gray-800">{{ item.title }}</text>
          </view>
          <IconFont name="RectRight" size="16" color="#9CA3AF" />
        </view>
        <!-- Separator -->
        <view v-if="index < menuItems.length - 1" class="h-[2rpx] bg-gray-100 w-full"></view>
      </view>
    </view>

    <!-- Logout Button -->
    <view class="w-[730rpx] rounded-[24rpx] p-[32rpx] mt-[32rpx]">
      <view
        class="flex items-center justify-center py-[20rpx] px-[32rpx] rounded-[16rpx] border-[2rpx] border-[#FEE2E2] bg-[#FEF2F2] active:opacity-70"
        @tap="handleLogout"
      >
        <IconFont name="Issue" size="18" color="#EF4444" customClass="mr-[12rpx]" />
        <text class="text-[28rpx] text-[#EF4444] font-medium">退出登录</text>
      </view>
    </view>

    <!-- TabBar -->
    <TabBar current="me" />
  </view>
</template>

<script setup>
import { useGo } from '@/hooks/useGo'
import IconFont from '@/components/IconFont.vue'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import Taro from '@tarojs/taro'

const go = useGo()

const menuItems = [
  { title: '我的计划书', icon: 'Order', path: '/pages/plan/index' },
  { title: '我的收藏', icon: 'Star', path: '/pages/favorites/index' },
  { title: '帮助中心', icon: 'Service', path: '/pages/help-center/index' },
  { title: '意见反馈', icon: 'Edit', path: '/pages/feedback/index' }
]

const handleMenuClick = (item) => {
  if (item.path) {
    go(item.path)
  } else if (item.action === 'toast') {
    Taro.showToast({
      title: '功能开发中',
      icon: 'none'
    })
  }
}

// 退出登录
const handleLogout = () => {
  Taro.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    confirmText: '确定',
    cancelText: '取消',
    confirmColor: '#EF4444',
    success: (res) => {
      if (res.confirm) {
        // 清除用户信息
        try {
          Taro.removeStorageSync('user_info')
          Taro.removeStorageSync('sessionid')

          // 跳转到首页
          Taro.reLaunch({
            url: '/pages/index/index'
          })

          Taro.showToast({
            title: '已退出登录',
            icon: 'success'
          })
        } catch (error) {
          console.error('退出登录失败:', error)
          Taro.showToast({
            title: '退出失败，请重试',
            icon: 'none'
          })
        }
      }
    }
  })
}
</script>

<style lang="less">
/* No custom CSS needed, all Tailwind */
</style>