let currentUser = null;
let allShifts = [];
let mySignups = [];

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', async () => {
    await checkAuth();
    await loadShifts();
    await loadMySignups();
    setupEventListeners();
    
    // Add clear filters button handler
    const clearBtn = document.getElementById('clear-filters-btn');
    if (clearBtn) {
        clearBtn.addEventListener('click', clearFilters);
    }
});

async function checkAuth() {
    try {
        const response = await fetch('/api/auth/check');
        const data = await response.json();
        
        if (!data.authenticated) {
            window.location.href = '/login.html';
            return;
        }
        
        currentUser = data.user;
        document.getElementById('user-email').textContent = currentUser.email;
        
        // Add admin link if user is admin
        if (currentUser.isAdmin) {
            const headerActions = document.querySelector('.header-actions');
            const adminLink = document.createElement('a');
            adminLink.href = '/admin.html#shifts';
            adminLink.className = 'btn btn-secondary';
            adminLink.textContent = '⚙️ Manage Shifts';
            headerActions.insertBefore(adminLink, headerActions.firstChild);
        }
        
    } catch (error) {
        console.error('Auth check failed:', error);
        window.location.href = '/login.html';
    }
}

async function loadShifts() {
    try {
        const response = await fetch('/api/shifts');
        const data = await response.json();
        
        if (data.success) {
            allShifts = data.shifts;
            displayShifts(allShifts);
        }
    } catch (error) {
        showStatus('Failed to load shifts', 'error');
    }
}

async function loadMySignups() {
    try {
        const response = await fetch('/api/shifts/my-signups');
        const data = await response.json();
        
        if (data.success) {
            mySignups = data.signups;
            displayMySignups();
        } else {
            // Still display empty signups if the endpoint fails
            mySignups = [];
            displayMySignups();
        }
    } catch (error) {
        console.error('Failed to load signups:', error);
        // Don't show error to user, just display empty signups
        mySignups = [];
        displayMySignups();
    }
}

function displayShifts(shifts) {
    const grid = document.getElementById('shifts-grid');
    
    if (shifts.length === 0) {
        grid.innerHTML = '<p class="no-shifts">No shifts available at this time.</p>';
        return;
    }
    
    grid.innerHTML = shifts.map(shift => {
        const shiftDate = new Date(shift.Date);
        const isSignedUp = mySignups.some(s => s.shift_id === shift.ID);
        const isFull = shift['Current Volunteers'] >= shift['Max Volunteers'];
        
        return `
            <div class="shift-card ${isFull ? 'full' : ''} ${isSignedUp ? 'signed-up' : ''}">
                <h3>${escapeHtml(shift.Title)}</h3>
                <div class="shift-details">
                    <p>📅 ${shiftDate.toLocaleDateString()}</p>
                    <p>⏰ ${shift['Start Time']} - ${shift['End Time']}</p>
                    <p>📍 ${escapeHtml(shift.Location || 'TBD')}</p>
                    <p>👥 ${shift['Current Volunteers']}/${shift['Max Volunteers']} volunteers</p>
                </div>
                ${shift.Description ? `<div class="shift-description">${escapeHtml(shift.Description)}</div>` : ''}
                <div class="shift-actions">
                    ${isSignedUp 
                        ? `<button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${shift.ID}">Cancel Signup</button>
                           ${generateCalendarDropdown(shift)}`
                        : isFull
                            ? '<button class="btn btn-secondary btn-sm" disabled>Shift Full</button>'
                            : `<button class="btn btn-primary btn-sm signup-btn" data-shift-id="${shift.ID}">Sign Up</button>`
                    }
                </div>
            </div>
        `;
    }).join('');
    
    // Add event listeners after rendering
    setupShiftCardListeners();
}

function displayMySignups() {
    const list = document.getElementById('my-signups-list');
    
    if (mySignups.length === 0) {
        list.innerHTML = '<p>You haven\'t signed up for any shifts yet.</p>';
        return;
    }
    
    // Need to match signups with shift details
    const signupsWithDetails = mySignups.map(signup => {
        const shift = allShifts.find(s => s.ID === signup.shift_id);
        return { ...signup, shift };
    }).filter(s => s.shift);
    
    list.innerHTML = signupsWithDetails.map(signup => {
        const shiftDate = new Date(signup.shift.Date);
        return `
            <div class="signup-item">
                <div>
                    <h4>${escapeHtml(signup.shift.Title)}</h4>
                    <p>📅 ${shiftDate.toLocaleDateString()} ⏰ ${signup.shift['Start Time']} - ${signup.shift['End Time']}</p>
                </div>
                <div class="signup-actions">
                    ${generateCalendarDropdown(signup.shift)}
                    <button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${signup.shift.ID}">Cancel</button>
                </div>
            </div>
        `;
    }).join('');
    
    // Add event listeners after rendering
    setupMySignupsListeners();
}

