document.addEventListener('DOMContentLoaded', function () {
    const searchInput = document.getElementById('searchInput');
    const vocabularyTable = document.getElementById('vocabularyTable');
    const tableBody = vocabularyTable.getElementsByTagName('tbody')[0];
    const rows = tableBody.getElementsByTagName('tr');

    // Search functionality
    searchInput.addEventListener('keyup', function () {
        const filter = searchInput.value.toLowerCase();
        for (let i = 0; i < rows.length; i++) {
            let cells = rows[i].getElementsByTagName('td');
            let found = false;
            for (let j = 0; j < cells.length; j++) {
                if (cells[j].innerHTML.toLowerCase().indexOf(filter) > -1) {
                    found = true;
                    break;
                }
            }
            if (found) {
                rows[i].style.display = '';
            } else {
                rows[i].style.display = 'none';
            }
        }
    });

    // Sort functionality
    const headers = vocabularyTable.getElementsByTagName('th');
    for (let i = 0; i < headers.length; i++) {
        headers[i].addEventListener('click', function () {
            const column = i;
            const sortOrder = this.classList.contains('asc') ? 'desc' : 'asc';
            for (let j = 0; j < headers.length; j++) {
                headers[j].classList.remove('asc', 'desc');
            }
            this.classList.add(sortOrder);

            const sortedRows = Array.from(rows).sort((a, b) => {
                const aText = a.getElementsByTagName('td')[column].innerText;
                const bText = b.getElementsByTagName('td')[column].innerText;
                return aText.localeCompare(bText, undefined, { numeric: true }) * (sortOrder === 'asc' ? 1 : -1);
            });

            while (tableBody.firstChild) {
                tableBody.removeChild(tableBody.firstChild);
            }

            sortedRows.forEach(row => {
                tableBody.appendChild(row);
            });
        });
    }
});