{% extends 'base_new.html' %}

{% block title %}个人中心 - ZJPB{% endblock %}

{% block extra_css %}
<style>
    .profile-container {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 32px;
        margin-top: 32px;
    }

    /* 侧边栏 */
    .sidebar-card {
        background: var(--bg-white);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 24px;
        align-self: flex-start;
        position: sticky;
        top: 88px;
    }

    .profile-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
        color: white;
        font-size: 32px;
        font-weight: 700;
    }

    .profile-username {
        text-align: center;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .profile-bio {
        text-align: center;
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 24px;
    }

    .nav-menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .nav-menu a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: var(--radius-md);
        color: var(--text-primary);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .nav-menu a:hover {
        background: var(--bg-page);
    }

    .nav-menu a.active {
        background: rgba(14, 165, 233, 0.1);
        color: var(--primary-blue);
    }

    /* 主内容区 */
    .main-card {
        background: var(--bg-white);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 32px;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }

    .stat-card {
        padding: 20px;
        background: var(--bg-page);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        text-align: center;
    }

    .stat-value {
        font-size: 32px;
        font-weight: 700;
        color: var(--primary-blue);
        margin-bottom: 8px;
    }

    .stat-label {
        font-size: 14px;
        color: var(--text-secondary);
    }

    .recent-section h2 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .collection-item {
        display: flex;
        gap: 12px;
        padding: 16px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        margin-bottom: 12px;
        text-decoration: none;
        color: var(--text-primary);
        transition: all 0.2s;
    }

    .collection-item:hover {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-md);
    }

    .collection-logo {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-md);
        object-fit: cover;
        flex-shrink: 0;
    }

    .collection-info h3 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .collection-info p {
        font-size: 13px;
        color: var(--text-secondary);
        margin: 0;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-muted);
    }

    .empty-state-icon {
        font-size: 64px;
        margin-bottom: 16px;
    }

    @media (max-width: 968px) {
        .profile-container {
            grid-template-columns: 1fr;
        }

        .sidebar-card {
            position: static;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="main-content">
    <div class="profile-container">
        <!-- 侧边栏 -->
        <div class="sidebar-card">
            <div class="profile-avatar">
                {{ current_user.username[0].upper() }}
            </div>
            <div class="profile-username">{{ current_user.username }}</div>
            <div class="profile-bio">{{ current_user.bio or '这个人很懒，什么都没写' }}</div>

            <ul class="nav-menu">
                <li><a href="/user/profile" class="active">👤 个人资料</a></li>
                <li><a href="/user/collections">⭐ 我的收藏</a></li>
                <li><a href="/user/change-password">🔒 修改密码</a></li>
            </ul>
        </div>

        <!-- 主内容区 -->
        <div>
            <div class="main-card">
                <h1 style="font-size: 24px; font-weight: 700; margin-bottom: 24px;">个人中心</h1>

                <!-- 统计卡片 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-value">{{ collections_count }}</div>
                        <div class="stat-label">收藏数</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">{{ folders_count }}</div>
                        <div class="stat-label">文件夹数</div>
                    </div>
                </div>

                <!-- 邮箱管理 -->
                <div class="recent-section" style="margin-bottom: 32px;">
                    <h2>邮箱管理</h2>
                    <div style="background: white; padding: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-md);">
                        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
                            <div>
                                <div style="font-size: 14px; color: var(--text-secondary); margin-bottom: 4px;">当前邮箱</div>
                                <div style="font-size: 16px; font-weight: 600;" id="currentEmail">
                                    {{ current_user.email or '未绑定' }}
                                </div>
                            </div>
                            {% if current_user.email %}
                            <div>
                                {% if current_user.email_verified %}
                                <span style="display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: #d1fae5; color: #065f46; border-radius: 12px; font-size: 12px;">
                                    <span class="material-symbols-outlined" style="font-size: 16px;">check_circle</span>
                                    已验证
                                </span>
                                {% else %}
                                <span style="display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: #fef3c7; color: #92400e; border-radius: 12px; font-size: 12px;">
                                    <span class="material-symbols-outlined" style="font-size: 16px;">warning</span>
                                    未验证
                                </span>
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>

                        <div style="display: flex; gap: 12px;">
                            <button onclick="showEmailModal()" style="padding: 8px 16px; background: var(--primary-blue); color: white; border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 14px;">
                                {{ '修改邮箱' if current_user.email else '绑定邮箱' }}
                            </button>
                            {% if current_user.email and not current_user.email_verified %}
                            <button onclick="sendVerifyEmail()" id="verifyBtn" style="padding: 8px 16px; background: #f59e0b; color: white; border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 14px;">
                                发送验证邮件
                            </button>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- 最近收藏 -->
                <div class="recent-section">
                    <h2>最近收藏</h2>
                    {% if recent_collections %}
                        {% for collection in recent_collections %}
                        <a href="/site/{{ collection.site.code }}" class="collection-item">
                            {% if collection.site.logo %}
                            <img src="{{ collection.site.logo }}" alt="{{ collection.site.name }}" class="collection-logo">
                            {% else %}
                            <div class="collection-logo" style="background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);"></div>
                            {% endif %}
                            <div class="collection-info">
                                <h3>{{ collection.site.name }}</h3>
                                <p>{{ collection.site.short_desc or collection.site.description }}</p>
                            </div>
                        </a>
                        {% endfor %}
                    {% else %}
                        <div class="empty-state">
                            <div class="empty-state-icon">📦</div>
                            <p>还没有收藏任何工具</p>
                            <p style="margin-top: 8px;"><a href="/" style="color: var(--primary-blue);">去首页逛逛</a></p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 邮箱管理弹窗 -->
<div id="emailModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
    <div style="background: white; border-radius: var(--radius-lg); padding: 32px; max-width: 500px; width: 90%;">
        <h2 style="font-size: 20px; font-weight: 700; margin-bottom: 24px;">{{ '修改邮箱' if current_user.email else '绑定邮箱' }}</h2>

        <div id="emailAlert" style="display: none; padding: 12px; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 14px;"></div>

        <div style="margin-bottom: 20px;">
            <label style="display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px;">邮箱地址</label>
            <input type="email" id="emailInput" placeholder="请输入邮箱地址" style="width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 14px;">
        </div>

        <div style="display: flex; gap: 12px; justify-content: flex-end;">
            <button onclick="hideEmailModal()" style="padding: 10px 20px; background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer;">
                取消
            </button>
            <button onclick="updateEmail()" id="emailSubmitBtn" style="padding: 10px 20px; background: var(--primary-blue); color: white; border: none; border-radius: var(--radius-md); cursor: pointer;">
                确定
            </button>
        </div>
    </div>
</div>

<script>
// 显示邮箱弹窗
function showEmailModal() {
    const modal = document.getElementById('emailModal');
    const input = document.getElementById('emailInput');
    input.value = '{{ current_user.email or "" }}';
    modal.style.display = 'flex';
}

// 隐藏邮箱弹窗
function hideEmailModal() {
    const modal = document.getElementById('emailModal');
    modal.style.display = 'none';
    document.getElementById('emailAlert').style.display = 'none';
}

// 显示弹窗提示
function showEmailAlert(message, type) {
    const alert = document.getElementById('emailAlert');
    alert.textContent = message;
    alert.style.display = 'block';

    if (type === 'success') {
        alert.style.background = '#d1fae5';
        alert.style.color = '#065f46';
        alert.style.border = '1px solid #6ee7b7';
    } else {
        alert.style.background = '#fee2e2';
        alert.style.color = '#991b1b';
        alert.style.border = '1px solid #fca5a5';
    }
}

// 更新邮箱
async function updateEmail() {
    const email = document.getElementById('emailInput').value.trim();
    const submitBtn = document.getElementById('emailSubmitBtn');

    if (!email) {
        showEmailAlert('请输入邮箱地址', 'error');
        return;
    }

    // 验证邮箱格式
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailPattern.test(email)) {
        showEmailAlert('邮箱格式不正确', 'error');
        return;
    }

    submitBtn.disabled = true;
    submitBtn.textContent = '提交中...';

    try {
        const response = await fetch('/api/user/email', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ email: email })
        });

        const data = await response.json();

        if (data.success) {
            showEmailAlert(data.message, 'success');
            setTimeout(() => {
                location.reload();
            }, 1500);
        } else {
            showEmailAlert(data.message, 'error');
            submitBtn.disabled = false;
            submitBtn.textContent = '确定';
        }
    } catch (error) {
        showEmailAlert('网络错误，请稍后重试', 'error');
        submitBtn.disabled = false;
        submitBtn.textContent = '确定';
    }
}

// 发送验证邮件
async function sendVerifyEmail() {
    const btn = document.getElementById('verifyBtn');
    btn.disabled = true;
    btn.textContent = '发送中...';

    try {
        const response = await fetch('/api/user/send-verify-email', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });

        const data = await response.json();

        if (data.success) {
            alert(data.message);
        } else {
            alert(data.message);
            btn.disabled = false;
            btn.textContent = '发送验证邮件';
        }
    } catch (error) {
        alert('网络错误，请稍后重试');
        btn.disabled = false;
        btn.textContent = '发送验证邮件';
    }
}

// 点击弹窗外部关闭
document.getElementById('emailModal').addEventListener('click', function(e) {
    if (e.target === this) {
        hideEmailModal();
    }
});
</script>
{% endblock %}