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

{% block content %}
<div class="mindsweep-container" id="mindsweepApp">
    <!-- Step Tracker Bar -->
    <div class="step-tracker">
        <div class="step-indicator active" data-step="1" id="stepIndicator1">
            <div class="step-num">1</div>
            <span class="step-label">Sweep</span>
        </div>
        <div class="step-line" id="stepLine1"></div>
        <div class="step-indicator" data-step="2" id="stepIndicator2">
            <div class="step-num">2</div>
            <span class="step-label">Group</span>
        </div>
        <div class="step-line" id="stepLine2"></div>
        <div class="step-indicator" data-step="3" id="stepIndicator3">
            <div class="step-num">3</div>
            <span class="step-label">Prioritize</span>
        </div>
        <div class="step-line" id="stepLine3"></div>
        <div class="step-indicator" data-step="4" id="stepIndicator4">
            <div class="step-num"><span class="material-symbols-outlined">flag</span></div>
            <span class="step-label">Summary</span>
        </div>
    </div>

    <!-- STEP 1: Brain Dump / Capture -->
    <section class="sweep-step-panel active" id="stepPanel1">
        <div class="step-hero">
            <h2>Mind Sweep</h2>
            <p>Empty your thoughts. Type whatever comes to mind and press <strong>Enter</strong> after every input.</p>
        </div>

        <div class="sweep-input-box-wrapper">
            <div class="sweep-input-card">
                <span class="material-symbols-outlined sweep-input-icon">psychology</span>
                <input type="text" id="sweepInput" class="sweep-input" placeholder="What's on your mind? Type and hit Enter..." autofocus autocomplete="off">
                <button type="button" class="btn-add-sweep" id="btnAddSweep" title="Add item">
                    <span class="material-symbols-outlined">add</span>
                </button>
            </div>
            <div class="sweep-input-hint">
                <span>Press <strong>Enter ↵</strong> to record. Add as many thoughts as you want.</span>
                <span id="sweepCounter" class="sweep-counter">0 captured</span>
            </div>
        </div>

        <!-- Captured Thoughts List (Latest on top) -->
        <div class="sweep-list-section">
            <div class="sweep-list-header">
                <span class="list-title">Captured Thoughts</span>
                <button type="button" class="btn-text-action danger" id="btnClearSweepList" style="display: none;">
                    <span class="material-symbols-outlined">delete_sweep</span> Clear All
                </button>
            </div>
            <div id="sweepList" class="sweep-list">
                <div class="sweep-empty-state" id="sweepEmptyState">
                    <span class="material-symbols-outlined">lightbulb</span>
                    <p>No thoughts added yet. Start typing above to sweep your mind!</p>
                </div>
            </div>
        </div>

        <div class="sweep-footer-actions">
            <button type="button" class="btn-primary btn-large" id="btnDoneStep1">
                <span>Done (Group & Curate)</span>
                <span class="material-symbols-outlined">arrow_forward</span>
            </button>
        </div>
    </section>

    <!-- STEP 2: Group, Curate & Categorize -->
    <section class="sweep-step-panel" id="stepPanel2" style="display: none;">
        <div class="step-hero">
            <h2>Group & Curate</h2>
            <p>Organize your thoughts into categories and sub-categories. Drag and drop items to assign or duplicate them.</p>
        </div>

        <div class="curate-layout">
            <!-- Left/Top Pool: Unassigned Items -->
            <div class="unassigned-pool-box">
                <div class="pool-header">
                    <div class="pool-title-group">
                        <span class="material-symbols-outlined">inbox</span>
                        <h3>Unassigned Thoughts</h3>
                    </div>
                    <span class="pool-badge" id="unassignedCount">0</span>
                </div>
                <div class="pool-items-dropzone" id="unassignedDropzone">
                    <!-- Unassigned draggable items appear here -->
                </div>
            </div>

            <!-- Categories Section -->
            <div class="categories-column">
                <div class="categories-toolbar">
                    <div class="toolbar-title">
                        <span class="material-symbols-outlined">folder_open</span>
                        <h3>Categories</h3>
                    </div>
                    <button type="button" class="btn-secondary btn-sm" id="btnOpenAddCategoryModal">
                        <span class="material-symbols-outlined">add</span> New Category
                    </button>
                </div>

                <div id="categoriesContainer" class="categories-container">
                    <!-- Category Cards Rendered Here -->
                </div>
            </div>
        </div>

        <div class="sweep-footer-actions dual">
            <button type="button" class="btn-secondary" id="btnBackToStep1">
                <span class="material-symbols-outlined">arrow_back</span> Back
            </button>
            <button type="button" class="btn-primary" id="btnGoToStep3">
                <span>Next (Prioritize)</span>
                <span class="material-symbols-outlined">arrow_forward</span>
            </button>
        </div>
    </section>

    <!-- STEP 3: Prioritize (Eisenhower Matrix 4 Boxes) -->
    <section class="sweep-step-panel" id="stepPanel3" style="display: none;">
        <div class="step-hero">
            <h2>Prioritize (Eisenhower Matrix)</h2>
            <p>Drag each thought into one of the 4 zones to prioritize urgency and importance.</p>
        </div>

        <div class="unassigned-pool-box matrix-staging-box">
            <div class="pool-header">
                <div class="pool-title-group">
                    <span class="material-symbols-outlined">pending_actions</span>
                    <h3>To Be Prioritized</h3>
                </div>
                <span class="pool-badge" id="unprioritizedCount">0</span>
            </div>
            <div class="pool-items-dropzone" id="unprioritizedDropzone"></div>
        </div>

        <div class="matrix-grid">
            <div class="matrix-box zone-ui" data-zone="urgent_important">
                <div class="matrix-box-header">
                    <div class="zone-title-wrap">
                        <span class="zone-tag-letter">A</span>
                        <div>
                            <h4>Urgent &amp; Important</h4>
                            <span class="zone-action-hint">Do First &bull; Critical</span>
                        </div>
                    </div>
                    <span class="zone-item-count" id="countZoneUI">0</span>
                </div>
                <div class="matrix-dropzone" id="dropzoneUI"></div>
            </div>

            <div class="matrix-box zone-uni" data-zone="urgent_not_important">
                <div class="matrix-box-header">
                    <div class="zone-title-wrap">
                        <span class="zone-tag-letter">B</span>
                        <div>
                            <h4>Urgent / Not-Important</h4>
                            <span class="zone-action-hint">Delegate &bull; Quick Action</span>
                        </div>
                    </div>
                    <span class="zone-item-count" id="countZoneUNI">0</span>
                </div>
                <div class="matrix-dropzone" id="dropzoneUNI"></div>
            </div>

            <div class="matrix-box zone-nui" data-zone="not_urgent_important">
                <div class="matrix-box-header">
                    <div class="zone-title-wrap">
                        <span class="zone-tag-letter">C</span>
                        <div>
                            <h4>Not-Urgent / Important</h4>
                            <span class="zone-action-hint">Schedule &bull; Strategic</span>
                        </div>
                    </div>
                    <span class="zone-item-count" id="countZoneNUI">0</span>
                </div>
                <div class="matrix-dropzone" id="dropzoneNUI"></div>
            </div>

            <div class="matrix-box zone-nuni" data-zone="not_urgent_not_important">
                <div class="matrix-box-header">
                    <div class="zone-title-wrap">
                        <span class="zone-tag-letter">D</span>
                        <div>
                            <h4>Not-Urgent / Not-Important</h4>
                            <span class="zone-action-hint">Eliminate &bull; Defer</span>
                        </div>
                    </div>
                    <span class="zone-item-count" id="countZoneNUNI">0</span>
                </div>
                <div class="matrix-dropzone" id="dropzoneNUNI"></div>
            </div>
        </div>

        <div class="sweep-footer-actions dual">
            <button type="button" class="btn-secondary" id="btnBackToStep2">
                <span class="material-symbols-outlined">arrow_back</span> Back
            </button>
            <button type="button" class="btn-primary" id="btnFinishProcess">
                <span class="material-symbols-outlined">check_circle</span>
                <span>Finish</span>
            </button>
        </div>
    </section>

    <!-- STEP 4: Final Segregated & Categorized Summary -->
    <section class="sweep-step-panel" id="stepPanel4" style="display: none;">
        <div class="step-hero">
            <div class="finish-badge">
                <span class="material-symbols-outlined">verified</span>
                <span>Process Complete</span>
            </div>
            <h2>Segregated &amp; Categorized Plan</h2>
            <p>Your mind has been swept, curated into categories, and segregated into actionable quadrants.</p>
        </div>

        <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>

        <div class="summary-view-toggle">
            <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>
        </div>

        <div id="summaryResultsContainer" class="summary-results-container"></div>

        <div class="summary-footer-actions">
            <button type="button" class="btn-secondary" id="btnRestartSweep">
                <span class="material-symbols-outlined">refresh</span> New Mind Sweep
            </button>
            <button type="button" class="btn-secondary" id="btnReviseStep3">
                <span class="material-symbols-outlined">edit</span> Revise Prioritization
            </button>
            <button type="button" class="btn-primary" id="btnPrintSummary">
                <span class="material-symbols-outlined">print</span> Print / Export
            </button>
        </div>
    </section>

    <!-- Modals -->
    <!-- Add Category Modal -->
    <div id="modalAddCategory" class="modal-backdrop" style="display: none;">
        <div class="modal-box">
            <div class="modal-header">
                <h3>New Category</h3>
                <button type="button" class="modal-close-btn" id="btnCloseCatModal">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="newCategoryName">Category Name</label>
                    <input type="text" id="newCategoryName" class="form-control" placeholder="e.g. Work, Personal, Health, Finance" autofocus autocomplete="off">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-secondary" id="btnCancelCatModal">Cancel</button>
                <button type="button" class="btn-primary" id="btnSaveCategory">Create Category</button>
            </div>
        </div>
    </div>

    <!-- Add Subcategory Modal -->
    <div id="modalAddSubcategory" class="modal-backdrop" style="display: none;">
        <div class="modal-box">
            <div class="modal-header">
                <h3 id="subcatModalTitle">New Sub-category</h3>
                <button type="button" class="modal-close-btn" id="btnCloseSubcatModal">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="newSubcategoryName">Sub-category Name</label>
                    <input type="text" id="newSubcategoryName" class="form-control" placeholder="e.g. Project Alpha, Urgent Calls, Taxes" autofocus autocomplete="off">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-secondary" id="btnCancelSubcatModal">Cancel</button>
                <button type="button" class="btn-primary" id="btnSaveSubcategory">Create Sub-category</button>
            </div>
        </div>
    </div>

    <!-- Mobile Assign/Duplicate Modal -->
    <div id="modalTouchAction" class="modal-backdrop" style="display: none;">
        <div class="modal-box">
            <div class="modal-header">
                <h3 id="touchModalTitle">Move / Copy Item</h3>
                <button type="button" class="modal-close-btn" id="btnCloseTouchModal">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <div class="modal-body" id="touchModalBody"></div>
            <div class="modal-footer">
                <button type="button" class="btn-secondary" id="btnCancelTouchModal">Close</button>
            </div>
        </div>
    </div>

    <!-- Toast Notification -->
    <div id="toastNotification" class="toast" style="display: none;">
        <span class="material-symbols-outlined toast-icon" id="toastIcon">check_circle</span>
        <span id="toastMsg">Saved</span>
    </div>


</div>
{% endblock %}