// Registration page JavaScript functionality
let registrationHandlers = {};
let mobileMenuHandlers = {};

function showConfirmationMessage(serviceType) {
    const messages = {
        quote_request: {
            title: "Quote Request Submitted Successfully!",
            message: "Thank you for requesting a quote. Our team will review your requirements and send you competitive quotes from verified professionals within 24-48 hours.",
            icon: "fas fa-quote-left",
            color: "from-[var(--primary-color)] to-[var(--accent2-color)]"
        },
        consultation_booking: {
            title: "Consultation Booking Received!",
            message: "Your FREE consultation request has been received. Our expert team will contact you within 24 hours to schedule your consultation at your preferred time.",
            icon: "fas fa-calendar-check",
            color: "from-[var(--accent-color)] to-[var(--accent4-color)]"
        },
        help_request: {
            title: "Help Request Submitted!",
            message: "We've received your help request and understand the priority level. Our support team will respond within the timeframe specified for your priority level.",
            icon: "fas fa-headset",
            color: "from-[var(--accent3-color)] to-[var(--primary-color)]"
        }
    };

    const config = messages[serviceType] || messages.help_request;

    // Create modal overlay
    const overlay = document.createElement('div');
    overlay.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4';
    
    // Create modal content
    overlay.innerHTML = `
        <div class="bg-white rounded-3xl p-8 max-w-md w-full mx-auto shadow-2xl transform animate-pulse">
            <div class="text-center">
                <div class="w-20 h-20 bg-gradient-to-r ${config.color} rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="${config.icon} text-white text-3xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">${config.title}</h3>
                <p class="text-[var(--gray-text-color)] mb-8 leading-relaxed">${config.message}</p>
                <div class="bg-gradient-to-r from-[var(--primary-color)]/10 to-[var(--accent2-color)]/10 rounded-2xl p-4 mb-6">
                    <p class="text-[var(--primary-color)] font-semibold text-sm">
                        <i class="fas fa-envelope mr-2"></i>
                        A confirmation email has been sent to your provided email address
                    </p>
                </div>
                <button onclick="closeConfirmationModal()" class="w-full bg-gradient-to-r ${config.color} text-white font-bold py-3 px-6 rounded-xl hover:shadow-lg transition-all duration-300">
                    <i class="fas fa-check mr-2"></i>Got it, Thank You!
                </button>
            </div>
        </div>
    `;

    document.body.appendChild(overlay);
}

function closeConfirmationModal() {
    const overlay = document.querySelector('.fixed.inset-0.bg-black.bg-opacity-50');
    if (overlay) {
        overlay.remove();
    }
}

function handleFormSubmission(form) {
    const serviceType = form.querySelector('input[name="service_type"]')?.value || 'help_request';
    
    // Show loading state
    const submitButton = form.querySelector('button[type="submit"]');
    const originalText = submitButton.innerHTML;
    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Submitting...';
    submitButton.disabled = true;

    // Simulate form submission delay
    setTimeout(() => {
        // Reset button
        submitButton.innerHTML = originalText;
        submitButton.disabled = false;
        
        // Clear form
        form.reset();
        
        // Show confirmation
        showConfirmationMessage(serviceType);
    }, 2000);
}

function setupNewsletterSignup() {
    const newsletterForms = document.querySelectorAll('form:has(input[type="email"][placeholder*="email"])');
    
    newsletterForms.forEach(form => {
        const submitHandler = (e) => {
            e.preventDefault();
            const emailInput = form.querySelector('input[type="email"]');
            const email = emailInput.value;
            
            if (email) {
                // Show newsletter thank you message
                showNewsletterThankYou(email);
                form.reset();
            }
        };

        // Remove existing listener if it exists
        if (registrationHandlers.newsletter) {
            form.removeEventListener('submit', registrationHandlers.newsletter);
        }
        
        // Add new listener
        form.addEventListener('submit', submitHandler);
        registrationHandlers.newsletter = submitHandler;
    });
}

