/**
 * 古诗词阅读网 - 前端 JavaScript
 */

const API_BASE = window.location.origin;

// 状态
let state = {
    poems: [],
    currentPage: 1,
    totalPages: 1,
    pageSize: 20,
    total: 0,
    filters: {
        view: 'all',
        search: '',
        categories: [] // 格式：[{category: 'genre', tag: '山水田园'}]
    },
    currentPoem: null,
    categories: {}
};

// 初始化
document.addEventListener('DOMContentLoaded', async () => {
    await loadCategories();
    await loadStats();
    await loadPoems();
    setupEventListeners();
    setupUpload();
});

// 加载分类体系
async function loadCategories() {
    try {
        const res = await fetch(`${API_BASE}/api/categories`);
        if (res.ok) {
            state.categories = await res.json();
            renderCategoryTabs();
        }
    } catch (err) {
        console.error('加载分类失败:', err);
    }
}

// 加载统计
async function loadStats() {
    try {
        const res = await fetch(`${API_BASE}/api/stats`);
        if (res.ok) {
            const stats = await res.json();
            updateStats(stats);
        }
    } catch (err) {
        console.error('加载统计失败:', err);
    }
}

// 加载诗词
async function loadPoems() {
    showLoading(true);
    
    try {
        const params = new URLSearchParams({
            page: state.currentPage,
            page_size: state.pageSize
        });
        
        // 搜索
        if (state.filters.search) {
            params.append('search', state.filters.search);
        }
        
        // 阅读状态
        if (state.filters.view === 'read') {
            params.append('is_read', 'true');
        } else if (state.filters.view === 'unread') {
            params.append('is_read', 'false');
        }
        
        // 多类别筛选
        if (state.filters.categories.length > 0) {
            const catStr = state.filters.categories
                .map(c => `${c.category}:${c.tag}`)
                .join(',');
            params.append('categories', catStr);
        }
        
        const res = await fetch(`${API_BASE}/api/poems?${params}`);
        if (res.ok) {
            const data = await res.json();
            state.poems = data.poems;
            state.total = data.total;
            state.totalPages = data.total_pages;
            
            renderPoems();
            updateResultCount();
        }
    } catch (err) {
        console.error('加载诗词失败:', err);
        showToast('加载失败', 'error');
    } finally {
        showLoading(false);
    }
}

// 渲染分类标签页
function renderCategoryTabs() {
    const container = document.getElementById('categoryTabs');
    const categories = Object.entries(state.categories);
    
    // 显示所有分类
    container.innerHTML = categories.map(([key, data]) => `
        <div class="category-tab" data-category="${key}">
            <span class="tab-name">${data.name}</span>
        </div>
    `).join('');
    
    // 点击事件
    container.querySelectorAll('.category-tab').forEach(tab => {
        tab.addEventListener('click', () => {
            const category = tab.dataset.category;
            showTagsForCategory(category);
            
            // 切换激活状态
            container.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
        });
    });
    
    // 默认显示第一个分类的标签
    if (categories.length > 0) {
        const firstCategory = categories[0][0];
        showTagsForCategory(firstCategory);
        container.querySelector('.category-tab')?.classList.add('active');
    }
}

// 显示某分类的标签
function showTagsForCategory(category) {
    const container = document.getElementById('tagCloud');
    const data = state.categories[category];
    
    if (!data) return;
    
    container.innerHTML = data.tags.map(tag => `
        <span class="tag-item" data-category="${category}" data-tag="${tag}">${tag}</span>
    `).join('');
    
    // 点击事件
    container.querySelectorAll('.tag-item').forEach(item => {
        item.addEventListener('click', (e) => {
            e.stopPropagation();
            addFilter(category, item.dataset.tag);
        });
    });
}

// 添加筛选条件
function addFilter(category, tag) {
    // 检查是否已存在
    const exists = state.filters.categories.some(
        c => c.category === category && c.tag === tag
    );
    
    if (!exists) {
        state.filters.categories.push({ category, tag });
        renderSelectedFilters();
        state.currentPage = 1;
        loadPoems();
    }
}

