<view class="container">
    <view class="profile-header">
        <view class="user-info">
            <button class="avatar-btn" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar" style="padding:0;border:none;background:transparent;">
                <image class="avatar" src="{{user.avatar}}" mode="aspectFill"></image>
            </button>
            <view class="user-details">
                <view class="username">{{user.name}}</view>
                <!-- <view class="userid">ID: {{user.id}}</view> -->
            </view>
        </view>
        
        <view class="stats-card">
            <view class="stat-item">
                <view class="stat-val">{{user.stats.learning}}</view>
                <view class="stat-label">课程&活动</view>
            </view>
            <view class="stat-item">
                <view class="stat-val">{{user.stats.coupons}}</view>
                <view class="stat-label">可用优惠券</view>
            </view>
            <!-- <view class="stat-item">
                <view class="stat-val">{{user.stats.hours}}h</view>
                <view class="stat-label">学习时长</view>
            </view> -->
        </view>
    </view>

    <!-- Menu List -->
    <view class="menu-list">
        <view class="menu-item" bindtap="navigateToCoupons">
            <view class="menu-left">
                <image class="menu-icon" src="/assets/icons/coupon-icon.png" mode="aspectFit"></image>
                <text class="menu-text">我的优惠券</text>
            </view>
            <view class="menu-right">
                <text class="menu-arrow">></text>
            </view>
        </view>
    </view>

    <view class="form-section">
        <view class="form-title-bar" bindtap="toggleForm">
            <view class="title-left">
                <image class="menu-icon" src="/assets/icons/profile-icon.png" mode="aspectFit"></image>
                <text class="form-title">绑定个人信息</text>
            </view>
            <text class="toggle-icon">{{isFormOpen ? '▲' : '▼'}}</text>
        </view>

        <view class="form-content" wx:if="{{isFormOpen}}">
            <view class="form-group">
                <text class="label">头像</text>
                <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
                    <image class="avatar-upload" src="{{formData.avatar || user.avatar || '/assets/icons/default-avatar.png'}}" mode="aspectFill"></image>
                </button>
            </view>

            <view class="form-group">
                <text class="label">微信昵称</text>
                <view class="input-wrap">
                    <input type="nickname" placeholder="请输入微信昵称" bind:change="onNicknameChange" bindinput="handleInput" data-field="wechat_nickname" value="{{formData.wechat_nickname}}"/>
                    <button size="mini" type="default" bindtap="fetchNickname" wx:if="{{!formData.wechat_nickname}}" style="font-size:24rpx;margin-left:10rpx;padding:0 20rpx;line-height:60rpx;height:60rpx;">获取微信昵称</button>
                </view>
            </view>

            <view class="form-group">
                <text class="label">学员姓名</text>
                <view class="input-wrap">
                    <input type="text" placeholder="请输入真实姓名" bindinput="handleInput" data-field="name" value="{{formData.name}}"/>
                </view>
            </view>

            <view class="form-group">
                <text class="label">联系电话</text>
                <view class="input-wrap" style="display:flex;align-items:center;">
                    <input type="number" placeholder="请输入手机号码" disabled="true" bindinput="handleInput" data-field="phone" value="{{formData.phone}}" style="flex:1;"/>
                    <button size="mini" type="primary" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" style="font-size:24rpx;margin-left:10rpx;padding:0 20rpx;line-height:60rpx;height:60rpx;">获取号码</button>
                    <button wx:if="{{isDevtools}}" size="mini" type="default" bindtap="simulateGetPhone" style="font-size:24rpx;margin-left:10rpx;padding:0 20rpx;line-height:60rpx;height:60rpx;">模拟获取号码</button>
                </view>
            </view>

            <view class="form-group">
                <text class="label">年龄</text>
                <view class="input-wrap">
                    <input type="number" placeholder="0" bindinput="handleInput" data-field="age" value="{{formData.age}}"/>
                </view>
            </view>

            <view class="form-group">
                <text class="label">城市</text>
                <view class="input-wrap">
                    <picker mode="region" bindchange="onCityChange" value="{{region}}">
                        <view class="picker" style="{{!region.length ? 'color:#808080' : ''}}">
                          {{region.length ? region[0] + ' ' + region[1] + ' ' + region[2] : '请选择城市'}}
                        </view>
                    </picker>
                </view>
            </view>

            <view class="form-group">
                <text class="label">公司名称</text>
                <view class="input-wrap">
                    <input type="text" placeholder="请输入公司名称" bindinput="handleInput" data-field="company_name" value="{{formData.company_name}}"/>
                </view>
            </view>

            <view class="form-group">
                <text class="label">职位</text>
                <view class="input-wrap">
                    <input type="text" placeholder="请输入职位" bindinput="handleInput" data-field="position" value="{{formData.position}}"/>
                </view>
            </view>

            <button class="submit-btn" bindtap="handleSubmit">保存信息</button>
        </view>
    </view>
</view>
