// Mobile menu functionality
let mobileMenuToggleHandler;
let mobileMenuCloseHandler;
let mobileToggleHandlers = [];

function init() {
    console.log('Initializing contact page functionality...');
    
    // Mobile menu toggle functionality
    const mobileMenuButton = document.querySelector('[data-landingsite-mobile-menu-toggle]');
    const mobileMenu = document.querySelector('[data-landingsite-mobile-menu]');
    const mobileMenuClose = document.querySelector('.mobile-menu-close');

    if (mobileMenuButton && mobileMenu) {
        mobileMenuToggleHandler = function() {
            // Toggle visibility
            mobileMenu.classList.toggle('hidden');
            
            // Update transform and opacity
            if (mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.add('translate-y-full', 'opacity-0');
            } else {
                mobileMenu.classList.remove('translate-y-full', 'opacity-0');
            }
            
            // Update aria-expanded
            const isExpanded = !mobileMenu.classList.contains('hidden');
            mobileMenuButton.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
            
            // Toggle body scroll
            if (isExpanded) {
                document.body.style.overflow = 'hidden';
            } else {
                document.body.style.overflow = '';
            }
        };

        mobileMenuButton.addEventListener('click', mobileMenuToggleHandler);
    }

    if (mobileMenuClose && mobileMenu && mobileMenuButton) {
        mobileMenuCloseHandler = function() {
            mobileMenu.classList.add('hidden', 'translate-y-full', 'opacity-0');
            document.body.style.overflow = '';
            mobileMenuButton.setAttribute('aria-expanded', 'false');
        };

        mobileMenuClose.addEventListener('click', mobileMenuCloseHandler);
    }

    // Mobile section toggles
    const mobileSectionToggles = document.querySelectorAll('.mobile-section-toggle');
    
    mobileSectionToggles.forEach(toggle => {
        const toggleHandler = function() {
            const section = this.dataset.section;
            const content = document.querySelector(`[data-content="${section}"]`);
            const chevron = this.querySelector('i.fa-chevron-down');
            
            if (content) {
                content.classList.toggle('hidden');
                if (chevron) {
                    chevron.classList.toggle('rotate-180');
                }
            }
        };
        
        toggle.addEventListener('click', toggleHandler);
        mobileToggleHandlers.push({ element: toggle, handler: toggleHandler });
    });

    // Close mobile menu on escape key
    const escapeHandler = function(e) {
        if (e.key === 'Escape' && mobileMenu && !mobileMenu.classList.contains('hidden')) {
            if (mobileMenuCloseHandler) {
                mobileMenuCloseHandler();
            }
        }
    };
    document.addEventListener('keydown', escapeHandler);
    mobileToggleHandlers.push({ element: document, handler: escapeHandler, event: 'keydown' });

    // Make call and email boxes functional
    initializeContactBoxes();

    // Initialize professional registration form
    initializeProfessionalRegistrationForm();

    // Enhanced contact form functionality
    const contactForms = document.querySelectorAll('[data-landingsite-contact-form]');
    contactForms.forEach(form => {
        const formHandler = function(e) {
            // Let the default form handling work, but add success feedback
            const submitButton = form.querySelector('button[type="submit"]');
            if (submitButton) {
                const originalText = submitButton.textContent;
                submitButton.textContent = 'Submitting...';
                submitButton.disabled = true;
                
                // Reset after delay (the built-in handler will manage the actual submission)
                setTimeout(() => {
                    submitButton.textContent = originalText;
                    submitButton.disabled = false;
                }, 3000);
            }
        };
        
        form.addEventListener('submit', formHandler);
        mobileToggleHandlers.push({ element: form, handler: formHandler, event: 'submit' });
    });

    // Add smooth scrolling for anchor links
    const anchorLinks = document.querySelectorAll('a[href^="#"]');
    anchorLinks.forEach(link => {
        const scrollHandler = function(e) {
            const targetId = this.getAttribute('href').substring(1);
            const targetElement = document.getElementById(targetId);
            
            if (targetElement) {
                e.preventDefault();
                
                // Close mobile menu if open
                if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
                    mobileMenuCloseHandler();
                }
                
                // Smooth scroll to target
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        };
        
        link.addEventListener('click', scrollHandler);
        mobileToggleHandlers.push({ element: link, handler: scrollHandler });
    });

    // Add quick action button functionality for demonstration
    const quickActionButtons = document.querySelectorAll('.bg-gradient-to-br[href*="#"]');
    quickActionButtons.forEach(button => {
        const quickHandler = function(e) {
            const href = this.getAttribute('href');
            if (href === '#professional-registration') {
                e.preventDefault();
                const registrationSection = document.querySelector('#sgirrq') || document.querySelector('[id*="registration"]');
                if (registrationSection) {
                    registrationSection.scrollIntoView({ behavior: 'smooth' });
                } else {
                    // Redirect to registration page if section not found
                    window.location.href = '/register';
                }
            }
        };
        
        button.addEventListener('click', quickHandler);
        mobileToggleHandlers.push({ element: button, handler: quickHandler });
    });

    console.log('Contact page functionality initialized successfully!');
}