function showNewsletterThankYou(email) {
    // Create modal overlay
    const overlay = document.createElement('div');
    overlay.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4';
    
    overlay.innerHTML = `
        <div class="bg-white rounded-3xl p-8 max-w-md w-full mx-auto shadow-2xl">
            <div class="text-center">
                <div class="w-20 h-20 bg-gradient-to-r from-green-500 to-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-envelope-open-text text-white text-3xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">Thank You for Subscribing!</h3>
                <p class="text-[var(--gray-text-color)] mb-6 leading-relaxed">
                    Dear Valued Client,<br><br>
                    Thank you for subscribing to Serene Creations Limited newsletter! We're excited to have you in our community.
                </p>
                <div class="bg-gradient-to-r from-[var(--primary-color)]/10 to-[var(--accent2-color)]/10 rounded-2xl p-4 mb-6">
                    <p class="text-[var(--primary-color)] font-semibold text-sm">
                        <i class="fas fa-check-circle mr-2"></i>
                        A welcome email has been sent to: <strong>${email}</strong>
                    </p>
                </div>
                <div class="text-left bg-gray-50 rounded-xl p-4 mb-6">
                    <h4 class="font-semibold text-[var(--primary-color)] mb-2">You'll receive:</h4>
                    <ul class="text-sm text-[var(--gray-text-color)] space-y-1">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Latest construction industry insights</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Professional development opportunities</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Exclusive partnership updates</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Company news and achievements</li>
                    </ul>
                </div>
                <button onclick="closeConfirmationModal()" class="w-full bg-gradient-to-r from-[var(--primary-color)] to-[var(--accent2-color)] text-white font-bold py-3 px-6 rounded-xl hover:shadow-lg transition-all duration-300">
                    <i class="fas fa-thumbs-up mr-2"></i>Awesome, Thank You!
                </button>
            </div>
        </div>
    `;

    document.body.appendChild(overlay);
}

function setupMobileMenuDropdowns() {
    // Setup mobile menu section toggles with enhanced functionality
    const mobileMenuToggles = document.querySelectorAll('.mobile-section-toggle');
    
    mobileMenuToggles.forEach(toggle => {
        const sectionName = toggle.getAttribute('data-section');
        
        const clickHandler = (e) => {
            e.preventDefault();
            e.stopPropagation();
            
            const content = document.querySelector(`.mobile-section-content[data-content="${sectionName}"]`);
            const chevron = toggle.querySelector('i.fa-chevron-down');
            
            if (content && chevron) {
                // Toggle the content visibility
                content.classList.toggle('hidden');
                
                // Rotate the chevron icon
                chevron.classList.toggle('rotate-180');
                
                // Update aria-expanded for accessibility
                const isExpanded = !content.classList.contains('hidden');
                toggle.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
                
                // Close other open sections (accordion behavior)
                mobileMenuToggles.forEach(otherToggle => {
                    if (otherToggle !== toggle) {
                        const otherSectionName = otherToggle.getAttribute('data-section');
                        const otherContent = document.querySelector(`.mobile-section-content[data-content="${otherSectionName}"]`);
                        const otherChevron = otherToggle.querySelector('i.fa-chevron-down');
                        
                        if (otherContent && otherChevron) {
                            otherContent.classList.add('hidden');
                            otherChevron.classList.remove('rotate-180');
                            otherToggle.setAttribute('aria-expanded', 'false');
                        }
                    }
                });
            }
        };
        
        // Remove existing listener if it exists
        if (mobileMenuHandlers[sectionName]) {
            toggle.removeEventListener('click', mobileMenuHandlers[sectionName]);
        }
        
        // Add new listener
        toggle.addEventListener('click', clickHandler);
        mobileMenuHandlers[sectionName] = clickHandler;
    });
}

