document.addEventListener('DOMContentLoaded', () => {
    // Prevent multiple event listener attachments
    if (window.sentinelproSettingsFormHandlerAttached) {
        return;
    }
    window.sentinelproSettingsFormHandlerAttached = true;
    
    const form = document.querySelector('#sentinelpro-settings-form');
    const propertyInput = document.querySelector('input[name="vasp_options[property_id]"]');
    const accountNameInput = document.querySelector('input[name="vasp_options[account_name]"]');
    const apiKeyInput = document.querySelector('input[name="vasp_options[api_key]"]');
    const enableTrackingCheckbox = document.querySelector('input[name="vasp_options[enable_tracking]"][type="checkbox"]');

    if (!form || !propertyInput || !accountNameInput || !apiKeyInput) {
        return;
    }

    if (!window.SentinelProAuth) {
        return;
    }
    
    // Track if we're currently processing a submission to prevent duplicate alerts
    let isSubmitting = false;
    
    // Add real-time validation - clear errors when user starts typing
    [propertyInput, accountNameInput, apiKeyInput].forEach(input => {
        if (input) {
            input.addEventListener('input', function() {
                const fieldId = this.id;
                const existingError = this.parentNode.querySelector('.field-error');
                if (existingError && this.value.trim()) {
                    existingError.remove();
                    this.style.borderColor = '';
                }
            });
        }
    });

    // Function to show field validation error
    function showFieldError(fieldId, message) {
        const field = document.getElementById(fieldId);
        if (!field) return;
        
        // Remove any existing error message
        const existingError = field.parentNode.querySelector('.field-error');
        if (existingError) {
            existingError.remove();
        }
        
        // Create error message element
        const errorDiv = document.createElement('div');
        errorDiv.className = 'field-error';
        errorDiv.style.cssText = 'color: #dc3232; font-size: 13px; margin-top: 4px; font-weight: 500;';
        errorDiv.textContent = message;
        
        // Insert error message after the field
        field.parentNode.appendChild(errorDiv);
        
        // Add error styling to the field
        field.style.borderColor = '#dc3232';
    }
    
    // Function to clear all validation errors
    function clearValidationErrors() {
        // Remove all error messages
        document.querySelectorAll('.field-error').forEach(error => error.remove());
        
        // Reset field borders
        document.querySelectorAll('#property_id, #account_name, #api_key').forEach(field => {
            field.style.borderColor = '';
        });
    }
    
    // Function to detect user's timezone
    function detectUserTimezone() {
        try {
            // Get the user's timezone using Intl.DateTimeFormat
            const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
            return userTimezone;
        } catch (error) {
            return null;
        }
    }

    // Utility to fetch clearance from backend
    async function fetchClearanceLevel() {
        const response = await fetch(SentinelProClearance.ajax_url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: new URLSearchParams({
                action: 'vasp_get_clearance',
                nonce: SentinelProClearance.nonce
            })
        });
        const data = await response.json();
        return data.success ? data.data.clearance : 'restricted';
    }

    // Function to set clearance level via AJAX
    async function setClearanceLevelViaAJAX(level) {
        try {
            const response = await fetch(SentinelProClearance.ajax_url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: new URLSearchParams({
                    action: 'vasp_set_clearance',
                    clearance: level,
                    nonce: SentinelProClearance.nonce
                })
            });
            const data = await response.json();
            if (data.success) {
                // Clearance level set successfully
            }
        } catch (error) {
            // Error setting clearance level
        }
    }

    form.addEventListener('submit', async function (e) {
    e.preventDefault(); // ⛔ Prevent native form submit
    
    // Prevent duplicate submissions
    if (isSubmitting) {
        return;
    }
    isSubmitting = true;

    // Extract values from form fields with vasp_options[field_name] format
    const propertyID = propertyInput.value.trim();
    const accountName = accountNameInput.value.trim();
    const apiKey = apiKeyInput.value.trim();
    const enableTracking = enableTrackingCheckbox.checked ? '1' : '0';

    // Clear any existing error messages
    clearValidationErrors();
    
    let hasErrors = false;
    
    // Validate each field and show inline errors
    if (!propertyID) {
        showFieldError('property_id', 'Property ID is required');
        hasErrors = true;
    }
    
    if (!accountName) {
        showFieldError('account_name', 'Account Name is required');
        hasErrors = true;
    }
    
    if (!apiKey) {
        showFieldError('api_key', 'API Key is required');
        hasErrors = true;
    }
    
    if (hasErrors) {
        // Set clearance to restricted via AJAX
        // We know it will be 'restricted' after setting it, so no need to fetch
        await fetch(SentinelProClearance.ajax_url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: new URLSearchParams({
                action: 'vasp_set_clearance',
                clearance: 'restricted',
                nonce: SentinelProClearance.nonce
            })
        });
        // No need to fetch - we just set it to 'restricted'
        isSubmitting = false; // Reset flag before returning
        return;
    }

    // 🔍 Auto-detect timezone before submitting
    const detectedTimezone = detectUserTimezone();

    // Debug: Log the data being sent
    const requestData = {
        action: 'vasp_save_auth',
        plan: 'basic',
        token: apiKey,
        property_id: propertyID,
        account_name: accountName,
        user_id: '', // Optional — can be current user
        nonce: SentinelProAuth.nonce,
        enable_tracking: enableTracking,
        cron_timezone: detectedTimezone // 🕐 Add detected timezone
    };

    try {
        const response = await fetch(SentinelProAuth.ajax_url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: new URLSearchParams({
                action: 'vasp_save_auth',
                plan: 'basic',
                token: apiKey,
                property_id: propertyID,
                account_name: accountName,
                user_id: '', // Optional — can be current user
                nonce: SentinelProAuth.nonce,
                enable_tracking: enableTracking,
                cron_timezone: detectedTimezone // 🕐 Add detected timezone
            })
        });

        const responseText = await response.text();
        
        let data;
        try {
            data = JSON.parse(responseText);
        } catch (parseError) {
            alert('❌ Invalid response from server. Please check console for details.');
            return;
        }

        // 🔄 Set clearance level from response
        // Check for access restricted message in both 200 and 403 responses
        if (response.status === 200 && data.success === false && data.data && data.data.message) {
            const message = data.data.message.toLowerCase();
            
            if (message.includes('access restricted') || message.includes('access is restricted')) {
                // Handle access restricted message - set to elevated
                
                // Set clearance level to elevated using the existing function
                if (window.EnhancedDashboardInstance && typeof window.EnhancedDashboardInstance.setClearanceLevel === 'function') {
                    window.EnhancedDashboardInstance.setClearanceLevel('elevated');
                } else {
                    // Fallback: use AJAX to set clearance level
                    setClearanceLevelViaAJAX('elevated');
                }
                
                // Show user-friendly message
                alert('🚫 Access is restricted. Your clearance level has been set to "elevated". You can still use the tracking script on the frontend, but access to other plugin pages is limited.');
                
                // Use the redirect URL from server response if available
                if (data.data.redirect) {
                    window.location.href = data.data.redirect;
                } else {
                    // Fallback: construct the admin URL
                    const currentUrl = window.location.href;
                    const adminBase = currentUrl.substring(0, currentUrl.indexOf('/wp-admin/') + 10);
                    const fallbackUrl = adminBase + 'admin.php?page=sentinelpro-api-input';
                    window.location.href = fallbackUrl;
                }
                return; // Prevent further execution
                
            } else if (message.includes('property not found') || message.includes('invalid credentials')) {
                // Handle property not found or invalid credentials - set to restricted
                
                // Set clearance level to restricted
                if (window.EnhancedDashboardInstance && typeof window.EnhancedDashboardInstance.setClearanceLevel === 'function') {
                    window.EnhancedDashboardInstance.setClearanceLevel('restricted');
                } else {
                    // Fallback: use AJAX to set clearance level
                    setClearanceLevelViaAJAX('restricted');
                }
                
                // Show user-friendly message
                alert('❌ Invalid credentials or property not found. Your clearance level has been set to "restricted". Please check your API credentials and property ID.');
                
                // Stay on current page for restricted users
                return; // Prevent further execution
                
            } else {
                // Handle other error types
                
                // For unknown errors, set to restricted as a safety measure
                if (window.EnhancedDashboardInstance && typeof window.EnhancedDashboardInstance.setClearanceLevel === 'function') {
                    window.EnhancedDashboardInstance.setClearanceLevel('restricted');
                } else {
                    setClearanceLevelViaAJAX('restricted');
                }
                
                alert('⚠️ An error occurred while saving settings. Your clearance level has been set to "restricted" for security.');
                return;
            }
        } else if (response.status === 200 && data.message === '🚫 Access is restricted, elevated access applied.') {
            // localStorage.setItem('sentinelpro_clearance', 'elevated');
        } else if (response.status === 200) {
            // localStorage.setItem('sentinelpro_clearance', 'admin');
        } else if (response.status === 403) {
            // Handle 403 "Access is restricted" error by setting clearance to elevated
            if (data.message && data.message.match(/access is restricted/i)) {
                // Set clearance level to elevated using the existing function
                if (window.EnhancedDashboardInstance && typeof window.EnhancedDashboardInstance.setClearanceLevel === 'function') {
                    window.EnhancedDashboardInstance.setClearanceLevel('elevated');
                } else {
                    // Fallback: use AJAX to set clearance level
                    setClearanceLevelViaAJAX('elevated');
                }
                
                // Show user-friendly message
                alert('🚫 Access is restricted. Your clearance level has been set to "elevated". You can still use the tracking script on the frontend, but access to other plugin pages is limited.');
                
                // Redirect to API input page since user is now elevated
                const currentUrl = window.location.href;
                const adminBase = currentUrl.substring(0, currentUrl.indexOf('/wp-admin/') + 10);
                const redirectUrl = adminBase + 'admin.php?page=sentinelpro-api-input';
                window.location.href = redirectUrl;
                return; // Prevent further execution
            }
            
            // Handle other 403 errors
            alert('❌ Access denied: ' + (data.message || 'Insufficient permissions'));
            return;
        } else {
            // localStorage.setItem('sentinelpro_clearance', 'restricted');
        }

        // ✅ Clear cache and update dashboard state
        localStorage.setItem('sentinelpro_last_property', propertyID);
        localStorage.setItem('sentinelpro_property_dirty', 'true');
        Object.keys(localStorage).forEach(key => {
        if (key.startsWith('sentinelpro_data_cache_')) {
            localStorage.removeItem(key);
        }
    });

    if (data.success) {
        // Get clearance from save response (avoids extra AJAX call)
        // The response already includes clearance in data.data.clearance
        const newClearance = data.data?.clearance || await fetchClearanceLevel();

        // Extract message from response (WordPress wp_send_json_success wraps data in data.data)
        const successMessage = data.data?.message || data.message || '✅ Settings saved successfully!';

        // Show success message using WordPress admin notice style
        const noticeDiv = document.createElement('div');
        noticeDiv.className = 'notice notice-success is-dismissible';
        noticeDiv.style.cssText = 'position: fixed; top: 32px; left: 50%; transform: translateX(-50%); z-index: 100000; max-width: 600px; padding: 12px 20px; margin: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.2);';
        noticeDiv.innerHTML = '<p style="margin: 0; font-weight: 600;">' + successMessage + '</p>';
        document.body.appendChild(noticeDiv);
        
        // Delay redirect/reload to allow user to see the success message (3 seconds)
        const redirectDelay = 3000;

        // Check if user is elevated or restricted and redirect to api-input page
        if (newClearance === 'elevated' || newClearance === 'restricted') {
            // Use the redirect URL from server response if available, otherwise construct it
            setTimeout(() => {
                if (data.data?.redirect || data.redirect) {
                    window.location.href = data.data?.redirect || data.redirect;
                } else {
                    // Fallback: construct the admin URL
                    const currentUrl = window.location.href;
                    const adminBase = currentUrl.substring(0, currentUrl.indexOf('/wp-admin/') + 10);
                    const fallbackUrl = adminBase + 'admin.php?page=sentinelpro-api-input';
                    window.location.href = fallbackUrl;
                }
            }, redirectDelay);
            return; // Prevent further execution
        }

        // Check if there's a redirect URL (for admin users)
        const redirectUrl = data.data?.redirect || data.redirect;
        if (redirectUrl && newClearance === 'admin') {
            // Check if redirect is to the same page - if so, just reload instead
            const currentUrl = window.location.href.split('?')[0]; // Remove query params for comparison
            const redirectUrlClean = redirectUrl.split('?')[0];
            
            setTimeout(() => {
                if (currentUrl === redirectUrlClean) {
                    // Same page - just reload
                    location.reload();
                } else {
                    // Different page - redirect
                    window.location.href = redirectUrl;
                }
            }, redirectDelay);
            return; // 🚨 Prevent any further execution
        }

        // Default: Reload (no redirect)
        setTimeout(() => {
            location.reload();
        }, redirectDelay);

    } else {
        // Get clearance from error response (avoids extra AJAX call)
        // The error response also includes clearance in data.data.clearance
        const newClearance = data.data?.clearance || await fetchClearanceLevel();

        // Extract message from response (WordPress wp_send_json_error wraps data in data.data)
        const errorMessage = data.data?.message || data.message || 'Save failed';

        // Check if user is elevated or restricted and redirect to api-input page
        if (newClearance === 'elevated' || newClearance === 'restricted') {
            alert(errorMessage);
            // Use the redirect URL from server response if available, otherwise construct it
            if (data.data?.redirect || data.redirect) {
                window.location.href = data.data?.redirect || data.redirect;
            } else {
                // Fallback: construct the admin URL
                const currentUrl = window.location.href;
                const adminBase = currentUrl.substring(0, currentUrl.indexOf('/wp-admin/') + 10);
                const fallbackUrl = adminBase + 'admin.php?page=sentinelpro-api-input';
                window.location.href = fallbackUrl;
            }
            return; // Prevent further execution
        }

        if ((data.data?.redirect || data.redirect) && newClearance === 'admin') {
            alert(errorMessage);
            window.location.href = data.data?.redirect || data.redirect;
            return; // 🚨 Prevent reload or alert after demotion
        }

        if (newClearance === 'elevated') {
            alert(errorMessage);
        } else {
            // Show the specific error message from the server
            alert('❌ ' + errorMessage);
        }
        // Small delay to ensure alert is visible before reload
        setTimeout(() => {
            location.reload();
        }, 100);
    }




    } catch (err) {
        alert('Unexpected error during save: ' + err.message);
    }
  });
});