console.log('JavaScript se izvaja...');

// DOM elementi
const songNumberInput = document.getElementById('song-number');
const loadBtn = document.getElementById('load-btn');
const displayArea = document.getElementById('display-area');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const darkBtn = document.getElementById('dark-btn');
const pageInfo = document.getElementById('page-info');
const clearBtn = document.getElementById('clear-btn');
const keypadButtons = document.querySelectorAll('.btn-key');
const keypadWrapper = document.getElementById('keypad-wrapper');
const toggleKeypadBtn = document.getElementById('toggle-keypad-btn');
const menuToggle = document.getElementById('menu-toggle');
const menuDropdown = document.getElementById('menu-dropdown');
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

let capsMode = false;
let wakeLock = null;
let lastStateSignature = "";

// vibracija telefona
function vibrate() {
    if (navigator.vibrate && /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) {
        navigator.vibrate([25, 30, 25]);
    }
}

// poskus, da se zaslon ne ugaša
async function requestWakeLock() {
    try {
        if ('wakeLock' in navigator) {
            wakeLock = await navigator.wakeLock.request('screen');
            console.log('Wake lock aktiviran');

            wakeLock.addEventListener('release', () => {
                console.log('Wake lock sproščen');
            });
        }
    } catch (err) {
        console.log('Wake lock ni uspel:', err);
    }
}

// ob vrnitvi v zavihek ponovno zahtevaj wake lock
document.addEventListener('visibilitychange', async () => {
    if (document.visibilityState === 'visible') {
        await requestWakeLock();
    }
});

// posodobi stanje
async function updateState(force = false) {
    try {
        const response = await fetch('/api/state', { cache: 'no-store' });
        const data = await response.json();

        const signature = JSON.stringify({
            current_text: data.current_text || '',
            page_info: data.page_info || '',
            caps_mode: data.caps_mode || false,
            can_prev: !!data.can_prev
        });

        if (!force && signature === lastStateSignature) {
            return;
        }

        lastStateSignature = signature;

        displayArea.textContent = data.current_text || 'Pripravljeno. Vpiši številko pesmi.';
        pageInfo.textContent = data.page_info || '';

        capsMode = data.caps_mode || false;

        if (capsMode) {
            darkBtn.classList.add('active');
        } else {
            darkBtn.classList.remove('active');
        }

        prevBtn.disabled = !data.can_prev;
    } catch (error) {
        console.error('Napaka pri posodabljanju stanja:', error);
        displayArea.innerHTML = '<span class="status-message">Napaka: ni povezave do strežnika</span>';
    }
}

// dodaj številko
function addDigit(digit) {
    songNumberInput.value += digit;
}

// počisti vnos
function clearInput() {
    songNumberInput.value = '';
}

// Enter:
// - če je številka -> naloži pesem
// - če ni številke -> naslednja kitica
async function loadSong() {
    const songNumber = songNumberInput.value.trim();

    try {
        if (songNumber) {
            await fetch('/api/load_song', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ song_number: songNumber })
            });

            songNumberInput.value = '';
        } else {
            await fetch('/api/next_page', { method: 'POST' });
        }

        await updateState(true);
    } catch (error) {
        console.error('Napaka:', error);
        displayArea.innerHTML = '<span class="status-message">Napaka: ni povezave do strežnika</span>';
    }
}

// Iskanje pesmi
async function searchSongs() {
    const query = searchInput.value.trim();
    if (!query) {
        searchResults.innerHTML = '';
        searchResults.classList.remove('show');
        return;
    }

    try {
        const response = await fetch('/api/search_songs', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ query: query })
        });
        const data = await response.json();

        if (data.results && data.results.length > 0) {
            searchResults.innerHTML = '';
            data.results.forEach(song => {
                const item = document.createElement('div');
                item.className = 'search-item';
                item.innerHTML = `
                    <span class="song-id">${song[0]}</span>
                    <span class="song-title">${song[1]}</span>
                `;
                item.addEventListener('click', () => {
                    songNumberInput.value = song[0];
                    loadSong();
                    searchInput.value = '';
                    searchResults.innerHTML = '';
                    searchResults.classList.remove('show');
                });
                searchResults.appendChild(item);
            });
            searchResults.classList.add('show');
        } else {
            searchResults.innerHTML = '<div class="search-item"><span class="song-title">Ni zadetkov</span></div>';
            searchResults.classList.add('show');
        }
    } catch (error) {
        console.error('Napaka pri iskanju:', error);
    }
}

// prejšnja kitica
async function prevPage() {
    try {
        await fetch('/api/prev_page', { method: 'POST' });
        await updateState(true);
    } catch (error) {
        console.error('Napaka pri navigaciji:', error);
    }
}