function setupMobileMenuClose() {
    // Setup mobile menu close functionality
    const mobileMenuCloseButton = document.querySelector('.mobile-menu-close');
    const mobileMenu = document.querySelector('[data-landingsite-mobile-menu]');
    const mobileMenuButton = document.querySelector('[data-landingsite-mobile-menu-toggle]');
    
    if (mobileMenuCloseButton && mobileMenu && mobileMenuButton) {
        const closeHandler = (e) => {
            e.preventDefault();
            mobileMenu.classList.add('hidden');
            mobileMenuButton.setAttribute('aria-expanded', 'false');
            
            // Reset hamburger icon
            const hamburgerLines = mobileMenuButton.querySelectorAll('.mobile-menu-icon');
            hamburgerLines.forEach(line => {
                line.classList.remove('rotate-45', '-rotate-45', 'translate-y-1.5', '-translate-y-1.5', 'opacity-0');
            });
            
            // Close all open sections
            const mobileMenuToggles = document.querySelectorAll('.mobile-section-toggle');
            mobileMenuToggles.forEach(toggle => {
                const sectionName = toggle.getAttribute('data-section');
                const content = document.querySelector(`.mobile-section-content[data-content="${sectionName}"]`);
                const chevron = toggle.querySelector('i.fa-chevron-down');
                
                if (content && chevron) {
                    content.classList.add('hidden');
                    chevron.classList.remove('rotate-180');
                    toggle.setAttribute('aria-expanded', 'false');
                }
            });
        };
        
        // Remove existing listener if it exists
        if (mobileMenuHandlers.close) {
            mobileMenuCloseButton.removeEventListener('click', mobileMenuHandlers.close);
        }
        
        // Add new listener
        mobileMenuCloseButton.addEventListener('click', closeHandler);
        mobileMenuHandlers.close = closeHandler;
    }
}

function setupHamburgerAnimation() {
    // Setup hamburger menu animation
    const mobileMenuButton = document.querySelector('[data-landingsite-mobile-menu-toggle]');
    const mobileMenu = document.querySelector('[data-landingsite-mobile-menu]');
    
    if (mobileMenuButton && mobileMenu) {
        const toggleHandler = (e) => {
            const isHidden = mobileMenu.classList.contains('hidden');
            const hamburgerLines = mobileMenuButton.querySelectorAll('.mobile-menu-icon');
            
            if (isHidden) {
                // Menu is opening - animate hamburger to X
                if (hamburgerLines.length >= 3) {
                    hamburgerLines[0].classList.add('rotate-45', 'translate-y-1.5');
                    hamburgerLines[1].classList.add('opacity-0');
                    hamburgerLines[2].classList.add('-rotate-45', '-translate-y-1.5');
                }
            } else {
                // Menu is closing - animate X back to hamburger
                hamburgerLines.forEach(line => {
                    line.classList.remove('rotate-45', '-rotate-45', 'translate-y-1.5', '-translate-y-1.5', 'opacity-0');
                });
            }
        };
        
        // Remove existing listener if it exists
        if (mobileMenuHandlers.hamburger) {
            mobileMenuButton.removeEventListener('click', mobileMenuHandlers.hamburger);
        }
        
        // Add new listener
        mobileMenuButton.addEventListener('click', toggleHandler);
        mobileMenuHandlers.hamburger = toggleHandler;
    }
}

function setupFormHandlers() {
    const registrationForms = document.querySelectorAll('form[data-landingsite-contact-form]');
    
    registrationForms.forEach(form => {
        const submitHandler = (e) => {
            e.preventDefault();
            handleFormSubmission(form);
        };

        // Remove existing listener if it exists
        const serviceType = form.querySelector('input[name="service_type"]')?.value;
        if (registrationHandlers[serviceType]) {
            form.removeEventListener('submit', registrationHandlers[serviceType]);
        }
        
        // Add new listener
        form.addEventListener('submit', submitHandler);
        if (serviceType) {
            registrationHandlers[serviceType] = submitHandler;
        }
    });
}