// Initialize call and email boxes functionality
function initializeContactBoxes() {
    console.log('Initializing contact boxes...');
    
    // Find all phone numbers and make them clickable
    const phoneNumbers = ['+256 774 685 161', '0704 482 099', '+256 704 482 099'];
    const emails = ['professionals@serenecreations.org', 'info@serenecreations.org'];
    
    // Make phone numbers clickable
    phoneNumbers.forEach(phone => {
        // Find elements containing this phone number
        const elements = findElementsContainingText(phone);
        elements.forEach(el => {
            if (!el.querySelector('a[href^="tel:"]')) { // Don't double-wrap
                el.style.cursor = 'pointer';
                el.classList.add('hover:text-blue-600', 'transition-colors', 'duration-200');
                
                const clickHandler = function(e) {
                    e.stopPropagation();
                    window.location.href = `tel:${phone.replace(/\s/g, '')}`;
                    showSuccessMessage(this, `Calling ${phone}...`);
                };
                
                el.addEventListener('click', clickHandler);
                mobileToggleHandlers.push({ element: el, handler: clickHandler });
            }
        });
    });
    
    // Make email addresses clickable
    emails.forEach(email => {
        const elements = findElementsContainingText(email);
        elements.forEach(el => {
            if (!el.querySelector('a[href^="mailto:"]')) { // Don't double-wrap
                el.style.cursor = 'pointer';
                el.classList.add('hover:text-blue-600', 'transition-colors', 'duration-200');
                
                const clickHandler = function(e) {
                    e.stopPropagation();
                    window.location.href = `mailto:${email}`;
                    showSuccessMessage(this, `Opening email to ${email}...`);
                };
                
                el.addEventListener('click', clickHandler);
                mobileToggleHandlers.push({ element: el, handler: clickHandler });
            }
        });
    });
    
    // Add specific handlers for contact info cards
    const contactCards = document.querySelectorAll('[class*="card"], [class*="contact"]');
    contactCards.forEach(card => {
        const cardText = card.textContent;
        
        // Check if card contains phone number
        const hasPhone = phoneNumbers.some(phone => cardText.includes(phone));
        if (hasPhone) {
            const phone = phoneNumbers.find(p => cardText.includes(p));
            card.style.cursor = 'pointer';
            card.classList.add('hover:bg-gray-50', 'transition-colors', 'duration-200');
            
            const phoneClickHandler = function() {
                window.location.href = `tel:${phone.replace(/\s/g, '')}`;
                showSuccessMessage(this, `Calling ${phone}...`);
            };
            
            card.addEventListener('click', phoneClickHandler);
            mobileToggleHandlers.push({ element: card, handler: phoneClickHandler });
        }
        
        // Check if card contains email
        const hasEmail = emails.some(email => cardText.includes(email));
        if (hasEmail) {
            const email = emails.find(e => cardText.includes(e));
            card.style.cursor = 'pointer';
            card.classList.add('hover:bg-gray-50', 'transition-colors', 'duration-200');
            
            const emailClickHandler = function() {
                window.location.href = `mailto:${email}`;
                showSuccessMessage(this, `Opening email to ${email}...`);
            };
            
            card.addEventListener('click', emailClickHandler);
            mobileToggleHandlers.push({ element: card, handler: emailClickHandler });
        }
    });
    
    console.log('Contact boxes initialized successfully');
}

