<!-- Tawk.to Widget Installation -->
<script type="text/javascript">
var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
(function(){
    var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
    s1.async = true;
    s1.src = 'https://embed.tawk.to/YOUR_PROPERTY_ID/YOUR_WIDGET_ID';
    s1.charset = 'UTF-8';
    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
})();
</script>

<!-- Custom Configuration -->
<script type="text/javascript">
// Set visitor information
Tawk_API.visitor = {
    name : 'John Doe',
    email : 'john@example.com',
    hash : 'generated_hash' // For secure mode
};

// Custom attributes
Tawk_API.customStyle = {
    visibility : {
        desktop : {
            position : 'br', // Bottom right
            xOffset : 20,
            yOffset : 20
        },
        mobile : {
            position : 'br'
        }
    }
};

// Event handlers
Tawk_API.onLoad = function(){
    console.log('Tawk.to widget loaded');
};

Tawk_API.onStatusChange = function(status){
    console.log('Agent status:', status); // online, away, offline
};

Tawk_API.onChatStarted = function(){
    console.log('Chat conversation started');
    
    // Track in analytics
    if (typeof gtag !== 'undefined') {
        gtag('event', 'chat_started', {
            event_category: 'engagement',
            event_label: 'tawk_chat'
        });
    }
};

Tawk_API.onChatEnded = function(){
    console.log('Chat conversation ended');
    
    // Track completion
    if (typeof gtag !== 'undefined') {
        gtag('event', 'chat_completed', {
            event_category: 'engagement',
            event_label: 'tawk_chat'
        });
    }
};
</script>

// Tawk.to API Integration
class TawkAPI {
    constructor(apiKey, propertyId) {
        this.apiKey = apiKey;
        this.propertyId = propertyId;
        this.baseURL = 'https://api.tawk.to/v3';
    }
    
    async getChats(timeFrom, timeTo) {
        const params = new URLSearchParams({
            timeFrom: timeFrom,
            timeTo: timeTo
        });
        
        const response = await fetch(`${this.baseURL}/chats/${this.propertyId}?${params}`, {
            headers: {
                'Authorization': `Bearer ${this.apiKey}`,
                'Content-Type': 'application/json'
            }
        });
        
        return response.json();
    }
    
    async getChatMessages(chatId) {
        const response = await fetch(`${this.baseURL}/chats/${this.propertyId}/${chatId}/messages`, {
            headers: {
                'Authorization': `Bearer ${this.apiKey}`
            }
        });
        
        return response.json();
    }
    
    async getAgentStatus() {
        const response = await fetch(`${this.baseURL}/agents/${this.propertyId}`, {
            headers: {
                'Authorization': `Bearer ${this.apiKey}`
            }
        });
        
        return response.json();
    }
    
