{% extends "base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/document_details.css">
{% endblock %}

{% block content %}
<div class="ldr-document-details-container">
    <!-- Back button and header -->
    <div class="ldr-document-header">
        <a href="/library" class="ldr-btn ldr-btn-secondary">
            <i aria-hidden="true" class="fas fa-arrow-left"></i> Back to Library
        </a>

        <h1 class="ldr-document-title">
            <i aria-hidden="true" class="fas fa-file-pdf"></i> {{ document.document_title or "Untitled Document" }}
        </h1>

        {% if document.authors %}
        <div class="ldr-document-subtitle">
            <ul class="ldr-authors-list">
                {% for author in document.authors %}
                <li>{{ author }}</li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        <div class="ldr-document-actions">
            {% if document.has_pdf %}
            <a href="/library/document/{{ document.id }}/pdf" target="_blank" class="ldr-btn ldr-btn-danger">
                <i aria-hidden="true" class="fas fa-file-pdf"></i> View PDF
            </a>
            {% endif %}

            {% if document.has_text_db %}
            <a href="/library/document/{{ document.id }}/txt" target="_blank" class="ldr-btn ldr-btn-success">
                <i aria-hidden="true" class="fas fa-file-alt"></i> View Text
            </a>
            {% endif %}

            {% if document.has_rag_indexed %}
            <a href="/library/document/{{ document.id }}/chunks" class="ldr-btn ldr-btn-info">
                <i aria-hidden="true" class="fas fa-puzzle-piece"></i> View Chunks ({{ document.rag_chunk_count }})
            </a>
            {% endif %}

            {% if document.original_url %}
            <a href="{{ document.original_url }}" target="_blank" rel="noopener noreferrer" class="ldr-btn ldr-btn-secondary">
                <i aria-hidden="true" class="fas fa-external-link-alt"></i> Original Source
            </a>
            {% endif %}
        </div>
    </div>

    <!-- Document Information -->
    <div class="ldr-metadata-section">
        <h2><i aria-hidden="true" class="fas fa-info-circle"></i> Document Information</h2>
        <div class="ldr-metadata-grid">
            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">Document ID</div>
                <div class="ldr-metadata-value"><code>{{ document.id }}</code></div>
            </div>

            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">File Type</div>
                <div class="ldr-metadata-value">
                    <span class="ldr-badge ldr-badge-info">{{ document.file_type | upper }}</span>
                </div>
            </div>

            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">File Size</div>
                <div class="ldr-metadata-value">{{ document.file_size_formatted }}</div>
            </div>

            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">Download Status</div>
                <div class="ldr-metadata-value">
                    {% if document.download_status == 'completed' %}
                    <span class="ldr-badge ldr-badge-success">Completed</span>
                    {% else %}
                    <span class="ldr-badge ldr-badge-warning">{{ document.download_status | title }}</span>
                    {% endif %}
                </div>
            </div>

            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">Downloaded At</div>
                <div class="ldr-metadata-value">{{ document.downloaded_at or "N/A" }}</div>
            </div>

            {% if document.domain %}
            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">Source Domain</div>
                <div class="ldr-metadata-value">{{ document.domain }}</div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Academic Identifiers -->
    {% if document.doi or document.arxiv_id or document.pmid or document.pmcid or document.isbn %}
    <div class="ldr-metadata-section">
        <h2><i aria-hidden="true" class="fas fa-fingerprint"></i> Academic Identifiers</h2>
        <div class="ldr-metadata-grid">
            {% if document.doi %}
            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">DOI</div>
                <div class="ldr-metadata-value">
                    <a href="https://doi.org/{{ document.doi }}" target="_blank" rel="noopener noreferrer">{{ document.doi }}</a>
                </div>
            </div>
            {% endif %}

            {% if document.arxiv_id %}
            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">arXiv ID</div>
                <div class="ldr-metadata-value">
                    <a href="https://arxiv.org/abs/{{ document.arxiv_id }}" target="_blank" rel="noopener noreferrer">{{ document.arxiv_id }}</a>
                </div>
            </div>
            {% endif %}

            {% if document.pmid %}
            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">PubMed ID</div>
                <div class="ldr-metadata-value">
                    <a href="https://pubmed.ncbi.nlm.nih.gov/{{ document.pmid }}" target="_blank" rel="noopener noreferrer">{{ document.pmid }}</a>
                </div>
            </div>
            {% endif %}

            {% if document.pmcid %}
            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">PMC ID</div>
                <div class="ldr-metadata-value">
                    <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/{{ document.pmcid }}" target="_blank" rel="noopener noreferrer">{{ document.pmcid }}</a>
                </div>
            </div>
            {% endif %}

            {% if document.isbn %}
            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">ISBN</div>
                <div class="ldr-metadata-value">{{ document.isbn }}</div>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- Publication Information -->
    {% if document.published_date %}
    <div class="ldr-metadata-section">
        <h2><i aria-hidden="true" class="fas fa-calendar"></i> Publication Information</h2>
        <div class="ldr-metadata-grid">
            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">Published Date</div>
                <div class="ldr-metadata-value">{{ document.published_date }}</div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Collections -->
    {% if document.collections %}
    <div class="ldr-metadata-section">
        <h2><i aria-hidden="true" class="fas fa-folder"></i> Collections</h2>
        <div class="ldr-metadata-value">
            <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                {% for collection in document.collections %}
                <a href="/library/collections/{{ collection.id }}"
                   class="ldr-btn ldr-btn-secondary"
                   style="text-decoration: none; display: flex; align-items: center; gap: 8px;">
                    <i aria-hidden="true" class="fas fa-folder-open"></i>
                    <span>{{ collection.name }}</span>
                    {% if collection.indexed %}
                    <span class="ldr-badge ldr-badge-success">
                        Indexed ({{ collection.chunk_count }})
                    </span>
                    {% else %}
                    <span class="ldr-badge ldr-badge-warning">
                        Not indexed
                    </span>
                    {% endif %}
                </a>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- RAG/Indexing Status -->
    <div class="ldr-metadata-section">
        <h2><i aria-hidden="true" class="fas fa-search"></i> RAG & Indexing Status</h2>
        <div class="ldr-metadata-grid">
            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">RAG Indexed</div>
                <div class="ldr-metadata-value">
                    {% if document.has_rag_indexed %}
                    <a href="/library/document/{{ document.id }}/chunks" style="text-decoration: none; color: inherit;">
                        <div class="ldr-rag-status" style="cursor: pointer;">
                            <i aria-hidden="true" class="fas fa-check-circle" style="color: var(--success-color);"></i>
                            <span>Yes ({{ document.rag_chunk_count }} chunks) <i aria-hidden="true" class="fas fa-external-link-alt" style="font-size: 0.8em; margin-left: 5px;"></i></span>
                        </div>
                    </a>
                    {% else %}
                    <div class="ldr-rag-status">
                        <i aria-hidden="true" class="fas fa-times-circle" style="color: var(--warning-color);"></i>
                        <span>Not indexed</span>
                    </div>
                    {% endif %}
                </div>
            </div>

            {% if document.last_indexed_at %}
            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">Last Indexed</div>
                <div class="ldr-metadata-value">{{ document.last_indexed_at }}</div>
            </div>
            {% endif %}

            {% if document.has_text_db %}
            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">Text Content</div>
                <div class="ldr-metadata-value">
                    <div class="ldr-rag-status">
                        <i aria-hidden="true" class="fas fa-file-alt" style="color: var(--success-color);"></i>
                        <span>Available ({{ document.word_count or 0 }} words)</span>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- File Path Information -->
    {% if document.file_path %}
    <div class="ldr-metadata-section">
        <h2><i aria-hidden="true" class="fas fa-folder-open"></i> File Location</h2>
        <div class="ldr-metadata-grid">
            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">File Path</div>
                <div class="ldr-metadata-value">
                    <code>{{ document.file_path }}</code>
                </div>
            </div>

            {% if document.file_absolute_path %}
            <div class="ldr-metadata-item">
                <div class="ldr-metadata-label">Absolute Path</div>
                <div class="ldr-metadata-value">
                    <code>{{ document.file_absolute_path }}</code>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- Original URL -->
    {% if document.original_url %}
    <div class="ldr-metadata-section">
        <h2><i aria-hidden="true" class="fas fa-link"></i> Source URL</h2>
        <div class="ldr-metadata-item">
            <div class="ldr-metadata-value">
                <a href="{{ document.original_url }}" target="_blank" rel="noopener noreferrer">{{ document.original_url }}</a>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Notes referencing this document (components/document_notes.js) -->
    <div class="ldr-metadata-section" id="document-notes-section" data-document-id="{{ document.id }}">
        <div class="ldr-research-notes-header">
            <h2 class="ldr-research-notes-heading"><i aria-hidden="true" class="fas fa-sticky-note"></i> Notes</h2>
            <div class="ldr-research-notes-actions">
                <button class="btn ldr-btn-outline btn-sm" id="document-add-note-btn" title="Start a note linked to this document — your comments, caveats, and follow-up ideas">
                    <i aria-hidden="true" class="fas fa-plus"></i> Add note
                </button>
            </div>
        </div>
        <p class="ldr-research-notes-hint">Tip: open the full text view to comment on specific passages.</p>
        <div id="document-notes-list" class="ldr-research-notes-list"></div>
        <p class="ldr-research-notes-empty" id="document-notes-empty" style="display:none">No notes on this document yet.</p>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<!-- Must load after base.html's shared deferred scripts (safe-fetch.js):
     deferred scripts execute in document order, and document_notes.js
     calls safeFetchWithAuth during its synchronous init. The annotation
     surface is not loaded here — this page has no #ldr-document-text-content. -->
<script defer src="/static/js/components/notes_shared.js"></script>
<script defer src="/static/js/components/document_notes.js"></script>
{% endblock %}