{% extends "base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/deepsearch.css') }}">
{% endblock %}

{% block content %}
<div class="ds-session" data-deepsearch-session data-uid="{{ uid }}"
     {% if chat_ws_url %}data-chat-ws="{{ chat_ws_url }}"{% endif %}>
    <div class="ds-session-main">
        <header class="ds-session-head">
            <h1>{{ query }}</h1>
            <div class="ds-metrics" role="group" aria-label="Research metrics">
                <span class="ds-metric"><strong>{{ score }}</strong> score</span>
                <span class="ds-metric"><strong>{{ confidence }}</strong> confidence</span>
                <span class="ds-metric"><strong>{{ source_diversity }}</strong> diversity</span>
                <span class="ds-metric"><strong>{{ page_count }}</strong> sources</span>
                <span class="ds-metric"><strong>{{ chunk_count }}</strong> chunks</span>
            </div>
            {% if export_md_url %}
            <div class="ds-exports">
                <a class="btn ds-export" href="{{ export_md_url }}">Markdown</a>
                <a class="btn ds-export" href="{{ export_json_url }}">JSON</a>
                <a class="btn ds-export" href="{{ export_pdf_url }}">PDF</a>
            </div>
            {% endif %}
        </header>

        {% if synthesis == "heuristic" %}
        <section class="ds-card ds-degraded">
            <strong>Degraded report.</strong> Automatic synthesis failed for this run, so the sections below show raw source material instead of an analysed report. Re-run the research to try again.
        </section>
        {% endif %}

        {% if summary %}
        <section class="ds-card">
            <h2>{{ "Report" if synthesis == "agents" else "Summary" }}</h2>
            <div class="ds-summary rendered-content">{{ link_citations(render_content(summary), sources|length) }}</div>
        </section>
        {% endif %}

        {% if findings %}
        <section class="ds-card">
            <h2>Findings</h2>
            <div class="ds-findings">
                {% for finding in findings %}
                <details class="ds-finding" open>
                    <summary>
                        <span class="ds-finding-title">{{ finding.title }}</span>
                        <span class="ds-finding-confidence">{{ finding.confidence }}</span>
                    </summary>
                    <div class="ds-finding-detail">{{ link_citations(finding.detail|e, sources|length) }}</div>
                    {% if finding.citations %}
                    <div class="ds-finding-cites">
                        {% for cite in finding.citations %}
                        {% if cite is number and cite >= 1 and cite <= sources|length %}
                        <a class="ds-cite" href="#ds-source-{{ cite }}" data-cite="{{ cite }}">[{{ cite }}]</a>
                        {% endif %}
                        {% endfor %}
                    </div>
                    {% endif %}
                </details>
                {% endfor %}
            </div>
        </section>
        {% endif %}

        {% if sources %}
        <section class="ds-card">
            <h2>Sources</h2>
            <ol class="ds-sources">
                {% for source in sources %}
                <li id="ds-source-{{ loop.index }}">
                    <a href="{{ source.url }}" target="_blank" rel="noopener nofollow">{{ source.title or source.url }}</a>
                    <span class="ds-source-tag">{{ source.source }}</span>
                </li>
                {% endfor %}
            </ol>
        </section>
        {% endif %}

        {% if follow_up_questions and chat_ws_url %}
        <section class="ds-card ds-followups">
            <h2>Ask next</h2>
            <div class="ds-followup-list">
                {% for question in follow_up_questions %}
                <button type="button" class="ds-followup-chip" data-followup>{{ question }}</button>
                {% endfor %}
            </div>
        </section>
        {% endif %}
    </div>

    <aside class="ds-chat-pane" aria-label="Ask the research">
        <div class="ds-chat-head" role="heading" aria-level="2">Ask the research</div>
        {% if chat_ws_url %}
        <dp-deepsearch-chat uid="{{ uid }}" chat-ws="{{ chat_ws_url }}"></dp-deepsearch-chat>
        {% else %}
        <p class="ds-chat-pending">Chat opens once the research finishes.</p>
        {% endif %}
    </aside>
</div>
{% endblock %}

{% block extra_js %}
<script type="module">
    import "{{ static_url('/static/js/components/AppDeepsearchChat.js') }}";
    document.querySelectorAll("[data-followup]").forEach((button) => {
        button.addEventListener("click", () => {
            const chat = document.querySelector("dp-deepsearch-chat");
            if (chat) chat.ask(button.textContent);
        });
    });
</script>
{% endblock %}