// 渲染已选筛选
function renderSelectedFilters() {
    const container = document.getElementById('selectedFilters');
    const btn = document.getElementById('clearFiltersBtn');
    
    if (state.filters.categories.length === 0) {
        container.innerHTML = '';
        btn.style.display = 'none';
        return;
    }
    
    container.innerHTML = state.filters.categories.map((f, i) => `
        <span class="filter-tag">
            ${state.categories[f.category]?.name || f.category}: ${f.tag}
            <button onclick="removeFilter(${i})">×</button>
        </span>
    `).join('');
    
    btn.style.display = 'inline-block';
}

// 移除筛选
function removeFilter(index) {
    state.filters.categories.splice(index, 1);
    renderSelectedFilters();
    state.currentPage = 1;
    loadPoems();
}

// 清除所有筛选
function clearFilters() {
    state.filters.categories = [];
    state.filters.search = '';
    state.filters.view = 'all';
    document.getElementById('searchInput').value = '';
    renderSelectedFilters();
    
    // 重置导航激活状态
    document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
    document.querySelector('[data-view="all"]').classList.add('active');
    
    loadPoems();
}

// 渲染诗词列表
function renderPoems() {
    const grid = document.getElementById('poemGrid');
    const empty = document.getElementById('emptyState');
    
    if (state.poems.length === 0) {
        grid.innerHTML = '';
        empty.style.display = 'block';
        return;
    }
    
    empty.style.display = 'none';
    grid.innerHTML = '';
    
    state.poems.forEach(poem => {
        const card = createPoemCard(poem);
        grid.appendChild(card);
    });
}

// 创建诗词卡片
function createPoemCard(poem) {
    const isRead = poem.is_read || false;
    const paragraphs = poem.paragraphs || [];
    const excerpt = paragraphs.slice(0, 2).join('<br>');
    const tags = getTopTags(poem.classifications);
    
    const card = document.createElement('div');
    card.className = `poem-card ${isRead ? 'read' : ''}`;
    card.dataset.id = poem.id;
    card.innerHTML = `
        <div class="poem-card-header">
            <h3 class="poem-title">${escapeHtml(poem.title)}</h3>
            <span class="poem-author">作者：${escapeHtml(poem.author)}</span>
        </div>
        <div class="poem-excerpt">${excerpt || '暂无内容'}</div>
        <div class="poem-tags">${tags}</div>
        <div class="poem-card-footer">
            <label class="read-toggle">
                <input type="checkbox" ${isRead ? 'checked' : ''} 
                       onchange="event.stopPropagation(); toggleRead('${poem.id}', this.checked)" />
                <span>${isRead ? '✓ 已读' : '○ 未读'}</span>
            </label>
            <button class="btn btn-sm" onclick="event.stopPropagation(); showPoemDetail('${poem.id}')">详情</button>
        </div>
    `;
    
    // 点击卡片显示详情（排除复选框和按钮）
    card.addEventListener('click', (e) => {
        if (!e.target.closest('.read-toggle') && !e.target.closest('button')) {
            showPoemDetail(poem.id);
        }
    });
    
    return card;
}

// 获取主要标签
function getTopTags(classifications) {
    if (!classifications) return '';
    
    // 显示所有分类标签
    const priority = ['genre', 'emotion_tone', 'season', 'location', 'time_of_day', 
                      'philosophy', 'nature_scenery', 'plants', 'animals'];
    const tags = [];
    const shown = new Set();
    
    for (const cat of priority) {
        if (classifications[cat] && classifications[cat].length > 0) {
            // 每个分类最多显示 2 个标签
            classifications[cat].slice(0, 2).forEach(tag => {
                if (!shown.has(tag)) {
                    tags.push(`<span class="tag tag-${cat}">${tag}</span>`);
                    shown.add(tag);
                }
            });
            if (tags.length >= 6) break;
        }
    }
    
    return tags.join('');
}

