{% extends "base.html" %}
{% block title %}dskeeper — 会话浏览器{% endblock %}

{% block body %}
<div class="app-layout">

    {# ── Sidebar ──────────────────────────────────────────────── #}
    <aside class="sidebar" id="sidebar">
        {# Mobile back button (hidden on desktop) #}
        <div class="conv-back-btn" id="convBackBtn" onclick="closeConversation()">
            ← 返回列表
        </div>

        {# Brand #}
        <div class="sidebar-brand">
            <div class="logo-icon">D</div>
            <span>dskeeper</span>
        </div>

        {# Search #}
        <div class="sidebar-search">
            <div class="search-wrapper">
                <span class="search-icon">🔍</span>
                <input
                    type="text"
                    id="searchInput"
                    placeholder="搜索会话..."
                    autocomplete="off"
                >
            </div>
        </div>

        {# Conversation list #}
        <div class="conv-list-container" id="convListContainer">
            <div class="conv-list" id="convList">
                {% for c in conversations %}
                <div class="conv-item"
                     data-id="{{ c.id }}"
                     data-title="{{ c.get('title', '未命名') | e }}"
                     onclick="loadConversation('{{ c.id }}')">
                    <div class="conv-item-title">{{ c.get("title", "未命名") | e }}</div>
                    <div class="conv-item-meta">
                        <span>{{ c.get("updated_at", "")[:16] | replace("T", " ") }}</span>
                        <span>{{ c.get("message_count", 0) }} 条</span>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="sidebar-loader" id="sidebarLoader" style="display: none;">
                <div class="spinner"></div>
                <div>加载中...</div>
            </div>
            <div class="sidebar-empty" id="sidebarEmpty" style="display: none;">
                没有找到匹配的会话
            </div>
        </div>

        {# Footer stats #}
        <div class="sidebar-footer">
            <span>{{ stats.conversations }} 个会话</span>
            <span>{{ stats.messages }} 条消息</span>
        </div>
    </aside>

    {# ── Main Content ────────────────────────────────────────── #}
    <main class="main-content" id="mainContent">
        <div class="welcome" id="welcomeState">
            <div class="welcome-logo">D</div>
            <h2>欢迎使用 Deepseek-Keeper</h2>
            <p>
                从左侧选择一个会话查看详情<br>
                或使用 <code>dskeeper import</code> 导入更多数据
            </p>
        </div>
        <div class="conv-view" id="convView" style="display: none;">
            <div id="convContent"></div>
        </div>
        <div class="page-404" id="convError" style="display: none;">
            <h1>404</h1>
            <p id="convErrorMsg">未找到该会话</p>
        </div>
    </main>

</div>
{% endblock %}

{% block after_body %}
<script>
// ── State ──────────────────────────────────────────────────────────
const PAGE_SIZE = {{ page_size }};
let currentOffset = {{ conversations | length }};
let totalCount = {{ total }};
let isLoading = false;
let hasMore = currentOffset < totalCount;
let currentSearch = '';
let searchTimer = null;
let activeConvId = null;

const convList = document.getElementById('convList');
const convListContainer = document.getElementById('convListContainer');
const sidebarLoader = document.getElementById('sidebarLoader');
const sidebarEmpty = document.getElementById('sidebarEmpty');
const searchInput = document.getElementById('searchInput');
const welcomeState = document.getElementById('welcomeState');
const convView = document.getElementById('convView');
const convContent = document.getElementById('convContent');
const convError = document.getElementById('convError');
const convErrorMsg = document.getElementById('convErrorMsg');
const convBackBtn = document.getElementById('convBackBtn');
const sidebar = document.getElementById('sidebar');
const mainContent = document.getElementById('mainContent');

// ── Infinite Scroll ────────────────────────────────────────────────

convListContainer.addEventListener('scroll', () => {
    if (isLoading || !hasMore) return;

    const { scrollTop, scrollHeight, clientHeight } = convListContainer;
    if (scrollTop + clientHeight >= scrollHeight - 120) {
        loadMore();
    }
});

async function loadMore() {
    if (isLoading) return;
    isLoading = true;
    sidebarLoader.style.display = 'block';

    try {
        const params = new URLSearchParams({
            offset: currentOffset,
            limit: PAGE_SIZE,
        });
        if (currentSearch) params.set('q', currentSearch);

        const resp = await fetch(`/api/conversations?${params}`);
        const data = await resp.json();

        for (const c of data.conversations) {
            appendConvItem(c);
        }

        currentOffset += data.conversations.length;
        hasMore = data.has_more;
        totalCount = data.total;
    } catch (err) {
        console.error('Failed to load more:', err);
    } finally {
        isLoading = false;
        sidebarLoader.style.display = 'none';
    }
}

function appendConvItem(c) {
    const div = document.createElement('div');
    div.className = 'conv-item';
    div.setAttribute('data-id', c.id);
    div.setAttribute('data-title', (c.title || '未命名'));
    div.onclick = () => loadConversation(c.id);

    const title = document.createElement('div');
    title.className = 'conv-item-title';
    title.textContent = c.title || '未命名';

    const meta = document.createElement('div');
    meta.className = 'conv-item-meta';
    const updated = (c.updated_at || '').substring(0, 16).replace('T', ' ');
    meta.innerHTML = `<span>${updated}</span><span>${c.message_count || 0} 条</span>`;

    div.appendChild(title);
    div.appendChild(meta);
    convList.appendChild(div);
}

// ── Search ─────────────────────────────────────────────────────────

searchInput.addEventListener('input', () => {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(() => {
        currentSearch = searchInput.value.trim().toLowerCase();
        doSearch();
    }, 200);
});

async function doSearch() {
    // Reset state
    convList.innerHTML = '';
    currentOffset = 0;
    hasMore = true;
    isLoading = true;
    sidebarLoader.style.display = 'block';
    sidebarEmpty.style.display = 'none';

    try {
        const params = new URLSearchParams({
            offset: 0,
            limit: PAGE_SIZE,
        });
        if (currentSearch) params.set('q', currentSearch);

        const resp = await fetch(`/api/conversations?${params}`);
        const data = await resp.json();

        for (const c of data.conversations) {
            appendConvItem(c);
        }

        currentOffset = data.conversations.length;
        hasMore = data.has_more;
        totalCount = data.total;

        if (data.conversations.length === 0) {
            sidebarEmpty.style.display = 'block';
        }
    } catch (err) {
        console.error('Search failed:', err);
    } finally {
        isLoading = false;
        sidebarLoader.style.display = 'none';
    }
}

// ── Load Conversation ──────────────────────────────────────────────

async function loadConversation(convId) {
    // Set active state in sidebar
    document.querySelectorAll('.conv-item').forEach(el => el.classList.remove('active'));
    const activeItem = document.querySelector(`.conv-item[data-id="${convId}"]`);
    if (activeItem) activeItem.classList.add('active');

    activeConvId = convId;

    // Show loading
    welcomeState.style.display = 'none';
    convError.style.display = 'none';
    convView.style.display = 'block';
    convContent.innerHTML = '<div class="sidebar-loader"><div class="spinner"></div></div>';

    // On mobile: show main content, hide sidebar
    if (window.innerWidth <= 768) {
        sidebar.classList.add('show-conv');
        convBackBtn.style.display = 'flex';
    }

    try {
        const resp = await fetch(`/conversation/${convId}`);
        if (!resp.ok) {
            throw new Error(`HTTP ${resp.status}`);
        }
        const html = await resp.text();

        // Extract just the article content from the full page response
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const article = doc.querySelector('.conv-view');
        if (article) {
            convContent.innerHTML = article.innerHTML;
        } else {
            // If the response is a disambiguation page
            const disambig = doc.querySelector('.disambiguate');
            if (disambig) {
                convContent.innerHTML = disambig.outerHTML;
            } else {
                convContent.innerHTML = html;
            }
        }

        convView.style.display = 'block';
        welcomeState.style.display = 'none';
        convError.style.display = 'none';

        // Scroll main content to top
        mainContent.scrollTop = 0;
    } catch (err) {
        console.error('Failed to load conversation:', err);
        convView.style.display = 'none';
        convError.style.display = 'flex';
        convErrorMsg.textContent = '加载会话失败';
    }
}

function closeConversation() {
    activeConvId = null;
    document.querySelectorAll('.conv-item').forEach(el => el.classList.remove('active'));
    convView.style.display = 'none';
    convError.style.display = 'none';
    welcomeState.style.display = 'flex';

    if (window.innerWidth <= 768) {
        sidebar.classList.remove('show-conv');
        convBackBtn.style.display = 'none';
    }
}

// ── Keyboard shortcuts ─────────────────────────────────────────────

document.addEventListener('keydown', (e) => {
    // Ctrl+K / Cmd+K → focus search
    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        searchInput.focus();
    }
    // Escape → clear search / close conversation
    if (e.key === 'Escape') {
        if (document.activeElement === searchInput) {
            searchInput.value = '';
            searchInput.blur();
            currentSearch = '';
            doSearch();
        } else if (activeConvId && window.innerWidth <= 768) {
            closeConversation();
        }
    }
});
</script>
{% endblock %}