// Mouseflow tracking code
window._mfq = window._mfq || [];
(function() {
    var mf = document.createElement("script");
    mf.type = "text/javascript"; mf.async = true;
    mf.src = "//cdn.mouseflow.com/projects/YOUR-PROJECT-ID.js";
    document.getElementsByTagName("head")[0].appendChild(mf);
})();

// Custom event tracking
_mfq.push(['tag', 'purchase_completed']);

// User identification
_mfq.push(['setUserId', 'user_123']);

// Custom variables
_mfq.push(['setVariable', 'user_type', 'premium']);
_mfq.push(['setVariable', 'page_type', 'checkout']);

// Advanced form tracking with Mouseflow
class MouseflowFormAnalytics {
    constructor() {
        this.formStartTimes = new Map();
        this.fieldFocusTimes = new Map();
        this.setupFormTracking();
    }
    
    setupFormTracking() {
        // Track form start
        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('focusin', (event) => {
                if (!this.formStartTimes.has(form)) {
                    this.formStartTimes.set(form, Date.now());
                    _mfq.push(['tag', 'form_started', {
                        form_id: form.id || 'unknown',
                        first_field: event.target.name || event.target.id
                    }]);
                }
            });
        });
        
        // Track field interactions
        document.querySelectorAll('input, textarea, select').forEach(field => {
            field.addEventListener('focus', (event) => {
                this.fieldFocusTimes.set(field, Date.now());
            });
            
            field.addEventListener('blur', (event) => {
                const focusTime = this.fieldFocusTimes.get(field);
                if (focusTime) {
                    const timeSpent = Date.now() - focusTime;
                    _mfq.push(['tag', 'field_interaction', {
                        field_name: field.name || field.id,
                        field_type: field.type,
                        time_spent: timeSpent,
                        field_value_length: field.value.length
                    }]);
                }
            });
            
            // Track field errors
            field.addEventListener('invalid', (event) => {
                _mfq.push(['tag', 'field_error', {
                    field_name: field.name || field.id,
                    field_type: field.type,
                    validation_message: field.validationMessage
                }]);
            });
        });
        
        // Track form submissions
        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('submit', (event) => {
                const startTime = this.formStartTimes.get(form);
                const completionTime = startTime ? Date.now() - startTime : 0;
                
                _mfq.push(['tag', 'form_submitted', {
                    form_id: form.id || 'unknown',
                    completion_time: completionTime,
                    fields_count: form.querySelectorAll('input, textarea, select').length
                }]);
            });
        });
    }
    
    trackConversionFunnel(step, stepData = {}) {
        _mfq.push(['tag', `funnel_step_${step}`, {
            step_name: stepData.name || `Step ${step}`,
            step_timestamp: Date.now(),
            page_url: window.location.href,
            ...stepData
        }]);
    }
    
    trackFrictionPoint(element, frictionType, details = {}) {
        _mfq.push(['tag', 'friction_point', {
            element_selector: this.getElementSelector(element),
            friction_type: frictionType, // 'rage_click', 'dead_click', 'form_error', etc.
            page_url: window.location.href,
            ...details
        }]);
    }
    
    getElementSelector(element) {
        if (element.id) return `#${element.id}`;
        if (element.className) return `.${element.className.split(' ')[0]}`;
        return element.tagName.toLowerCase();
    }
}

// Initialize enhanced tracking
const mouseflowAnalytics = new MouseflowFormAnalytics();

// Track conversion funnel
mouseflowAnalytics.trackConversionFunnel(1, {
    name: 'Landing Page',
    source: document.referrer
});

// Track e-commerce steps
document.getElementById('add-to-cart').addEventListener('click', () => {
    mouseflowAnalytics.trackConversionFunnel(2, {
        name: 'Add to Cart',
        product_id: 'SKU123'
    });
});

// Automatic friction detection
class FrictionDetector {
    constructor() {
        this.clickCount = 0;
        this.lastClickTime = 0;
        this.deadClickElements = new Set();
        this.setupFrictionDetection();
    }
    
    setupFrictionDetection() {
        // Rage click detection
        document.addEventListener('click', (event) => {
            const now = Date.now();
            
            if (now - this.lastClickTime < 1000) {
                this.clickCount++;
                if (this.clickCount >= 3) {
                    _mfq.push(['tag', 'rage_click_detected', {
                        element: event.target.tagName,
                        element_text: event.target.textContent?.slice(0, 50),
                        click_count: this.clickCount,
                        page_section: this.getPageSection(event.target)
                    }]);
                }
            } else {
                this.clickCount = 1;
            }
            
            this.lastClickTime = now;
        });
        
        // Dead click detection
        document.addEventListener('click', (event) => {
            const element = event.target;
            
            // Check if click leads to action
            const hasAction = element.onclick || 
                             element.href || 
                             element.type === 'submit' ||
                             element.closest('form') ||
                             element.hasAttribute('data-action');
            
            if (!hasAction && !this.deadClickElements.has(element)) {
                this.deadClickElements.add(element);
                
                // Wait to see if page changes
                setTimeout(() => {
                    _mfq.push(['tag', 'dead_click_detected', {
                        element: element.tagName,
                        element_text: element.textContent?.slice(0, 50),
                        page_url: window.location.href
                    }]);
                }, 500);
            }
        });
        
        // Slow page detection
        window.addEventListener('load', () => {
            const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
            
            if (loadTime > 3000) {
                _mfq.push(['tag', 'slow_page_load', {
                    load_time: loadTime,
                    page_url: window.location.href
                }]);
            }
        });
    }
    
    getPageSection(element) {
        // Determine which section of page element belongs to
        const rect = element.getBoundingClientRect();
        const viewportHeight = window.innerHeight;
        
        if (rect.top < viewportHeight * 0.33) return 'header';
        if (rect.top < viewportHeight * 0.66) return 'middle';
        return 'footer';
    }
}

// Initialize friction detection
const frictionDetector = new FrictionDetector();