// 显示诗词详情
async function showPoemDetail(poemId) {
    try {
        const res = await fetch(`${API_BASE}/api/poems/${poemId}`);
        if (!res.ok) {
            showToast('加载失败', 'error');
            return;
        }
        
        const poem = await res.json();
        state.currentPoem = poem;
        
        // 填充弹窗
        document.getElementById('modalTitle').textContent = poem.title;
        document.getElementById('modalAuthor').textContent = poem.author;
        document.getElementById('modalContent').innerHTML = poem.paragraphs
            .map(p => `<p>${escapeHtml(p)}</p>`).join('');
        
        // 渲染标签
        document.getElementById('modalTags').innerHTML = renderAllTags(poem.classifications);
        
        // 设置阅读状态
        document.getElementById('modalReadCheck').checked = poem.is_read || false;
        
        // 显示弹窗
        document.getElementById('poemModal').style.display = 'flex';
        document.body.style.overflow = 'hidden';
        
    } catch (err) {
        console.error('加载详情失败:', err);
        showToast('加载失败', 'error');
    }
}

// 渲染所有标签
function renderAllTags(classifications) {
    if (!classifications) return '';
    
    const categoryNames = state.categories;
    const categoryOrder = ['season', 'solar_terms', 'time_of_day', 'genre', 'emotion_tone', 
                           'emotions', 'nature_scenery', 'plants', 'animals', 'buildings',
                           'philosophy', 'life_stage', 'social_role', 'technique', 'rhetoric',
                           'colors', 'sounds', 'location', 'festival'];
    
    return categoryOrder.map(cat => {
        if (!classifications[cat] || classifications[cat].length === 0) return '';
        
        const catName = categoryNames[cat]?.name || cat;
        const tags = classifications[cat];
        
        return `
            <div class="tag-group">
                <span class="tag-group-label">${catName}:</span>
                <div class="tag-group-tags">
                    ${tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
                </div>
            </div>
        `;
    }).filter(html => html.trim() !== '').join('');
}

// 切换弹窗阅读状态
async function toggleModalRead() {
    if (!state.currentPoem) return;
    
    const isRead = document.getElementById('modalReadCheck').checked;
    
    try {
        const res = await fetch(
            `${API_BASE}/api/poems/${state.currentPoem.id}/read?is_read=${isRead}`,
            { method: 'PUT' }
        );
        
        if (res.ok) {
            state.currentPoem.is_read = isRead;
            await loadStats();
            await loadPoems();
        }
    } catch (err) {
        console.error('更新状态失败:', err);
    }
}

// 关闭弹窗
function closeModal() {
    document.getElementById('poemModal').style.display = 'none';
    document.body.style.overflow = '';
    state.currentPoem = null;
}

// 切换阅读状态
async function toggleRead(poemId, isRead) {
    try {
        const res = await fetch(
            `${API_BASE}/api/poems/${poemId}/read?is_read=${isRead}`,
            { method: 'PUT' }
        );
        
        if (res.ok) {
            await loadStats();
            await loadPoems();
            showToast(isRead ? '已标记为已读' : '已标记为未读', 'success');
        }
    } catch (err) {
        console.error('更新失败:', err);
        showToast('更新失败', 'error');
    }
}

// 随机一首
async function showRandomPoem() {
    try {
        const res = await fetch(`${API_BASE}/api/poems/random`);
        if (res.ok) {
            const poem = await res.json();
            state.currentPoem = poem;
            
            document.getElementById('modalTitle').textContent = poem.title;
            document.getElementById('modalAuthor').textContent = poem.author;
            document.getElementById('modalContent').innerHTML = poem.paragraphs
                .map(p => `<p>${escapeHtml(p)}</p>`).join('');
            document.getElementById('modalTags').innerHTML = renderAllTags(poem.classifications);
            document.getElementById('modalReadCheck').checked = poem.is_read || false;
            
            document.getElementById('poemModal').style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }
    } catch (err) {
        showToast('获取失败', 'error');
    }
}

// 上传文件
async function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    
    if (!file) {
        showToast('请选择文件', 'error');
        return;
    }
    
    const formData = new FormData();
    formData.append('file', file);
    
    const status = document.getElementById('uploadStatus');
    status.textContent = '上传中...';
    status.className = 'status-msg';
    
    try {
        const res = await fetch(`${API_BASE}/api/poems/import`, {
            method: 'POST',
            body: formData
        });
        
        const data = await res.json();
        
        if (res.ok) {
            status.textContent = `成功导入 ${data.imported} 首，跳过 ${data.skipped} 首`;
            status.className = 'status-msg success';
            fileInput.value = '';
            await loadStats();
            await loadPoems();
        } else {
            status.textContent = data.detail || '导入失败';
            status.className = 'status-msg error';
        }
    } catch (err) {
        status.textContent = '上传失败：' + err.message;
        status.className = 'status-msg error';
    }
}

