timepulse/public/js/main.js

// js/main.js

// --- IMPORTS ---
// We import everything we need from our other modules.
import { apiCall } from './api.js';
import { showMessage } from './utils.js';
import {
    updateUI,
    renderAuthView,
    renderAdminDashboard,
    renderEmployeeDashboard,
    renderEditModal,
    renderChangePasswordModal,
    renderResetPasswordModal,
    renderRequestHistoryModal,
    handleViewNotesClick, // This UI-specific handler is simple enough to live in ui.js
    renderArchiveView,
    renderTimeOffHistoryView
} from './ui.js';

// --- STATE MANAGEMENT ---
// Simple module-level state.
let user = null;
let authToken = null;

// --- EVENT HANDLERS (The "Logic") ---
// These functions define what happens when a user interacts with the app.

async function handleAuthSubmit(e) {
    e.preventDefault();
    const username = e.target.elements.username.value;
    const password = e.target.elements.password.value;
    const res = await apiCall('/login', 'POST', { username, password });
    
    if (res.success) {
        console.log("Login successful! Handling response..."); // <<< ADD THIS
        
        localStorage.setItem('authToken', res.data.token);
        localStorage.setItem('user', JSON.stringify(res.data.user));

        console.log("Token and user saved to localStorage."); // <<< ADD THIS
        
        initializeApp();
        
        console.log("initializeApp() has been called."); // <<< ADD THIS
    }
}

function handleSignOut(message) {
    localStorage.clear();
    authToken = null;
    user = null;
    if (message) {
        showMessage(message, 'success');
    }
    initializeApp();
}

const handlePunch = () => {
    apiCall('/punch', 'POST').then(res => res.success && renderEmployeeDashboard());
};

async function handleChangePassword(e) {
    e.preventDefault();
    const currentPassword = e.target.elements['modal-current-pw'].value;
    const newPassword = e.target.elements['modal-new-pw'].value;
    const res = await apiCall('/user/change-password', 'POST', { currentPassword, newPassword });
    if (res.success) {
        showMessage(res.data.message, 'success');
        document.getElementById('modal-container').innerHTML = ''; // Close modal
    }
}

async function handleTimeOffRequest(e) {
    e.preventDefault();
    const startDate = e.target.elements['start-date'].value;
    const endDate = e.target.elements['end-date'].value;
    const reason = e.target.elements['reason'].value;
    if (new Date(endDate) < new Date(startDate)) {
        return showMessage('End date cannot be before start date.', 'error');
    }
    const res = await apiCall('/user/request-time-off', 'POST', { startDate, endDate, reason });
    if (res.success) {
        showMessage(res.data.message, 'success');
        e.target.reset();
        renderEmployeeDashboard();
    }
}

async function handleViewRequestHistoryClick() {
    const res = await apiCall('/user/time-off-requests/history');
    if (res.success) {
        renderRequestHistoryModal(res.data);
    }
}

async function handleEditSubmit(e) {
    e.preventDefault();
    const id = e.target.elements['edit-id'].value;
    const punch_in_time = new Date(e.target.elements['edit-in'].value).toISOString();
    const punch_out_value = e.target.elements['edit-out'].value;
    const punch_out_time = punch_out_value ? new Date(punch_out_value).toISOString() : null;
    const res = await apiCall(`/admin/logs/${id}`, 'PUT', { punch_in_time, punch_out_time });
    if (res.success) {
        document.getElementById('modal-container').innerHTML = '';
        renderAdminDashboard();
        showMessage('Entry updated successfully.', 'success');
    }
}

const handleArchive = () => {
    if (confirm('Are you sure you want to archive all completed time entries? This action cannot be undone.')) {
        apiCall('/admin/archive', 'POST').then(res => {
            if(res.success) {
                showMessage('Records archived successfully.', 'success');
                renderAdminDashboard();
            }
        });
    }
};

async function handleCreateUser(e) {
    e.preventDefault();
    const username = e.target.elements['new-username'].value;
    const password = e.target.elements['new-password'].value;
    const role = e.target.elements['new-user-role'].value;
    const res = await apiCall('/admin/create-user', 'POST', { username, password, role });
    if (res.success) {
        showMessage(res.data.message, 'success');
        e.target.reset();
        renderAdminDashboard();
    }
}

async function handleAddPunch(e) {
    e.preventDefault();
    const selected = e.target.elements['add-punch-user'];
    const userId = selected.value;
    const username = selected.options[selected.selectedIndex].dataset.username;
    const punchInTime = new Date(e.target.elements['add-punch-in'].value).toISOString();
    const punchOutValue = e.target.elements['add-punch-out'].value;
    const punchOutTime = punchOutValue ? new Date(punchOutValue).toISOString() : null;
    const res = await apiCall('/admin/add-punch', 'POST', { userId, username, punchInTime, punchOutTime });
    if (res.success) {
        showMessage(res.data.message, 'success');
        e.target.reset();
        renderAdminDashboard();
    }
}

async function handleAddNote(e) {
    e.preventDefault();
    const userId = e.target.elements['note-user-select'].value;
    const noteText = e.target.elements['note-text'].value;
    if (!userId) {
        return showMessage('Please select an employee.', 'error');
    }
    const res = await apiCall('/admin/notes', 'POST', { userId, noteText });
    if (res.success) {
        showMessage(res.data.message, 'success');
        e.target.reset();
    }
}

async function handleResetPassword(e) {
    e.preventDefault();
    const username = e.target.elements['reset-username'].value;
    const newPassword = e.target.elements['reset-new-pw'].value;
    const res = await apiCall('/admin/reset-password', 'POST', { username, newPassword });
    if (res.success) {
        showMessage(res.data.message, 'success');
        document.getElementById('modal-container').innerHTML = '';
    }
}

