static/app.js

let currentResults = null;
let currentBatchResults = null;

// 标签页切换
function switchTab(tabName) {
    // 隐藏所有标签内容
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
    });
    document.querySelectorAll('.tab-button').forEach(btn => {
        btn.classList.remove('active');
    });
    
    // 显示选中的标签
    document.getElementById(tabName + '-tab').classList.add('active');
    event.target.classList.add('active');
    
    // 隐藏结果区域
    document.getElementById('results').style.display = 'none';
    document.getElementById('batchResults').style.display = 'none';
}

// 单个基因设计
document.getElementById('primerForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const geneSymbol = document.getElementById('geneSymbol').value.trim();
    const species = document.getElementById('species').value;
    
    if (!geneSymbol) {
        alert('请输入基因名称');
        return;
    }
    
    // 显示加载状态
    document.getElementById('loading').style.display = 'block';
    document.getElementById('results').style.display = 'none';
    document.getElementById('batchResults').style.display = 'none';
    document.getElementById('submitBtn').disabled = true;
    
    try {
        const response = await fetch('/design_primers', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                gene_symbol: geneSymbol,
                species: species
            })
        });
        
        const data = await response.json();
        
        if (data.error) {
            showError(data.error);
        } else {
            currentResults = [{ gene: geneSymbol, status: 'success', data: data }];
            showResults(data);
        }
    } catch (error) {
        showError('网络错误，请检查连接后重试');
    } finally {
        document.getElementById('loading').style.display = 'none';
        document.getElementById('submitBtn').disabled = false;
    }
});

// 批量基因设计
document.getElementById('batchForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const batchGenesText = document.getElementById('batchGenes').value.trim();
    const species = document.getElementById('batchSpecies').value;
    
    if (!batchGenesText) {
        alert('请输入基因列表');
        return;
    }
    
    // 解析基因列表
    const geneList = parseGeneList(batchGenesText);
    
    if (geneList.length === 0) {
        alert('未找到有效的基因名称');
        return;
    }
    
    // 显示进度条
    document.getElementById('batchProgress').style.display = 'block';
    document.getElementById('results').style.display = 'none';
    document.getElementById('batchResults').style.display = 'none';
    document.getElementById('batchSubmitBtn').disabled = true;
    
    try {
        const response = await fetch('/batch_design_primers', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                gene_list: geneList,
                species: species
            })
        });
        
        const data = await response.json();
        currentBatchResults = data.results;
        showBatchResults(data.results);
        
    } catch (error) {
        showError('网络错误，请检查连接后重试');
    } finally {
        document.getElementById('batchProgress').style.display = 'none';
        document.getElementById('batchSubmitBtn').disabled = false;
    }
});

function parseGeneList(text) {
    // 支持多种分隔符：换行、逗号、空格
    return text
        .split(/[\n,\s]+/)
        .map(gene => gene.trim())
        .filter(gene => gene.length > 0);
}

function showError(message) {
    document.getElementById('results').innerHTML = `
        <div class="error">
            ❌ ${message}
        </div>
    `;
    document.getElementById('results').style.display = 'block';
}

function showResults(data) {
    const geneInfo = data.gene_info;
    const primers = data.primers;
    
    // 显示基因信息
    document.getElementById('geneInfo').innerHTML = `
        <h3>📋 基因信息</h3>
        <p><strong>基因名称:</strong> ${geneInfo.symbol}</p>
        <p><strong>RefSeq ID:</strong> ${geneInfo.nm_id}</p>
        <p><strong>外显子交界点:</strong> ${geneInfo.junctions.join(', ')}</p>
    `;
    
    // 显示引物结果
    let primerHtml = '<h3>🎯 推荐引物序列</h3>';
    
    primers.forEach(primer => {
        primerHtml += `
            <div class="primer-card">
                <div class="primer-header">
                    <span class="primer-id">引物对 ${primer.id}</span>
                    <span class="product-size">${primer.product_size} bp</span>
                </div>
                
                <div class="primer-sequences">
                    <div class="sequence-box">
                        <div class="sequence-label">正向引物 (Forward)</div>
                        <div class="sequence">${primer.forward}</div>
                    </div>
                    <div class="sequence-box">
                        <div class="sequence-label">反向引物 (Reverse)</div>
                        <div class="sequence">${primer.reverse}</div>
                    </div>
                </div>
                
                <div class="tm-info">
                    <span>正向Tm: ${primer.f_tm}°C</span>
                    <span>反向Tm: ${primer.r_tm}°C</span>
                    <span>${primer.junction_info}</span>
                </div>
            </div>
        `;
    });
    
    document.getElementById('primerResults').innerHTML = primerHtml;
    document.getElementById('exportSection').style.display = 'block';
    document.getElementById('results').style.display = 'block';
}

