{% extends "base.html" %}

{% block title %}个人中心 - 联考平台{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto space-y-6">
    <!-- 个人信息卡片 -->
    <div class="bg-white shadow-sm rounded-lg p-6 border border-slate-200">
        <div class="flex items-center space-x-4">
            <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white text-2xl font-bold">
                {{ user.name[0] | upper }}
            </div>
            <div class="flex-1">
                <h1 class="text-2xl font-bold text-slate-900">{{ user.name }}</h1>
                <p class="text-sm text-slate-500">{{ user.email }} · {{ user.role | capitalize }}</p>
                <p class="text-sm text-slate-400 mt-1">注册时间：{{ user.created_at if user.created_at else '2025-01-01' }}</p>  <!-- 实际可从数据库获取真实时间 -->
            </div>
            <div class="flex space-x-2">
                <a href="/profile/edit" class="px-4 py-2 border border-slate-300 rounded-md text-sm font-medium text-slate-700 hover:bg-slate-50">编辑资料</a>
                <a href="{{ url_for('logout') }}" class="px-4 py-2 bg-red-500 text-white rounded-md text-sm font-medium hover:bg-red-600">退出登录</a>
            </div>
        </div>
    </div>

    <!-- 切换账户提示 -->
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center justify-between">
        <span class="text-sm text-blue-700">如需切换账户，请先退出当前登录，然后重新登录其他账号。</span>
        <a href="{{ url_for('logout') }}" class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm font-medium hover:bg-blue-600">切换账户</a>
    </div>

    <!-- 三列布局：好友、帖子、收藏 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- 好友列表 -->
        <div class="bg-white shadow-sm rounded-lg p-6 border border-slate-200">
            <h2 class="text-lg font-semibold text-slate-900 mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                好友列表
            </h2>
            <div id="friends-list" class="space-y-3">
                <div class="text-center py-4 text-slate-400">加载中...</div>
            </div>
            <div class="mt-4 text-center">
                <a href="/friends" class="text-sm text-primary hover:text-blue-700">查看全部好友</a>
            </div>
        </div>

        <!-- 我的帖子 -->
        <div class="bg-white shadow-sm rounded-lg p-6 border border-slate-200">
            <h2 class="text-lg font-semibold text-slate-900 mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                我的帖子
            </h2>
            <div id="my-posts" class="space-y-3">
                <div class="text-center py-4 text-slate-400">加载中...</div>
            </div>
            <div class="mt-4 text-center">
                <a href="/forum?author=me" class="text-sm text-primary hover:text-blue-700">查看更多帖子</a>
            </div>
        </div>

        <!-- 收藏的试卷 -->
        <div class="bg-white shadow-sm rounded-lg p-6 border border-slate-200">
            <h2 class="text-lg font-semibold text-slate-900 mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg>
                收藏的试卷
            </h2>
            <div id="bookmarked-exams" class="space-y-3">
                <div class="text-center py-4 text-slate-400">加载中...</div>
            </div>
            <div class="mt-4 text-center">
                <a href="/exams?bookmarked=true" class="text-sm text-primary hover:text-blue-700">查看全部收藏</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    async function loadFriends() {
        const container = document.getElementById('friends-list');
        try {
            const res = await fetch('/api/user/friends');
            const data = await res.json();
            if (!data.success) throw new Error(data.message);
            if (data.friends.length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-slate-400">暂无好友</div>';
                return;
            }
            let html = '';
            data.friends.slice(0, 5).forEach(f => {
                html += `
                <div class="flex items-center space-x-3 p-2 border border-slate-100 rounded-lg">
                    <div class="w-8 h-8 bg-slate-200 rounded-full flex items-center justify-center text-slate-600 text-xs font-bold">
                        ${f.name.charAt(0).toUpperCase()}
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-medium text-slate-900">${f.name}</div>
                        <div class="text-xs text-slate-400">成为好友于 ${f.created_at}</div>
                    </div>
                </div>`;
            });
            container.innerHTML = html;
        } catch (e) {
            container.innerHTML = '<div class="text-center py-4 text-red-500">加载失败</div>';
        }
    }

    async function loadPosts() {
        const container = document.getElementById('my-posts');
        try {
            const res = await fetch('/api/user/posts');
            const data = await res.json();
            if (!data.success) throw new Error(data.message);
            if (data.posts.length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-slate-400">暂无帖子</div>';
                return;
            }
            let html = '';
            data.posts.slice(0, 5).forEach(p => {
                html += `
                <div class="p-3 border border-slate-100 rounded-lg hover:bg-slate-50 cursor-pointer" onclick="location.href='/forum#post-${p.id}'">
                    <div class="text-sm font-medium text-slate-900 truncate">${p.title}</div>
                    <div class="text-xs text-slate-500 mt-1">${p.created_at} · 💬 ${p.replies} · ❤️ ${p.likes}</div>
                </div>`;
            });
            container.innerHTML = html;
        } catch (e) {
            container.innerHTML = '<div class="text-center py-4 text-red-500">加载失败</div>';
        }
    }

    async function loadBookmarks() {
        const container = document.getElementById('bookmarked-exams');
        try {
            const res = await fetch('/api/user/exam-bookmarks');
            const data = await res.json();
            if (!data.success) throw new Error(data.message);
            if (data.bookmarks.length === 0) {
                container.innerHTML = '<div class="text-center py-4 text-slate-400">暂无收藏试卷</div>';
                return;
            }
            let html = '';
            data.bookmarks.slice(0, 5).forEach(e => {
                html += `
                <div class="p-3 border border-slate-100 rounded-lg hover:bg-slate-50 cursor-pointer" onclick="location.href='/exams/${e.id}'">
                    <div class="text-sm font-medium text-slate-900 truncate">${e.title}</div>
                    <div class="text-xs text-slate-500 mt-1">${e.subject} · 收藏于 ${e.bookmarked_at}</div>
                </div>`;
            });
            container.innerHTML = html;
        } catch (e) {
            container.innerHTML = '<div class="text-center py-4 text-red-500">加载失败</div>';
        }
    }

    loadFriends();
    loadPosts();
    loadBookmarks();
</script>
{% endblock %}