// Initialize professional registration form
function initializeProfessionalRegistrationForm() {
    console.log('Initializing professional registration form...');
    
    const professionalForm = document.querySelector('#sgirrq form[data-landingsite-contact-form]');
    if (!professionalForm) {
        console.log('Professional registration form not found');
        return;
    }
    
    // Add form type identifier
    let formTypeInput = professionalForm.querySelector('input[name="form_type"]');
    if (!formTypeInput) {
        formTypeInput = document.createElement('input');
        formTypeInput.type = 'hidden';
        formTypeInput.name = 'form_type';
        formTypeInput.value = 'professional_registration';
        professionalForm.appendChild(formTypeInput);
    }
    
    // Add enhanced validation
    const inputs = professionalForm.querySelectorAll('input[required], select[required], textarea[required]');
    inputs.forEach(input => {
        const validationHandler = function() {
            if (input.hasAttribute('required')) {
                if (!input.value.trim()) {
                    input.classList.add('border-red-500');
                    showValidationError(input, 'This field is required');
                } else {
                    input.classList.remove('border-red-500');
                    hideValidationError(input);
                    
                    // Email validation
                    if (input.type === 'email' && input.value) {
                        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                        if (!emailRegex.test(input.value)) {
                            input.classList.add('border-red-500');
                            showValidationError(input, 'Please enter a valid email address');
                        } else {
                            input.classList.remove('border-red-500');
                            hideValidationError(input);
                        }
                    }
                    
                    // Phone validation
                    if (input.type === 'tel' && input.value) {
                        const phoneRegex = /^[\+]?[0-9\s\-\(\)]{8,}$/;
                        if (!phoneRegex.test(input.value)) {
                            input.classList.add('border-yellow-500');
                            showValidationError(input, 'Please ensure phone number is correct', 'warning');
                        } else {
                            input.classList.remove('border-yellow-500');
                            hideValidationError(input);
                        }
                    }
                }
            }
        };
        
        input.addEventListener('blur', validationHandler);
        mobileToggleHandlers.push({ element: input, handler: validationHandler, event: 'blur' });
        
        // Add focus styling
        const focusHandler = function() {
            this.classList.add('ring-2', 'ring-blue-500', 'border-blue-500');
        };
        
        const blurHandler = function() {
            this.classList.remove('ring-2', 'ring-blue-500', 'border-blue-500');
        };
        
        input.addEventListener('focus', focusHandler);
        input.addEventListener('blur', blurHandler);
        
        mobileToggleHandlers.push({ element: input, handler: focusHandler, event: 'focus' });
        mobileToggleHandlers.push({ element: input, handler: blurHandler, event: 'blur' });
    });
    
    // Add form submission success handling
    const submitHandler = function(e) {
        // Add loading state
        const submitButton = professionalForm.querySelector('button[type="submit"]');
        if (submitButton) {
            const originalText = submitButton.innerHTML;
            submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Submitting Application...';
            submitButton.disabled = true;
            
            // Validation check
            let hasErrors = false;
            inputs.forEach(input => {
                if (input.hasAttribute('required') && !input.value.trim()) {
                    input.classList.add('border-red-500');
                    showValidationError(input, 'This field is required');
                    hasErrors = true;
                }
            });
            
            // Check terms acceptance
            const termsCheckbox = professionalForm.querySelector('input[name="terms_accepted"]');
            if (termsCheckbox && !termsCheckbox.checked) {
                showSuccessMessage(termsCheckbox.closest('div'), 'Please accept the terms and conditions', 'error');
                hasErrors = true;
            }
            
            if (hasErrors) {
                e.preventDefault();
                submitButton.innerHTML = originalText;
                submitButton.disabled = false;
                showSuccessMessage(submitButton, 'Please correct the errors above', 'error');
                return;
            }
            
            // Add success message after successful submission
            setTimeout(() => {
                if (!hasErrors) {
                    showSuccessMessage(submitButton, 'Application submitted successfully! We will review it within 24-48 hours.');
                    
                    // Reset form after delay
                    setTimeout(() => {
                        professionalForm.reset();
                        submitButton.innerHTML = originalText;
                        submitButton.disabled = false;
                    }, 3000);
                } else {
                    submitButton.innerHTML = originalText;
                    submitButton.disabled = false;
                }
            }, 1000);
        }
    };
    
    professionalForm.addEventListener('submit', submitHandler);
    mobileToggleHandlers.push({ element: professionalForm, handler: submitHandler, event: 'submit' });
    
    console.log('Professional registration form initialized successfully');
}