// New function to setup listeners for shift cards
function setupShiftCardListeners() {
    const grid = document.getElementById('shifts-grid');
    if (!grid) return;
    
    // Remove any existing listeners by cloning
    const newGrid = grid.cloneNode(true);
    grid.parentNode.replaceChild(newGrid, grid);
    
    // Add click listener for all buttons
    newGrid.addEventListener('click', async (e) => {
        // Handle signup buttons
        if (e.target.classList.contains('signup-btn')) {
            const shiftId = e.target.getAttribute('data-shift-id');
            await signupForShift(shiftId);
        } 
        // Handle cancel buttons
        else if (e.target.classList.contains('cancel-signup-btn')) {
            const shiftId = e.target.getAttribute('data-shift-id');
            await cancelSignup(shiftId);
        }
        // Handle calendar toggle buttons
        else if (e.target.classList.contains('calendar-toggle')) {
            e.stopPropagation();
            const dropdown = e.target.closest('.calendar-dropdown');
            const options = dropdown.querySelector('.calendar-options');
            const isOpen = options.style.display !== 'none';
            
            // Close all other dropdowns
            document.querySelectorAll('.calendar-options').forEach(opt => {
                opt.style.display = 'none';
            });
            
            // Toggle this dropdown
            options.style.display = isOpen ? 'none' : 'block';
        }
        // Handle calendar option clicks
        else if (e.target.closest('.calendar-option')) {
            e.stopPropagation();
            const dropdown = e.target.closest('.calendar-dropdown');
            const options = dropdown.querySelector('.calendar-options');
            options.style.display = 'none';
        }
    });
}

// New function to setup listeners for my signups
function setupMySignupsListeners() {
    const list = document.getElementById('my-signups-list');
    if (!list) return;
    
    // Remove any existing listeners by cloning
    const newList = list.cloneNode(true);
    list.parentNode.replaceChild(newList, list);
    
    // Add click listener for all interactions
    newList.addEventListener('click', async (e) => {
        // Handle cancel buttons
        if (e.target.classList.contains('cancel-signup-btn')) {
            const shiftId = e.target.getAttribute('data-shift-id');
            await cancelSignup(shiftId);
        }
        // Handle calendar toggle buttons
        else if (e.target.classList.contains('calendar-toggle')) {
            e.stopPropagation();
            const dropdown = e.target.closest('.calendar-dropdown');
            const options = dropdown.querySelector('.calendar-options');
            const isOpen = options.style.display !== 'none';
            
            // Close all other dropdowns
            document.querySelectorAll('.calendar-options').forEach(opt => {
                opt.style.display = 'none';
            });
            
            // Toggle this dropdown
            options.style.display = isOpen ? 'none' : 'block';
        }
        // Handle calendar option clicks
        else if (e.target.closest('.calendar-option')) {
            e.stopPropagation();
            const dropdown = e.target.closest('.calendar-dropdown');
            const options = dropdown.querySelector('.calendar-options');
            options.style.display = 'none';
        }
    });
}

async function signupForShift(shiftId) {
    try {
        const response = await fetch(`/api/shifts/${shiftId}/signup`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            showStatus('Successfully signed up for shift!', 'success');
            await loadShifts();
            await loadMySignups();
        } else {
            showStatus(data.error || 'Failed to sign up', 'error');
        }
    } catch (error) {
        console.error('Error signing up:', error);
        showStatus('Failed to sign up for shift', 'error');
    }
}

async function cancelSignup(shiftId) {
    if (!confirm('Are you sure you want to cancel your signup for this shift?')) {
        return;
    }
    
    try {
        const response = await fetch(`/api/shifts/${shiftId}/cancel`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            showStatus('Signup cancelled', 'success');
            await loadShifts();
            await loadMySignups();
        } else {
            showStatus(data.error || 'Failed to cancel signup', 'error');
        }
    } catch (error) {
        console.error('Error cancelling signup:', error);
        showStatus('Failed to cancel signup', 'error');
    }
}

function setupEventListeners() {
    const dateFilter = document.getElementById('date-filter');
    if (dateFilter) {
        dateFilter.addEventListener('change', filterShifts);
    }
}

function filterShifts() {
    const dateFilter = document.getElementById('date-filter').value;
    
    if (!dateFilter) {
        displayShifts(allShifts);
        return;
    }
    
    const filtered = allShifts.filter(shift => {
        return shift.Date === dateFilter;  // Changed from shift.date to shift.Date
    });
    
    displayShifts(filtered);
}

function clearFilters() {
    document.getElementById('date-filter').value = '';
    loadShifts(); // Reload shifts without filters
}