// Zatemnitev ekrana
async function clearScreen() {
    try {
        await fetch('/api/clear_screen', {method: 'POST'});
        await updateState(true);
    } catch (error) {
        console.error('Napaka pri zatamnitvi ekrana:', error);
        displayArea.innerHTML = '<span class="status-message">Napaka: ni povezave do strežnika</span>';
    }
}

// Preklop VELIKIH ČRK
async function toggleCaps() {
    try {
        await fetch('/api/toggle_caps', { method: 'POST' });
        await updateState(true);
    } catch (error) {
        console.error('Napaka pri preklopu velikih črk:', error);
    }
}

// skrij/pokaži tipkovnico
function toggleKeypad() {
    if (!keypadWrapper || !toggleKeypadBtn) return;

    keypadWrapper.classList.toggle('hidden');

    if (keypadWrapper.classList.contains('hidden')) {
        toggleKeypadBtn.textContent = 'Pokaži tipkovnico';
    } else {
        toggleKeypadBtn.textContent = 'Skrij tipkovnico';
    }
}

// ============================
// EVENT LISTENERJI
// ============================

// številke na zaslonu
keypadButtons.forEach(btn => {
    btn.addEventListener('click', () => {
        vibrate();
        const key = btn.dataset.key;
        if (key !== undefined) {
            addDigit(key);
        }
    });
});

// Enter
loadBtn.addEventListener('click', () => {
    vibrate();
    loadSong();
});

// C
clearBtn.addEventListener('click', () => {
    vibrate();
    clearInput();
});

// Nazaj
prevBtn.addEventListener('click', () => {
    vibrate();
    prevPage();
});

// Zastri
nextBtn.addEventListener('click', () => {
    vibrate();
    clearScreen();
});

// AAaa
darkBtn.addEventListener('click', () => {
    vibrate();
    toggleCaps();
});

// Skrij/Pokaži tipkovnico
if (toggleKeypadBtn) {
    toggleKeypadBtn.addEventListener('click', (e) => {
        toggleKeypad();
        menuDropdown.classList.remove('show');
    });
}

// Hamburger menu toggle
if (menuToggle) {
    menuToggle.addEventListener('click', (e) => {
        e.stopPropagation();
        menuDropdown.classList.toggle('show');
    });
}

// Zapri menu ob kliku drugam
document.addEventListener('click', (e) => {
    if (menuDropdown && !menuDropdown.contains(e.target) && e.target !== menuToggle) {
        menuDropdown.classList.remove('show');
    }
});

// Iskanje dogodki
if (searchInput) {
    searchInput.addEventListener('input', () => {
        searchSongs();
    });

    searchInput.addEventListener('focus', () => {
        if (searchInput.value.trim()) {
            searchResults.classList.add('show');
        }
    });
}

// Zapri rezultate iskanja ob kliku drugam
document.addEventListener('click', (e) => {
    if (searchResults && !searchResults.contains(e.target) && e.target !== searchInput) {
        searchResults.classList.remove('show');
    }
});

// fizična tipkovnica
document.addEventListener('keydown', (e) => {
    // Če smo v iskalnem polju, ne procesiraj bližnjic za numerično tipkovnico
    if (document.activeElement === searchInput) {
        if (e.key === 'Escape') {
            searchInput.blur();
            searchResults.classList.remove('show');
        }
        return;
    }

    // na telefonu ni potrebe; na velikih ekranih pa naj dela
    if (window.innerWidth < 901) return;

    // da ne ponavlja pri držanju tipke
    if (e.repeat) return;

    // številke
    if (e.key >= '0' && e.key <= '9') {
        e.preventDefault();
        addDigit(e.key);
        return;
    }

    // Enter
    if (e.key === 'Enter' || e.code === 'NumpadEnter') {
        e.preventDefault();
        loadSong();
        return;
    }

    // C
    if (e.key === 'Backspace' || e.key === 'Delete') {
        e.preventDefault();
        clearInput();
        return;
    }

    // Zastri
    if (e.key === '+' || e.code === 'NumpadAdd') {
        e.preventDefault();
        clearScreen();
        return;
    }

    // Nazaj
    if (e.key === '-' || e.code === 'NumpadSubtract') {
        e.preventDefault();
        prevPage();
        return;
    }

    // AAaa
    if (e.key === '*' || e.code === 'NumpadMultiply') {
        e.preventDefault();
        toggleCaps();
        return;
    }

    // numpad številke
    if (e.code.startsWith('Numpad') && /\d/.test(e.key)) {
        e.preventDefault();
        addDigit(e.key);
    }
});

// začetno stanje
updateState(true);
requestWakeLock();

// osveževanje za sinhronizacijo med več napravami
setInterval(() => {
    updateState(false);
}, 1000);

console.log('JavaScript inicializacija zaključena');