async function hash(str) {
    const msgBuffer = new TextEncoder().encode(str);
    const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
    return Array.from(new Uint8Array(hashBuffer))
        .map(b => b.toString(16).padStart(2, '0'))
        .join('');
}
async function check2FAPassword() {
    const secondPassword = document.getElementById('skelly2FAInput').value;
    
    if (secondPassword === 'meow') {
        try {
            const response = await fetch('/api/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ 
                    username: 'skelly', 
                    password: 'skelly',
                    action: 'get_skelly'
                })
            });

            const data = await response.json();
            
            if (data.success) {
                document.querySelector('.skelly-2fa-container').style.display = 'none';
                document.getElementById('skellyButtonContainer').style.display = 'block';
            } else {
                alert('hiba történt >:3');
            }
        } catch (error) {
            console.error('Error:', error);
            alert('hiba történt >:3');
        }
    } else {
        alert('rossz jelszó >:3');
    }
}

document.getElementById('skelly2FAForm').addEventListener('submit', function(e) {
    e.preventDefault();
    check2FAPassword();
});

document.getElementById('skelly2FASubmit').addEventListener('click', function(e) {
    e.preventDefault();
    check2FAPassword();
});

document.getElementById('showSkellyButton').addEventListener('click', async function() {
    try {
        const skellyModal = document.createElement('div');
        skellyModal.className = 'modal-backdrop';
        skellyModal.innerHTML = `
            <div class="modal-content" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <h3 style="font-family: Arial, sans-serif; font-weight: normal; font-size: 1.2rem; margin: 0;">:3</h3>
                    <button class="modal-close">×</button>
                </div>
                <div class="modal-body">
                    <img alt="Skelly" class="modal-image" 
                         onload="this.style.opacity = '1'"
                         onerror="this.style.display = 'none'"
                         style="opacity: 0; transition: opacity 0.3s ease;">
                </div>
            </div>
        `;
        
        document.body.appendChild(skellyModal);

        const img = skellyModal.querySelector('.modal-image');
        img.src = '/templates/_images/skelly.jpg';
        
        const closeModal = () => {
            document.body.removeChild(skellyModal);
            document.body.style.overflow = '';
            document.removeEventListener('keydown', handleEscape);
        };
        
        skellyModal.querySelector('.modal-close').addEventListener('click', closeModal);
        skellyModal.addEventListener('click', closeModal);

        document.body.style.overflow = 'hidden';
        
        const handleEscape = (e) => {
            if (e.key === 'Escape') {
                closeModal();
            }
        };
        document.addEventListener('keydown', handleEscape);
    } catch (error) {
        console.error('Error loading Skelly:', error);
    }
});