function showStatus(message, type = 'info') {
    const container = document.getElementById('status-container');
    if (!container) return;
    
    const messageDiv = document.createElement('div');
    messageDiv.className = `status-message ${type}`;
    messageDiv.textContent = message;
    
    container.appendChild(messageDiv);
    
    setTimeout(() => {
        messageDiv.remove();
    }, 5000);
}

function escapeHtml(text) {
    if (text === null || text === undefined) {
        return '';
    }
    const div = document.createElement('div');
    div.textContent = String(text);
    return div.innerHTML;
}

// Add these calendar URL generation functions after the existing functions
function generateCalendarUrls(shift) {
    const shiftDate = new Date(shift.Date);
    
    // Parse start and end times
    const [startHour, startMinute] = shift['Start Time'].split(':').map(n => parseInt(n));
    const [endHour, endMinute] = shift['End Time'].split(':').map(n => parseInt(n));
    
    // Create start and end datetime objects
    const startDate = new Date(shiftDate);
    startDate.setHours(startHour, startMinute, 0, 0);
    
    const endDate = new Date(shiftDate);
    endDate.setHours(endHour, endMinute, 0, 0);
    
    // Format dates for different calendar formats
    const formatGoogleDate = (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${year}${month}${day}T${hours}${minutes}00`;
    };
    
    const formatISODate = (date) => {
        return date.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
    };
    
    // Event details
    const title = shift.Title;
    const description = shift.Description || 'Volunteer shift';
    const location = shift.Location || '';
    
    // Google Calendar URL
    const googleStartStr = formatGoogleDate(startDate);
    const googleEndStr = formatGoogleDate(endDate);
    const googleParams = new URLSearchParams({
        action: 'TEMPLATE',
        text: title,
        dates: `${googleStartStr}/${googleEndStr}`,
        details: description,
        location: location
    });
    const googleUrl = `https://calendar.google.com/calendar/render?${googleParams.toString()}`;
    
    // Outlook Web Calendar URL
    const outlookStartStr = startDate.toISOString();
    const outlookEndStr = endDate.toISOString();
    const outlookParams = new URLSearchParams({
        path: '/calendar/action/compose',
        rru: 'addevent',
        subject: title,
        startdt: outlookStartStr,
        enddt: outlookEndStr,
        body: description,
        location: location
    });
    const outlookUrl = `https://outlook.live.com/calendar/0/deeplink/compose?${outlookParams.toString()}`;
    
    // Apple Calendar (.ics file) - we'll generate this dynamically
    const icsContent = [
        'BEGIN:VCALENDAR',
        'VERSION:2.0',
        'PRODID:-//BNKops//Volunteer Shifts//EN',
        'BEGIN:VEVENT',
        `UID:${shift.ID}-${Date.now()}@bnkops.com`,
        `DTSTART:${formatISODate(startDate)}`,
        `DTEND:${formatISODate(endDate)}`,
        `SUMMARY:${title}`,
        `DESCRIPTION:${description.replace(/\n/g, '\\n')}`,
        `LOCATION:${location}`,
        'STATUS:CONFIRMED',
        'END:VEVENT',
        'END:VCALENDAR'
    ].join('\r\n');
    
    // Create a data URL for the .ics file
    const icsDataUrl = 'data:text/calendar;charset=utf-8,' + encodeURIComponent(icsContent);
    
    return {
        google: googleUrl,
        outlook: outlookUrl,
        apple: icsDataUrl,
        icsFilename: `${title.replace(/[^a-z0-9]/gi, '_')}_${shift.ID}.ics`
    };
}

// Update calendar dropdown HTML generator (remove onclick handlers)
function generateCalendarDropdown(shift) {
    const urls = generateCalendarUrls(shift);
    return `
        <div class="calendar-dropdown">
            <button class="btn btn-secondary btn-sm calendar-toggle" data-shift-id="${shift.ID}">
                📅 Add to Calendar ▼
            </button>
            <div class="calendar-options" style="display: none;">
                <a href="${urls.google}" target="_blank" class="calendar-option" data-calendar-type="google">
                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1zbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjUgMkgxMy41QzE0LjMyODQgMiAxNSAyLjY3MTU3IDE1IDMuNVYxMi41QzE1IDEzLjMyODQgMTQuMzI4NCAxNCAxMy41IDE0SDIuNUMxLjY3MTU3IDE0IDEgMTMuMzI4NCAxIDEyLjVWMy41QzEgMi42NzE1NyAxLjY3MTU3IDIgMi41IDJIMy41IiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMS41Ii8+CjxwYXRoIGQ9Ik00IDFWM00xMiAxVjMiIHN0cm9rZT0iIzQyODVGNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cGF0aCBkPSJNMSA1SDE1IiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMS41Ii8+Cjwvc3ZnPg==" alt="Google"> Google Calendar
                </a>
                <a href="${urls.outlook}" target="_blank" class="calendar-option" data-calendar-type="outlook">
                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1zbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0IDJIMlYxNEgxNFYyWiIgZmlsbD0iIzAwNzhENCIvPgo8cGF0aCBkPSJNOCA4VjE0SDE0VjhIOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik04IDJWOEgxNFYySDhaIiBmaWxsPSIjMDA3OEQ0Ii8+Cjwvc3ZnPg==" alt="Outlook"> Outlook
                </a>
                <a href="${urls.apple}" download="${urls.icsFilename}" class="calendar-option" data-calendar-type="apple">
                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1zbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDJIMy41QzIuNjcxNTcgMiAyIDIuNjcxNTcgMiAzLjVWMTIuNUMyIDEzLjMyODQgMi42NzE1NyAxNCAzLjUgMTRIMTIuNUMxMy4zMjg0IDE0IDE0IDEzLjMyODQgMTQgMTIuNVYzQzE0IDIuNDQ3NzIgMTMuNTUyMyAyIDEzIDJaIiBmaWxsPSIjRkY1NzMzIi8+CjxwYXRoIGQ9Ik00IDFWM00xMiAxVjMiIHN0cm9rZT0iI0ZGNTczMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPHBhdGggZD0iTTIgNUgxNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPHRleHQgeD0iOCIgeT0iMTEiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI2IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+MzE8L3RleHQ+Cjwvc3ZnPg==" alt="Apple"> Apple Calendar
                </a>
            </div>
        </div>
    `;
}

// Update setupShiftCardListeners to handle calendar dropdowns
function setupShiftCardListeners() {
    const grid = document.getElementById('shifts-grid');
    if (!grid) return;
    
    // Remove any existing listeners by cloning
    const newGrid = grid.cloneNode(true);
    grid.parentNode.replaceChild(newGrid, grid);
    
    // Add click listener for all buttons
    newGrid.addEventListener('click', async (e) => {
        // Handle signup buttons
        if (e.target.classList.contains('signup-btn')) {
            const shiftId = e.target.getAttribute('data-shift-id');
            await signupForShift(shiftId);
        } 
        // Handle cancel buttons
        else if (e.target.classList.contains('cancel-signup-btn')) {
            const shiftId = e.target.getAttribute('data-shift-id');
            await cancelSignup(shiftId);
        }
        // Handle calendar toggle buttons
        else if (e.target.classList.contains('calendar-toggle')) {
            e.stopPropagation();
            const dropdown = e.target.closest('.calendar-dropdown');
            const options = dropdown.querySelector('.calendar-options');
            const isOpen = options.style.display !== 'none';
            
            // Close all other dropdowns
            document.querySelectorAll('.calendar-options').forEach(opt => {
                opt.style.display = 'none';
            });
            
            // Toggle this dropdown
            options.style.display = isOpen ? 'none' : 'block';
        }
        // Handle calendar option clicks
        else if (e.target.closest('.calendar-option')) {
            e.stopPropagation();
            const dropdown = e.target.closest('.calendar-dropdown');
            const options = dropdown.querySelector('.calendar-options');
            options.style.display = 'none';
        }
    });
}

// Update setupMySignupsListeners similarly
function setupMySignupsListeners() {
    const list = document.getElementById('my-signups-list');
    if (!list) return;
    
    // Remove any existing listeners by cloning
    const newList = list.cloneNode(true);
    list.parentNode.replaceChild(newList, list);
    
    // Add click listener for all interactions
    newList.addEventListener('click', async (e) => {
        // Handle cancel buttons
        if (e.target.classList.contains('cancel-signup-btn')) {
            const shiftId = e.target.getAttribute('data-shift-id');
            await cancelSignup(shiftId);
        }
        // Handle calendar toggle buttons
        else if (e.target.classList.contains('calendar-toggle')) {
            e.stopPropagation();
            const dropdown = e.target.closest('.calendar-dropdown');
            const options = dropdown.querySelector('.calendar-options');
            const isOpen = options.style.display !== 'none';
            
            // Close all other dropdowns
            document.querySelectorAll('.calendar-options').forEach(opt => {
                opt.style.display = 'none';
            });
            
            // Toggle this dropdown
            options.style.display = isOpen ? 'none' : 'block';
        }
        // Handle calendar option clicks
        else if (e.target.closest('.calendar-option')) {
            e.stopPropagation();
            const dropdown = e.target.closest('.calendar-dropdown');
            const options = dropdown.querySelector('.calendar-options');
            options.style.display = 'none';
        }
    });
}

// Keep the document click handler to close dropdowns when clicking outside
document.addEventListener('click', function() {
    document.querySelectorAll('.calendar-options').forEach(opt => {
        opt.style.display = 'none';
    });
});