{% extends "base.html" %}

{% block title %}Searchat - Manage Conversations{% endblock %}

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

{% block body %}
    <!-- Theme Switcher -->
    <div class="theme-switcher" id="themeSwitcher" style="position: absolute; top: 0; right: 0; display: flex; padding: 3px; border-radius: 10px; background: hsl(var(--bg-surface)); gap: 2px; z-index: 100;">
        <button class="theme-switcher-btn" title="Light" @click="$store.theme.set('light')"
                :class="{ active: $store.theme.mode === 'light' }">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="3"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.41 1.41M11.54 11.54l1.41 1.41M3.05 12.95l1.41-1.41M11.54 4.46l1.41-1.41"/></svg>
        </button>
        <button class="theme-switcher-btn" title="Dark" @click="$store.theme.set('dark')"
                :class="{ active: $store.theme.mode === 'dark' }">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13.5 8.5a5.5 5.5 0 1 1-7-7 4.5 4.5 0 0 0 7 7z"/></svg>
        </button>
        <button class="theme-switcher-btn" title="Auto" @click="$store.theme.set('auto')"
                :class="{ active: $store.theme.mode === 'auto' }">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="2" width="14" height="10" rx="1.5"/><path d="M5 15h6M8 12v3"/></svg>
        </button>
    </div>

    <div class="manage-page">
        <div class="manage-header">
            <a href="/" class="back-button">&larr; Back to Search</a>
            <h1>Manage Conversations</h1>
        </div>

        <div class="manage-caution glass">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
                <path d="M12 9v4M12 17h.01"/>
            </svg>
            <div>
                <strong>Irreversible action.</strong> Source JSONLs are no longer available. Deleted conversations cannot be recovered unless you have a backup.
            </div>
        </div>

        <!-- Filter Bar -->
        <div class="manage-filters glass">
            <span class="filter-bar-label">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
                Filters
            </span>

            <!-- Project -->
            <div class="filter-chip" data-for="manageProject">
                <span class="filter-label">Project</span>
                <span class="filter-value" id="manageProjectLabel">All Projects</span>
                <svg class="filter-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
            </div>

            <!-- Tool -->
            <div class="filter-chip" data-for="manageTool">
                <span class="filter-label">Tool</span>
                <span class="filter-value" id="manageToolLabel">All Tools</span>
                <svg class="filter-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
            </div>

            <!-- Sort -->
            <div class="filter-chip" data-for="manageSortBy">
                <span class="filter-label">Sort</span>
                <span class="filter-value" id="manageSortLabel">Date (newest)</span>
                <svg class="filter-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
            </div>

            <div class="sr-only">
                <select id="manageProject" name="project">
                    <option value="">All Projects</option>
                </select>
                <select id="manageTool" name="tool">
                    <option value="">All Tools</option>
                    <option value="claude">Claude Code</option>
                    <option value="vibe">Vibe</option>
                    <option value="opencode">OpenCode</option>
                    <option value="codex">Codex</option>
                    <option value="gemini">Gemini CLI</option>
                    <option value="continue">Continue</option>
                    <option value="cursor">Cursor</option>
                    <option value="aider">Aider</option>
                    <option value="omp">Oh My Pi</option>
                </select>
                <select id="manageSortBy" name="sortBy">
                    <option value="date_newest">Date (newest)</option>
                    <option value="date_oldest">Date (oldest)</option>
                    <option value="length">Message count</option>
                    <option value="title">Title</option>
                </select>
            </div>
        </div>

        <!-- Conversation List -->
        <div id="manage-list">
            <div style="text-align: center; padding: 48px;">
                <span class="spinner" id="manageSpinner" style="display: inline-block;"></span>
                <p style="color: hsl(var(--text-tertiary));">Loading conversations...</p>
            </div>
        </div>
    </div>

    <!-- Preview Panel (slide-out) -->
    <div class="preview-overlay" id="previewOverlay"></div>
    <div class="preview-panel glass" id="previewPanel">
        <div class="preview-panel-header">
            <span class="preview-panel-title">Conversation Preview</span>
            <button class="glass-btn preview-close-btn" id="previewCloseButton" title="Close preview">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div class="preview-panel-body" id="previewContent">
            <div style="text-align: center; padding: 48px;">
                <span class="htmx-indicator spinner" id="previewSpinner"></span>
            </div>
        </div>
    </div>

    <!-- Fixed Bottom Toolbar -->
    <div class="manage-toolbar glass" id="manageToolbar" style="display: none;">
        <div class="manage-toolbar-left">
            <span class="manage-selection-count" id="manageSelectionCount">0 selected</span>
            <button class="glass-btn" id="manageSelectAllButton">Select All</button>
            <button class="glass-btn" id="manageDeselectAllButton">Deselect All</button>
        </div>
        <div class="manage-toolbar-right">
            <label class="manage-source-toggle">
                <input type="checkbox" id="deleteSourceFiles">
                <span>Also delete source files</span>
            </label>
            <button class="glass-btn glass-btn-danger" id="manageDeleteBtn">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <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>
                Delete Selected
            </button>
        </div>
    </div>
{% endblock %}