// Client-side JavaScript for Prezenta Secure
class SecureExcelViewer {
    constructor() {
        this.config = null;
        this.backendUrl = ''; // Use same-origin /api through Nginx so deployment works from any host/port
        this.currentMeetingFilter = null;
        this.recordingsBackupPollTimer = null;
        this.appInitialized = false;
        this.init();
    }

    async init() {
        this.setupLoginUi();
        const authenticated = await this.checkAuthStatus();
        if (authenticated) {
            await this.startApp();
        } else {
            this.showLogin();
        }
    }

    async startApp() {
        try {
            this.showApp();
            await this.loadConfig();

            if (!this.appInitialized) {
                this.setupTabs();
                this.setupGroupUi();
                this.setupRecordingBackupUi();
                this.appInitialized = true;
            }

            const loadingElement = document.getElementById('loading');
            const excelViewsContainer = document.getElementById('excel-views');
            const errorElement = document.getElementById('config-error');
            if (loadingElement) loadingElement.style.display = 'none';
            if (excelViewsContainer) excelViewsContainer.style.display = 'none';
            if (errorElement) errorElement.style.display = 'none';

            await Promise.all([
                this.loadAvailableMeetings(),
                this.loadGroups(),
                this.loadGoogleDriveOAuthStatus(),
                this.loadZoomAccounts(),
                this.loadRecordingBackupStatus()
            ]);
        } catch (error) {
            console.error('Error initializing Excel viewer:', error);
            this.showError('Failed to initialize Excel viewer. Please check the console for details.');
        }
    }

    setupLoginUi() {
        const form = document.getElementById('login-form');
        const logoutButton = document.getElementById('logout-button');

        if (form) {
            form.addEventListener('submit', event => {
                event.preventDefault();
                this.login();
            });
        }

        if (logoutButton) {
            logoutButton.addEventListener('click', () => this.logout());
        }
    }

    async checkAuthStatus() {
        try {
            const response = await fetch(`${this.backendUrl}/api/auth/status`, { credentials: 'same-origin' });
            if (!response.ok) return false;
            const data = await response.json();
            const usernameInput = document.getElementById('login-username');
            if (usernameInput && data.username && !usernameInput.value) usernameInput.value = data.username;
            return Boolean(data.authenticated);
        } catch (error) {
            console.error('Could not check login status:', error);
            this.showLoginMessage('Could not check login status. Please try again.', 'error');
            return false;
        }
    }

    showLogin(message = '') {
        const loginScreen = document.getElementById('login-screen');
        const appShell = document.getElementById('app-shell');
        const logoutButton = document.getElementById('logout-button');
        if (loginScreen) loginScreen.style.display = 'flex';
        if (appShell) appShell.style.display = 'none';
        if (logoutButton) logoutButton.style.display = 'none';
        if (message) this.showLoginMessage(message, 'error');

        const passwordInput = document.getElementById('login-password');
        const usernameInput = document.getElementById('login-username');
        if (passwordInput) passwordInput.value = '';
        setTimeout(() => (usernameInput && !usernameInput.value ? usernameInput : passwordInput)?.focus(), 0);
    }

    showApp() {
        const loginScreen = document.getElementById('login-screen');
        const appShell = document.getElementById('app-shell');
        const logoutButton = document.getElementById('logout-button');
        if (loginScreen) loginScreen.style.display = 'none';
        if (appShell) appShell.style.display = 'block';
        if (logoutButton) logoutButton.style.display = 'inline-flex';
        this.showLoginMessage('', 'error');
    }

    showLoginMessage(message, type = 'error') {
        const element = document.getElementById('login-message');
        if (!element) return;
        element.textContent = message;
        element.className = `status-message ${type}`;
        element.style.display = message ? 'block' : 'none';
    }