// Helper function to find elements containing specific text
function findElementsContainingText(text) {
    const walker = document.createTreeWalker(
        document.body,
        NodeFilter.SHOW_TEXT,
        null,
        false
    );
    
    const elements = [];
    let node;
    
    while (node = walker.nextNode()) {
        if (node.textContent.includes(text)) {
            // Get the parent element
            let parent = node.parentElement;
            if (parent && !elements.includes(parent)) {
                elements.push(parent);
            }
        }
    }
    
    return elements;
}

// Show validation error
function showValidationError(input, message, type = 'error') {
    hideValidationError(input);
    
    const errorEl = document.createElement('div');
    errorEl.className = `validation-error text-sm mt-1 ${type === 'warning' ? 'text-yellow-500' : 'text-red-500'}`;
    errorEl.textContent = message;
    
    input.parentNode.appendChild(errorEl);
}

// Hide validation error
function hideValidationError(input) {
    const errorEl = input.parentNode.querySelector('.validation-error');
    if (errorEl) {
        errorEl.remove();
    }
}

// Show success/error messages
function showSuccessMessage(element, message, type = 'success') {
    // Create or update message element
    let messageEl = document.querySelector('.temp-message');
    
    if (!messageEl) {
        messageEl = document.createElement('div');
        messageEl.className = 'temp-message fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform duration-300';
        document.body.appendChild(messageEl);
    }
    
    // Set color based on type
    messageEl.className = messageEl.className.replace(/bg-\w+-500/g, '');
    messageEl.classList.add(type === 'error' ? 'bg-red-500' : type === 'warning' ? 'bg-yellow-500' : 'bg-green-500');
    messageEl.classList.add('text-white');
    
    messageEl.textContent = message;
    messageEl.style.transform = 'translateX(0)';
    
    // Hide after 4 seconds
    setTimeout(() => {
        messageEl.style.transform = 'translateX(100%)';
        setTimeout(() => {
            if (messageEl.parentNode) {
                messageEl.parentNode.removeChild(messageEl);
            }
        }, 300);
    }, 4000);
}

function teardown() {
    const mobileMenuButton = document.querySelector('[data-landingsite-mobile-menu-toggle]');
    const mobileMenuClose = document.querySelector('.mobile-menu-close');
    
    if (mobileMenuButton && mobileMenuToggleHandler) {
        mobileMenuButton.removeEventListener('click', mobileMenuToggleHandler);
    }
    
    if (mobileMenuClose && mobileMenuCloseHandler) {
        mobileMenuClose.removeEventListener('click', mobileMenuCloseHandler);
    }
    
    // Remove all toggle handlers
    mobileToggleHandlers.forEach(({ element, handler, event }) => {
        element.removeEventListener(event || 'click', handler);
    });
    
    mobileToggleHandlers = [];
    
    // Reset body overflow
    document.body.style.overflow = '';
    
    // Remove any temporary messages
    const tempMessages = document.querySelectorAll('.temp-message, .validation-error');
    tempMessages.forEach(msg => {
        if (msg.parentNode) {
            msg.parentNode.removeChild(msg);
        }
    });
    
    console.log('Contact page teardown complete');
}

export { init, teardown };