/**
 * Main Application Controller
 * Handles authentication, data loading, and view rendering
 */

class MailingListApp {
    constructor() {
        this.isAuthenticated = false;
        this.currentUser = null;
        this.lists = [];
        this.members = [];
        this.users = [];
        this.subscriptions = new Map(); // list_id -> members[]
        
        this.initializeApp();
    }

    /**
     * Initialize the application
     */
    async initializeApp() {
        this.setupEventListeners();
        
        // Check for saved token
        const savedToken = localStorage.getItem('authToken');
        if (savedToken) {
            apiClient.setToken(savedToken);
            await this.checkCurrentUser();
        }
    }

    /**
     * Setup event listeners
     */
    setupEventListeners() {
        // Login form submission
        document.getElementById('loginForm').addEventListener('submit', (e) => {
            e.preventDefault();
            this.handleLogin();
        });

        // Clear error when user starts typing
        document.getElementById('username').addEventListener('input', () => {
            this.clearLoginError();
        });

        document.getElementById('password').addEventListener('input', () => {
            this.clearLoginError();
        });

        document.getElementById('logoutBtn').addEventListener('click', () => {
            this.logout();
        });

        // User dropdown functionality
        const userDropdownTrigger = document.getElementById('userDropdownTrigger');
        const userDropdown = document.getElementById('userDropdown');
        
        userDropdownTrigger.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            userDropdown.classList.toggle('active');
            userDropdownTrigger.classList.toggle('active');
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!userDropdown.contains(e.target)) {
                userDropdown.classList.remove('active');
                userDropdownTrigger.classList.remove('active');
            }
        });

        // Close dropdown on escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                userDropdown.classList.remove('active');
                userDropdownTrigger.classList.remove('active');
            }
        });

        // Bulk import button
        document.getElementById('showBulkImportBtn').addEventListener('click', () => {
            uiManager.showBulkImportModal();
        });

        // Add user button (admin only)
        document.getElementById('addUserBtn').addEventListener('click', () => {
            uiManager.showUserModal();
        });

        // User management dropdown item
        document.getElementById('userManagementBtn').addEventListener('click', () => {
            // Close the dropdown
            userDropdown.classList.remove('active');
            userDropdownTrigger.classList.remove('active');
            // Switch to users tab
            this.switchToUsersTab();
        });

        // Member search functionality
        const memberSearchInput = document.getElementById('memberSearchInput');
        const memberSearchClear = document.getElementById('memberSearchClear');
        
        memberSearchInput.addEventListener('input', (e) => {
            this.filterMembers(e.target.value);
            
            // Show/hide clear button
            if (e.target.value.trim()) {
                memberSearchClear.style.display = 'flex';
            } else {
                memberSearchClear.style.display = 'none';
            }
        });

        memberSearchClear.addEventListener('click', () => {
            memberSearchInput.value = '';
            memberSearchClear.style.display = 'none';
            this.filterMembers('');
            memberSearchInput.focus();
        });

        // Clear search when switching tabs
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                if (btn.dataset.tab !== 'members') {
                    memberSearchInput.value = '';
                    memberSearchClear.style.display = 'none';
                }
            });
        });
    }

    /**
     * Check if current user is still valid
     */
    async checkCurrentUser() {
        try {
            const user = await apiClient.getCurrentUser();
            this.currentUser = user;
            this.isAuthenticated = true;
            this.showAuthenticatedUI();
            await this.loadData();
        } catch (error) {
            // Token is invalid, clear it
            this.logout();
        }
    }

    /**
     * Handle login button click
     */
    async handleLogin() {
        const usernameInput = document.getElementById('username');
        const passwordInput = document.getElementById('password');
        const username = usernameInput.value.trim();
        const password = passwordInput.value.trim();
        
        // Clear previous error states
        this.clearLoginError();
        
        if (!username || !password) {
            this.showLoginError('Please enter both username and password');
            return;
        }
        
        await this.login(username, password);
    }

    /**
     * Show login error message
     */
    showLoginError(message) {
        const errorDiv = document.getElementById('loginError');
        const errorMessage = document.getElementById('loginErrorMessage');
        const usernameInput = document.getElementById('username');
        const passwordInput = document.getElementById('password');
        
        errorMessage.textContent = message;
        errorDiv.style.display = 'flex';
        
        // Add error class to inputs
        usernameInput.classList.add('error');
        passwordInput.classList.add('error');
        
        // Remove animation class and re-add to trigger animation
        errorDiv.style.animation = 'none';
        setTimeout(() => {
            errorDiv.style.animation = '';
        }, 10);
    }

    /**
     * Clear login error message
     */
    clearLoginError() {
        const errorDiv = document.getElementById('loginError');
        const usernameInput = document.getElementById('username');
        const passwordInput = document.getElementById('password');
        
        errorDiv.style.display = 'none';
        usernameInput.classList.remove('error');
        passwordInput.classList.remove('error');
    }

    /**
     * Authenticate with API
     */
    async login(username, password) {
        try {
            uiManager.setLoading(true);
            
            // Login and get token
            const response = await apiClient.login(username, password);
            this.currentUser = response.user;
            this.isAuthenticated = true;
            
            // Save token
            localStorage.setItem('authToken', response.access_token);
            
            this.showAuthenticatedUI();
            await this.loadData();
            
            uiManager.showNotification(`Welcome back, ${this.currentUser.username}!`, 'success');
        } catch (error) {
            this.isAuthenticated = false;
            this.currentUser = null;
            apiClient.clearToken();
            localStorage.removeItem('authToken');
            
            // Show error on login form
            let errorMessage = 'Login failed';
            if (error.message) {
                if (error.message.includes('401') || error.message.includes('Unauthorized') || 
                    error.message.includes('Invalid') || error.message.includes('credentials')) {
                    errorMessage = 'Invalid username or password';
                } else if (error.message.includes('network') || error.message.includes('fetch')) {
                    errorMessage = 'Unable to connect to server';
                } else {
                    errorMessage = error.message;
                }
            }
            
            this.showLoginError(errorMessage);
        } finally {
            uiManager.setLoading(false);
        }
    }

    /**
     * Logout
     */
    async logout() {
        try {
            await apiClient.logout();
        } catch (error) {
            // Ignore logout errors
        }
        
        this.isAuthenticated = false;
        this.currentUser = null;
        apiClient.clearToken();
        localStorage.removeItem('authToken');
        
        this.showUnauthenticatedUI();
        uiManager.showNotification('Logged out successfully', 'info');
    }

    /**
     * Show authenticated UI
     */
    showAuthenticatedUI() {
        document.getElementById('loginPage').style.display = 'none';
        document.getElementById('mainHeader').style.display = 'block';
        document.getElementById('mainContent').style.display = 'block';
        
        // Clear login inputs
        document.getElementById('username').value = '';
        document.getElementById('password').value = '';
        
        // Update user info display
        if (this.currentUser) {
            document.getElementById('currentUsername').textContent = this.currentUser.username;
            document.getElementById('currentUserRole').textContent = this.currentUser.role;
            document.getElementById('dropdownUsername').textContent = this.currentUser.username;
            document.getElementById('dropdownUserRole').textContent = this.currentUser.role;
            
            // Show/hide admin-only features
            const isAdmin = this.currentUser.role === 'administrator';
            document.getElementById('userManagementBtn').style.display = isAdmin ? 'block' : 'none';
            document.getElementById('userManagementDivider').style.display = isAdmin ? 'block' : 'none';
            
            // Show/hide write access features
            const hasWriteAccess = this.currentUser.role === 'administrator' || this.currentUser.role === 'operator';
            this.updateUIForPermissions(hasWriteAccess);
        }
    }

    /**
     * Show unauthenticated UI
     */
    showUnauthenticatedUI() {
        document.getElementById('loginPage').style.display = 'flex';
        document.getElementById('mainHeader').style.display = 'none';
        document.getElementById('mainContent').style.display = 'none';
    }

    /**
     * Update UI elements based on user permissions
     */
    updateUIForPermissions(hasWriteAccess) {
        // Disable/enable write action buttons
        const writeButtons = document.querySelectorAll('[data-requires-write]');
        writeButtons.forEach(button => {
            button.style.display = hasWriteAccess ? '' : 'none';
        });
        
        // Update button attributes for later reference
        document.getElementById('addListBtn').setAttribute('data-requires-write', '');
        document.getElementById('addMemberBtn').setAttribute('data-requires-write', '');
        document.getElementById('showBulkImportBtn').setAttribute('data-requires-write', '');
    }

    /**
     * Switch to users tab (triggered from user dropdown)
     */
    switchToUsersTab() {
        // Switch to users tab programmatically
        const tabButtons = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');
        
        // Remove active class from all tabs and contents
        tabButtons.forEach(btn => btn.classList.remove('active'));
        tabContents.forEach(content => content.classList.remove('active'));
        
        // Show users tab content
        const usersTab = document.getElementById('users-tab');
        if (usersTab) {
            usersTab.classList.add('active');
        }
        
        // Load users data if needed
        this.loadUsers();
    }

    /**
     * Load all data from API
     */
    async loadData() {
        if (!this.isAuthenticated) return;

        try {
            uiManager.setLoading(true);
            
            // Load lists and members in parallel
            const [lists, members] = await Promise.all([
                apiClient.getLists(),
                apiClient.getMembers()
            ]);
            
            this.lists = lists;
            this.members = members;
            
            // Load users if admin
            if (this.currentUser && this.currentUser.role === 'administrator') {
                try {
                    this.users = await apiClient.getUsers();
                } catch (error) {
                    console.warn('Failed to load users:', error);
                    this.users = [];
                }
            }
            
            // Load subscriptions for each list
            await this.loadSubscriptions();
            
            // Render all views
            this.renderLists();
            this.renderMembers();
            if (this.currentUser && this.currentUser.role === 'administrator') {
                this.renderUsers();
            }
            
        } catch (error) {
            uiManager.handleError(error, 'Failed to load data');
        } finally {
            uiManager.setLoading(false);
        }
    }

    /**
     * Load subscription data for all lists
     */
    async loadSubscriptions() {
        this.subscriptions.clear();
        
        const subscriptionPromises = this.lists.map(async (list) => {
            try {
                const members = await apiClient.getListMembers(list.list_id);
                this.subscriptions.set(list.list_id, members);
            } catch (error) {
                console.warn(`Failed to load members for list ${list.list_id}:`, error);
                this.subscriptions.set(list.list_id, []);
            }
        });
        
        await Promise.all(subscriptionPromises);
    }

    /**
     * Render mailing lists table
     */
    renderLists() {
        const tbody = document.getElementById('listsTableBody');
        tbody.innerHTML = '';
        
        if (this.lists.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="6" class="text-center text-muted">
                        No mailing lists found. <a href="#" id="createFirstList">Create your first list</a>
                    </td>
                </tr>
            `;
            
            document.getElementById('createFirstList').addEventListener('click', (e) => {
                e.preventDefault();
                uiManager.showListModal();
            });
            return;
        }
        
        const hasWriteAccess = this.currentUser && (this.currentUser.role === 'administrator' || this.currentUser.role === 'operator');
        
        this.lists.forEach(list => {
            const row = document.createElement('tr');
            const memberCount = this.subscriptions.get(list.list_id)?.length || 0;
            
            row.innerHTML = `
                <td>
                    <div class="font-medium">${uiManager.escapeHtml(list.list_name)}</div>
                </td>
                <td>
                    <a href="mailto:${list.list_email}" style="color: var(--primary-color)">
                        ${uiManager.escapeHtml(list.list_email)}
                    </a>
                </td>
                <td>
                    <div class="text-sm text-muted">
                        ${list.description ? uiManager.escapeHtml(list.description) : '<em>No description</em>'}
                    </div>
                </td>
                <td>
                    <span class="font-medium">${memberCount}</span>
                    ${memberCount === 1 ? 'member' : 'members'}
                </td>
                <td></td>
                <td>
                    <div class="action-buttons"></div>
                </td>
            `;
            
            // Add status badge
            const statusCell = row.cells[4];
            statusCell.appendChild(uiManager.createStatusBadge(list.active));
            
            // Add action buttons only for users with write access
            const actionsCell = row.cells[5].querySelector('.action-buttons');
            
            if (hasWriteAccess) {
                const editBtn = uiManager.createActionButton('Edit', 'edit', 'btn-secondary', () => {
                    uiManager.showListModal(list);
                });
                
                const deleteBtn = uiManager.createActionButton('Delete', 'trash', 'btn-danger', () => {
                    uiManager.showConfirmation(
                        `Are you sure you want to delete the mailing list "${list.list_name}"? This action cannot be undone.`,
                        async () => {
                            await this.deleteList(list.list_id);
                        }
                    );
                });
                
                actionsCell.appendChild(editBtn);
                actionsCell.appendChild(deleteBtn);
            }
            
            tbody.appendChild(row);
        });
    }

    /**
     * Render members table
     */
    renderMembers() {
        const tbody = document.getElementById('membersTableBody');
        tbody.innerHTML = '';
        
        if (this.members.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="5" class="text-center text-muted">
                        No members found. <a href="#" id="createFirstMember">Add your first member</a>
                    </td>
                </tr>
            `;
            
            document.getElementById('createFirstMember').addEventListener('click', (e) => {
                e.preventDefault();
                uiManager.showMemberModal();
            });
            return;
        }
        
        const hasWriteAccess = this.currentUser && (this.currentUser.role === 'administrator' || this.currentUser.role === 'operator');
        
        this.members.forEach(member => {
            const row = document.createElement('tr');
            
            // Find lists this member belongs to
            const memberLists = [];
            this.subscriptions.forEach((members, listId) => {
                if (members.some(m => m.member_id === member.member_id)) {
                    const list = this.lists.find(l => l.list_id === listId);
                    if (list) {
                        memberLists.push(list.list_name);
                    }
                }
            });
            
            row.innerHTML = `
                <td>
                    <div class="font-medium">${uiManager.escapeHtml(member.name)}</div>
                    ${member.bounce_count > 0 ? `<div class="text-xs text-muted" style="margin-top: 2px;"></div>` : ''}
                </td>
                <td>
                    <a href="mailto:${member.email}" style="color: var(--primary-color)">
                        ${uiManager.escapeHtml(member.email)}
                    </a>
                </td>
                <td>
                    <div class="text-sm">
                        ${memberLists.length > 0 
                            ? memberLists.map(name => `<span class="text-muted">${uiManager.escapeHtml(name)}</span>`).join(', ')
                            : '<em class="text-muted">No subscriptions</em>'
                        }
                    </div>
                </td>
                <td></td>
                <td>
                    <div class="action-buttons"></div>
                </td>
            `;
            
            // Add bounce badge if member has bounces
            if (member.bounce_count > 0) {
                const bounceInfoDiv = row.cells[0].querySelector('.text-xs');
                const bounceBadge = uiManager.createBounceStatusBadge(member.bounce_status, member.bounce_count);
                if (bounceBadge) {
                    bounceInfoDiv.appendChild(bounceBadge);
                }
            }
            
            // Add status badge
            const statusCell = row.cells[3];
            statusCell.appendChild(uiManager.createStatusBadge(member.active));
            
            // Add action buttons
            const actionsCell = row.cells[4].querySelector('.action-buttons');
            
            // Create Lists button with proper subscription modal functionality
            const subscriptionsBtn = document.createElement('button');
            subscriptionsBtn.className = 'btn btn-sm btn-primary';
            subscriptionsBtn.innerHTML = '<i class="fas fa-list"></i> Lists';
            subscriptionsBtn.title = 'Manage Subscriptions';
            subscriptionsBtn.addEventListener('click', () => {
                uiManager.showMemberSubscriptionsModal(member);
            });

            // Create Bounces button (show if member has any bounces or for admins/operators)
            if (member.bounce_count > 0 || hasWriteAccess) {
                const bouncesBtn = document.createElement('button');
                bouncesBtn.className = `btn btn-sm ${member.bounce_count > 0 ? 'btn-warning' : 'btn-secondary'}`;
                bouncesBtn.innerHTML = `<i class="fas fa-exclamation-triangle"></i> Bounces${member.bounce_count > 0 ? ` (${member.bounce_count})` : ''}`;
                bouncesBtn.title = 'View Bounce History';
                bouncesBtn.addEventListener('click', () => {
                    uiManager.showBounceHistoryModal(member);
                });
                actionsCell.appendChild(bouncesBtn);
            }

            // Only show edit/delete buttons for users with write access
            if (hasWriteAccess) {
                const editBtn = uiManager.createActionButton('Edit', 'edit', 'btn-secondary', () => {
                    uiManager.showMemberModal(member);
                });
                
                const deleteBtn = uiManager.createActionButton('Delete', 'trash', 'btn-danger', () => {
                    uiManager.showConfirmation(
                        `Are you sure you want to delete the member "${member.name}"? This will remove them from all mailing lists.`,
                        async () => {
                            await this.deleteMember(member.member_id);
                        }
                    );
                });
                
                actionsCell.appendChild(subscriptionsBtn);
                actionsCell.appendChild(editBtn);
                actionsCell.appendChild(deleteBtn);
            } else {
                actionsCell.appendChild(subscriptionsBtn);
            }
            
            tbody.appendChild(row);
        });
    }

    /**
     * Render users table (admin only)
     */
    renderUsers() {
        const tbody = document.getElementById('usersTableBody');
        tbody.innerHTML = '';
        
        if (this.users.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="6" class="text-center text-muted">
                        No users found. <a href="#" id="createFirstUser">Create your first user</a>
                    </td>
                </tr>
            `;
            
            document.getElementById('createFirstUser').addEventListener('click', (e) => {
                e.preventDefault();
                uiManager.showUserModal();
            });
            return;
        }
        
        this.users.forEach(user => {
            const row = document.createElement('tr');
            
            // Format dates
            const createdAt = new Date(user.created_at).toLocaleDateString();
            const lastLogin = user.last_login ? new Date(user.last_login).toLocaleDateString() : 'Never';
            
            row.innerHTML = `
                <td>
                    <div class="font-medium">${uiManager.escapeHtml(user.username)}</div>
                </td>
                <td>
                    <span class="role-badge role-${user.role}">${user.role.replace('-', ' ')}</span>
                </td>
                <td>
                    <div class="text-sm text-muted">${createdAt}</div>
                </td>
                <td>
                    <div class="text-sm text-muted">${lastLogin}</div>
                </td>
                <td></td>
                <td>
                    <div class="action-buttons"></div>
                </td>
            `;
            
            // Add status badge
            const statusCell = row.cells[4];
            statusCell.appendChild(uiManager.createStatusBadge(user.active));
            
            // Add action buttons
            const actionsCell = row.cells[5].querySelector('.action-buttons');
            
            const editBtn = uiManager.createActionButton('Edit', 'edit', 'btn-secondary', () => {
                uiManager.showUserModal(user);
            });
            
            // Don't allow deletion of current user
            if (user.user_id !== this.currentUser.user_id) {
                const deleteBtn = uiManager.createActionButton('Delete', 'trash', 'btn-danger', () => {
                    uiManager.showConfirmation(
                        `Are you sure you want to delete the user "${user.username}"? This action cannot be undone.`,
                        async () => {
                            await this.deleteUser(user.user_id);
                        }
                    );
                });
                actionsCell.appendChild(editBtn);
                actionsCell.appendChild(deleteBtn);
            } else {
                actionsCell.appendChild(editBtn);
            }
            
            tbody.appendChild(row);
        });
    }



    /**
     * Delete a mailing list
     */
    async deleteList(listId) {
        try {
            uiManager.setLoading(true);
            await apiClient.deleteList(listId);
            uiManager.showNotification('Mailing list deleted successfully', 'success');
            await this.loadData();
        } catch (error) {
            uiManager.handleError(error, 'Failed to delete mailing list');
        } finally {
            uiManager.setLoading(false);
        }
    }

    /**
     * Delete a member
     */
    async deleteMember(memberId) {
        try {
            uiManager.setLoading(true);
            await apiClient.deleteMember(memberId);
            uiManager.showNotification('Member deleted successfully', 'success');
            await this.loadData();
        } catch (error) {
            uiManager.handleError(error, 'Failed to delete member');
        } finally {
            uiManager.setLoading(false);
        }
    }

    /**
     * Unsubscribe member from list
     */
    async unsubscribeMember(listEmail, memberEmail) {
        try {
            uiManager.setLoading(true);
            await apiClient.deleteSubscription(listEmail, memberEmail);
            uiManager.showNotification('Member unsubscribed successfully', 'success');
            await this.loadData();
        } catch (error) {
            uiManager.handleError(error, 'Failed to unsubscribe member');
        } finally {
            uiManager.setLoading(false);
        }
    }

    /**
     * Delete a user
     */
    async deleteUser(userId) {
        try {
            uiManager.setLoading(true);
            await apiClient.deleteUser(userId);
            uiManager.showNotification('User deleted successfully', 'success');
            await this.loadData();
        } catch (error) {
            uiManager.handleError(error, 'Failed to delete user');
        } finally {
            uiManager.setLoading(false);
        }
    }

    /**
     * Filter members by search term (name or email)
     */
    filterMembers(searchTerm) {
        const searchInfo = document.getElementById('memberSearchInfo');
        const searchCount = document.getElementById('memberSearchCount');
        const tbody = document.getElementById('membersTableBody');
        
        if (!this.members || !Array.isArray(this.members)) {
            return;
        }

        // If no search term, show all members
        if (!searchTerm || searchTerm.trim() === '') {
            this.renderMembers();
            searchInfo.style.display = 'none';
            return;
        }

        const normalizedSearch = searchTerm.trim().toLowerCase();
        
        // Filter members by name or email
        const filteredMembers = this.members.filter(member => {
            const name = (member.name || '').toLowerCase();
            const email = (member.email || '').toLowerCase();
            return name.includes(normalizedSearch) || email.includes(normalizedSearch);
        });

        // Update search results info
        searchCount.textContent = filteredMembers.length;
        searchInfo.style.display = 'block';

        // Render filtered results
        this.renderFilteredMembers(filteredMembers);
    }

    /**
     * Render filtered members (similar to renderMembers but with filtered data)
     */
    renderFilteredMembers(filteredMembers) {
        const tbody = document.getElementById('membersTableBody');
        tbody.innerHTML = '';

        if (filteredMembers.length === 0) {
            // Show no results message
            const row = tbody.insertRow();
            const cell = row.insertCell();
            cell.colSpan = 5;
            cell.className = 'no-results';
            cell.innerHTML = `
                <i class="fas fa-search"></i>
                <h3>No members found</h3>
                <p>Try adjusting your search terms or check the spelling.</p>
            `;
            return;
        }

        filteredMembers.forEach(member => {
            const row = tbody.insertRow();
            
            // Name
            const nameCell = row.insertCell();
            nameCell.textContent = member.name;
            
            // Email
            const emailCell = row.insertCell();
            const emailLink = document.createElement('a');
            emailLink.href = `mailto:${member.email}`;
            emailLink.textContent = member.email;
            emailLink.style.color = 'var(--primary-color)';
            emailCell.appendChild(emailLink);
            
            // Lists (show member's subscriptions)
            const listsCell = row.insertCell();
            const memberLists = [];
            this.subscriptions.forEach((members, listId) => {
                if (members.some(m => m.member_id === member.member_id)) {
                    const list = this.lists.find(l => l.list_id === listId);
                    if (list) {
                        memberLists.push(list.list_name);
                    }
                }
            });
            listsCell.textContent = memberLists.length > 0 ? memberLists.join(', ') : 'None';
            
            // Status
            const statusCell = row.insertCell();
            const statusBadge = document.createElement('span');
            statusBadge.className = `status-badge ${member.active ? 'active' : 'inactive'}`;
            statusBadge.innerHTML = `<i class="fas fa-${member.active ? 'check' : 'times'}"></i> ${member.active ? 'Active' : 'Inactive'}`;
            
            // Add bounce status if exists
            if (member.bounce_status && member.bounce_status !== 'clean') {
                const bounceIndicator = document.createElement('span');
                bounceIndicator.className = `bounce-badge bounce-${member.bounce_status === 'hard_bounce' ? 'hard' : 'soft'}`;
                bounceIndicator.innerHTML = `<i class="fas fa-exclamation-triangle"></i> Bounces`;
                bounceIndicator.title = `${member.bounce_count || 0} bounces - ${member.bounce_status}`;
                statusCell.appendChild(document.createElement('br'));
                statusCell.appendChild(bounceIndicator);
            }
            
            statusCell.appendChild(statusBadge);
            
            // Actions
            const actionsCell = row.insertCell();
            actionsCell.className = 'action-buttons';
            
            // Bounces button (if member has bounce data)
            if (member.bounce_count > 0) {
                const bouncesBtn = uiManager.createActionButton('Bounces', 'exclamation-triangle', 'btn-warning', () => {
                    uiManager.showBounceHistory(member);
                });
                actionsCell.appendChild(bouncesBtn);
            }
            
            const subscriptionsBtn = uiManager.createActionButton('Lists', 'list', 'btn-secondary', () => {
                uiManager.showMemberSubscriptions(member);
            });
            actionsCell.appendChild(subscriptionsBtn);
            
            const editBtn = uiManager.createActionButton('Edit', 'edit', 'btn-primary', () => {
                uiManager.showMemberModal(member);
            });
            editBtn.setAttribute('data-requires-write', '');
            actionsCell.appendChild(editBtn);
            
            const deleteBtn = uiManager.createActionButton('Delete', 'trash', 'btn-danger', () => {
                uiManager.showConfirmation(
                    `Are you sure you want to delete member "${member.name}"? This will also remove them from all mailing lists.`,
                    async () => {
                        await this.deleteMember(member.member_id);
                    }
                );
            });
            deleteBtn.setAttribute('data-requires-write', '');
            actionsCell.appendChild(deleteBtn);
        });

        // Update UI permissions for the filtered results
        const hasWriteAccess = this.currentUser && (this.currentUser.role === 'administrator' || this.currentUser.role === 'operator');
        this.updateUIForPermissions(hasWriteAccess);
    }
}

// Initialize the application when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.app = new MailingListApp();
});