// Setup service card click handlers for the introduction section
function setupServiceCardHandlers() {
    // Get Quote Card
    const quoteCard = document.getElementById('quote-card');
    if (quoteCard) {
        const clickHandler = () => {
            const quoteSection = document.querySelector('form[data-landingsite-contact-form] input[name="service_type"][value="quote_request"]');
            if (quoteSection) {
                quoteSection.closest('div.bg-white\\/60').scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'start' 
                });
                // Focus on the first input
                const firstInput = quoteSection.closest('form').querySelector('input[name="client_name"]');
                if (firstInput) {
                    setTimeout(() => firstInput.focus(), 500);
                }
            }
        };
        
        if (mobileMenuHandlers.quoteCard) {
            quoteCard.removeEventListener('click', mobileMenuHandlers.quoteCard);
        }
        quoteCard.addEventListener('click', clickHandler);
        mobileMenuHandlers.quoteCard = clickHandler;
    }
    
    // Book Consultation Card
    const consultationCard = document.getElementById('consultation-card');
    if (consultationCard) {
        const clickHandler = () => {
            const consultationSection = document.querySelector('form[data-landingsite-contact-form] input[name="service_type"][value="consultation_booking"]');
            if (consultationSection) {
                consultationSection.closest('div.bg-white\\/60').scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'start' 
                });
                // Focus on the first input
                const firstInput = consultationSection.closest('form').querySelector('input[name="client_name"]');
                if (firstInput) {
                    setTimeout(() => firstInput.focus(), 500);
                }
            }
        };
        
        if (mobileMenuHandlers.consultationCard) {
            consultationCard.removeEventListener('click', mobileMenuHandlers.consultationCard);
        }
        consultationCard.addEventListener('click', clickHandler);
        mobileMenuHandlers.consultationCard = clickHandler;
    }
    
    // Get Help Card
    const helpCard = document.getElementById('help-card');
    if (helpCard) {
        const clickHandler = () => {
            const helpSection = document.querySelector('form[data-landingsite-contact-form] input[name="service_type"][value="help_request"]');
            if (helpSection) {
                helpSection.closest('div.bg-white\\/60').scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'start' 
                });
                // Focus on the first input
                const firstInput = helpSection.closest('form').querySelector('input[name="client_name"]');
                if (firstInput) {
                    setTimeout(() => firstInput.focus(), 500);
                }
            }
        };
        
        if (mobileMenuHandlers.helpCard) {
            helpCard.removeEventListener('click', mobileMenuHandlers.helpCard);
        }
        helpCard.addEventListener('click', clickHandler);
        mobileMenuHandlers.helpCard = clickHandler;
    }
}

// Main initialization function
function init() {
    setupFormHandlers();
    setupNewsletterSignup();
    setupMobileMenuDropdowns();
    setupMobileMenuClose();
    setupHamburgerAnimation();
    setupServiceCardHandlers();
    
    // Make functions globally available for onclick handlers
    window.closeConfirmationModal = closeConfirmationModal;
    window.showConfirmationMessage = showConfirmationMessage;
}

// Cleanup function
function teardown() {
    // Remove all event listeners
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        const newForm = form.cloneNode(true);
        form.parentNode.replaceChild(newForm, form);
    });
    
    // Remove mobile menu listeners
    const mobileToggles = document.querySelectorAll('.mobile-section-toggle');
    mobileToggles.forEach(toggle => {
        const newToggle = toggle.cloneNode(true);
        toggle.parentNode.replaceChild(newToggle, toggle);
    });
    
    // Remove service card listeners
    const serviceCards = document.querySelectorAll('#quote-card, #consultation-card, #help-card');
    serviceCards.forEach(card => {
        const newCard = card.cloneNode(true);
        card.parentNode.replaceChild(newCard, card);
    });
    
    // Clear handlers
    registrationHandlers = {};
    mobileMenuHandlers = {};
    
    // Remove global functions
    if (window.closeConfirmationModal) delete window.closeConfirmationModal;
    if (window.showConfirmationMessage) delete window.showConfirmationMessage;
}

export { init, teardown };