// 更新统计显示
function updateStats(stats) {
    document.getElementById('totalPoems').textContent = stats.total_poems;
    document.getElementById('readCount').textContent = stats.read_count;
    document.getElementById('unreadCount').textContent = stats.unread_count;
    
    const percent = stats.reading_progress || 0;
    document.getElementById('progressPercent').textContent = percent;
    document.getElementById('progressText').textContent = `${stats.read_count}/${stats.total_poems}`;
    document.querySelector('.progress-fill').style.width = `${percent}%`;
}

// 更新结果数量
function updateResultCount() {
    document.getElementById('resultCount').textContent = `${state.total} 首`;
    updatePagination();
}

// 更新分页控件
function updatePagination() {
    const pagination = document.getElementById('pagination');
    const prevBtn = document.getElementById('prevPage');
    const nextBtn = document.getElementById('nextPage');
    const pageInfo = document.getElementById('pageInfo');
    
    if (state.totalPages <= 1) {
        pagination.style.display = 'none';
        return;
    }
    
    pagination.style.display = 'flex';
    prevBtn.disabled = state.currentPage <= 1;
    nextBtn.disabled = state.currentPage >= state.totalPages;
    prevBtn.style.opacity = prevBtn.disabled ? '0.5' : '1';
    nextBtn.style.opacity = nextBtn.disabled ? '0.5' : '1';
    pageInfo.textContent = `第 ${state.currentPage} / ${state.totalPages} 页，共 ${state.total} 首`;
}

// 跳转到指定页
function goToPage(page) {
    if (page < 1 || page > state.totalPages) return;
    state.currentPage = page;
    loadPoems();
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

// 设置事件监听
function setupEventListeners() {
    // 导航
    document.querySelectorAll('.nav-item').forEach(item => {
        item.addEventListener('click', (e) => {
            e.preventDefault();
            
            const view = item.dataset.view;
            const action = item.dataset.action;
            
            if (action === 'random') {
                showRandomPoem();
                return;
            }
            
            if (view) {
                state.filters.view = view;
                state.currentPage = 1;
                
                document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
                item.classList.add('active');
                
                loadPoems();
            }
        });
    });
    
    // 搜索
    let searchTimeout;
    document.getElementById('searchInput').addEventListener('input', (e) => {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            state.filters.search = e.target.value.trim();
            state.currentPage = 1;
            loadPoems();
        }, 500);
    });
}

// 设置上传区域
function setupUpload() {
    const area = document.getElementById('uploadArea');
    const fileInput = document.getElementById('fileInput');
    const uploadStatus = document.getElementById('uploadStatus');
    
    area.addEventListener('dragover', (e) => {
        e.preventDefault();
        area.classList.add('dragover');
    });
    
    area.addEventListener('dragleave', () => {
        area.classList.remove('dragover');
    });
    
    area.addEventListener('drop', (e) => {
        e.preventDefault();
        area.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            // 触发 change 事件以更新文件名显示
            fileInput.dispatchEvent(new Event('change'));
        }
    });
    
    // 文件选择后显示文件名
    fileInput.addEventListener('change', () => {
        const file = fileInput.files[0];
        if (file) {
            uploadStatus.textContent = `已选择：${file.name}`;
            uploadStatus.className = 'status-msg info';
        } else {
            uploadStatus.textContent = '';
            uploadStatus.className = 'status-msg';
        }
    });
}

// 工具函数
function showLoading(show) {
    document.getElementById('loading').style.display = show ? 'flex' : 'none';
}

function showToast(message, type = 'info') {
    const toast = document.getElementById('toast');
    const msg = document.getElementById('toastMessage');
    
    msg.textContent = message;
    toast.style.display = 'block';
    toast.className = `toast toast-${type}`;
    
    setTimeout(() => {
        toast.style.display = 'none';
    }, 3000);
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// 导出全局函数
window.toggleRead = toggleRead;
window.showPoemDetail = showPoemDetail;
window.closeModal = closeModal;
window.uploadFile = uploadFile;
window.clearFilters = clearFilters;
window.removeFilter = removeFilter;
window.goToPage = goToPage;