{% extends "base.html" %}
{% block title %}个人中心 - 太白购物商城{% endblock %}

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

{% block content %}
<div class="row">
    <!-- 侧边栏 -->
    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h5><i class="bi bi-person-circle"></i> 个人中心</h5>
            </div>
            <div class="list-group list-group-flush">
                <a href="{{ url_for('user.profile') }}" class="list-group-item list-group-item-action active">
                    <i class="bi bi-person"></i> 基本信息
                </a>
                <a href="{{ url_for('user.orders') }}" class="list-group-item list-group-item-action">
                    <i class="bi bi-bag"></i> 我的订单
                </a>
                <a href="{{ url_for('address.index') }}" class="list-group-item list-group-item-action">
                    <i class="bi bi-geo-alt"></i> 收货地址
                </a>
                <a href="#" class="list-group-item list-group-item-action">
                    <i class="bi bi-heart"></i> 我的收藏
                </a>
                <a href="#" class="list-group-item list-group-item-action">
                    <i class="bi bi-clock-history"></i> 浏览历史
                </a>
            </div>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="col-md-9">
        <div class="card">
            <div class="card-header">
                <h5><i class="bi bi-person"></i> 基本信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <table class="table table-borderless">
                            <tr>
                                <td width="120"><strong>用户名：</strong></td>
                                <td>{{ user.username }}</td>
                            </tr>
                            <tr>
                                <td><strong>昵称：</strong></td>
                                <td>{{ user.nickname or '未设置' }}</td>
                            </tr>
                            <tr>
                                <td><strong>手机号：</strong></td>
                                <td>{{ user.phone or '未绑定' }}</td>
                            </tr>
                            <tr>
                                <td><strong>邮箱：</strong></td>
                                <td>{{ user.email or '未绑定' }}</td>
                            </tr>
                            <tr>
                                <td><strong>性别：</strong></td>
                                <td>
                                    {% if user.gender == 1 %}男
                                    {% elif user.gender == 2 %}女
                                    {% else %}未设置
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <td><strong>注册时间：</strong></td>
                                <td>{{ user.created_at.strftime('%Y-%m-%d %H:%M:%S') if user.created_at else '未知' }}</td>
                            </tr>
                        </table>

                        <div class="mt-3">
                            <button class="btn btn-primary me-2">
                                <i class="bi bi-pencil"></i> 编辑资料
                            </button>
                            <button class="btn btn-outline-secondary">
                                <i class="bi bi-key"></i> 修改密码
                            </button>
                        </div>
                    </div>

                    <div class="col-md-4 text-center">
                        <div class="mb-3">
                            <div class="avatar-upload">
                                {% if user.avatar_url %}
                                    <img src="{{ user.avatar_url }}" alt="头像" class="avatar-preview" id="avatarPreview">
                                {% else %}
                                    <div class="avatar-placeholder" id="avatarPlaceholder">
                                        <i class="bi bi-person display-4 text-muted"></i>
                                    </div>
                                {% endif %}
                                <div class="upload-overlay" onclick="triggerFileInput()">
                                    <i class="bi bi-camera text-white fs-3"></i>
                                </div>
                            </div>
                        </div>

                        <!-- 隐藏的文件输入 -->
                        <input type="file" id="avatarInput" accept="image/*" style="display: none;" onchange="handleFileSelect(event)">

                        <!-- 上传进度 -->
                        <div class="upload-progress" id="uploadProgress">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
                            </div>
                            <small class="text-muted">上传中...</small>
                        </div>

                        <button class="btn btn-outline-primary btn-sm" onclick="triggerFileInput()">
                            <i class="bi bi-camera"></i> 更换头像
                        </button>
                        <div class="mt-2">
                            <small class="text-muted">支持 JPG、PNG 格式，大小不超过 2MB</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 快捷操作 -->
        <div class="row mt-4">
            <div class="col-md-3 mb-3">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="bi bi-bag display-4 text-primary mb-2"></i>
                        <h6 class="card-title">我的订单</h6>
                        <small class="text-muted">查看所有订单</small>
                    </div>
                </div>
            </div>

            <div class="col-md-3 mb-3">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="bi bi-cart display-4 text-success mb-2"></i>
                        <h6 class="card-title">购物车</h6>
                        <small class="text-muted">查看购物车</small>
                    </div>
                </div>
            </div>

            <div class="col-md-3 mb-3">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="bi bi-heart display-4 text-danger mb-2"></i>
                        <h6 class="card-title">我的收藏</h6>
                        <small class="text-muted">收藏的商品</small>
                    </div>
                </div>
            </div>

            <div class="col-md-3 mb-3">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="bi bi-geo-alt display-4 text-warning mb-2"></i>
                        <h6 class="card-title">收货地址</h6>
                        <small class="text-muted">管理收货地址</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 重新设计的图片预览模态框 -->
<div class="modal fade image-preview-modal" id="imagePreviewModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title">
                    <i class="bi bi-image text-primary"></i> 头像预览
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="preview-container">
                    <div class="preview-image-wrapper">
                        <img src="" alt="预览图片" class="preview-image" id="previewImage">
                    </div>

                    <div class="preview-info">
                        <div class="mb-2">
                            <i class="bi bi-info-circle text-primary"></i>
                            <strong>图片信息</strong>
                        </div>
                        <div class="preview-stats">
                            <div class="stat-item">
                                <div class="stat-value" id="imageWidth">-</div>
                                <div class="stat-label">宽度(px)</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value" id="imageHeight">-</div>
                                <div class="stat-label">高度(px)</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value" id="imageSize">-</div>
                                <div class="stat-label">大小</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value" id="imageType">-</div>
                                <div class="stat-label">格式</div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-3">
                        <small class="text-muted">
                            <i class="bi bi-check-circle text-success"></i>
                            图片将被自动调整为合适的头像尺寸
                        </small>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> 取消
                </button>
                <button type="button" class="btn btn-primary" onclick="confirmUpload()">
                    <i class="bi bi-upload"></i> 确认上传
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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