    async updateAgentStatus(agentId, status) {
        const response = await fetch(`${this.baseURL}/agents/${this.propertyId}/${agentId}`, {
            method: 'PUT',
            headers: {
                'Authorization': `Bearer ${this.apiKey}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ status: status })
        });
        
        return response.json();
    }
    
    async sendMessage(chatId, message) {
        const response = await fetch(`${this.baseURL}/chats/${this.propertyId}/${chatId}/messages`, {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${this.apiKey}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                message: message,
                type: 'agent'
            })
        });
        
        return response.json();
    }
}

// Advanced Visitor Tracking with Tawk.to
class TawkVisitorTracking {
    constructor() {
        this.sessionData = {};
        this.setupTracking();
    }
    
    setupTracking() {
        // Track page views
        this.trackPageView();
        
        // Track user interactions
        this.trackUserBehavior();
        
        // Track cart abandonment (e-commerce)
        this.trackCartEvents();
        
        // Track form interactions
        this.trackFormEvents();
    }
    
    trackPageView() {
        const pageData = {
            url: window.location.href,
            title: document.title,
            referrer: document.referrer,
            timestamp: new Date().toISOString()
        };
        
        if (typeof Tawk_API !== 'undefined') {
            Tawk_API.addEvent('page_view', pageData);
        }
    }
    
    trackUserBehavior() {
        // Track time on page
        const startTime = Date.now();
        
        window.addEventListener('beforeunload', () => {
            const timeSpent = Math.round((Date.now() - startTime) / 1000);
            
            if (typeof Tawk_API !== 'undefined') {
                Tawk_API.addEvent('time_on_page', {
                    duration: timeSpent,
                    page: window.location.pathname
                });
            }
        });
        
        // Track scroll depth
        let maxScroll = 0;
        window.addEventListener('scroll', () => {
            const scrollPercent = Math.round(
                (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100
            );
            
            if (scrollPercent > maxScroll) {
                maxScroll = scrollPercent;
                
                if (maxScroll >= 25 && maxScroll < 50) {
                    this.trackScrollMilestone(25);
                } else if (maxScroll >= 50 && maxScroll < 75) {
                    this.trackScrollMilestone(50);
                } else if (maxScroll >= 75) {
                    this.trackScrollMilestone(75);
                }
            }
        });
    }
    
    trackScrollMilestone(percentage) {
        if (typeof Tawk_API !== 'undefined') {
            Tawk_API.addEvent('scroll_milestone', {
                percentage: percentage,
                page: window.location.pathname
            });
        }
    }
    
    trackCartEvents() {
        // Track cart additions
        document.addEventListener('click', (e) => {
            if (e.target.matches('.add-to-cart')) {
                const productInfo = this.getProductInfo(e.target);
                
                if (typeof Tawk_API !== 'undefined') {
                    Tawk_API.addEvent('cart_add', productInfo);
                }
            }
        });
        
        // Track cart abandonment
        if (this.hasItemsInCart() && !this.isCheckoutPage()) {
            setTimeout(() => {
                if (this.hasItemsInCart() && !this.isCheckoutPage()) {
                    if (typeof Tawk_API !== 'undefined') {
                        Tawk_API.addEvent('cart_abandonment', {
                            items: this.getCartItems(),
                            value: this.getCartValue()
                        });
                    }
                }
            }, 300000); // 5 minutes
        }
    }
    
    trackFormEvents() {
        const forms = document.querySelectorAll('form');
        
        forms.forEach(form => {
            const formInputs = form.querySelectorAll('input, textarea, select');
            let formStarted = false;
            
            formInputs.forEach(input => {
                input.addEventListener('focus', () => {
                    if (!formStarted) {
                        formStarted = true;
                        
                        if (typeof Tawk_API !== 'undefined') {
                            Tawk_API.addEvent('form_started', {
                                form: form.id || form.className,
                                page: window.location.pathname
                            });
                        }
                    }
                });
            });
            
            form.addEventListener('submit', () => {
                if (typeof Tawk_API !== 'undefined') {
                    Tawk_API.addEvent('form_submitted', {
                        form: form.id || form.className,
                        page: window.location.pathname
                    });
                }
            });
        });
    }
    
    // Utility methods
    getProductInfo(element) {
        return {
            name: element.dataset.productName || 'Unknown',
            price: element.dataset.productPrice || 0,
            category: element.dataset.productCategory || 'General'
        };
    }
    
    hasItemsInCart() {
        // Implement based on your e-commerce platform
        return localStorage.getItem('cart') && JSON.parse(localStorage.getItem('cart')).length > 0;
    }
    
    isCheckoutPage() {
        return window.location.pathname.includes('checkout') || 
               window.location.pathname.includes('cart');
    }
    
    getCartItems() {
        // Implement based on your e-commerce platform
        return JSON.parse(localStorage.getItem('cart') || '[]');
    }
    
    getCartValue() {
        const items = this.getCartItems();
        return items.reduce((total, item) => total + (item.price * item.quantity), 0);
    }
}

// Initialize tracking
const visitorTracking = new TawkVisitorTracking();