<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import {
  Document, Location, Star, Ticket, ShoppingCart, Timer, ArrowRight, User, Setting, Message, Wallet, Box, Van, CircleCheck
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

const menuItems = [
  { label: '我的订单', icon: Document, path: '/orders', color: '#FF6B35', bg: '#FFF0EB' },
  { label: '收货地址', icon: Location, path: '/address', color: '#3B82F6', bg: '#EFF6FF' },
  { label: '我的收藏', icon: Star, path: '/favorites', color: '#F59E0B', bg: '#FEF3C7' },
  { label: '我的优惠券', icon: Ticket, path: '/coupons', color: '#10B981', bg: '#D1FAE5' },
  { label: '购物车', icon: ShoppingCart, path: '/cart', color: '#8B5CF6', bg: '#EDE9FE' },
  { label: '限时秒杀', icon: Timer, path: '/seckill', color: '#EF4444', bg: '#FEE2E2' },
]

const orderStatus = [
  { label: '待付款', icon: Wallet, path: '/orders?status=0' },
  { label: '待发货', icon: Box, path: '/orders?status=1' },
  { label: '待收货', icon: Van, path: '/orders?status=2' },
  { label: '已完成', icon: CircleCheck, path: '/orders?status=3' },
]
</script>

<template>
  <div class="user-page container">
    <!-- Profile Header -->
    <div class="profile-header">
      <div class="profile-bg">
        <div class="bg-shape-1"></div>
        <div class="bg-shape-2"></div>
      </div>
      <div class="profile-content">
        <div class="profile-main">
          <div class="avatar-wrap">
            <el-avatar
              :size="84"
              :src="userStore.user?.avatar || 'https://placehold.co/84x84?text=U'"
              class="user-avatar"
            />
            <div class="avatar-badge">
              <el-icon><User /></el-icon>
            </div>
          </div>
          <div class="profile-info">
            <h2>{{ userStore.user?.nickname || userStore.user?.username || '游客' }}</h2>
            <p class="user-phone">
              <el-icon><Phone /></el-icon>
              {{ userStore.user?.phone || '未绑定手机号' }}
            </p>
          </div>
        </div>
        <div class="profile-stats">
          <div class="stat-item" @click="router.push('/favorites')">
            <span class="stat-num">12</span>
            <span class="stat-label">收藏</span>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item" @click="router.push('/coupons')">
            <span class="stat-num">5</span>
            <span class="stat-label">优惠券</span>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <span class="stat-num">3</span>
            <span class="stat-label">足迹</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Order Status -->
    <div class="section-card">
      <div class="section-header-row">
        <span class="section-name">我的订单</span>
        <a class="section-more" @click="router.push('/orders')">
          全部订单 <el-icon><ArrowRight /></el-icon>
        </a>
      </div>
      <div class="status-list">
        <div
          v-for="item in orderStatus"
          :key="item.label"
          class="status-item"
          @click="router.push(item.path)"
        >
          <div class="status-icon">
            <el-icon :size="24"><component :is="item.icon" /></el-icon>
          </div>
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>

    <!-- Menu Grid -->
    <div class="section-card">
      <div class="section-header-row">
        <span class="section-name">更多服务</span>
      </div>
      <div class="menu-grid">
        <div
          v-for="item in menuItems"
          :key="item.label"
          class="menu-item"
          @click="router.push(item.path)"
        >
          <div class="menu-icon" :style="{ background: item.bg, color: item.color }">
            <el-icon :size="24"><component :is="item.icon" /></el-icon>
          </div>
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>

    <!-- Settings -->
    <div class="section-card settings-card">
      <div class="setting-item" @click="router.push('/notice')">
        <div class="setting-left">
          <div class="setting-icon" style="background: #EFF6FF; color: #3B82F6;">
            <el-icon><Message /></el-icon>
          </div>
          <span>消息公告</span>
        </div>
        <el-icon class="setting-arrow"><ArrowRight /></el-icon>
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-page {
  padding: 24px 0 60px;
}

/* Profile Header */
.profile-header {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--shadow-lg);
}
.profile-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8F5D 50%, #F59E0B 100%);
  overflow: hidden;
}
.bg-shape-1 {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  top: -100px;
  right: -60px;
}
.bg-shape-2 {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  bottom: -60px;
  left: 40%;
}
.profile-content {
  position: relative;
  z-index: 1;
  padding: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}
.profile-main {
  display: flex;
  align-items: center;
  gap: 20px;
}
.avatar-wrap {
  position: relative;
}
.user-avatar {
  border: 3px solid rgba(255, 255, 255, 0.4);
  box-shadow: var(--shadow-lg);
}
.avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 2px solid var(--color-primary);
}
.profile-info h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #fff;
}
.user-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  opacity: 0.9;
}
.profile-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: 16px 24px;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 24px;
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.stat-item:hover {
  transform: translateY(-2px);
}
.stat-num {
  font-size: 24px;
  font-weight: 700;
}
.stat-label {
  font-size: 13px;
  opacity: 0.85;
}
.stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
}

/* Section Card */
.section-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
}
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.section-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.section-more {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}
.section-more:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Status List */
.status-list {
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
}
.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 13px;
  color: var(--color-text-secondary);
  min-width: 80px;
}
.status-item:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.status-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.status-item:hover .status-icon {
  background: var(--color-primary);
  color: #fff;
  transform: scale(1.05);
}

/* Menu Grid */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 14px;
  color: var(--color-text);
}
.menu-item:hover {
  background: var(--color-background);
  transform: translateY(-2px);
}
.menu-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}
.menu-item:hover .menu-icon {
  transform: scale(1.08);
}

/* Settings */
.settings-card {
  padding: 8px 20px;
}
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.setting-left {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--color-text);
}
.setting-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.setting-arrow {
  color: var(--color-text-muted);
  font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
  .profile-content {
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    text-align: center;
  }
  .profile-main {
    flex-direction: column;
  }
  .profile-stats {
    width: 100%;
    justify-content: space-around;
  }
  .stat-item {
    padding: 0 16px;
  }
  .menu-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .status-list {
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .status-item {
    min-width: 70px;
    padding: 10px 14px;
  }
}
</style>
