<!-- Page Header -->
<div class="page-header">
    <div>
        <h1 class="greeting">Knowledge Base Manager</h1>
        <p class="greeting-sub">Semantic search across your indexed documents</p>
    </div>
    <button onclick="quitManager()" class="btn btn-ghost" style="padding: 0.5rem 1rem; font-size: 0.875rem;">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px;">
            <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
            <polyline points="16 17 21 12 16 7"/>
            <line x1="21" y1="12" x2="9" y2="12"/>
        </svg>
        Quit Manager
    </button>
</div>

<!-- Alert Messages -->
{{#if message}}
<div class="alert alert-{{messageType}}">{{message}}</div>
{{/if}}

<!-- Tab Navigation -->
<div class="tabs">
    {{#if knowledgeBases.length}}
    <button class="tab-btn active" onclick="switchTab('search', this)">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 18px; height: 18px;">
            <circle cx="11" cy="11" r="8"/>
            <path d="m21 21-4.35-4.35"/>
        </svg>
        Search
    </button>
    <button class="tab-btn" onclick="switchTab('upload', this)">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 18px; height: 18px;">
            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
            <polyline points="17 8 12 3 7 8"/>
            <line x1="12" y1="3" x2="12" y2="15"/>
        </svg>
        Upload Documents
    </button>
    <button class="tab-btn" onclick="switchTab('manage', this)">
    {{else}}
    <button class="tab-btn active" onclick="switchTab('manage', this)">
    {{/if}}
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 18px; height: 18px;">
            <path d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
        </svg>
        Manage Knowledge Bases
        <span class="badge badge-blue" style="margin-left: 0.5rem;">{{knowledgeBases.length}}</span>
    </button>
</div>

<!-- Search Tab Content -->
{{#if knowledgeBases.length}}
<div id="searchTab" class="tab-content active"><!-- Hero Search Section -->
<div class="card hero-search">
    <div class="card-header">
        <div>
            <h2 class="card-title" style="font-size: 1.5rem; margin-bottom: 0.5rem;">Search Your Documents</h2>
            <p class="card-subtitle">Find information across all your documents - PDFs, Word docs, presentations, and more</p>
        </div>
    </div>
    <form method="POST" action="/search">
        <div class="form-group">
            <label class="form-label">Search Query</label>
            <input type="text" name="query" class="form-input" style="font-size: 1rem; padding: 1rem;" placeholder="e.g., project requirements, meeting notes, Q4 strategy..." value="{{searchQuery}}" required autofocus>
        </div>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="form-group">
                <label class="form-label">Knowledge Base</label>
                <select name="codebaseName" class="form-input">
                    <option value="">All Knowledge Bases</option>
                    {{#each knowledgeBases}}
                    <option value="{{name}}">{{displayName name}}</option>
                    {{/each}}
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Max Results</label>
                <select name="maxResults" class="form-input">
                    <option value="5" {{#if (eq maxResults 5)}}selected{{/if}}>5</option>
                    <option value="10" {{#if (eq maxResults 10)}}selected{{/if}}>10</option>
                </select>
            </div>
        </div>
        <div style="display: flex; gap: 0.75rem;">
            {{#if searchQuery}}
            <a href="/" class="btn btn-primary" style="flex: 1; padding: 1rem; display: flex; align-items: center; justify-content: center; text-decoration: none;">
                Clear Results
            </a>
            <button type="submit" class="btn btn-ghost" style="padding: 1rem;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px;">
                    <circle cx="11" cy="11" r="8"/>
                    <path d="m21 21-4.35-4.35"/>
                </svg>
                Search
            </button>
            {{else}}
            <button type="submit" class="btn btn-primary" style="flex: 1; padding: 1rem; font-size: 1rem;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px;">
                    <circle cx="11" cy="11" r="8"/>
                    <path d="m21 21-4.35-4.35"/>
                </svg>
                Search
            </button>
            {{/if}}
        </div>
    </form>

    {{#if searchResults}}
    <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-color);">
        <h3 style="font-size: 1.25rem; margin-bottom: 1rem;">Results ({{searchResults.length}})</h3>
        {{#each searchResults}}
        <div class="search-result" data-expanded="false" onclick="toggleSearchResult(this)">
            <div class="result-header" style="cursor: pointer;">
                <div style="display: flex; align-items: center; gap: 0.5rem; flex: 1;">
                    <svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px; transition: transform 0.2s;">
                        <polyline points="9 18 15 12 9 6"/>
                    </svg>
                    <code style="font-size: 0.875rem; color: var(--text-primary);">{{metadata.filePath}}</code>
                </div>
                <span class="badge {{confidenceClass score}}">{{toFixed score 2}}</span>
            </div>
            <div class="result-details" style="display: none; margin-top: 0.75rem;">
                <div style="margin: 0.5rem 0;">
                    <span class="badge badge-green">{{metadata.documentType}}</span>
                    <span class="badge badge-orange">{{metadata.chunkType}}</span>
                    {{#if metadata.pageNumber}}
                    <span style="font-size: 0.8125rem; color: var(--text-secondary); margin-left: 0.5rem;">
                        Page {{metadata.pageNumber}}
                    </span>
                    {{/if}}
                </div>
                <pre style="background: var(--bg-surface); padding: 1rem; border-radius: 8px; overflow-x: auto; font-size: 0.875rem;"><code>{{content}}</code></pre>
                <button class="btn btn-ghost btn-sm" onclick="event.stopPropagation(); copyToClipboard(this, `{{content}}`)">
                    Copy
                </button>
            </div>
        </div>
        {{/each}}
    </div>
    {{else}}
    {{#if searchQuery}}
    <div class="empty-state" style="margin-top: 2rem;">
        <p>No results found for "{{searchQuery}}"</p>
    </div>
    {{/if}}
    {{/if}}
</div>
</div>
{{/if}}

<!-- Upload Documents Tab Content -->
{{#if knowledgeBases.length}}
<div id="uploadTab" class="tab-content">
<div class="card">
    <div class="card-header">
        <div>
            <h3 class="card-title">Upload Documents</h3>
            <p class="card-subtitle">Add individual files or folders to an existing knowledge base</p>
        </div>
    </div>
    
    <!-- Knowledge Base Selection -->
    <div class="form-group">
        <label class="form-label">Select Knowledge Base</label>
        <select id="uploadKnowledgeBase" class="form-input">
            <option value="">Choose a knowledge base...</option>
            {{#each knowledgeBases}}
            <option value="{{name}}" {{#if (eq name "default")}}selected{{/if}}>{{displayName name}}</option>
            {{/each}}
        </select>
        <p style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem;">
            Files will be added to the selected knowledge base
        </p>
    </div>
    
    <!-- Drag and Drop Zone -->
    <div id="dropZone" class="drop-zone">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 48px; height: 48px; margin-bottom: 1rem; opacity: 0.5;">
            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
            <polyline points="17 8 12 3 7 8"/>
            <line x1="12" y1="3" x2="12" y2="15"/>
        </svg>
        <p style="font-size: 1rem; font-weight: 500; margin-bottom: 0.5rem;">Drag and drop files here</p>
        <p style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1rem;">or</p>
        <div style="display: flex; gap: 0.75rem; justify-content: center;">
            <label class="btn btn-primary" style="cursor: pointer;">
                <input type="file" id="fileInput" multiple accept=".pdf,.docx,.doc,.pptx,.ppt,.xlsx,.xls,.html,.htm,.md,.markdown,.txt,.mp3,.wav,.m4a,.flac" style="display: none;">
                Choose Files
            </label>
            <label class="btn btn-ghost" style="cursor: pointer;">
                <input type="file" id="folderInput" webkitdirectory directory multiple style="display: none;">
                Choose Folder
            </label>
        </div>
        <p style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 1rem;">
            Supported: PDF, Word, PowerPoint, Excel, HTML, Markdown, Text, Audio (MP3, WAV, M4A, FLAC)
        </p>
    </div>
    
    <!-- File List -->
    <div id="fileListContainer" style="display: none; margin-top: 1.5rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h4 style="font-size: 1rem; font-weight: 600;">Selected Files (<span id="fileCount">0</span>)</h4>
            <button type="button" class="btn btn-ghost btn-sm" onclick="clearFileList()">Clear All</button>
        </div>
        <div id="fileList" style="max-height: 300px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 8px;">
            <!-- Files will be added here dynamically -->
        </div>
        <div style="margin-top: 1rem; display: flex; gap: 0.75rem;">
            <button type="button" class="btn btn-primary" onclick="startUpload()" id="uploadBtn" style="flex: 1;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px;">
                    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
                    <polyline points="17 8 12 3 7 8"/>
                    <line x1="12" y1="3" x2="12" y2="15"/>
                </svg>
                Upload Files
            </button>
        </div>
    </div>
    
    <!-- Upload Progress -->
    <div id="uploadProgress" style="display: none; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color);">
        <h4 style="font-size: 1rem; margin-bottom: 1rem;">Upload Progress</h4>
        <div id="uploadProgressList">
            <!-- Progress items will be added here -->
        </div>
    </div>
    
    <!-- Upload Messages -->
    <div id="uploadMessages" style="margin-top: 1rem;">
        <!-- Success/error messages will be added here -->
    </div>
</div>
</div>
{{/if}}

<!-- Manage Knowledge Bases Tab Content -->
<div id="manageTab" class="tab-content{{#unless knowledgeBases.length}} active{{/unless}}">
<!-- Knowledge Bases Section -->
<div style="margin-top: 2rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;" id="codebasesHeader">
        <h2 style="font-size: 1.25rem; font-weight: 600;">Your Knowledge Bases</h2>
        <button type="button" class="btn btn-primary" onclick="showIngestForm()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px;">
                <line x1="12" y1="5" x2="12" y2="19"/>
                <line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
            Add Knowledge Base
        </button>
    </div>

    <div class="card" id="codebasesList">
        {{#if knowledgeBases.length}}
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Chunks</th>
                    <th>Files</th>
                    <th>Last Indexed</th>
                    <th style="width: 60px;"></th>
                </tr>
            </thead>
            <tbody>
                {{#each knowledgeBases}}
                <tr class="kb-row" data-kb-name="{{name}}">
                    <td>
                        <button type="button" onclick="toggleDocuments(event, '{{name}}')" style="background: none; border: none; padding: 0; color: var(--accent); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;">
                            <svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px; transition: transform 0.2s;">
                                <polyline points="9 18 15 12 9 6"/>
                            </svg>
                            {{displayName name}}
                        </button>
                    </td>
                    <td><span class="badge badge-blue">{{chunkCount}}</span></td>
                    <td><span class="badge badge-green">{{fileCount}}</span></td>
                    <td style="font-size: 0.875rem; color: var(--text-secondary);">{{daysSince lastIngestion}}</td>
                    <td>
                        <div style="position: relative;">
                            <button type="button" class="btn btn-ghost btn-sm" onclick="toggleActionsMenu(event, '{{name}}')" style="padding: 0.25rem 0.5rem;">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px;">
                                    <circle cx="12" cy="12" r="1"/>
                                    <circle cx="12" cy="5" r="1"/>
                                    <circle cx="12" cy="19" r="1"/>
                                </svg>
                            </button>
                            <div id="actions-menu-{{name}}" class="actions-menu" style="display: none;">
                                <button type="button" onclick="showRenameModal('{{name}}'); closeActionsMenu('{{name}}')">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px;">
                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                    </svg>
                                    Rename
                                </button>
                                <button type="button" onclick="confirmRemove('{{name}}', '{{displayName name}}'); closeActionsMenu('{{name}}')" style="color: var(--danger);">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px;">
                                        <polyline points="3 6 5 6 21 6"/>
                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                                    </svg>
                                    Remove
                                </button>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr id="documents-row-{{name}}" class="documents-row" style="display: none;">
                    <td colspan="5" style="padding: 0; background: var(--bg-surface);">
                        <div class="documents-container">
                            <div class="documents-loading" id="documents-loading-{{name}}" style="display: none; text-align: center; padding: 2rem; color: var(--text-secondary);">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 24px; height: 24px; margin: 0 auto 0.5rem; animation: spin 1s linear infinite;">
                                    <circle cx="12" cy="12" r="10"/>
                                </svg>
                                <p style="font-size: 0.875rem;">Loading documents...</p>
                            </div>
                            <div id="documents-list-{{name}}" class="documents-list">
                                <!-- Documents will be loaded here -->
                            </div>
                        </div>
                    </td>
                </tr>
                {{/each}}
            </tbody>
        </table>
        {{else}}
        <div class="empty-state">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 64px; height: 64px; opacity: 0.5; margin-bottom: 1rem;">
                <path d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
            </svg>
            <p>No knowledge bases found</p>
            <p style="font-size: 0.875rem; margin-top: 0.5rem; color: var(--text-secondary);">
                Click "Add Knowledge Base" to get started
            </p>
        </div>
        {{/if}}
    </div>
</div>

<!-- Ingest Form (Hidden by default) -->
<div id="ingestFormContainer" class="card" style="margin-top: 2rem; display: none;">
    <div class="card-header">
        <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
            <div>
                <h3 class="card-title">Create Knowledge Base</h3>
                <p class="card-subtitle">Enter a name for your new knowledge base</p>
            </div>
            <button type="button" class="btn btn-ghost" onclick="hideIngestForm()">×</button>
        </div>
    </div>
    <form method="POST" action="/create-knowledgebase" id="createKnowledgeBaseForm">
        <div class="form-group">
            <label class="form-label">Knowledge Base Name</label>
            <input type="text" name="name" id="knowledgeBaseName" class="form-input" placeholder="my documents" required autofocus>
        </div>
        <div style="display: flex; gap: 0.75rem;">
            <button type="button" class="btn btn-ghost" onclick="hideIngestForm()">Cancel</button>
            <button type="submit" class="btn btn-primary">Create Knowledge Base</button>
        </div>
    </form>
</div>
</div>

<!-- Rename Modal -->
<div id="renameModal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Rename Knowledge Base</h3>
            <button type="button" class="btn btn-ghost" onclick="closeRenameModal()">×</button>
        </div>
        <form method="POST" action="/rename">
            <input type="hidden" name="oldName" id="renameOldName">
            <div class="form-group">
                <label class="form-label">Rename</label>
                <div style="display: flex; align-items: center; gap: 0.75rem;">
                    <input type="text" id="renameCurrentName" class="form-input" disabled style="flex: 1;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; color: var(--text-secondary); flex-shrink: 0;">
                        <line x1="5" y1="12" x2="19" y2="12"/>
                        <polyline points="12 5 19 12 12 19"/>
                    </svg>
                    <input type="text" name="newName" id="renameNewName" class="form-input" placeholder="new-name" required style="flex: 1;">
                </div>
                <p style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem;">
                    Use spaces or hyphens - spaces will be shown as title case in the UI
                </p>
            </div>
            <div style="display: flex; gap: 0.75rem; justify-content: flex-end;">
                <button type="button" class="btn btn-ghost" onclick="closeRenameModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Rename</button>
            </div>
        </form>
    </div>
</div>

<!-- Folder Browser Modal -->
<div id="folderBrowserModal" class="modal" style="display: none;">
    <div class="modal-content" style="max-width: 600px;">
        <div class="modal-header">
            <h3>Select Folder</h3>
            <button type="button" class="btn btn-ghost" onclick="closeFolderBrowserModal()">×</button>
        </div>
        <div style="margin-bottom: 1rem;">
            <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background: var(--bg-surface); border-radius: 8px; font-family: monospace; font-size: 0.875rem;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px; flex-shrink: 0;">
                    <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
                </svg>
                <span id="currentPathDisplay" style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">Loading...</span>
            </div>
        </div>
        <div id="folderLoadingIndicator" style="display: none; text-align: center; padding: 1rem; color: var(--text-secondary);">
            Loading folders...
        </div>
        <div id="folderList" style="max-height: 400px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 1rem;">
            <!-- Folders will be loaded here -->
        </div>
        <div style="display: flex; gap: 0.75rem; justify-content: flex-end;">
            <button type="button" class="btn btn-ghost" onclick="closeFolderBrowserModal()">Cancel</button>
            <button type="button" class="btn btn-primary" onclick="selectCurrentFolder()">Select This Folder</button>
        </div>
    </div>
</div>
