const RESULTS_PER_PAGE = 10;
let allResults = [];
let currentPage = 0;

var board = Chessboard('board', {
    draggable: true,
    dropOffBoard: 'trash',
    sparePieces: true,
    pieceTheme: '/static/img/chesspieces/wikipedia/{piece}.png',
    onSnapEnd: updateInfo
});

function updateInfo() {
    document.getElementById('fen').textContent = 'FEN: ' + board.fen();
    let pos = board.position();
    let pieces = Object.keys(pos).length;
    document.getElementById('position-info').textContent = `Pieces on board: ${pieces}`;
}

function search() {
    document.getElementById('results').innerHTML = '<p>Searching...</p>';
    fetch('/search', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({fen: board.fen()})
    })
    .then(r => r.json())
    .then(data => {
        allResults = data.results;
        window.searchTimeMs = data.time_ms;
        currentPage = 0;
        displayPage();
    });
}

function displayPage() {
    const start = currentPage * RESULTS_PER_PAGE;
    const end = start + RESULTS_PER_PAGE;
    const pageResults = allResults.slice(start, end);
    const totalPages = Math.ceil(allResults.length / RESULTS_PER_PAGE);
    
    let html = `<h2>Found ${allResults.length} puzzles in ${window.searchTimeMs.toFixed(0)}ms (page ${currentPage + 1} of ${totalPages})</h2>`;
    html += `<div class="pagination">
        <button onclick="prevPage()" ${currentPage === 0 ? 'disabled' : ''}>Previous</button>
        <button onclick="nextPage()" ${end >= allResults.length ? 'disabled' : ''}>Next</button>
    </div>`;
    
    pageResults.forEach((p, i) => {
        const globalIdx = start + i;
        html += `
            <div class="puzzle">
                <div class="puzzle-board" id="result-board-${globalIdx}"></div>
                <div class="puzzle-info">
                    <h3><a href="${p.PuzzleUrl}" target="_blank">${p.PuzzleId}</a></h3>
                    <p>Rating: ${p.Rating} | Popularity: ${p.Popularity}%</p>
                    <div class="themes">${p.Themes.map(t => `<span class="theme">${t}</span>`).join('')}</div>
                    <p>Moves: ${p.Moves}</p>
                    <p><a href="${p.GameUrl}" target="_blank">View game</a></p>
                </div>
            </div>`;
    });
    
    html += `<div class="pagination">
        <button onclick="prevPage()" ${currentPage === 0 ? 'disabled' : ''}>Previous</button>
        <button onclick="nextPage()" ${end >= allResults.length ? 'disabled' : ''}>Next</button>
    </div>`;
    
    document.getElementById('results').innerHTML = html;
    
    pageResults.forEach((p, i) => {
        const globalIdx = start + i;
        Chessboard(`result-board-${globalIdx}`, {
            position: p.FEN,
            pieceTheme: '/static/img/chesspieces/wikipedia/{piece}.png'
        });
    });
}

function nextPage() {
    if ((currentPage + 1) * RESULTS_PER_PAGE < allResults.length) {
        currentPage++;
        displayPage();
        window.scrollTo(0, 0);
    }
}

function prevPage() {
    if (currentPage > 0) {
        currentPage--;
        displayPage();
        window.scrollTo(0, 0);
    }
}

updateInfo();