function showBatchResults(results) {
    const successCount = results.filter(r => r.status === 'success').length;
    const failedCount = results.filter(r => r.status === 'failed').length;
    const totalPrimers = results
        .filter(r => r.status === 'success')
        .reduce((sum, r) => sum + r.data.primers.length, 0);
    
    // 显示统计信息
    document.getElementById('resultSummary').innerHTML = `
        <div class="summary-stats">
            <div class="stat-item">
                <div class="stat-number">${results.length}</div>
                <div class="stat-label">总基因数</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">${successCount}</div>
                <div class="stat-label">成功设计</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">${failedCount}</div>
                <div class="stat-label">设计失败</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">${totalPrimers}</div>
                <div class="stat-label">引物对总数</div>
            </div>
        </div>
    `;
    
    // 显示失败的基因
    const failedGenes = results.filter(r => r.status === 'failed');
    if (failedGenes.length > 0) {
        let failedHtml = '<div class="failed-genes"><h4>⚠️ 设计失败的基因</h4>';
        failedGenes.forEach(gene => {
            failedHtml += `
                <div class="failed-gene">
                    <strong>${gene.gene}:</strong> ${gene.error}
                </div>
            `;
        });
        failedHtml += '</div>';
        document.getElementById('failedGenes').innerHTML = failedHtml;
    } else {
        document.getElementById('failedGenes').innerHTML = '';
    }
    
    // 显示成功的引物结果
    let primerHtml = '<h3>🎯 批量引物设计结果</h3>';
    
    results.filter(r => r.status === 'success').forEach(result => {
        const geneInfo = result.data.gene_info;
        const primers = result.data.primers;
        
        primerHtml += `<div style="margin-bottom: 40px; border: 2px solid #e1e5e9; border-radius: 8px; padding: 20px;">`;
        primerHtml += `<h4 style="color: #4facfe; margin-bottom: 15px;">📋 ${geneInfo.symbol} (${geneInfo.nm_id})</h4>`;
        
        primers.forEach(primer => {
            primerHtml += `
                <div class="primer-card">
                    <div class="primer-header">
                        <span class="primer-id">引物对 ${primer.id}</span>
                        <span class="product-size">${primer.product_size} bp</span>
                    </div>
                    
                    <div class="primer-sequences">
                        <div class="sequence-box">
                            <div class="sequence-label">正向引物 (Forward)</div>
                            <div class="sequence">${primer.forward}</div>
                        </div>
                        <div class="sequence-box">
                            <div class="sequence-label">反向引物 (Reverse)</div>
                            <div class="sequence">${primer.reverse}</div>
                        </div>
                    </div>
                    
                    <div class="tm-info">
                        <span>正向Tm: ${primer.f_tm}°C</span>
                        <span>反向Tm: ${primer.r_tm}°C</span>
                        <span>${primer.junction_info}</span>
                    </div>
                </div>
            `;
        });
        
        primerHtml += '</div>';
    });
    
    document.getElementById('batchPrimerResults').innerHTML = primerHtml;
    document.getElementById('batchResults').style.display = 'block';
}

// 导出单个结果
async function exportResults(format) {
    if (!currentResults) {
        alert('没有可导出的结果');
        return;
    }
    
    try {
        const response = await fetch('/export_primers', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                format: format,
                data: currentResults
            })
        });
        
        if (response.ok) {
            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = response.headers.get('Content-Disposition')?.split('filename=')[1] || `primers.${format}`;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        } else {
            alert('导出失败，请重试');
        }
    } catch (error) {
        alert('导出失败：' + error.message);
    }
}

// 导出批量结果
async function exportBatchResults(format) {
    if (!currentBatchResults) {
        alert('没有可导出的结果');
        return;
    }
    
    try {
        const response = await fetch('/export_primers', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                format: format,
                data: currentBatchResults
            })
        });
        
        if (response.ok) {
            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = response.headers.get('Content-Disposition')?.split('filename=')[1] || `batch_primers.${format}`;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        } else {
            alert('导出失败，请重试');
        }
    } catch (error) {
        alert('导出失败：' + error.message);
    }
}