{% extends "base.html" %}

{% block title %}个人中心 - 图书管理系统{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/user-profile.css') }}">
{% endblock %}

{% block content %}
<div class="profile-container">
    <div class="page-header">
        <h1>个人中心</h1>
    </div>

    <div class="profile-content">
        <!-- 左侧用户信息展示 -->
        <div class="profile-sidebar">
            <div class="user-avatar-container">
                <div class="user-avatar large">
                    {{ user.username[0] }}
                </div>
                <h3 class="user-name">{{ user.nickname or user.username }}</h3>
                <p class="user-role">{{ '管理员' if user.role_id == 1 else '普通用户' }}</p>
            </div>

            <div class="user-stats">
                <div class="stat-item">
                    <div class="stat-value" id="borrowCount">--</div>
                    <div class="stat-label">借阅中</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value" id="returnedCount">--</div>
                    <div class="stat-label">已归还</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value" id="overdueCount">--</div>
                    <div class="stat-label">已逾期</div>
                </div>
            </div>

            <div class="account-info">
                <div class="info-row">
                    <span class="info-label">用户名</span>
                    <span class="info-value">{{ user.username }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">用户ID</span>
                    <span class="info-value">{{ user.id }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">注册时间</span>
                    <span class="info-value">{{ user.created_at }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">最后更新</span>
                    <span class="info-value">{{ user.updated_at }}</span>
                </div>
            </div>
        </div>

        <!-- 右侧内容区域：包含编辑选项卡 -->
        <div class="profile-main">
            <!-- 提示消息 -->
            {% with messages = get_flashed_messages(with_categories=true) %}
              {% if messages %}
                {% for category, message in messages %}
                  <div class="alert alert-{{ category }}">{{ message }}</div>
                {% endfor %}
              {% endif %}
            {% endwith %}

            <!-- 选项卡导航 -->
            <ul class="nav nav-tabs" id="profileTabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="basic-tab" data-toggle="tab" href="#basic" role="tab" aria-controls="basic" aria-selected="true">
                        <i class="fas fa-user"></i> 基本信息
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="security-tab" data-toggle="tab" href="#security" role="tab" aria-controls="security" aria-selected="false">
                        <i class="fas fa-lock"></i> 安全设置
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="activity-tab" data-toggle="tab" href="#activity" role="tab" aria-controls="activity" aria-selected="false">
                        <i class="fas fa-history"></i> 最近活动
                    </a>
                </li>
            </ul>

            <!-- 选项卡内容 -->
            <div class="tab-content" id="profileTabsContent">
                <!-- 基本信息选项卡 -->
                <div class="tab-pane fade show active" id="basic" role="tabpanel" aria-labelledby="basic-tab">
                    <form method="POST" action="{{ url_for('user.user_profile') }}" id="profileForm">
                        <div class="form-section">
                            <h4>个人信息</h4>

                            <div class="form-group">
                                <label for="nickname">昵称</label>
                                <input type="text" class="form-control" id="nickname" name="nickname" value="{{ user.nickname or '' }}" placeholder="请输入您的昵称">
                            </div>

                            <div class="form-group">
                                <label for="email">邮箱地址</label>
                                <input type="email" class="form-control" id="email" name="email" value="{{ user.email or '' }}" placeholder="请输入您的邮箱">
                                <small class="form-text text-muted">用于接收系统通知和找回密码</small>
                            </div>

                            <div class="form-group">
                                <label for="phone">手机号码</label>
                                <input type="text" class="form-control" id="phone" name="phone" value="{{ user.phone or '' }}" placeholder="请输入您的手机号">
                                <small class="form-text text-muted">用于接收借阅提醒和系统通知</small>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary" name="form_type" value="profile">
                                <i class="fas fa-save"></i> 保存修改
                            </button>
                        </div>
                    </form>
                </div>

                <!-- 安全设置选项卡 -->
                <div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="security-tab">
                    <form method="POST" action="{{ url_for('user.user_profile') }}" id="passwordForm">
                        <div class="form-section">
                            <h4>修改密码</h4>

                            <div class="form-group">
                                <label for="current_password">当前密码</label>
                                <input type="password" class="form-control" id="current_password" name="current_password" placeholder="请输入当前密码">
                            </div>

                            <div class="form-group">
                                <label for="new_password">新密码</label>
                                <input type="password" class="form-control" id="new_password" name="new_password" placeholder="请输入新密码">
                                <small class="form-text text-muted">密码长度至少为6个字符</small>
                            </div>

                            <div class="form-group">
                                <label for="confirm_password">确认新密码</label>
                                <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="请再次输入新密码">
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary" name="form_type" value="password">
                                <i class="fas fa-key"></i> 更新密码
                            </button>
                        </div>
                    </form>
                </div>

                <!-- 最近活动选项卡 -->
                <div class="tab-pane fade" id="activity" role="tabpanel" aria-labelledby="activity-tab">
                    <div class="activity-header">
                        <h4>最近活动</h4>
                        <div class="activity-filter">
                            <label for="activityFilter">显示:</label>
                            <select id="activityFilter" class="form-control form-control-sm">
                                <option value="all">所有活动</option>
                                <option value="login">登录记录</option>
                                <option value="borrow">借阅活动</option>
                                <option value="return">归还活动</option>
                            </select>
                        </div>
                    </div>

                    <div class="activity-timeline" id="activityTimeline">
                        <div class="timeline-loading">
                            <div class="spinner-border text-primary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p>加载中...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/user-profile.js') }}"></script>
{% endblock %}