{% extends "base.html" %}
{% from "components/help_macros.html" import tooltip %}

{% block title %}Research Results - Deep Research System{% endblock %}


{% block content %}
<div class="ldr-page active" id="research-results">
    <div class="ldr-page-header">
        <div class="ldr-results-header">
            <h1 class="ldr-page-title">Research Results</h1>
            <div class="ldr-results-actions">
                <button class="btn btn-primary" id="ask-followup-btn" onclick="window.followUpResearch ? followUpResearch.showFollowUpModal() : alert('Follow-up feature loading...')" title="Ask a follow-up question using this research's sources and context"><i aria-hidden="true" class="fas fa-question-circle"></i> Ask Follow-up Question</button>
                <button class="btn ldr-btn-outline" id="view-metrics-btn" title="View token usage and cost metrics for this research session"><i aria-hidden="true" class="fas fa-chart-bar"></i> View Metrics</button>
                <button class="btn ldr-btn-outline" id="download-pdf-btn" title="Download as PDF document for sharing or printing"><i aria-hidden="true" class="fas fa-file-pdf"></i> Download PDF</button>
                <div class="dropdown d-inline-block">
                    <button class="btn ldr-btn-outline dropdown-toggle" type="button" id="export-dropdown-btn" data-bs-toggle="dropdown" aria-expanded="false" title="Export research to various formats">
                        <i aria-hidden="true" class="fas fa-download"></i> Export
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="export-dropdown-btn">
                        <li><a class="dropdown-item" href="#" id="export-markdown-btn"><i aria-hidden="true" class="fas fa-file-alt"></i> Markdown</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#" id="export-latex-btn"><i aria-hidden="true" class="fas fa-file-code"></i> LaTeX</a></li>
                        <li><a class="dropdown-item" href="#" id="export-quarto-btn"><i aria-hidden="true" class="fas fa-file-code"></i> Quarto</a></li>
                        <li><a class="dropdown-item" href="#" id="export-odt-btn"><i aria-hidden="true" class="fas fa-file-word"></i> ODT (LibreOffice)</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#" id="export-ris-btn"><i aria-hidden="true" class="fas fa-file-export"></i> RIS (Zotero)</a></li>
                    </ul>
                </div>
                <button class="btn ldr-btn-outline" id="save-to-collection-btn" title="Save this research to a collection for future reference"><i aria-hidden="true" class="fas fa-folder-plus"></i> Save to Collection</button>
                <button class="btn ldr-btn-outline" id="research-save-as-note-top-btn" title="Copy this report into a new editable note, linked to this research (the report itself stays unchanged)"><i aria-hidden="true" class="fas fa-sticky-note"></i> Save as Note</button>
                <button class="btn ldr-btn-outline" id="report-issue-btn" title="Report bugs, suggest features, or get help from the community"><i aria-hidden="true" class="fas fa-hands-helping"></i> Help Improve</button>
                <button class="btn ldr-btn-outline" id="back-to-history"><i aria-hidden="true" class="fas fa-arrow-left"></i> Back to History</button>
            </div>
        </div>
    </div>
    <div class="ldr-card ldr-results-card">
        <div class="ldr-card-content">
            <div class="ldr-results-metadata" id="research-metadata">
                <div class="ldr-metadata-item">
                    <span class="ldr-metadata-label">Query:</span>
                    <span id="result-query" class="ldr-metadata-value"></span>
                </div>
                <div class="ldr-metadata-item">
                    <span class="ldr-metadata-label">Generated:</span>
                    <span id="result-date" class="ldr-metadata-value"></span>
                </div>
                <div class="ldr-metadata-item">
                    <span class="ldr-metadata-label">Mode:</span>
                    <span id="result-mode" class="ldr-metadata-value"></span>
                </div>
                <div class="ldr-metadata-item">
                    <span class="ldr-metadata-label">Your Rating:</span>
                    <div class="ldr-star-rating" id="research-rating" title="Rate this research session to help improve your future searches. All rating data is stored locally on your device only and is never shared or sent anywhere.">
                        <span class="ldr-star" data-rating="1">★</span>
                        <span class="ldr-star" data-rating="2">★</span>
                        <span class="ldr-star" data-rating="3">★</span>
                        <span class="ldr-star" data-rating="4">★</span>
                        <span class="ldr-star" data-rating="5">★</span>
                    </div>
                    <button type="button" id="ldr-detailed-rating-toggle" class="ldr-detailed-rating-toggle" aria-expanded="false" style="display:none;">Details ▾</button>
                </div>
                <div id="ldr-detailed-rating" class="ldr-detailed-rating" style="display:none;">
                    <div class="ldr-dimension-row">
                        <label>Accuracy</label>
                        <input type="range" min="1" max="5" value="3" class="ldr-dimension-slider" data-dimension="accuracy">
                        <span class="ldr-dimension-value">3</span>
                    </div>
                    <div class="ldr-dimension-row">
                        <label>Completeness</label>
                        <input type="range" min="1" max="5" value="3" class="ldr-dimension-slider" data-dimension="completeness">
                        <span class="ldr-dimension-value">3</span>
                    </div>
                    <div class="ldr-dimension-row">
                        <label>Relevance</label>
                        <input type="range" min="1" max="5" value="3" class="ldr-dimension-slider" data-dimension="relevance">
                        <span class="ldr-dimension-value">3</span>
                    </div>
                    <div class="ldr-dimension-row">
                        <label>Readability</label>
                        <input type="range" min="1" max="5" value="3" class="ldr-dimension-slider" data-dimension="readability">
                        <span class="ldr-dimension-value">3</span>
                    </div>
                    <div class="ldr-feedback-row">
                        <label>Feedback <span class="ldr-optional">(optional)</span></label>
                        <textarea id="ldr-rating-feedback" class="ldr-feedback-textarea" placeholder="What could be improved?" rows="2"></textarea>
                    </div>
                </div>
            </div>
            <!-- Context Overflow Warning Banner -->
            <div id="context-overflow-warning" class="ldr-alert ldr-alert-warning" role="region" aria-label="Context overflow notice" style="display: none;">
                <i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
                <div>
                    <strong>Context Overflow Detected</strong>
                    <span id="context-overflow-message"></span>
                    <a id="context-overflow-action" class="ldr-alert-action">
                        View overflow details
                        <span aria-hidden="true">→</span>
                    </a>
                </div>
            </div>
            <div class="ldr-results-content" id="results-content">
                <!-- Will be populated dynamically -->
                <div class="ldr-loading-spinner ldr-centered" role="status" aria-label="Loading research results">
                    <div class="ldr-spinner"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Notes on this research (reverse direction of the notes feature's
         research linking; populated by components/research_notes.js) -->
    <div class="ldr-card" id="research-notes-section">
        <div class="ldr-card-content">
            <div class="ldr-research-notes-header">
                <h3 class="ldr-research-notes-heading"><i aria-hidden="true" class="fas fa-sticky-note"></i> Notes</h3>
                <div class="ldr-research-notes-actions">
                    <button class="btn ldr-btn-outline btn-sm" id="research-add-note-btn" title="Start a note linked to this research — your comments, caveats, and follow-up ideas">
                        <i aria-hidden="true" class="fas fa-plus"></i> Add note
                    </button>
                    <button class="btn ldr-btn-outline btn-sm" id="research-save-as-note-btn" title="Copy this report into a new editable note (the report itself stays unchanged)">
                        <i aria-hidden="true" class="fas fa-copy"></i> Save report as note
                    </button>
                </div>
            </div>
            <p class="ldr-research-notes-hint">Tip: select text in the report to comment on it (highlighted, Word-review style) or clip it into a quote note.</p>
            <div id="research-notes-list" class="ldr-research-notes-list"></div>
            <p class="ldr-research-notes-empty" id="research-notes-empty" style="display:none">No notes on this research yet.</p>
        </div>
    </div>

    {% include "components/log_panel.html" %}

    <!-- Help Improve Modal -->
    <div class="modal fade" id="reportIssueModal" tabindex="-1" aria-labelledby="reportIssueModalLabel" aria-hidden="true" style="z-index: 10000;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="reportIssueModalLabel"><i aria-hidden="true" class="fas fa-hands-helping"></i> Help Improve LDR</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="ldr-feedback-options">
                        <a href="https://github.com/LearningCircuit/local-deep-research/issues/new?labels=bug&template=bug_report.md"
                           target="_blank" rel="noopener noreferrer" class="ldr-feedback-option">
                            <i aria-hidden="true" class="fas fa-bug"></i>
                            <div>
                                <strong>Report a Bug</strong>
                                <small>Something isn't working correctly</small>
                            </div>
                        </a>

                        <a href="https://github.com/LearningCircuit/local-deep-research/issues/new?labels=enhancement&template=feature_request.md"
                           target="_blank" rel="noopener noreferrer" class="ldr-feedback-option">
                            <i aria-hidden="true" class="fas fa-lightbulb"></i>
                            <div>
                                <strong>Suggest an Idea</strong>
                                <small>Feature request or improvement</small>
                            </div>
                        </a>

                        <a href="https://discord.gg/ttcqQeFcJ3"
                           target="_blank" rel="noopener noreferrer" class="ldr-feedback-option">
                            <i aria-hidden="true" class="fab fa-discord"></i>
                            <div>
                                <strong>Ask a Question</strong>
                                <small>Get help from the community</small>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Save to Collection Modal -->
    <div class="modal fade" id="saveToCollectionModal" tabindex="-1" aria-labelledby="saveToCollectionModalLabel" aria-hidden="true" style="z-index: 10000;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="saveToCollectionModalLabel"><i aria-hidden="true" class="fas fa-folder-plus"></i> Save to Collection</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted mb-3">Save this research (report and sources) to a collection for semantic search.</p>
                    <div id="collection-list-loading" class="text-center py-3">
                        <i aria-hidden="true" class="fas fa-spinner fa-spin"></i> Loading collections...
                    </div>
                    <div id="collection-list" style="display: none;">
                        <div class="list-group" id="collection-items">
                            <!-- Collection items will be populated here -->
                        </div>
                    </div>
                    <div id="collection-error" class="alert alert-danger" role="alert" aria-live="assertive" style="display: none;"></div>
                    <div id="collection-success" class="alert alert-success" role="status" aria-live="polite" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<!-- formatting.js, api.js already loaded by base.html -->
<!-- Fallback utilities in case main services are not available -->
<script defer src="/static/js/components/fallback/ui.js"></script>
<script defer src="/static/js/components/fallback/formatting.js"></script>

<script defer src="/static/js/services/pdf.js?v={{ range(1000, 9999) | random }}"></script>

<!-- Results component -->
<script defer src="/static/js/components/results.js"></script>

<!-- Follow-up Research component -->
<script defer src="/static/js/followup.js"></script>

<!-- Report Issue / Feedback component -->
<script defer src="/static/js/components/report_issue.js"></script>
<!-- Save to Collection component -->
<script defer src="/static/js/components/save_to_collection.js"></script>

<script defer src="/static/js/components/notes_shared.js"></script>
<script defer src="/static/js/components/annotation_surface.js"></script>
<script defer src="/static/js/components/research_notes.js"></script>
{% endblock %}