// This single handler uses event delegation for all buttons on the admin dashboard
function handleAdminDashboardClick(e) {
    const target = e.target;
    const { id, userid, username, role, noteId } = target.dataset;

    if (target.classList.contains('edit-btn')) renderEditModal(id, handleEditSubmit);
    if (target.classList.contains('delete-btn') && confirm('Delete this time entry?')) apiCall(`/admin/logs/${id}`, 'DELETE').then(res => res.success && renderAdminDashboard());
    if (target.classList.contains('force-clock-out-btn') && confirm(`Force clock out ${username}?`)) apiCall('/admin/force-clock-out', 'POST', { userId: userid }).then(res => res.success && renderAdminDashboard());
    if (target.classList.contains('reset-pw-btn')) renderResetPasswordModal(username, handleResetPassword);
    if (target.classList.contains('change-role-btn')) { const newRole = role === 'admin' ? 'employee' : 'admin'; if(confirm(`Change ${username} to ${newRole}?`)) apiCall('/admin/update-role', 'POST', { username, newRole }).then(res => res.success && renderAdminDashboard()); }
    if (target.classList.contains('delete-user-btn') && confirm(`PERMANENTLY DELETE user '${username}'?`)) apiCall(`/admin/delete-user/${username}`, 'DELETE').then(res => res.success && renderAdminDashboard());
    if (target.classList.contains('approve-request-btn')) { if (confirm('Approve request?')) apiCall('/admin/update-time-off-status', 'POST', { requestId: id, status: 'approved' }).then(res => res.success && renderAdminDashboard()); }
    if (target.classList.contains('deny-request-btn')) { if (confirm('Deny request?')) apiCall('/admin/update-time-off-status', 'POST', { requestId: id, status: 'denied' }).then(res => res.success && renderAdminDashboard()); }
    if (target.classList.contains('delete-note-btn')) { if (confirm('Delete this note?')) { apiCall(`/admin/notes/${noteId}`, 'DELETE').then(res => { if (res.success) { showMessage('Note deleted.', 'success'); handleViewNotesClick(); }});}}
}

// --- LISTENER ATTACHMENT FUNCTIONS ---
// These are exported to ui.js and called after a view is rendered to make it interactive.

export function attachAuthFormListener() {
    const form = document.getElementById('auth-form');
    form.addEventListener('submit', handleAuthSubmit);
}

export function attachEmployeeDashboardListeners() {
    document.getElementById('punch-btn').addEventListener('click', handlePunch);
    document.getElementById('change-password-btn').addEventListener('click', () => renderChangePasswordModal(handleChangePassword));
    document.getElementById('time-off-form').addEventListener('submit', handleTimeOffRequest);
    document.getElementById('view-request-history-btn').addEventListener('click', handleViewRequestHistoryClick);
}

// In js/main.js

export function attachAdminDashboardListeners() {
    // This master listener handles most buttons in the admin view via event delegation
    document.getElementById('admin-dashboard').addEventListener('click', handleAdminDashboardClick);
    
    // Listeners for specific forms that need to prevent default submission behavior
    document.getElementById('create-user-form').addEventListener('submit', handleCreateUser);
    document.getElementById('add-punch-form').addEventListener('submit', handleAddPunch);
    document.getElementById('add-note-form').addEventListener('submit', handleAddNote);
    
    // Call the function to make the new tabs work
    setupTabbedInterface(); 
}

// --- APP INITIALIZER ---
function initializeApp() {
    authToken = localStorage.getItem('authToken');
    const userString = localStorage.getItem('user');
    user = userString ? JSON.parse(userString) : null;
    
    if (authToken && user) {
        const userControls = document.getElementById('nav-user-controls');
        userControls.classList.remove('hidden');
        userControls.querySelector('#welcome-message').textContent = `Welcome, ${user.username}`;
        if (user.role === 'admin') {
            renderAdminDashboard();
        } else {
            renderEmployeeDashboard();
        }
    } else {
        document.getElementById('nav-user-controls').classList.add('hidden');
        renderAuthView();
    }
}

// This function handles the logic for switching between tabs
function setupTabbedInterface() {
    const tabsContainer = document.getElementById('admin-tabs-nav');
    const contentContainer = document.getElementById('admin-tabs-content');

    // Exit if the tab elements aren't on the page
    if (!tabsContainer || !contentContainer) return; 

    // Use event delegation on the tab navigation container
    tabsContainer.addEventListener('click', (e) => {
        const clickedTab = e.target.closest('.tab-btn');
        // Ignore clicks that aren't on a tab button
        if (!clickedTab) return; 

        const tabTarget = clickedTab.dataset.tab;

        // Update the active state on tab buttons
        tabsContainer.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('active-tab');
        });
        clickedTab.classList.add('active-tab');

        // Show the correct content panel and hide the others
        contentContainer.querySelectorAll('[id^="tab-content-"]').forEach(panel => {
            panel.classList.add('hidden');
        });
        document.getElementById(`tab-content-${tabTarget}`).classList.remove('hidden');
    });
}

// --- START THE APP ---
// Attach global listeners that are always present.
document.getElementById('sign-out-btn').addEventListener('click', () => handleSignOut('You have been signed out.'));
document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible' && localStorage.getItem('user')) {
        initializeApp();
    }
});

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker registered! Scope: ', registration.scope);
      })
      .catch(err => {
        console.error('Service Worker registration failed: ', err);
      });
  });
}

// Attach global listeners that are always present on the page.
document.getElementById('sign-out-btn').addEventListener('click', () => handleSignOut('You have been signed out.'));

// Initial call to start the app on page load.
initializeApp();