{% extends "library/base.html" %}

{% block title %}{{ paper.title }} | clrnoise{% endblock %}

{% block content %}
<section class="view-header">
    <p class="eyebrow">Paper record</p>
    <h1>{{ paper.title }}</h1>
    <p class="lede">
        {% if paper.publication %}{{ paper.publication }}{% endif %}
        {% if paper.year %}{% if paper.publication %} · {% endif %}{{ paper.year }}{% endif %}
        {% if not paper.publication and not paper.year %}Structured summary with author affiliations and project links.{% endif %}
    </p>
    <div class="header-actions">
        <a class="button button--ghost" href="{% url 'library:paper-list' %}">Back to library</a>
        <a class="button" href="{% url 'library:paper-projects' paper.pk %}">Use in a project</a>
        {% if pdf_viewer_ready %}
            <a class="button button--ghost" href="{% url 'library:paper-pdf' paper.pk %}" target="_blank" rel="noreferrer">Open PDF</a>
        {% endif %}
        <a class="button button--danger" href="{% url 'library:paper-delete' paper.pk %}">Delete paper</a>
    </div>
</section>

<div class="detail-grid">

    {# ── Synthesis (reading notes) ───────────────────────────────────────────── #}
    <section class="panel panel--wide">
        <div class="section-heading">
            <div>
                <p class="section-heading__eyebrow">Synthesis</p>
                <h2>Reading notes</h2>
            </div>
        </div>
        <div class="detail-sections">
            <article class="detail-block">
                <h3>Summary</h3>
                <p>{{ paper.summary|linebreaksbr }}</p>
            </article>
            <article class="detail-block">
                <h3>What they did</h3>
                <p>{{ paper.what_they_did|linebreaksbr }}</p>
            </article>
            <article class="detail-block">
                <h3>How they did it and what they found</h3>
                <p>{{ paper.methodology_and_findings|linebreaksbr }}</p>
            </article>
        </div>
    </section>

    {# ── AI Assistant ────────────────────────────────────────────────────────── #}
    <section class="panel panel--wide" data-ai-panel data-ask-url="{{ ai_ask_url }}">
        <div class="section-heading">
            <div>
                <p class="section-heading__eyebrow">AI Assistant</p>
                <h2>Ask about this paper</h2>
            </div>
        </div>
        <div class="ai-query-form">
            <div class="field">
                <label class="help-text" for="ai-question">Your question — the AI will answer using the paper's synthesis notes and PDF text if available.</label>
                <textarea
                    id="ai-question"
                    class="input-control"
                    data-ai-question
                    rows="2"
                    placeholder="e.g. What is the main contribution? What dataset did they use? How does the method compare to baselines?"
                ></textarea>
            </div>
            <div class="form-actions">
                <button type="button" class="button" data-ai-ask-btn>Ask</button>
                <span class="help-text">or press Ctrl+Enter</span>
            </div>
            <div class="ai-response" data-ai-response hidden></div>
        </div>
    </section>

    {# ── PDF viewer ──────────────────────────────────────────────────────────── #}
    <section class="panel panel--wide">
        <div class="section-heading">
            <div>
                <p class="section-heading__eyebrow">Source document</p>
                <h2>PDF viewer</h2>
            </div>
            {% if pdf_viewer_ready %}
                <span class="section-count">{{ pdf_filename }} · {{ pdf_page_count }} pages</span>
            {% endif %}
        </div>

        {% if pdf_viewer_ready %}
            <div
                class="pdf-workspace"
                data-pdf-viewer
                data-page-count="{{ pdf_page_count }}"
                data-image-url-template="{{ pdf_page_url_template }}"
                data-annotation-url="{{ annotation_create_url }}"
                data-annotation-delete-url-template="{{ annotation_delete_url_template }}"
            >
                <div class="pdf-toolbar">
                    <div class="pdf-toolbar__group">
                        {# Previous page #}
                        <button class="icon-btn" type="button" data-prev-page title="Previous page" aria-label="Previous page">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
                        </button>
                        <span class="pdf-page-status">Page <strong data-current-page>1</strong> of {{ pdf_page_count }}</span>
                        {# Next page #}
                        <button class="icon-btn" type="button" data-next-page title="Next page" aria-label="Next page">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
                        </button>
                    </div>

                    <div class="pdf-toolbar__divider" aria-hidden="true"></div>

                    <div class="pdf-toolbar__group pdf-toolbar__tools" role="group" aria-label="Annotation tools">
                        {# Browse — eye icon #}
                        <button class="icon-btn is-active" type="button" data-tool-button="browse" title="Browse — read without marking" aria-label="Browse mode" aria-pressed="true">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/>
                                <circle cx="12" cy="12" r="3"/>
                            </svg>
                        </button>
                        {# Select — corner-frame icon #}
                        <button class="icon-btn" type="button" data-tool-button="select" title="Select — drag to copy a region to clipboard" aria-label="Select mode" aria-pressed="false">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M8 3H5a2 2 0 0 0-2 2v3"/>
                                <path d="M16 3h3a2 2 0 0 1 2 2v3"/>
                                <path d="M8 21H5a2 2 0 0 1-2-2v-3"/>
                                <path d="M16 21h3a2 2 0 0 0 2-2v-3"/>
                            </svg>
                        </button>
                        {# Highlight — marker pen icon #}
                        <button class="icon-btn" type="button" data-tool-button="highlight" title="Highlight — drag to mark a region" aria-label="Highlight mode" aria-pressed="false">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M12 20h9"/>
                                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
                            </svg>
                        </button>
                        {# Sticky note — message bubble icon #}
                        <button class="icon-btn" type="button" data-tool-button="note" title="Sticky note — click to attach a note" aria-label="Sticky note mode" aria-pressed="false">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <p class="pdf-helper" data-viewer-help>
                    <span class="pdf-helper__tool" data-tool-hint="browse">Read and scroll freely.</span>
                    <span class="pdf-helper__tool" data-tool-hint="select" hidden>Drag to select a region — releases a copy to your clipboard.</span>
                    <span class="pdf-helper__tool" data-tool-hint="highlight" hidden>Drag over text or a region to paint a saved highlight.</span>
                    <span class="pdf-helper__tool" data-tool-hint="note" hidden>Click anywhere on the page to attach a saved sticky note.</span>
                    Hover any annotation to reveal its delete button.
                </p>

                <div class="pdf-viewer-shell">
                    <div class="pdf-stage" data-pdf-stage>
                        <img
                            class="pdf-viewer-frame"
                            data-pdf-image
                            src="{% url 'library:paper-pdf-page' paper.pk 1 %}"
                            alt="Page 1 of {{ paper.title }}"
                        >
                        <div class="pdf-annotation-layer" data-annotation-layer></div>
                        <div class="pdf-selection-box" data-selection-box hidden></div>

                        {# Note input popup — positioned absolutely inside the stage #}
                        <div class="note-input-popup" data-note-popup hidden>
                            <textarea
                                class="note-input-popup__textarea input-control"
                                data-note-popup-text
                                placeholder="Type your note… (Ctrl+Enter to save)"
                                rows="3"
                            ></textarea>
                            <div class="note-input-popup__actions">
                                <button type="button" class="button button--small" data-note-popup-save>Save note</button>
                                <button type="button" class="button button--ghost button--small" data-note-popup-cancel>Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>

                {# Hidden form for CSRF — used by PDF viewer JS #}
                <form class="field--hidden" data-annotation-csrf-form>{% csrf_token %}</form>
                {{ paper_annotations|json_script:"paper-annotations-data" }}
            </div>
        {% else %}
            <div class="empty-state">
                <h3>No viewable PDF is attached</h3>
                <p>Add or import a valid local PDF path for this paper to preview it inside the workspace.</p>
            </div>
        {% endif %}
    </section>

    {# ── User notes ──────────────────────────────────────────────────────────── #}
    <section class="panel panel--wide" data-notes-panel data-notes-url="{{ notes_update_url }}">
        <div class="section-heading">
            <div>
                <p class="section-heading__eyebrow">Personal workspace</p>
                <h2>Your notes</h2>
            </div>
            <span class="notes-save-status" data-notes-status></span>
        </div>

        <div class="rte-toolbar" role="toolbar" aria-label="Formatting">
            <button class="rte-btn" type="button" data-rte-cmd="bold" title="Bold"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg></button>
            <button class="rte-btn" type="button" data-rte-cmd="italic" title="Italic"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg></button>
            <div class="rte-toolbar__divider"></div>
            <button class="rte-btn" type="button" data-rte-block="h3" title="Section heading">H3</button>
            <button class="rte-btn" type="button" data-rte-block="h4" title="Sub-heading">H4</button>
            <button class="rte-btn" type="button" data-rte-block="p" title="Normal paragraph"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 4v16"/><path d="M17 4v16"/><path d="M19 4H9.5a4.5 4.5 0 0 0 0 9H13"/></svg></button>
            <div class="rte-toolbar__divider"></div>
            <button class="rte-btn" type="button" data-rte-cmd="insertUnorderedList" title="Bullet list"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4" cy="6" r="1" fill="currentColor"/><circle cx="4" cy="12" r="1" fill="currentColor"/><circle cx="4" cy="18" r="1" fill="currentColor"/></svg></button>
            <button class="rte-btn" type="button" data-rte-cmd="insertOrderedList" title="Numbered list"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg></button>
        </div>

        <div
            class="rte-editor"
            contenteditable="true"
            spellcheck="true"
            data-notes-input
            data-placeholder="Add your personal reading notes, questions, or ideas about this paper…"
        >{% if paper.user_notes %}{{ paper.user_notes|safe }}{% endif %}</div>
    </section>

    {# ── Authors ─────────────────────────────────────────────────────────────── #}
    <section class="panel">
        <div class="section-heading">
            <div>
                <p class="section-heading__eyebrow">Authors</p>
                <h2>Affiliations</h2>
            </div>
        </div>
        <div class="stack-list stack-list--compact">
            {% for author in paper.authors.all %}
                <div class="author-row">
                    <strong>{{ author.name }}</strong>
                    <span>{{ author.affiliation }}</span>
                </div>
            {% endfor %}
        </div>
    </section>

    {# ── Metadata ────────────────────────────────────────────────────────────── #}
    <section class="panel">
        <div class="section-heading">
            <div>
                <p class="section-heading__eyebrow">Metadata</p>
                <h2>Reference details</h2>
            </div>
        </div>
        <dl class="meta-list">
            <div>
                <dt>DOI</dt>
                <dd>{{ paper.doi|default:"Not recorded" }}</dd>
            </div>
            <div>
                <dt>Link</dt>
                <dd>
                    {% if paper.url %}
                        <a class="text-link" href="{{ paper.url }}" target="_blank" rel="noreferrer">Open source</a>
                    {% else %}
                        Not recorded
                    {% endif %}
                </dd>
            </div>
            <div>
                <dt>Added</dt>
                <dd>{{ paper.created_at|date:"M j, Y" }}</dd>
            </div>
            <div>
                <dt>Source PDF</dt>
                <dd>{{ paper.source_pdf_path|default:"Not recorded" }}</dd>
            </div>
        </dl>
    </section>

    {# ── Projects ────────────────────────────────────────────────────────────── #}
    <section class="panel">
        <div class="section-heading">
            <div>
                <p class="section-heading__eyebrow">Projects</p>
                <h2>Where this paper is used</h2>
            </div>
        </div>
        {% if paper.projects.all %}
            <div class="stack-list stack-list--compact">
                {% for project in paper.projects.all %}
                    <a class="project-row project-row--compact" href="{% url 'library:project-detail' project.pk %}">
                        <div class="project-row__body">
                            <h3>{{ project.name }}</h3>
                            <p>{{ project.focus|default:"Open the project to review the selected paper set." }}</p>
                        </div>
                        <div class="project-row__meta">
                            <span>{{ project.paper_total }} papers</span>
                        </div>
                    </a>
                {% endfor %}
            </div>
        {% else %}
            <div class="empty-state empty-state--small">
                <h3>No linked projects yet</h3>
                <p>Add this paper to a literature review project when you are ready to group it with related work.</p>
            </div>
        {% endif %}
    </section>

</div>
{% endblock %}