{% extends "base.html" %}
{% block title %}{{ profile_user.full_name }} — {{ settings.APP_NAME }}{% endblock %}

{% block content %}
<div class="container page-content">
    <div class="profile-header">
        <div class="profile-avatar-large">{{ profile_user.full_name[0] }}</div>
        <div class="profile-info">
            <h1>
                {{ profile_user.full_name }}
                {% if profile_user.is_verified %}<span class="verified-badge verified-lg" title="Verified academic email">✓</span>{% endif %}
            </h1>
            {% if profile_user.primary_affiliation %}
            <div class="profile-affiliation">
                {{ profile_user.primary_affiliation.designation }}, {{ profile_user.primary_affiliation.institution }}
                {% if profile_user.primary_affiliation.department %} — {{ profile_user.primary_affiliation.department }}{% endif %}
            </div>
            {% endif %}
            {% if profile_user.field %}
            <div class="profile-field" style="color: {{ profile_user.field.color }}">{{ profile_user.field.name }}</div>
            {% endif %}
            {% if profile_user.bio %}
            <p class="profile-bio">{{ profile_user.bio }}</p>
            {% endif %}
            <div class="profile-stats">
                <span><strong>{{ pubs_count }}</strong> Publications</span>
                <span><strong>{{ questions_count }}</strong> Questions</span>
            </div>
            <div class="profile-joined">Joined {{ profile_user.created_at.strftime('%B %Y') }}</div>
        </div>
    </div>

    {% if profile_user.affiliations|length > 1 %}
    <div class="profile-section">
        <h2>Affiliations</h2>
        <div class="affiliations-list">
            {% for aff in profile_user.affiliations %}
            <div class="affiliation-item">
                <strong>{{ aff.designation }}</strong> at {{ aff.institution }}
                {% if aff.department %}<span class="aff-dept">{{ aff.department }}</span>{% endif %}
                {% if aff.start_year %}
                <span class="aff-years">{{ aff.start_year }}{% if aff.end_year %} – {{ aff.end_year }}{% else %} – present{% endif %}</span>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <div class="profile-tabs">
        <button class="tab-btn active" onclick="showTab('pubs')">Publications</button>
        <button class="tab-btn" onclick="showTab('questions')">Questions</button>
    </div>

    <div id="tab-pubs" class="tab-content">
        <div id="profilePubs"></div>
    </div>
    <div id="tab-questions" class="tab-content" style="display:none;">
        <div id="profileQuestions"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const profileUsername = "{{ profile_user.username }}";

function showTab(tab) {
    document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
    document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
    document.getElementById('tab-' + tab).style.display = 'block';
    event.target.classList.add('active');
}

async function loadProfileData() {
    // Publications
    const pubRes = await fetch(`/api/publications?author=${profileUsername}`);
    const pubData = await pubRes.json();
    document.getElementById('profilePubs').innerHTML = pubData.results.length
        ? pubData.results.map(p => `
            <div class="pub-list-item">
                <div class="pub-list-type">${p.publication_type}</div>
                <div class="pub-list-content">
                    <h3><a href="/publications/${p.id}">${escapeHtml(p.title)}</a></h3>
                    <div class="pub-list-stats"><span>👁 ${p.view_count}</span> <span>📄 ${p.citation_count}</span></div>
                </div>
            </div>
        `).join('')
        : '<p class="empty-state">No publications yet.</p>';

    // Questions
    const qRes = await fetch(`/api/questions?author=${profileUsername}`);
    const qData = await qRes.json();
    document.getElementById('profileQuestions').innerHTML = qData.results.length
        ? qData.results.map(q => `
            <div class="question-card-sm">
                <h3><a href="/questions/${q.id}">${escapeHtml(q.title)}</a></h3>
                <div class="q-meta"><span>${q.answer_count} answers</span> <span>${q.vote_count} votes</span></div>
            </div>
        `).join('')
        : '<p class="empty-state">No questions yet.</p>';
}
loadProfileData();
</script>
{% endblock %}