    async login() {
        const usernameInput = document.getElementById('login-username');
        const passwordInput = document.getElementById('login-password');
        const submitButton = document.getElementById('login-submit');
        const username = usernameInput ? usernameInput.value.trim() : '';
        const password = passwordInput ? passwordInput.value : '';

        if (submitButton) submitButton.disabled = true;
        this.showLoginMessage('', 'error');

        try {
            const response = await fetch(`${this.backendUrl}/api/auth/login`, {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, password })
            });
            if (!response.ok) throw new Error(await this.readErrorMessage(response));
            await this.startApp();
        } catch (error) {
            this.showLoginMessage(error.message || 'Login failed.', 'error');
        } finally {
            if (submitButton) submitButton.disabled = false;
        }
    }

    async logout() {
        try {
            await fetch(`${this.backendUrl}/api/auth/logout`, {
                method: 'POST',
                credentials: 'same-origin'
            });
        } catch (error) {
            console.error('Logout failed:', error);
        } finally {
            this.showLogin();
        }
    }

    async loadConfig() {
        this.config = {
            appName: 'Prezenta Secure',
            appDescription: 'Secure Excel Viewer for Google Cloud Sheets',
            updateInterval: 300000,
            theme: 'light'
        };
    }

    setupTabs() {
        const tabButtons = document.querySelectorAll('.tab-button');
        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                const tabName = button.dataset.tab;
                tabButtons.forEach(btn => btn.classList.toggle('active', btn === button));
                document.querySelectorAll('.tab-panel').forEach(panel => {
                    panel.classList.toggle('active', panel.id === `tab-${tabName}`);
                });

                if (tabName === 'grupe') {
                    this.loadGroups();
                }
            });
        });
    }

    setupGroupUi() {
        const openButton = document.getElementById('open-add-group-dialog');
        const closeButton = document.getElementById('close-add-group-dialog');
        const cancelButton = document.getElementById('cancel-add-group');
        const form = document.getElementById('add-group-form');
        const dialog = document.getElementById('add-group-dialog');
        const connectDriveButton = document.getElementById('connect-google-drive');
        const disconnectDriveButton = document.getElementById('disconnect-google-drive');

        if (openButton) {
            openButton.addEventListener('click', () => this.openAddGroupDialog());
        }
        if (closeButton) {
            closeButton.addEventListener('click', () => this.closeAddGroupDialog());
        }
        if (cancelButton) {
            cancelButton.addEventListener('click', () => this.closeAddGroupDialog());
        }
        if (dialog) {
            dialog.addEventListener('click', event => {
                if (event.target === dialog) this.closeAddGroupDialog();
            });
        }
        if (form) {
            form.addEventListener('submit', event => {
                event.preventDefault();
                this.submitAddGroup();
            });
        }
        if (connectDriveButton) {
            connectDriveButton.addEventListener('click', () => this.connectGoogleDriveOAuth());
        }
        if (disconnectDriveButton) {
            disconnectDriveButton.addEventListener('click', () => this.disconnectGoogleDriveOAuth());
        }
        window.addEventListener('storage', event => {
            if (event.key === 'googleDriveOAuthConnected') this.loadGoogleDriveOAuthStatus();
        });
    }

    setupRecordingBackupUi() {
        const backupButton = document.getElementById('backup-recordings');
        const deleteButton = document.getElementById('delete-backed-up-recordings');

        if (backupButton) {
            backupButton.addEventListener('click', () => this.startRecordingsBackup());
        }
        if (deleteButton) {
            deleteButton.addEventListener('click', () => this.deleteBackedUpRecordings());
        }
    }

    async loadRecordingBackupStatus() {
        const usageElement = document.getElementById('recordings-cloud-usage');
        if (!usageElement) return;

        try {
            usageElement.textContent = 'Cloud usage: loading...';
            const response = await fetch(`${this.backendUrl}/api/recordings-backup/status`);
            if (!response.ok) throw new Error(await this.readErrorMessage(response));
            const status = await response.json();

            const scanErrors = status.scanErrors || [];
            const hasZoomUsage = status.zoomCloud && ((status.zoomCloud.recordings || 0) > 0 || (status.zoomCloud.files || 0) > 0 || (status.zoomCloud.bytes || 0) > 0);
            const zoomSource = status.zoomCloud && status.zoomCloud.source === 'zoom-all-users-recordings' && status.zoomCloud.usersScanned
                ? `, ${status.zoomCloud.usersScanned} users scanned`
                : '';
            const zoomUsage = hasZoomUsage
                ? `Zoom account cloud: ${status.zoomCloud.bytesLabel || '0 B'} (${status.zoomCloud.recordings || 0} recordings, ${status.zoomCloud.files || 0} files, last ${status.zoomCloud.monthsBack || 1} month${Number(status.zoomCloud.monthsBack || 1) === 1 ? '' : 's'}${zoomSource})`
                : scanErrors.length
                    ? `Zoom account cloud unavailable: ${scanErrors[0].error || 'scan failed'}`
                    : 'Zoom account cloud: 0 B (0 recordings)';
            const nextcloudUsage = status.nextcloudQuota
                ? `Nextcloud: ${status.nextcloudQuota.usedLabel} / ${status.nextcloudQuota.quotaLabel}`
                : status.nextcloudQuotaError
                    ? `Nextcloud quota unavailable: ${status.nextcloudQuotaError}`
                    : 'Nextcloud quota unavailable';
            const warningSuffix = scanErrors.length && hasZoomUsage ? ` • Scan warnings: ${scanErrors.length}` : '';
            usageElement.textContent = `${zoomUsage} • ${nextcloudUsage}${warningSuffix}`;
            usageElement.className = scanErrors.length ? 'copy-hint warn-text' : 'copy-hint';
        } catch (error) {
            usageElement.textContent = `Cloud usage unavailable: ${error.message}`;
            usageElement.className = 'copy-hint error-text';
        }
    }

    async startRecordingsBackup() {
        const backupButton = document.getElementById('backup-recordings');
        const deleteButton = document.getElementById('delete-backed-up-recordings');
        if (backupButton) backupButton.disabled = true;
        if (deleteButton) deleteButton.disabled = true;
        this.showRecordingsBackupMessage('Starting recordings backup...', 'info');
        this.updateRecordingsProgress({ state: 'queued', totalBytes: 0, bytesProcessed: 0, totalFiles: 0, completedFiles: 0, message: 'Queued' });

        try {
            const response = await fetch(`${this.backendUrl}/api/recordings-backup/start`, { method: 'POST' });
            if (!response.ok) throw new Error(await this.readErrorMessage(response));
            const result = await response.json();
            const jobId = result.job && result.job.id;
            if (!jobId) throw new Error('Backend did not return a backup job id');
            this.pollRecordingsBackupJob(jobId);
        } catch (error) {
            console.error('Error starting recordings backup:', error);
            this.showRecordingsBackupMessage(`Could not start recordings backup: ${error.message}`, 'error');
            this.hideRecordingsProgressIfIdle();
            if (backupButton) backupButton.disabled = false;
            if (deleteButton) deleteButton.disabled = false;
        }
    }

    pollRecordingsBackupJob(jobId) {
        if (this.recordingsBackupPollTimer) clearInterval(this.recordingsBackupPollTimer);

        const poll = async () => {
            try {
                const response = await fetch(`${this.backendUrl}/api/recordings-backup/jobs/${encodeURIComponent(jobId)}`);
                if (!response.ok) throw new Error(await this.readErrorMessage(response));
                const data = await response.json();
                const job = data.job || {};
                this.updateRecordingsProgress(job);

                if (job.state === 'completed' || job.state === 'failed') {
                    clearInterval(this.recordingsBackupPollTimer);
                    this.recordingsBackupPollTimer = null;
                    const backupButton = document.getElementById('backup-recordings');
                    const deleteButton = document.getElementById('delete-backed-up-recordings');
                    if (backupButton) backupButton.disabled = false;
                    if (deleteButton) deleteButton.disabled = false;
                    this.showRecordingsBackupMessage(job.message || (job.state === 'completed' ? 'Backup complete.' : 'Backup failed.'), job.state === 'completed' ? 'success' : 'error');
                    await this.loadRecordingBackupStatus();
                }
            } catch (error) {
                clearInterval(this.recordingsBackupPollTimer);
                this.recordingsBackupPollTimer = null;
                const backupButton = document.getElementById('backup-recordings');
                const deleteButton = document.getElementById('delete-backed-up-recordings');
                if (backupButton) backupButton.disabled = false;
                if (deleteButton) deleteButton.disabled = false;
                this.showRecordingsBackupMessage(`Could not read backup progress: ${error.message}`, 'error');
            }
        };

        poll();
        this.recordingsBackupPollTimer = setInterval(poll, 1500);
    }

    updateRecordingsProgress(job) {
        const wrap = document.getElementById('recordings-progress-wrap');
        const progress = document.getElementById('recordings-progress');
        const label = document.getElementById('recordings-progress-label');
        if (!wrap || !progress || !label) return;

        wrap.style.display = 'flex';
        const totalBytes = Number(job.totalBytes) || 0;
        const bytesProcessed = Number(job.bytesProcessed) || 0;
        const totalFiles = Number(job.totalFiles) || 0;
        const completedFiles = Number(job.completedFiles) || 0;
        const percent = totalBytes > 0
            ? Math.min(100, Math.round((bytesProcessed / totalBytes) * 100))
            : totalFiles > 0
                ? Math.min(100, Math.round((completedFiles / totalFiles) * 100))
                : 0;

        progress.value = percent;
        const fileText = totalFiles ? `${completedFiles}/${totalFiles} files` : job.state || 'starting';
        const byteText = totalBytes ? ` • ${job.bytesProcessedLabel || ''} / ${job.totalBytesLabel || ''}` : '';
        const currentFile = job.currentFile ? ` • ${job.currentFile}` : '';
        label.textContent = `${percent}% (${fileText}${byteText})${currentFile}`;
    }

    hideRecordingsProgressIfIdle() {
        const wrap = document.getElementById('recordings-progress-wrap');
        if (wrap) wrap.style.display = 'none';
    }

    async deleteBackedUpRecordings() {
        const confirmed = confirm('Delete Zoom cloud recordings only if every recording file is confirmed on Nextcloud with matching size? This moves those Zoom recordings to trash.');
        if (!confirmed) return;

        const backupButton = document.getElementById('backup-recordings');
        const deleteButton = document.getElementById('delete-backed-up-recordings');
        if (backupButton) backupButton.disabled = true;
        if (deleteButton) deleteButton.disabled = true;
        this.showRecordingsBackupMessage('Verifying Nextcloud copies before deleting Zoom recordings...', 'info');

        try {
            const response = await fetch(`${this.backendUrl}/api/recordings-backup/delete-moved`, { method: 'POST' });
            if (!response.ok) throw new Error(await this.readErrorMessage(response));
            const result = await response.json();
            const summary = result.skippedSummary || {};
            const skipReasons = [];
            if (summary.missingFiles) skipReasons.push(`${summary.missingFiles} files missing on Nextcloud`);
            if (summary.sizeMismatchFiles) skipReasons.push(`${summary.sizeMismatchFiles} files with size mismatch`);
            if (summary.missingUuidRecordings) skipReasons.push(`${summary.missingUuidRecordings} recordings missing Zoom UUID`);
            if (summary.zoomDeleteFailedRecordings) {
                skipReasons.push(`${summary.zoomDeleteFailedRecordings} Zoom delete failures${summary.firstZoomDeleteError ? `: ${summary.firstZoomDeleteError}` : ''}`);
            }
            const skippedText = result.skipped && result.skipped.length
                ? ` Skipped ${result.skipped.length} recordings${skipReasons.length ? ` (${skipReasons.join(', ')})` : ' that were not fully confirmed'}.`
                : '';
            const warningText = result.warnings && result.warnings.length ? ` Scan warnings: ${result.warnings.length}.` : '';
            this.showRecordingsBackupMessage(`Deleted ${result.deletedRecordings || 0} Zoom recordings (${result.deletedFiles || 0} files, ${result.deletedBytesLabel || '0 B'}).${skippedText}${warningText}`, result.skipped && result.skipped.length ? 'warning' : 'success');
            await this.loadRecordingBackupStatus();
        } catch (error) {
            console.error('Error deleting backed up recordings:', error);
            this.showRecordingsBackupMessage(`Could not delete backed up recordings: ${error.message}`, 'error');
        } finally {
            if (backupButton) backupButton.disabled = false;
            if (deleteButton) deleteButton.disabled = false;
        }
    }

    showRecordingsBackupMessage(message, type) {
        const element = document.getElementById('recordings-backup-message');
        if (!element) return;
        element.textContent = message;
        element.className = `status-message ${type || 'info'}`;
        element.style.display = 'block';
    }

    openAddGroupDialog() {
        const dialog = document.getElementById('add-group-dialog');
        const message = document.getElementById('add-group-message');
        if (message) message.style.display = 'none';
        this.loadZoomAccounts();
        if (!dialog) return;
        if (typeof dialog.showModal === 'function') {
            dialog.showModal();
        } else {
            dialog.setAttribute('open', 'open');
        }
    }

    closeAddGroupDialog() {
        const dialog = document.getElementById('add-group-dialog');
        if (!dialog) return;
        if (typeof dialog.close === 'function') {
            dialog.close();
        } else {
            dialog.removeAttribute('open');
        }
    }

    async loadGoogleDriveOAuthStatus() {
        const statusElement = document.getElementById('google-drive-oauth-status');
        const redirectElement = document.getElementById('google-drive-oauth-redirect');
        const connectButton = document.getElementById('connect-google-drive');
        const disconnectButton = document.getElementById('disconnect-google-drive');
        if (!statusElement) return;

        try {
            const response = await fetch(`${this.backendUrl}/api/google-drive-oauth/status`);
            if (!response.ok) throw new Error(await this.readErrorMessage(response));
            const status = await response.json();

            if (!status.configured) {
                statusElement.textContent = 'Google OAuth is not configured. Add googleOAuth.clientId and googleOAuth.clientSecret to config.json.';
                statusElement.className = 'copy-hint oauth-status error-text';
                if (connectButton) connectButton.disabled = true;
                if (disconnectButton) disconnectButton.disabled = true;
            } else if (status.connected) {
                statusElement.textContent = `Connected${status.userEmail ? ` as ${status.userEmail}` : ''}. New group spreadsheets will be copied using this Google account.`;
                statusElement.className = 'copy-hint oauth-status success-text';
                if (connectButton) connectButton.disabled = false;
                if (disconnectButton) disconnectButton.disabled = false;
            } else {
                statusElement.textContent = 'Not connected. Connect Google Drive before adding groups.';
                statusElement.className = 'copy-hint oauth-status warn-text';
                if (connectButton) connectButton.disabled = false;
                if (disconnectButton) disconnectButton.disabled = true;
            }

            if (redirectElement) {
                redirectElement.textContent = status.redirectUri ? `OAuth redirect URI: ${status.redirectUri}` : '';
            }
        } catch (error) {
            statusElement.textContent = `Could not read Google Drive OAuth status: ${error.message}`;
            statusElement.className = 'copy-hint oauth-status error-text';
        }
    }

    async connectGoogleDriveOAuth() {
        try {
            const response = await fetch(`${this.backendUrl}/api/google-drive-oauth/url`);
            if (!response.ok) throw new Error(await this.readErrorMessage(response));
            const data = await response.json();
            if (!data.url) throw new Error('Backend did not return an OAuth URL');
            window.open(data.url, '_blank', 'noopener,noreferrer');
            this.showGroupMessage('Google OAuth opened in a new tab. After approving access, return here and refresh the status if needed.', 'info');
            setTimeout(() => this.loadGoogleDriveOAuthStatus(), 3000);
        } catch (error) {
            this.showGroupMessage(`Could not start Google OAuth: ${error.message}`, 'error');
        }
    }

    async disconnectGoogleDriveOAuth() {
        if (!confirm('Disconnect the stored Google Drive OAuth token?')) return;
        try {
            const response = await fetch(`${this.backendUrl}/api/google-drive-oauth/disconnect`, { method: 'POST' });
            if (!response.ok) throw new Error(await this.readErrorMessage(response));
            this.showGroupMessage('Google Drive disconnected.', 'success');
            await this.loadGoogleDriveOAuthStatus();
        } catch (error) {
            this.showGroupMessage(`Could not disconnect Google Drive: ${error.message}`, 'error');
        }
    }

    async loadZoomAccounts() {
        const select = document.getElementById('group-zoom-account');
        if (!select) return;
        try {
            const previousValue = select.value;
            const response = await fetch(`${this.backendUrl}/api/zoom-accounts`);
            if (!response.ok) throw new Error(await this.readErrorMessage(response));
            const data = await response.json();
            const accounts = data.accounts || [];
            select.innerHTML = '';
            if (!accounts.length) {
                select.innerHTML = '<option value="">No Zoom accounts found</option>';
                return;
            }
            accounts.forEach(account => {
                const option = document.createElement('option');
                option.value = account.email;
                option.textContent = account.email;
                select.appendChild(option);
            });
            if (previousValue && accounts.some(account => account.email === previousValue)) {
                select.value = previousValue;
            }
        } catch (error) {
            console.error('Error loading Zoom accounts:', error);
            select.innerHTML = `<option value="">${this.escapeHtml(error.message)}</option>`;
        }
    }

    async loadGroups() {
        const container = document.getElementById('groups-list');
        if (!container) return;
        container.innerHTML = '<p>Loading groups...</p>';

        try {
            const response = await fetch(`${this.backendUrl}/api/groups`);
            if (!response.ok) throw new Error(await this.readErrorMessage(response));
            const data = await response.json();
            this.renderGroups(data.groups || []);
        } catch (error) {
            console.error('Error loading groups:', error);
            container.innerHTML = `<p class="error-inline">Error loading groups: ${this.escapeHtml(error.message)}</p>`;
        }
    }

    renderGroups(groups) {
        const container = document.getElementById('groups-list');
        if (!container) return;

        if (!groups.length) {
            container.innerHTML = '<p>No active groups in config.</p>';
            return;
        }

        let html = '<table class="groups-table"><thead><tr>';
        html += '<th>Title</th><th>Spreadsheet</th><th>Zoom ID</th><th>Zoom account</th><th>Ranges</th><th>Action</th>';
        html += '</tr></thead><tbody>';

        groups.forEach(group => {
            html += '<tr>';
            html += `<td>${this.escapeHtml(group.title || '')}</td>`;
            html += '<td>';
            if (group.spreadsheetUrl) {
                html += `<a href="${this.escapeHtml(group.spreadsheetUrl)}" target="_blank" rel="noreferrer">Open sheet</a>`;
            } else {
                html += '—';
            }
            html += '</td>';
            html += `<td>${this.escapeHtml(group.zoomMeetingId || '')}</td>`;
            html += `<td>${this.escapeHtml(group.zoomAccountEmail || '')}</td>`;
            html += `<td>${this.escapeHtml(group.usersRange || '')}<br>${this.escapeHtml(group.attendanceRange || '')}</td>`;
            html += `<td><button class="danger-btn" type="button" data-remove-group-index="${this.escapeHtml(group.index)}">Move to incheiate</button></td>`;
            html += '</tr>';
        });

        html += '</tbody></table>';
        container.innerHTML = html;

        container.querySelectorAll('[data-remove-group-index]').forEach(button => {
            button.addEventListener('click', () => this.removeGroup(Number(button.dataset.removeGroupIndex)));
        });
    }

    async removeGroup(index) {
        if (!Number.isInteger(index)) return;
        if (!confirm('Move this group from inDerulare to incheiate? The spreadsheet will be renamed, the recurring Zoom meeting will be deleted, and the cPanel redirect will be removed.')) return;

        this.showGroupMessage('Moving group to incheiate and cleaning up external resources...', 'info');
        try {
            const response = await fetch(`${this.backendUrl}/api/groups/${encodeURIComponent(index)}`, {
                method: 'DELETE'
            });
            if (!response.ok) throw new Error(await this.readErrorMessage(response));
            const result = await response.json();
            const cleanupFailures = result.cleanupFailures || [];
            if (cleanupFailures.length > 0) {
                const warning = cleanupFailures.map(failure => `${failure.step}: ${failure.error}`).join('; ');
                this.showGroupMessage(`Group moved to incheiate, but cleanup had warnings: ${warning}`, 'warning');
            } else {
                this.showGroupMessage('Group moved to incheiate. Spreadsheet renamed, Zoom meeting deleted, and cPanel redirect removed.', 'success');
            }
            await Promise.all([this.loadGroups(), this.loadAvailableMeetings()]);
        } catch (error) {
            console.error('Error removing group:', error);
            this.showGroupMessage(`Error moving group to incheiate: ${error.message}`, 'error');
        }
    }

    async submitAddGroup() {
        const submitButton = document.getElementById('submit-add-group');
        const form = document.getElementById('add-group-form');
        const mao = document.getElementById('group-mao')?.value || '';
        const type = document.getElementById('group-type')?.value || '';
        const groupNo = document.getElementById('group-no')?.value || '';
        const usersText = document.getElementById('group-users')?.value || '';
        const zoomAccountEmail = document.getElementById('group-zoom-account')?.value || '';

        if (submitButton) submitButton.disabled = true;
        this.showAddGroupMessage('Creating group and copying template...', 'info');

        try {
            const response = await fetch(`${this.backendUrl}/api/groups`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ mao, type, groupNo, usersText, zoomAccountEmail })
            });
            if (!response.ok) throw new Error(await this.readErrorMessage(response));
            const result = await response.json();
            const sheetUrl = result.copiedFile && result.copiedFile.webViewLink ? result.copiedFile.webViewLink : '';
            const zoomId = result.zoomMeeting && result.zoomMeeting.id ? result.zoomMeeting.id : result.entry && result.entry.zoomMeetingId ? result.entry.zoomMeetingId : '';
            const cpanelRedirect = result.cpanelRedirect || null;
            const cpanelMessage = cpanelRedirect && cpanelRedirect.success
                ? ` Redirect: ${cpanelRedirect.url}.`
                : cpanelRedirect && cpanelRedirect.error
                    ? ` cPanel redirect warning: ${cpanelRedirect.error}`
                    : '';
            this.showGroupMessage(`Group added: ${result.entry ? result.entry.title : 'new group'}${zoomId ? ` with Zoom ID ${zoomId}` : ''}.${cpanelMessage}`, cpanelRedirect && cpanelRedirect.error ? 'warning' : 'success');
            this.showAddGroupMessage(`Created successfully.${zoomId ? ` Zoom ID: ${zoomId}.` : ''}${sheetUrl ? ` Sheet: ${sheetUrl}` : ''}${cpanelMessage}`, cpanelRedirect && cpanelRedirect.error ? 'warning' : 'success');
            if (form) form.reset();
            this.closeAddGroupDialog();
            await Promise.all([this.loadGroups(), this.loadAvailableMeetings()]);
        } catch (error) {
            console.error('Error adding group:', error);
            this.showAddGroupMessage(`Error adding group: ${error.message}`, 'error');
        } finally {
            if (submitButton) submitButton.disabled = false;
        }
    }

    showGroupMessage(message, type) {
        const element = document.getElementById('groups-message');
        if (!element) return;
        element.textContent = message;
        element.className = `status-message ${type || 'info'}`;
        element.style.display = 'block';
    }

    showAddGroupMessage(message, type) {
        const element = document.getElementById('add-group-message');
        if (!element) return;
        element.textContent = message;
        element.className = `status-message ${type || 'info'}`;
        element.style.display = 'block';
    }

    async readErrorMessage(response) {
        try {
            const errorData = await response.json();
            return errorData.message || errorData.error || `HTTP error! status: ${response.status}`;
        } catch (error) {
            return `HTTP error! status: ${response.status}`;
        }
    }

    // Existing Excel/table helpers retained for compatibility.
    renderViews() {}
    createViewElement() { return document.createElement('div'); }
    async loadViewData() {}
    renderTableData() {}
    renderError() {}
    refreshView() {}
    downloadView(view) {
        alert(`Download functionality for ${view && view.title ? view.title : 'Excel View'} would be implemented here`);
    }

    async loadAvailableMeetings() {
        try {
            console.log('Loading available meetings...');
            const response = await fetch(`${this.backendUrl}/api/available-meetings`);
            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
            const data = await response.json();
            this.renderMeetingButtons(data.meetings);
        } catch (error) {
            console.error('Error loading available meetings:', error);
            const section = document.getElementById('zoom-meetings-section');
            if (section) section.style.display = 'none';
        }
    }

    renderMeetingButtons(meetings) {
        const buttonsContainer = document.getElementById('meeting-buttons');
        const section = document.getElementById('zoom-meetings-section');
        const meetingDataContainer = document.getElementById('meeting-data');
        if (!buttonsContainer || !section) return;

        if (!meetings || meetings.length === 0) {
            section.style.display = 'none';
            if (meetingDataContainer) meetingDataContainer.innerHTML = '';
            return;
        }

        section.style.display = 'block';
        buttonsContainer.innerHTML = '';

        meetings.forEach((meeting, index) => {
            const button = document.createElement('button');
            button.className = 'meeting-button';
            button.textContent = meeting.title || `Meeting ${index + 1}`;
            button.onclick = event => this.filterMeetingsByMeetingId(meeting.zoomMeetingId, meeting.title, event.currentTarget);

            if (index === 0) {
                button.classList.add('active');
                this.currentMeetingFilter = meeting.zoomMeetingId;
            }

            buttonsContainer.appendChild(button);
        });

        this.loadMeetingData(meetings[0].zoomMeetingId, meetings[0].title);
    }

    async filterMeetingsByMeetingId(meetingId, meetingTitle, activeButton) {
        console.log(`Filtering meetings by ID: ${meetingId}`);
        document.querySelectorAll('.meeting-button').forEach(btn => btn.classList.remove('active'));
        if (activeButton) activeButton.classList.add('active');
        this.currentMeetingFilter = meetingId;
        await this.loadMeetingData(meetingId, meetingTitle);
    }

    async loadMeetingData(meetingId, meetingTitle) {
        try {
            console.log(`Loading meeting data for: ${meetingId} - ${meetingTitle}`);
            const meetingDataContainer = document.getElementById('meeting-data');
            if (meetingDataContainer) meetingDataContainer.innerHTML = '<p>Loading meeting data...</p>';

            const response = await fetch(`${this.backendUrl}/api/zoom-meetings?meetingId=${encodeURIComponent(meetingId)}`);
            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
            const data = await response.json();
            this.renderMeetingData(data.meetings, meetingTitle);
        } catch (error) {
            console.error('Error loading meeting data:', error);
            const meetingDataContainer = document.getElementById('meeting-data');
            if (meetingDataContainer) meetingDataContainer.innerHTML = `<p>Error loading meeting data: ${this.escapeHtml(error.message)}</p>`;
        }
    }

    renderMeetingData(meetings, meetingTitle) {
        const meetingDataContainer = document.getElementById('meeting-data');
        if (!meetingDataContainer) return;

        if (!meetings || meetings.length === 0) {
            meetingDataContainer.innerHTML = '<p>No meetings found for this filter.</p>';
            return;
        }

        let html = `<h3>${this.escapeHtml(meetingTitle)}</h3>`;
        html += '<table class="meeting-table">';
        html += '<thead><tr><th>Topic</th><th>Start Time</th><th>Duration</th><th>Participants</th><th>Action</th></tr></thead><tbody>';

        meetings.forEach(meeting => {
            const participants = meeting.participants !== undefined && meeting.participants !== null ? meeting.participants : 0;
            const meetingId = meeting.id;
            const meetingUuid = meeting.uuid || meeting.id;
            const meetingTopic = meeting.topic || 'N/A';
            const meetingStartTime = meeting.start_time || '';
            html += '<tr>';
            html += `<td>${this.escapeHtml(meetingTopic)}</td>`;
            html += `<td>${this.escapeHtml(meetingStartTime || 'N/A')}</td>`;
            html += `<td>${this.escapeHtml(meeting.duration || 'N/A')} min</td>`;
            html += `<td>${this.escapeHtml(participants)} ${participants === 0 ? '(No participant data)' : ''}</td>`;
            html += `<td><button class="select-btn" type="button" data-meeting-uuid="${this.escapeHtml(meetingUuid)}" data-meeting-topic="${this.escapeHtml(meetingTopic)}" data-meeting-id="${this.escapeHtml(meetingId)}" data-meeting-start-time="${this.escapeHtml(meetingStartTime)}">Select</button></td>`;
            html += '</tr>';
        });

        html += '</tbody></table>';
        meetingDataContainer.innerHTML = html;
        meetingDataContainer.querySelectorAll('.select-btn').forEach(button => {
            button.addEventListener('click', () => {
                this.selectMeeting(button.dataset.meetingUuid, button.dataset.meetingTopic, button.dataset.meetingId, button.dataset.meetingStartTime);
            });
        });
    }

    showError(message) {
        const errorElement = document.getElementById('config-error');
        if (!errorElement) return;
        errorElement.style.display = 'block';
        errorElement.innerHTML = `<p>${this.escapeHtml(message)}</p>`;
    }

    selectMeeting(meetingUuid, meetingTopic, zoomMeetingId, meetingStartTime) {
        console.log(`Selected meeting occurrence: ${meetingUuid} - ${meetingTopic}`);
        this.createReport(meetingUuid, meetingTopic, zoomMeetingId, meetingStartTime);
    }

    escapeHtml(value) {
        return String(value === null || value === undefined ? '' : value)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .split('"').join('&quot;')
            .split("'").join('&#39;');
    }

    certaintyClass(certainty) {
        if (certainty >= 85) return 'certainty-high';
        if (certainty >= 65) return 'certainty-medium';
        return 'certainty-low';
    }

    extractCurlHeader(curlText, headerName) {
        const escapedName = headerName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        const regex = new RegExp(`-H\\s+["']${escapedName}\\s*:\\s*([^"']+)["']`, 'i');
        const match = curlText.match(regex);
        return match ? match[1].trim() : '';
    }

    parseZoomWebCurl(curlText) {
        const cleaned = String(curlText || '')
            .replace(/\^\r?\n/g, ' ')
            .replace(/\^/g, '')
            .replace(/\\"/g, '"')
            .trim();

        const urlMatch = cleaned.match(/https:\/\/[^\s"']+\/(?:rest\/)?account\/report\/historymeetings\/participants\/list/i);
        const cookieMatch = cleaned.match(/(?:-b|--cookie)\s+["']([^"']+)["']/i);
        const cookieHeader = this.extractCurlHeader(cleaned, 'cookie');
        const accountIdMatch = cleaned.match(/"accountId"\s*:\s*"([^"]+)"/i);
        const meetingIdMatch = cleaned.match(/"meetingId"\s*:\s*"([^"]+)"/i);
        const csrfToken = this.extractCurlHeader(cleaned, 'zoom-csrftoken');
        const userAgent = this.extractCurlHeader(cleaned, 'user-agent');
        const authorization = this.extractCurlHeader(cleaned, 'authorization');
        const zoomJwt = this.extractCurlHeader(cleaned, 'x-zm-jwt')
            || this.extractCurlHeader(cleaned, 'x-zm-token')
            || this.extractCurlHeader(cleaned, 'jwt');

        if (!urlMatch || (!cookieMatch && !cookieHeader && !authorization && !zoomJwt)) {
            throw new Error('Could not parse Zoom cURL. Make sure you pasted “Copy as cURL” from the participants/list request.');
        }

        const parsedUrl = new URL(urlMatch[0]);
        return {
            enabled: true,
            baseUrl: parsedUrl.origin,
            accountId: accountIdMatch ? accountIdMatch[1] : '',
            meetingId: meetingIdMatch ? meetingIdMatch[1] : '',
            cookie: cookieMatch ? cookieMatch[1] : cookieHeader,
            csrfToken,
            userAgent,
            authorization,
            zoomJwt
        };
    }

    getZoomWebAuthForRequest() {
        const useZoomWebAuth = document.getElementById('use-zoom-web-auth');
        if (!useZoomWebAuth || !useZoomWebAuth.checked) return null;
        const curlInput = document.getElementById('zoom-web-curl');
        const curlText = curlInput ? curlInput.value.trim() : '';
        if (curlText) return this.parseZoomWebCurl(curlText);
        return { enabled: true, source: 'stored-auth' };
    }

    async createReport(meetingUuid, meetingTopic, zoomMeetingId, meetingStartTime) {
        const meetingDataContainer = document.getElementById('meeting-data');

        try {
            console.log(`Writing attendance for meeting occurrence: ${meetingUuid}`);
            const zoomWebAuth = this.getZoomWebAuthForRequest();
            const sourceLabel = zoomWebAuth && zoomWebAuth.enabled ? 'Zoom browser unique export' : 'Public Zoom API matcher';
            console.log(`Attendance source requested: ${sourceLabel}`);
            if (meetingDataContainer) {
                meetingDataContainer.insertAdjacentHTML('beforeend', `<p id="match-loading">Calculating attendance with ${this.escapeHtml(sourceLabel)} and writing to Google Sheet...</p>`);
            }

            const url = `${this.backendUrl}/api/write-attendance?meetingUuid=${encodeURIComponent(meetingUuid)}&zoomMeetingId=${encodeURIComponent(zoomMeetingId)}&meetingTopic=${encodeURIComponent(meetingTopic)}&meetingStartTime=${encodeURIComponent(meetingStartTime || '')}`;
            const response = await fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ meetingUuid, zoomWebAuth })
            });

            if (!response.ok) throw new Error(await this.readErrorMessage(response));
            const writeResult = await response.json();
            console.log('Attendance write result received:', writeResult);
            this.renderAttendanceWriteResult(writeResult);
        } catch (error) {
            console.error('Error writing attendance:', error);
            const loading = document.getElementById('match-loading');
            if (loading) loading.remove();
            alert(`Error writing attendance: ${error.message}`);
        }
    }

    renderAttendanceWriteResult(writeResult) {
        const existingLoading = document.getElementById('match-loading');
        if (existingLoading) existingLoading.remove();

        const existingReport = document.getElementById('attendance-match-report');
        if (existingReport) existingReport.remove();

        const meetingDataContainer = document.getElementById('meeting-data');
        if (!meetingDataContainer) return;
        const rows = writeResult.writtenRows || [];
        const sheet = writeResult.sheet || {};
        const unmatchedAdded = writeResult.unmatchedAdded || [];
        const unmatchedNotAdded = writeResult.unmatchedNotAdded || [];

        let html = '<div id="attendance-match-report" class="attendance-match-report">';
        html += '<h3>Attendance written to Google Sheet</h3>';
        const source = writeResult.attendanceSource === 'zoom-internal-unique-export' ? 'Zoom browser unique export' : 'Public Zoom API matcher';
        html += `<p class="copy-hint">Date column: <strong>${this.escapeHtml(sheet.date || '')}</strong> in column <strong>${this.escapeHtml(sheet.attendanceColumn || '')}</strong>. Max attendance cap: <strong>${this.escapeHtml(sheet.maxAttendance || 'none')}</strong>.</p>`;
        html += `<p class="copy-hint">Attendance source: <strong>${this.escapeHtml(source)}</strong>.</p>`;
        html += `<p class="copy-hint">Rows written: ${this.escapeHtml(rows.length)}. New unmatched Zoom users added: ${this.escapeHtml(unmatchedAdded.length)}. Unmatched not added: ${this.escapeHtml(unmatchedNotAdded.length)}.</p>`;
        if (unmatchedNotAdded.length) {
            html += `<p class="copy-hint warn-text">Could not append unmatched Zoom users because the configured users range is full: ${this.escapeHtml(unmatchedNotAdded.map(item => item.name).join(', '))}</p>`;
        }
        html += '<table class="attendance-match-table">';
        html += '<thead><tr><th>Sheet row</th><th>Name</th><th>Minutes written</th><th>Calculated before cap</th><th>Type</th><th>Zoom name(s)</th></tr></thead><tbody>';

        rows.forEach(row => {
            html += '<tr>';
            html += `<td>${this.escapeHtml(row.row)}</td>`;
            html += `<td>${this.escapeHtml(row.name)}</td>`;
            html += `<td>${this.escapeHtml(row.minutes)}${row.capped ? ' (capped)' : ''}</td>`;
            html += `<td>${this.escapeHtml(row.originalCalculatedMinutes)}</td>`;
            html += `<td>${row.matched ? 'Matched user' : 'Added unmatched Zoom user'}</td>`;
            html += `<td>${this.escapeHtml((row.zoomNames || []).join(', ') || '—')}</td>`;
            html += '</tr>';
        });

        html += '</tbody></table></div>';
        meetingDataContainer.insertAdjacentHTML('beforeend', html);
        document.getElementById('attendance-match-report').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}

function selectMeeting(meetingUuid, meetingTopic, zoomMeetingId) {
    if (window.secureViewer) {
        window.secureViewer.selectMeeting(meetingUuid, meetingTopic, zoomMeetingId);
    } else {
        console.error('Secure viewer not initialized');
    }
}

document.addEventListener('DOMContentLoaded', () => {
    window.secureViewer = new SecureExcelViewer();
});