{% extends "layouts/console_layout.html" %}

{% block content %}
<div class="mindsweep-container everything-page-container">
    <div class="step-hero">
        <div class="finish-badge">
            <span class="material-symbols-outlined">all_inclusive</span>
            <span>Everything Summary</span>
        </div>
        <h2>Consolidated Mind Sweep</h2>
        <p>Complete overview of all thoughts captured, organized into categories, and prioritized across quadrants.</p>

        <div class="everything-header-actions">
            <a href="/mindsweep" class="btn-secondary" style="text-decoration: none;">
                <span class="material-symbols-outlined">psychology</span>
                <span>Open Mind Sweep</span>
            </a>
            <button type="button" class="btn-primary" id="btnPrintEverything">
                <span class="material-symbols-outlined">print</span>
                <span>Print / Export</span>
            </button>
        </div>
    </div>

    <!-- Summary Metrics -->
    <div class="summary-metrics-bar">
        <div class="metric-pill">
            <span class="metric-num" id="metricTotal">0</span>
            <span class="metric-lbl">Total Thoughts</span>
        </div>
        <div class="metric-pill">
            <span class="metric-num" id="metricCategories">0</span>
            <span class="metric-lbl">Categories</span>
        </div>
        <div class="metric-pill ui">
            <span class="metric-num" id="metricUI">0</span>
            <span class="metric-lbl">Urgent &amp; Imp</span>
        </div>
        <div class="metric-pill uni">
            <span class="metric-num" id="metricUNI">0</span>
            <span class="metric-lbl">Urgent/Not-Imp</span>
        </div>
        <div class="metric-pill nui">
            <span class="metric-num" id="metricNUI">0</span>
            <span class="metric-lbl">Not-Urg/Imp</span>
        </div>
        <div class="metric-pill nuni">
            <span class="metric-num" id="metricNUNI">0</span>
            <span class="metric-lbl">Not-Urg/Not-Imp</span>
        </div>
        <div class="metric-pill unassigned" id="metricUnassignedWrap">
            <span class="metric-num" id="metricUnassigned">0</span>
            <span class="metric-lbl">Unprioritized</span>
        </div>
    </div>

    <!-- View Mode Switcher & Filter Toolbar -->
    <div class="everything-filter-bar">
        <div class="everything-search-wrap">
            <span class="material-symbols-outlined">search</span>
            <input type="text" id="everythingSearch" class="everything-search-input" placeholder="Search thoughts, categories, subcategories...">
        </div>
        <select id="everythingFilterZone" class="everything-filter-select">
            <option value="all">All Quadrants</option>
            <option value="urgent_important">Zone A: Urgent &amp; Important</option>
            <option value="urgent_not_important">Zone B: Urgent / Not-Important</option>
            <option value="not_urgent_important">Zone C: Not-Urgent / Important</option>
            <option value="not_urgent_not_important">Zone D: Not-Urgent / Not-Important</option>
            <option value="unassigned">Unprioritized</option>
        </select>
    </div>

    <div class="summary-view-toggle" style="margin-bottom: 20px;">
        <button type="button" class="view-toggle-btn active" id="viewModeQuadrants">
            <span class="material-symbols-outlined">grid_view</span> By 4 Quadrants
        </button>
        <button type="button" class="view-toggle-btn" id="viewModeCategories">
            <span class="material-symbols-outlined">category</span> By Categories
        </button>
        <button type="button" class="view-toggle-btn" id="viewModeAll">
            <span class="material-symbols-outlined">table_rows</span> All Thoughts
        </button>
    </div>

    <!-- Results Display -->
    <div id="everythingContainer" class="summary-results-container">
        <div class="empty-dropzone-hint" style="padding: 40px 10px;">
            <span class="material-symbols-outlined" style="font-size: 36px;">hourglass_empty</span>
            <span>Loading Mind Sweep data...</span>
        </div>
    </div>

    <!-- Bottom Actions -->
    <div class="summary-footer-actions" style="margin-top: 30px;">
        <a href="/causes" class="btn-secondary" style="text-decoration: none;">
            <span class="material-symbols-outlined">arrow_back</span>
            <span>Back to Causes</span>
        </a>
        <a href="/mindsweep" class="btn-primary" style="text-decoration: none;">
            <span class="material-symbols-outlined">edit_note</span>
            <span>Edit in Mind Sweep</span>
        </a>
    </div>
</div>
{% endblock %}