{% extends "base.html" %}

{% set active_page = 'notes' %}

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

{% block extra_head %}
<link rel="stylesheet" href="/static/css/notes.css">
{% endblock %}

{% block content %}
<div class="ldr-page active" id="notes">
    <div class="ldr-notes-page-header">
        <h1><i class="fas fa-sticky-note"></i> Notes</h1>
        <div class="ldr-notes-page-actions">
            <button class="ldr-select-mode-btn" id="ldr-select-mode-btn" data-action="toggle-select-mode">
                <i class="fas fa-check-square"></i> <span id="ldr-select-mode-label">Select</span>
            </button>
            <button class="ldr-create-note-btn" data-action="create-new-note">
                <i class="fas fa-plus"></i> New Note
            </button>
        </div>
    </div>

    <!-- Ask your notes — starts a research run pinned to the Notes collection -->
    <div class="ldr-notes-ask">
        <i class="fas fa-comments" aria-hidden="true"></i>
        <input type="text" id="ldr-notes-ask-input" placeholder="Ask your notes a question..."
               aria-label="Ask your notes a question">
        <button class="ldr-notes-ask-btn" id="ldr-notes-ask-btn" data-action="ask-notes">
            <i class="fas fa-paper-plane" aria-hidden="true"></i> Ask
        </button>
    </div>
    <div id="ldr-notes-ask-notice" class="ldr-notes-search-notice" role="status" aria-live="polite" style="display: none;"></div>

    <!-- Select Mode Action Bar -->
    <div id="ldr-select-actions" class="ldr-select-actions" style="display: none;">
        <span id="ldr-select-count">0 selected</span>
        <div class="ldr-select-actions-buttons">
            <button class="btn btn-secondary btn-sm" data-action="clear-selection">Clear</button>
            <button class="btn btn-primary btn-sm" id="ldr-synthesize-btn" data-action="open-synthesize-modal" disabled>
                <i class="fas fa-wand-magic-sparkles"></i> Synthesize
            </button>
        </div>
    </div>

    <!-- Filters -->
    <div class="ldr-notes-filters">
        <div class="ldr-notes-search">
            <i class="fas fa-search"></i>
            <input type="text" id="ldr-notes-search" placeholder="AI Hybrid: keywords + meaning..."
                   aria-label="Search notes">
        </div>
        <!-- Search mode selector — mirrors the library/history/news pages
             (Text / AI Hybrid / AI only) and shares the SemanticSearch merge. -->
        <div class="dropdown ldr-notes-search-mode">
            <button class="btn btn-sm ldr-btn-outline dropdown-toggle" type="button"
                    id="notes-search-mode-btn" data-bs-toggle="dropdown" aria-expanded="false"
                    aria-label="Search mode">
                <i class="fas fa-brain" aria-hidden="true"></i>
                <span id="notes-search-mode-label">AI Hybrid</span>
            </button>
            <ul class="dropdown-menu" aria-label="Search mode" id="notes-search-mode-menu">
                <li><a class="dropdown-item active" href="#" data-mode="hybrid">
                    <i class="fas fa-brain" aria-hidden="true"></i> AI Hybrid
                    <small class="text-muted">— keywords + meaning</small>
                </a></li>
                <li><a class="dropdown-item" href="#" data-mode="text">
                    <i class="fas fa-font" aria-hidden="true"></i> Text Only
                    <small class="text-muted">— keyword match</small>
                </a></li>
                <li><a class="dropdown-item" href="#" data-mode="semantic">
                    <i class="fas fa-brain" aria-hidden="true"></i> AI Only
                    <small class="text-muted">— search by meaning</small>
                </a></li>
            </ul>
        </div>
        <select id="ldr-collection-filter" class="ldr-collection-filter-select" aria-label="Filter by collection">
            <option value="">All Collections</option>
        </select>
    </div>

    <!-- Search notice (e.g. AI search unavailable → keyword-only) -->
    <div id="ldr-notes-search-notice" class="ldr-notes-search-notice" role="status" aria-live="polite" style="display: none;"></div>

    <!-- Notes Grid -->
    <div class="ldr-notes-grid" id="ldr-notes-grid" role="status" aria-live="polite">
        <div class="ldr-loading-spinner ldr-centered">
            <div class="ldr-spinner"></div>
        </div>
    </div>

    <!-- Load-more pager for the keyword listing (the list endpoint pages
         at 100 notes; without this, notes past the first page were
         unreachable from the UI) -->
    <div id="ldr-notes-load-more" class="ldr-notes-load-more" style="display: none;">
        <button class="btn ldr-btn-outline" data-action="load-more-notes">
            <i aria-hidden="true" class="fas fa-chevron-down"></i>
            <span id="ldr-notes-load-more-label">Load more</span>
        </button>
    </div>

    <!-- Empty State -->
    <div id="ldr-notes-empty" class="ldr-notes-empty" role="status" aria-live="polite" style="display: none;">
        <i class="fas fa-sticky-note ldr-notes-empty-icon"></i>
        <h3>No notes yet</h3>
        <p>Start capturing your ideas and research notes</p>
        <button class="ldr-create-note-btn" data-action="create-new-note">
            <i class="fas fa-plus"></i> Create your first note
        </button>
    </div>
