<?php
/**
 * HuSNS - 一款免费开源的社交平台
 * 
 * @author  HYR
 * @QQ      281900864
 * @website https://huyourui.com
 * @license MIT
 * @声明    严禁用于违法违规用途
 */
$userId = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : null;
if (!$userId) {
    // 使用弹窗登录，不跳转页面
    $this->assign('showLoginModal', true);
}

$currentPage = 'editProfile';
$pageType = 'edit_profile';
$bodyClass = 'edit-profile-page';

// 页面特定CSS和JS文件
$pageCssFiles = [$this->themeUrl() . '/app/css/edit-profile.css'];
$pageJsFiles = [$this->themeUrl() . '/app/js/edit-profile.js'];

$this->assign('pageCssFiles', $pageCssFiles);
$this->assign('pageJsFiles', $pageJsFiles);

$this->setLayout('app');
?>

<script>
window.HuSNS_EditProfile = {
    baseUrl: '<?php echo Helper::getBaseUrl(); ?>'
};
</script>

<div class="edit-profile-page">
    <!-- 背景图片区域 -->
    <div class="ep-background-section">
        <div class="ep-background-wrap" id="backgroundWrap">
            <div class="ep-background-preview" id="backgroundPreview">
                <div class="ep-background-placeholder">
                    <span class="iconify" data-icon="mdi:camera"></span>
                    <span>点击更换背景</span>
                </div>
            </div>
            <input type="file" id="backgroundInput" accept="image/*" hidden>
        </div>
    </div>

    <!-- 头像区域 -->
    <div class="ep-avatar-section">
        <div class="ep-avatar-wrap" id="avatarWrap">
            <img src="/templates/mobile/images/avatar_default.png" alt="" id="avatarImg">
            <div class="ep-avatar-mask">
                <span class="iconify" data-icon="mdi:camera"></span>
            </div>
        </div>
        <input type="file" id="avatarInput" accept="image/*" hidden>
        <p class="ep-avatar-tip">点击更换头像</p>
    </div>

    <!-- 表单 -->
    <form class="ep-form" id="editProfileForm" method="post" enctype="multipart/form-data">
        <?php echo $this->csrf(); ?>
        <div class="ep-form-group">
            <label class="ep-label">用户名</label>
            <input type="text" class="ep-input" id="usernameInput" placeholder="请输入用户名" maxlength="20">
            <span class="ep-hint">2-20个字符，支持字母、数字、下划线、中文</span>
        </div>

        <div class="ep-form-group">
            <label class="ep-label">个人简介</label>
            <textarea class="ep-textarea" id="bioInput" placeholder="介绍一下自己吧" maxlength="200"></textarea>
            <span class="ep-hint"><span id="bioCount">0</span>/200</span>
        </div>
    </div>

    <!-- 保存按钮 -->
    </form>
    <div class="ep-actions">
        <button class="ep-btn" id="saveBtn">保存修改</button>
    </div>
</div>

<!-- 加载遮罩 -->
<div class="ep-loading" id="loadingMask">
    <div class="ep-spinner"></div>
</div>