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

{% block content %}
<div class="container page-content">
    <div id="pubDetail"></div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const pubId = {{ pub_id }};
const currentUserId = {{ user.id if user else 'null' }};

async function loadPublication() {
    const res = await fetch(`/api/publications/${pubId}`);
    if (!res.ok) { document.getElementById('pubDetail').innerHTML = '<h2>Publication not found</h2>'; return; }
    const p = await res.json();

    // Build Google Scholar meta tags
    document.title = p.title + ' — {{ settings.APP_NAME }}';
    addMeta('citation_title', p.title);
    if (p.author) addMeta('citation_author', p.author.full_name);
    if (p.doi) addMeta('citation_doi', p.doi);
    if (p.journal) addMeta('citation_journal_title', p.journal);
    if (p.year) addMeta('citation_publication_date', p.year);
    const pdfFile = (p.files || []).find(f => f.file_type === 'pdf');
    if (pdfFile) addMeta('citation_pdf_url', window.location.origin + pdfFile.file_path);

    document.getElementById('pubDetail').innerHTML = `
        <article class="pub-detail" itemscope itemtype="http://schema.org/ScholarlyArticle">
            <div class="pub-detail-header">
                <span class="pub-type-badge">${p.publication_type}</span>
                ${p.field ? `<span class="pub-field-badge" style="background:${p.field.color}">${p.field.name}</span>` : ''}
            </div>
            <h1 itemprop="name">${escapeHtml(p.title)}</h1>

            <div class="pub-author-card">
                <div class="author-avatar">${p.author.full_name[0]}</div>
                <div class="author-info">
                    <a href="/profile/${p.author.username}" class="author-name" itemprop="author">
                        ${escapeHtml(p.author.full_name)}
                        ${p.author.is_verified ? '<span class="verified-badge" title="Verified">✓</span>' : ''}
                    </a>
                    ${p.author.affiliation ? `<div class="author-affiliation">${escapeHtml(p.author.affiliation.designation)}, ${escapeHtml(p.author.affiliation.institution)}</div>` : ''}
                </div>
                <div class="pub-date">${new Date(p.created_at).toLocaleDateString()}</div>
            </div>

            <div class="pub-stats-bar">
                <span>👁 ${p.view_count} views</span>
                <span>📄 ${p.citation_count} citations</span>
                ${p.doi ? `<span>DOI: <a href="https://doi.org/${p.doi}" target="_blank" rel="noopener">${p.doi}</a></span>` : ''}
                ${p.journal ? `<span>📰 ${escapeHtml(p.journal)}</span>` : ''}
                ${p.year ? `<span>📅 ${p.year}</span>` : ''}
            </div>

            <div class="pub-tags">
                ${(p.tags || []).map(t => `<a href="/publications?tag=${t.slug}" class="tag">${t.name}</a>`).join('')}
            </div>

            ${p.abstract ? `<div class="pub-section"><h2>Abstract</h2><p itemprop="description">${escapeHtml(p.abstract)}</p></div>` : ''}
            ${p.content ? `<div class="pub-section"><h2>Full Text</h2><div class="pub-content">${escapeHtml(p.content)}</div></div>` : ''}

            ${(p.files && p.files.length) ? `
                <div class="pub-section">
                    <h2>Files</h2>
                    <div class="pub-files">
                        ${p.files.map(f => `
                            <a href="${f.file_path}" target="_blank" class="file-link">
                                ${f.file_type === 'pdf' ? '📄' : f.file_type === 'image' ? '🖼️' : f.file_type === 'video' ? '🎬' : '📎'}
                                ${escapeHtml(f.original_name)}
                            </a>
                        `).join('')}
                    </div>
                </div>
            ` : ''}

            ${p.git_repo_url ? `<div class="pub-section"><h2>Code Repository</h2><a href="${escapeHtml(p.git_repo_url)}" target="_blank" rel="noopener" class="repo-link">🔗 ${escapeHtml(p.git_repo_url)}</a></div>` : ''}

            ${p.video_url ? `<div class="pub-section"><h2>Video</h2><div class="pub-video">${getVideoEmbed(p.video_url)}</div></div>` : ''}

            ${(p.citations && p.citations.length) ? `
                <div class="pub-section">
                    <h2>References</h2>
                    <ol class="citation-list">
                        ${p.citations.map(c => `<li>${escapeHtml(c.citation_text)}</li>`).join('')}
                    </ol>
                </div>
            ` : ''}

            <div class="pub-section">
                <h2>Discussion (${p.comments.length})</h2>
                ${currentUserId ? `
                    <form id="commentForm" class="comment-form">
                        <textarea id="commentContent" placeholder="Add a comment..." required class="form-control" rows="3"></textarea>
                        <button type="submit" class="btn btn-primary btn-sm">Post Comment</button>
                    </form>
                ` : '<p><a href="/login">Log in</a> to join the discussion.</p>'}
                <div class="comments-list">
                    ${p.comments.map(c => `
                        <div class="comment" id="comment-${c.id}">
                            <div class="comment-header">
                                <strong>${escapeHtml(c.author.full_name)}</strong>
                                ${c.author.is_verified ? '<span class="verified-badge">✓</span>' : ''}
                                <span class="comment-date">${new Date(c.created_at).toLocaleDateString()}</span>
                            </div>
                            <p>${escapeHtml(c.content)}</p>
                        </div>
                    `).join('')}
                </div>
            </div>
        </article>
    `;

    // Create JSON-LD structured data separately
    const jsonLdData = {
        "@context": "http://schema.org",
        "@type": "ScholarlyArticle",
        "name": p.title,
        "author": {"@type": "Person", "name": p.author.full_name},
        "datePublished": p.created_at
    };
    if (p.doi) jsonLdData["sameAs"] = "https://doi.org/" + p.doi;
    if (p.abstract) jsonLdData["description"] = p.abstract;

    const jsonLdScript = document.createElement('script');
    jsonLdScript.type = 'application/ld+json';
    jsonLdScript.textContent = JSON.stringify(jsonLdData);
    document.head.appendChild(jsonLdScript);

    // Comment form
    const commentForm = document.getElementById('commentForm');
    if (commentForm) {
        commentForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const content = document.getElementById('commentContent').value;
            const res = await fetch(`/api/publications/${pubId}/comments`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ content }),
            });
            if (res.ok) location.reload();
        });
    }
}

function getVideoEmbed(url) {
    const ytMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
    if (ytMatch) return `<iframe width="100%" height="400" src="https://www.youtube.com/embed/${ytMatch[1]}" frameborder="0" allowfullscreen></iframe>`;
    return `<a href="${escapeHtml(url)}" target="_blank" rel="noopener">Watch Video</a>`;
}

function addMeta(name, content) {
    const meta = document.createElement('meta');
    meta.name = name;
    meta.content = content;
    document.head.appendChild(meta);
}

loadPublication();
</script>
{% endblock %}