vibe-praying/static/js/app.js

// Global variables
let currentSession = null;

// DOM elements
const createPairsBtn = document.getElementById('createPairsBtn');
const namesInput = document.getElementById('namesInput');
const sessionNameInput = document.getElementById('sessionName');
const resultsSection = document.getElementById('resultsSection');
const pairsContainer = document.getElementById('pairsContainer');
const sessionTitle = document.getElementById('sessionTitle');
const sessionDate = document.getElementById('sessionDate');
const sessionsContainer = document.getElementById('sessionsContainer');
const loadingModal = document.getElementById('loadingModal');
const successModal = document.getElementById('successModal');

// Event listeners
document.addEventListener('DOMContentLoaded', function() {
    loadPreviousSessions();
    
    createPairsBtn.addEventListener('click', createPairs);
    
    // Add event listeners for action buttons
    document.addEventListener('click', function(e) {
        if (e.target.id === 'newSessionBtn') {
            resetForm();
        }
    });
});

// API functions
async function createPairs() {
    const names = namesInput.value.trim();
    const sessionName = sessionNameInput.value.trim() || 'Prayer Session';
    
    if (!names) {
        showError('Please enter at least one name.');
        return;
    }
    
    const nameList = names.split('\n')
        .map(name => name.trim())
        .filter(name => name.length > 0);
    
    if (nameList.length < 3) {
        showError('Please enter at least 3 names to create vibes.');
        return;
    }
    
    showLoading();
    
    try {
        const response = await fetch('/create-pairs', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                names: nameList,
                session_name: sessionName
            })
        });
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.detail || 'Failed to create vibes');
        }
        
        const result = await response.json();
        currentSession = result;
        displayResults(result);
        hideLoading();
        showSuccess();
        loadPreviousSessions(); // Refresh the sessions list
        
    } catch (error) {
        hideLoading();
        showError(error.message);
    }
}

async function loadPreviousSessions() {
    try {
        const response = await fetch('/sessions');
        if (!response.ok) {
            throw new Error('Failed to load sessions');
        }
        
        const sessions = await response.json();
        displaySessions(sessions);
        
    } catch (error) {
        console.error('Error loading sessions:', error);
    }
}

async function loadSession(sessionId) {
    try {
        const response = await fetch(`/session/${sessionId}`);
        if (!response.ok) {
            throw new Error('Failed to load session');
        }
        
        const session = await response.json();
        currentSession = session;
        displayResults(session);
        
        // Scroll to results section
        resultsSection.scrollIntoView({ behavior: 'smooth' });
        
    } catch (error) {
        showError('Failed to load session');
    }
}

// Display functions
function displayResults(session) {
    sessionTitle.textContent = session.session_name;
    sessionDate.textContent = formatDate(session.created_at);
    
    // Clear previous pairs
    pairsContainer.innerHTML = '';
    
    // Display pairs
    session.pairs.forEach(pair => {
        const pairCard = document.createElement('div');
        pairCard.className = 'pair-card';
        pairCard.innerHTML = `
            <div class="pair-info">
                <span class="person">${pair.person1}</span>
                <i class="fas fa-arrow-right pair-arrow"></i>
                <span class="person">${pair.person2}</span>
            </div>
        `;
        pairsContainer.appendChild(pairCard);
    });
    
    // Show results section
    resultsSection.style.display = 'block';
    
    // Scroll to results
    resultsSection.scrollIntoView({ behavior: 'smooth' });
}

function displaySessions(sessions) {
    sessionsContainer.innerHTML = '';
    
    if (sessions.length === 0) {
        sessionsContainer.innerHTML = '<p style="color: #718096; text-align: center;">No previous sessions found.</p>';
        return;
    }
    
    sessions.forEach(session => {
        const sessionCard = document.createElement('div');
        sessionCard.className = 'session-card';
        sessionCard.onclick = () => loadSession(session.id);
        
        const namesHtml = session.names.map(name => 
            `<span class="name-tag">${name}</span>`
        ).join('');
        
        sessionCard.innerHTML = `
            <h3>${session.session_name}</h3>
            <p>Created: ${formatDate(session.created_at)}</p>
            <div class="session-names">
                ${namesHtml}
            </div>
            <div class="session-pairs">
                ${session.pairs.length} prayer vibes created
            </div>
        `;
        
        sessionsContainer.appendChild(sessionCard);
    });
}

// Utility functions
function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
}

function showLoading() {
    loadingModal.style.display = 'block';
    createPairsBtn.classList.add('loading');
}

function hideLoading() {
    loadingModal.style.display = 'none';
    createPairsBtn.classList.remove('loading');
}

function showSuccess() {
    successModal.style.display = 'block';
    setTimeout(() => {
        hideSuccess();
    }, 3000);
}

function hideSuccess() {
    successModal.style.display = 'none';
}

function closeModal(modalId) {
    document.getElementById(modalId).style.display = 'none';
}

function showError(message) {
    // Remove any existing error messages
    const existingError = document.querySelector('.error-message');
    if (existingError) {
        existingError.remove();
    }
    
    // Create error message
    const errorDiv = document.createElement('div');
    errorDiv.className = 'error-message';
    errorDiv.textContent = message;
    
    // Add error styling to input
    namesInput.classList.add('error');
    
    // Insert error message after the textarea
    namesInput.parentNode.insertBefore(errorDiv, namesInput.nextSibling);
    
    // Remove error styling after 3 seconds
    setTimeout(() => {
        namesInput.classList.remove('error');
        if (errorDiv.parentNode) {
            errorDiv.remove();
        }
    }, 3000);
}

function resetForm() {
    namesInput.value = '';
    sessionNameInput.value = 'Prayer Session';
    resultsSection.style.display = 'none';
    currentSession = null;
    
    // Remove any error states
    namesInput.classList.remove('error');
    const errorMessage = document.querySelector('.error-message');
    if (errorMessage) {
        errorMessage.remove();
    }
    
    // Scroll to top
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

// Close modals when clicking outside
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
        event.target.style.display = 'none';
    }
}

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    // Ctrl/Cmd + Enter to create vibes
    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
        e.preventDefault();
        createPairs();
    }
    
    // Escape to close modals
    if (e.key === 'Escape') {
        const modals = document.querySelectorAll('.modal');
        modals.forEach(modal => {
            if (modal.style.display === 'block') {
                modal.style.display = 'none';
            }
        });
    }
});