app.js

// Application State
let currentUser = null;
let idToken = null;

// DOM Elements
const loginSection = document.getElementById('login-section');
const signupSection = document.getElementById('signup-section');
const taskSection = document.getElementById('task-section');
const userInfo = document.getElementById('user-info');
const usernameDisplay = document.getElementById('username');

// ====================
// AUTHENTICATION FUNCTIONS
// ====================

/**
 * Sign up a new user with Cognito
 */
async function signUp(email, password) {
    try {
        const response = await fetch(`https://cognito-idp.${AWS_CONFIG.cognito.region}.amazonaws.com/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-amz-json-1.1',
                'X-Amz-Target': 'AWSCognitoIdentityProviderService.SignUp'
            },
            body: JSON.stringify({
                ClientId: AWS_CONFIG.cognito.clientId,
                Username: email,
                Password: password,
                UserAttributes: [
                    {
                        Name: 'email',
                        Value: email
                    }
                ]
            })
        });

        const data = await response.json();
        
        if (response.ok) {
            return { success: true, data };
        } else {
            return { success: false, error: data.message || 'Signup failed' };
        }
    } catch (error) {
        return { success: false, error: error.message };
    }
}

/**
 * Login user with Cognito
 */
async function login(email, password) {
    try {
        const response = await fetch(`https://cognito-idp.${AWS_CONFIG.cognito.region}.amazonaws.com/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-amz-json-1.1',
                'X-Amz-Target': 'AWSCognitoIdentityProviderService.InitiateAuth'
            },
            body: JSON.stringify({
                ClientId: AWS_CONFIG.cognito.clientId,
                AuthFlow: 'USER_PASSWORD_AUTH',
                AuthParameters: {
                    USERNAME: email,
                    PASSWORD: password
                }
            })
        });

        const data = await response.json();
        
        if (response.ok && data.AuthenticationResult) {
            // Store tokens
            idToken = data.AuthenticationResult.IdToken;
            localStorage.setItem('idToken', idToken);
            localStorage.setItem('accessToken', data.AuthenticationResult.AccessToken);
            localStorage.setItem('refreshToken', data.AuthenticationResult.RefreshToken);
            localStorage.setItem('userEmail', email);
            
            currentUser = email;
            return { success: true, token: idToken };
        } else {
            return { success: false, error: data.message || 'Login failed' };
        }
    } catch (error) {
        return { success: false, error: error.message };
    }
}

/**
 * Logout user
 */
function logout() {
    currentUser = null;
    idToken = null;
    localStorage.clear();
    showSection('login');
}

/**
 * Check if user is already logged in
 */
function checkAuth() {
    const token = localStorage.getItem('idToken');
    const email = localStorage.getItem('userEmail');
    
    if (token && email) {
        idToken = token;
        currentUser = email;
        showSection('tasks');
        loadTasks();
    }
}

// ====================
// TASK API FUNCTIONS
// ====================

/**
 * Create a new task
 */
async function createTask(title, description, priority) {
    try {
        const response = await fetch(API_ENDPOINTS.tasks, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${idToken}`
            },
            body: JSON.stringify({
                title,
                description,
                priority,
                status: 'pending'
            })
        });

        const data = await response.json();
        
        if (response.ok) {
            return { success: true, data };
        } else {
            return { success: false, error: data.message || 'Failed to create task' };
        }
    } catch (error) {
        return { success: false, error: error.message };
    }
}

/**
 * Get all tasks
 */
async function getTasks() {
    try {
        const response = await fetch(API_ENDPOINTS.tasks, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${idToken}`
            }
        });

        const data = await response.json();
        
        if (response.ok) {
            return { success: true, tasks: data.tasks || data };
        } else {
            return { success: false, error: data.message || 'Failed to fetch tasks' };
        }
    } catch (error) {
        return { success: false, error: error.message };
    }
}

/**
 * Delete a task
 */
async function deleteTask(taskId) {
    try {
        const response = await fetch(`${API_ENDPOINTS.tasks}/${taskId}`, {
            method: 'DELETE',
            headers: {
                'Authorization': `Bearer ${idToken}`
            }
        });

        if (response.ok) {
            return { success: true };
        } else {
            const data = await response.json();
            return { success: false, error: data.message || 'Failed to delete task' };
        }
    } catch (error) {
        return { success: false, error: error.message };
    }
}

// ====================
// UI FUNCTIONS
// ====================

/**
 * Show specific section
 */