</div>

<!-- Create/Edit Note Modal -->
<div class="modal fade" id="noteModal" tabindex="-1" aria-labelledby="noteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="background: var(--bg-secondary); border: 1px solid var(--border-color);">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color);">
                <h5 class="modal-title" id="noteModalLabel">
                    <i class="fas fa-plus-circle" style="color: var(--accent-primary); margin-right: 0.5rem;"></i>
                    New Note
                </h5>
                <button type="button" class="btn-close ldr-btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {# div, not <form>: the save button lives in the modal footer
                   (outside this element) and saves via fetch. A real <form>
                   makes Enter in the title input trigger implicit GET
                   submission — a page navigation that discards the draft. #}
                <div id="note-form">
                    <div class="mb-3">
                        <label for="note-title" class="form-label">Title</label>
                        <input type="text" class="form-control" id="note-title" placeholder="Give your note a title..." required
                               style="background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary);">
                    </div>
                    <div class="mb-3">
                        <label for="note-content" class="form-label">Content</label>
                        <div class="ldr-markdown-editor-container" style="border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden;">
                            <!-- Mode Toggle -->
                            <div class="ldr-editor-tabs" style="display: flex; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color);">
                                <button type="button" class="ldr-editor-tab active" data-mode="write" style="padding: 0.5rem 1rem; background: transparent; border: none; border-bottom: 2px solid var(--accent-primary); color: var(--accent-primary); cursor: pointer; font-weight: 500; font-size: 0.85rem;">
                                    <i class="fas fa-pencil-alt"></i> Write
                                </button>
                                <button type="button" class="ldr-editor-tab" data-mode="preview" style="padding: 0.5rem 1rem; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); cursor: pointer; font-weight: 500; font-size: 0.85rem;">
                                    <i class="fas fa-eye"></i> Preview
                                </button>
                            </div>
                            <!-- Formatting Toolbar -->
                            <div class="ldr-markdown-toolbar" id="modal-markdown-toolbar" style="display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0.75rem; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); flex-wrap: wrap;">
                                <div class="ldr-toolbar-group" style="display: flex; gap: 0.125rem;">
                                    <button type="button" class="ldr-toolbar-btn" title="Bold (Ctrl+B)" data-format="bold" style="width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-secondary); cursor: pointer;"><i class="fas fa-bold"></i></button>
                                    <button type="button" class="ldr-toolbar-btn" title="Italic (Ctrl+I)" data-format="italic" style="width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-secondary); cursor: pointer;"><i class="fas fa-italic"></i></button>
                                    <button type="button" class="ldr-toolbar-btn" title="Strikethrough" data-format="strikethrough" style="width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-secondary); cursor: pointer;"><i class="fas fa-strikethrough"></i></button>
                                </div>
                                <div style="width: 1px; height: 16px; background: var(--border-color); margin: 0 0.4rem;"></div>
                                <div class="ldr-toolbar-group" style="display: flex; gap: 0.125rem;">
                                    <button type="button" class="ldr-toolbar-btn" title="Heading" data-format="heading" style="width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-secondary); cursor: pointer;"><i class="fas fa-heading"></i></button>
                                    <button type="button" class="ldr-toolbar-btn" title="Quote" data-format="quote" style="width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-secondary); cursor: pointer;"><i class="fas fa-quote-left"></i></button>
                                    <button type="button" class="ldr-toolbar-btn" title="Code" data-format="code" style="width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-secondary); cursor: pointer;"><i class="fas fa-code"></i></button>
                                </div>
                                <div style="width: 1px; height: 16px; background: var(--border-color); margin: 0 0.4rem;"></div>
                                <div class="ldr-toolbar-group" style="display: flex; gap: 0.125rem;">
                                    <button type="button" class="ldr-toolbar-btn" title="Bullet List" data-format="bullet" style="width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-secondary); cursor: pointer;"><i class="fas fa-list"></i></button>
                                    <button type="button" class="ldr-toolbar-btn" title="Numbered List" data-format="numbered" style="width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-secondary); cursor: pointer;"><i class="fas fa-list-ol"></i></button>
                                </div>
                                <div style="width: 1px; height: 16px; background: var(--border-color); margin: 0 0.4rem;"></div>
                                <div class="ldr-toolbar-group" style="display: flex; gap: 0.125rem;">
                                    <button type="button" class="ldr-toolbar-btn" title="Link" data-format="link" style="width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-secondary); cursor: pointer;"><i class="fas fa-link"></i></button>
                                </div>
                            </div>
                            <!-- Textarea -->
                            <textarea class="form-control" id="note-content" rows="10" placeholder="Write your note here... Markdown is supported!" required
                                      style="background: var(--bg-tertiary); border: none; border-radius: 0; color: var(--text-primary); font-family: 'Monaco', 'Menlo', monospace; line-height: 1.6;"></textarea>
                            <!-- Preview -->
                            <div id="modal-note-preview" class="ldr-markdown-content" style="display: none; min-height: 240px; padding: 1rem; background: var(--bg-tertiary); color: var(--text-primary); line-height: 1.6;"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="ldr-note-tags" class="form-label">Tags <span class="text-muted">(comma separated)</span></label>
                        <input type="text" class="form-control" id="ldr-note-tags" placeholder="research, ideas, todo"
                               style="background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary);">
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="border-top: 1px solid var(--border-color);">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="save-note-btn" data-action="save-note">
                    <i class="fas fa-save"></i> Save Note
                </button>
            </div>
        </div>
    </div>
