{% extends "base.html" %}

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

{% block content %}
<div class="ds-layout" data-deepsearch-tool>
    <aside class="sidebar-card" role="navigation" aria-label="DeepSearch">
        <div class="sidebar-heading" role="heading" aria-level="2">DeepSearch</div>
        <div class="sidebar-nav">
            <a href="/tools" class="sidebar-link">
                <span class="icon">&#x1F9F0;</span>
                All tools
            </a>
            <a href="/tools/deepsearch" class="sidebar-link active">
                <span class="icon">&#x1F9E0;</span>
                Research
            </a>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-heading">How it works</div>
            <ul class="ds-side-list">
                <li>Plans diverse web search queries</li>
                <li>Crawls and indexes sources</li>
                <li>Multi-agent synthesis and critique</li>
                <li>Confidence and source diversity</li>
                <li>Grounded chat over the results</li>
            </ul>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-heading">Tips</div>
            <ul class="ds-side-list">
                <li>Ask one focused research question.</li>
                <li>Deeper runs crawl more sources.</li>
                <li>Only one run at a time per visitor.</li>
                <li>Pause, resume or cancel any time.</li>
            </ul>
        </div>
    </aside>

    <div class="ds-main">
        <header class="ds-header">
            <h1><span class="icon">🧠</span> DeepSearch</h1>
            <p>A multi-agent deep web researcher. It plans queries, crawls and indexes sources,
               then synthesises a cited report you can chat with. Progress streams live.</p>
        </header>

        <section class="ds-form-card">
            <form class="ds-form" data-deepsearch-form autocomplete="off" aria-label="Start deep research">
                <textarea name="query" class="ds-input" rows="2"
                          placeholder="What do you want to research?" required aria-required="true" aria-label="Research question"></textarea>
                <div class="ds-form-row">
                    <label class="ds-field">
                        Depth
                        <input type="number" name="depth" class="ds-input-num" value="2" min="1" max="4">
                    </label>
                    <label class="ds-field">
                        Pages
                        <input type="number" name="max_pages" class="ds-input-num" value="12" min="1" max="30">
                    </label>
                    <button type="submit" class="btn btn-primary ds-run-btn" data-deepsearch-run>Research</button>
                </div>
                <p class="ds-form-error" data-deepsearch-error hidden role="alert"></p>
            </form>
        </section>

        <section class="ds-live" data-deepsearch-live hidden aria-label="Research progress">
            <div class="ds-live-head">
                <span class="ds-live-status" data-deepsearch-status role="status" aria-live="polite">Starting…</span>
                <span class="ds-live-count" data-deepsearch-count aria-live="polite"></span>
                <span class="ds-live-controls">
                    <button type="button" class="btn ds-ctl" data-deepsearch-pause hidden>Pause</button>
                    <button type="button" class="btn ds-ctl" data-deepsearch-resume hidden>Resume</button>
                    <button type="button" class="btn ds-ctl" data-deepsearch-cancel hidden>Cancel</button>
                </span>
            </div>
            <ol class="ds-phase-timeline" data-deepsearch-timeline aria-label="Research phases">
                <li class="ds-phase is-pending" data-deepsearch-phase="planning"><span class="ds-phase-dot">1</span><span class="ds-phase-name">Planning</span></li>
                <li class="ds-phase is-pending" data-deepsearch-phase="searching"><span class="ds-phase-dot">2</span><span class="ds-phase-name">Searching</span></li>
                <li class="ds-phase is-pending" data-deepsearch-phase="crawling"><span class="ds-phase-dot">3</span><span class="ds-phase-name">Crawling</span></li>
                <li class="ds-phase is-pending" data-deepsearch-phase="indexing"><span class="ds-phase-dot">4</span><span class="ds-phase-name">Indexing</span></li>
                <li class="ds-phase is-pending" data-deepsearch-phase="analysis"><span class="ds-phase-dot">5</span><span class="ds-phase-name">Analysis</span></li>
                <li class="ds-phase is-pending" data-deepsearch-phase="synthesis"><span class="ds-phase-dot">6</span><span class="ds-phase-name">Synthesis</span></li>
            </ol>
            <div class="ds-progress"><div class="ds-progress-bar" data-deepsearch-bar></div></div>
            <div class="ds-details" data-deepsearch-details aria-live="polite"></div>
            <ul class="ds-timeline" data-deepsearch-log role="log" aria-live="polite"></ul>
        </section>

        <section class="ds-done" data-deepsearch-done hidden>
            <p>Research complete.</p>
            <a class="btn btn-primary" data-deepsearch-open href="#">Open report and chat</a>
        </section>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script type="module">
    import { DeepsearchTool } from "{{ static_url('/static/js/DeepsearchTool.js') }}";
    window.app.deepsearchTool = new DeepsearchTool();
</script>
{% endblock %}