function showSection(section) {
    loginSection.style.display = 'none';
    signupSection.style.display = 'none';
    taskSection.style.display = 'none';
    userInfo.style.display = 'none';
    
    if (section === 'login') {
        loginSection.style.display = 'block';
    } else if (section === 'signup') {
        signupSection.style.display = 'block';
    } else if (section === 'tasks') {
        taskSection.style.display = 'block';
        userInfo.style.display = 'flex';
        usernameDisplay.textContent = currentUser;
    }
}

/**
 * Show message
 */
function showMessage(elementId, message, type) {
    const messageEl = document.getElementById(elementId);
    messageEl.textContent = message;
    messageEl.className = `message ${type}`;
    messageEl.style.display = 'block';
    
    setTimeout(() => {
        messageEl.style.display = 'none';
    }, 5000);
}

/**
 * Render tasks
 */
function renderTasks(tasks) {
    const container = document.getElementById('tasks-container');
    
    if (!tasks || tasks.length === 0) {
        container.innerHTML = '<p class="no-tasks">No tasks yet. Add your first task above!</p>';
        return;
    }
    
    container.innerHTML = tasks.map(task => `
        <div class="task-item">
            <div class="task-header">
                <div class="task-title">${escapeHtml(task.title)}</div>
                <span class="task-priority ${task.priority}">${task.priority}</span>
            </div>
            <div class="task-description">${escapeHtml(task.description || 'No description')}</div>
            <div class="task-meta">
                <div class="task-date">
                    📅 ${formatDate(task.createdAt || task.timestamp)}
                </div>
                <div class="task-actions">
                    <button class="btn btn-danger" onclick="handleDeleteTask('${task.taskId || task.id}')">
                        Delete
                    </button>
                </div>
            </div>
        </div>
    `).join('');
}

/**
 * Load tasks from API
 */
async function loadTasks() {
    const loading = document.getElementById('loading');
    loading.style.display = 'block';
    
    const result = await getTasks();
    loading.style.display = 'none';
    
    if (result.success) {
        renderTasks(result.tasks);
    } else {
        showMessage('task-message', `Error loading tasks: ${result.error}`, 'error');
    }
}

/**
 * Handle task deletion
 */
async function handleDeleteTask(taskId) {
    if (!confirm('Are you sure you want to delete this task?')) {
        return;
    }
    
    const result = await deleteTask(taskId);
    
    if (result.success) {
        showMessage('task-message', 'Task deleted successfully!', 'success');
        loadTasks();
    } else {
        showMessage('task-message', `Error: ${result.error}`, 'error');
    }
}

// ====================
// UTILITY FUNCTIONS
// ====================

/**
 * Escape HTML to prevent XSS
 */
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

/**
 * Format date
 */
function formatDate(timestamp) {
    if (!timestamp) return 'Unknown date';
    
    const date = new Date(timestamp);
    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
}

// ====================
// EVENT LISTENERS
// ====================

// Login Form
document.getElementById('login-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const email = document.getElementById('login-email').value;
    const password = document.getElementById('login-password').value;
    
    const result = await login(email, password);
    
    if (result.success) {
        showMessage('login-message', 'Login successful!', 'success');
        setTimeout(() => {
            showSection('tasks');
            loadTasks();
        }, 1000);
    } else {
        showMessage('login-message', `Error: ${result.error}`, 'error');
    }
});

// Signup Form
document.getElementById('signup-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const email = document.getElementById('signup-email').value;
    const password = document.getElementById('signup-password').value;
    
    const result = await signUp(email, password);
    
    if (result.success) {
        showMessage('signup-message', 
            'Signup successful! Please check your email to verify your account, then login.', 
            'success'
        );
        setTimeout(() => {
            showSection('login');
        }, 3000);
    } else {
        showMessage('signup-message', `Error: ${result.error}`, 'error');
    }
});

// Task Form
document.getElementById('task-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const title = document.getElementById('task-title').value;
    const description = document.getElementById('task-description').value;
    const priority = document.getElementById('task-priority').value;
    
    const result = await createTask(title, description, priority);
    
    if (result.success) {
        showMessage('task-message', 'Task created successfully!', 'success');
        document.getElementById('task-form').reset();
        loadTasks();
    } else {
        showMessage('task-message', `Error: ${result.error}`, 'error');
    }
});

// Toggle between login and signup
document.getElementById('show-signup').addEventListener('click', (e) => {
    e.preventDefault();
    showSection('signup');
});

document.getElementById('show-login').addEventListener('click', (e) => {
    e.preventDefault();
    showSection('login');
});

// Logout
document.getElementById('logout-btn').addEventListener('click', logout);

// Refresh tasks
document.getElementById('refresh-tasks').addEventListener('click', loadTasks);

// ====================
// INITIALIZATION
// ====================

// Check authentication on page load
checkAuth();