</div>
<!-- Synthesize Notes Modal -->
<div class="modal fade" id="synthesizeModal" tabindex="-1" aria-labelledby="synthesizeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="background: var(--bg-secondary); border: 1px solid var(--border-color);">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color);">
                <h5 class="modal-title" id="synthesizeModalLabel">
                    <i class="fas fa-wand-magic-sparkles" style="color: var(--accent-primary); margin-right: 0.5rem;"></i>
                    Synthesize Notes
                </h5>
                <button type="button" class="btn-close ldr-btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="synthesis-type" class="form-label">Type</label>
                    <select class="form-select" id="synthesis-type"
                            style="background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary);">
                        <option value="merge">Merge (combine into one coherent note)</option>
                        <option value="summarize">Summarize (condensed overview)</option>
                        <option value="compare">Compare (similarities and differences)</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Selected Notes</label>
                    <div id="synthesis-selected-list" class="ldr-synthesis-selected-list"></div>
                </div>
                <div id="synthesis-preview" class="ldr-synthesis-preview" style="display: none;">
                    <h6 id="synthesis-preview-title">Preview</h6>
                    <div id="synthesis-preview-content" class="ldr-markdown-content"></div>
                </div>
            </div>
            <div class="modal-footer" style="border-top: 1px solid var(--border-color);">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-outline-primary" id="synthesis-preview-btn" data-action="preview-synthesis">
                    <i class="fas fa-eye"></i> Preview
                </button>
                <button type="button" class="btn btn-primary" id="synthesis-create-btn" data-action="create-synthesized-note">
                    <i class="fas fa-plus"></i> Create Note
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<!-- Note: url-validator.js, ui.js, urls.js, formatting.js, api.js are already loaded in base.html -->
<!-- Shared semantic-search merge/render helpers (window.SemanticSearch),
     reused by the library, history and news pages for hybrid search. -->
<script defer src="/static/js/components/notes_shared.js"></script>
<script defer src="/static/js/components/semantic_search.js"></script>
<script defer src="/static/js/pages/notes.js"></script>
{% endblock %}