import React from 'react';
// Taro mini-program component

/**
 * E5. 个人中心
 *
 * 用户信息、我的券入口、我的订单、设置、下载App引导
 */

const ProfilePage: React.FC = () => {
  return (
    <view className="profile-page">
      {/* User Header */}
      <view className="profile-header">
        <view className="avatar">
          <text className="avatar-text">U</text>
        </view>
        <view className="user-info">
          <text className="username">User_138****88</text>
          <view className="kyc-badge">
            <text className="kyc-text">L1 基础认证</text>
          </view>
        </view>
      </view>

      {/* Stats */}
      <view className="stats-row">
        {[
          { value: '5', label: '持有券' },
          { value: '12', label: '已使用' },
          { value: '3', label: '已过期' },
        ].map(s => (
          <view key={s.label} className="stat-item">
            <text className="stat-value">{s.value}</text>
            <text className="stat-label">{s.label}</text>
          </view>
        ))}
      </view>

      {/* Menu */}
      <view className="menu-section">
        {[
          { icon: '🎫', label: '我的券', path: '/pages/my-coupons/index' },
          { icon: '📋', label: '我的订单', path: '/pages/orders/index' },
          { icon: '💳', label: '支付管理', path: '' },
          { icon: '🔔', label: '消息通知', path: '' },
        ].map(item => (
          <view key={item.label} className="menu-item">
            <text className="menu-icon">{item.icon}</text>
            <text className="menu-label">{item.label}</text>
            <text className="menu-arrow">›</text>
          </view>
        ))}
      </view>

      <view className="menu-section">
        {[
          { icon: '🌐', label: '语言 / Language', value: '简体中文' },
          { icon: '💰', label: '货币', value: 'USD' },
          { icon: '❓', label: '帮助中心', value: '' },
          { icon: '⚙️', label: '设置', value: '' },
        ].map(item => (
          <view key={item.label} className="menu-item">
            <text className="menu-icon">{item.icon}</text>
            <text className="menu-label">{item.label}</text>
            {item.value ? <text className="menu-value">{item.value}</text> : null}
            <text className="menu-arrow">›</text>
          </view>
        ))}
      </view>

      {/* Download App Banner */}
      <view className="download-banner">
        <view className="download-content">
          <text className="download-title">下载 Genex App</text>
          <text className="download-desc">解锁二级市场交易、P2P转赠等完整功能</text>
        </view>
        <view className="download-btn">
          <text className="download-btn-text">下载</text>
        </view>
      </view>
    </view>
  );
};

export default ProfilePage;

/*
CSS:

.profile-page { background: #F8F9FC; min-height: 100vh; padding-bottom: 120rpx; }

.profile-header {
  display: flex; align-items: center;
  padding: 48rpx 32rpx; background: white;
}
.avatar {
  width: 100rpx; height: 100rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
}
.avatar-text { color: white; font-size: 40rpx; font-weight: 700; }
.user-info { margin-left: 24rpx; }
.username { font-size: 32rpx; font-weight: 600; color: #141723; }
.kyc-badge {
  display: inline-flex; margin-top: 8rpx;
  padding: 4rpx 14rpx; background: #E6FAF3;
  border-radius: 999rpx;
}
.kyc-text { font-size: 22rpx; color: #00C48C; font-weight: 500; }

.stats-row {
  display: flex; background: white; padding: 24rpx 0;
  border-top: 1rpx solid #F1F3F8;
}
.stat-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center;
}
.stat-value { font-size: 36rpx; font-weight: 700; color: #6C5CE7; }
.stat-label { font-size: 22rpx; color: #A0A8BE; margin-top: 4rpx; }

.menu-section {
  background: white; margin-top: 16rpx;
}
.menu-item {
  display: flex; align-items: center;
  padding: 28rpx 32rpx;
  border-bottom: 1rpx solid #F1F3F8;
}
.menu-icon { font-size: 36rpx; margin-right: 20rpx; }
.menu-label { flex: 1; font-size: 28rpx; color: #141723; }
.menu-value { font-size: 24rpx; color: #A0A8BE; margin-right: 8rpx; }
.menu-arrow { font-size: 32rpx; color: #CDD2DE; }

.download-banner {
  display: flex; align-items: center;
  margin: 32rpx; padding: 28rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  border-radius: 16rpx;
}
.download-content { flex: 1; }
.download-title { font-size: 28rpx; font-weight: 600; color: white; }
.download-desc { font-size: 22rpx; color: rgba(255,255,255,0.7); margin-top: 4rpx; }
.download-btn {
  padding: 12rpx 28rpx; background: white;
  border-radius: 999rpx;
}
.download-btn-text { font-size: 24rpx; color: #6C5CE7; font-weight: 600; }
*/
