// Add after the existing JavaScript code

// Enhanced hover effects for all interactive elements
function initEnhancedHoverEffects() {
    // Add hover class to all interactive elements
    $('.ptc-scale-btn, .ptc-calculate-btn, .ptc-reset-btn, .ptc-share-btn, .ptc-save-btn')
        .on('mouseenter', function() {
            $(this).addClass('ptc-hover-active');
            playHoverSound();
        })
        .on('mouseleave', function() {
            $(this).removeClass('ptc-hover-active');
        });
    
    // Enhanced table row hover
    $('.ptc-reference-table tbody tr')
        .on('mouseenter', function() {
            $(this).addClass('ptc-row-hover');
            // Add slight delay for ripple effect
            setTimeout(() => {
                $(this).addClass('ptc-row-hover-active');
            }, 50);
        })
        .on('mouseleave', function() {
            $(this).removeClass('ptc-row-hover ptc-row-hover-active');
        });
    
    // Enhanced input focus effects
    $('.ptc-input, .ptc-slider')
        .on('focus', function() {
            $(this).parent().addClass('ptc-input-focused');
        })
        .on('blur', function() {
            $(this).parent().removeClass('ptc-input-focused');
        });
}

// Play subtle hover sound (optional)
function playHoverSound() {
    // Create audio context for subtle hover sounds
    try {
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        const oscillator = audioContext.createOscillator();
        const gainNode = audioContext.createGain();
        
        oscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);
        
        oscillator.frequency.value = 800;
        oscillator.type = 'sine';
        
        gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
        gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
        
        oscillator.start(audioContext.currentTime);
        oscillator.stop(audioContext.currentTime + 0.1);
    } catch (e) {
        // Audio context not supported, continue silently
    }
}

// Add CSS for enhanced hover states
function addEnhancedHoverCSS() {
    const hoverCSS = `
        /* Enhanced hover states */
        .ptc-hover-active {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .ptc-row-hover {
            transition: all 0.3s ease !important;
        }
        
        .ptc-row-hover-active {
            transform: translateX(8px) !important;
        }
        
        .ptc-input-focused .ptc-input {
            border-color: #667eea !important;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
        }
        
        /* Tooltip styles for better UX */
        .ptc-tooltip {
            position: absolute;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 0.9em;
            white-space: nowrap;
            z-index: 1000;
            pointer-events: none;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }
        
        .ptc-tooltip.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Pulse animation for important elements */
        .ptc-pulse-important {
            animation: pulse-important 2s infinite;
        }
        
        @keyframes pulse-important {
            0% {
                box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
            }
        }
        
        /* Color transitions for better visual feedback */
        .ptc-color-transition {
            transition: background-color 0.3s ease, 
                        color 0.3s ease, 
                        border-color 0.3s ease;
        }
    `;
    
    $('head').append(`<style>${hoverCSS}</style>`);
}

// Initialize all enhanced effects
function initAllEffects() {
    initEnhancedHoverEffects();
    addEnhancedHoverCSS();
    
    // Add tooltips to important elements
    addTooltips();
    
    // Initialize color transitions
    $('.ptc-scale-btn, .ptc-calculate-btn, .ptc-reset-btn')
        .addClass('ptc-color-transition');
}

// Add tooltips for better UX
function addTooltips() {
    const tooltips = {
        '#ptc-percentage': 'Enter your percentage marks (0-100)',
        '#ptc-percentage-slider': 'Drag to adjust percentage',
        '.ptc-scale-btn[data-scale="10"]': 'Indian 10-point grading system',
        '.ptc-scale-btn[data-scale="9.5"]': 'Common in some universities',
        '.ptc-scale-btn[data-scale="4"]': 'International 4.0 scale',
        '#ptc-calculate-btn': 'Calculate CGPA (Ctrl+Enter)',
        '#ptc-reset-btn': 'Reset all values (Esc)',
        '.ptc-share-btn': 'Share your result',
        '.ptc-save-btn': 'Save result as PDF'
    };
    
    Object.entries(tooltips).forEach(([selector, text]) => {
        $(selector).hover(
            function(e) {
                const tooltip = $(`<div class="ptc-tooltip">${text}</div>`);
                $('body').append(tooltip);
                
                const rect = this.getBoundingClientRect();
                tooltip.css({
                    top: (rect.top - tooltip.outerHeight() - 10) + 'px',
                    left: (rect.left + rect.width / 2 - tooltip.outerWidth() / 2) + 'px'
                });
                
                setTimeout(() => tooltip.addClass('show'), 10);
                
                $(this).data('tooltip', tooltip);
            },
            function() {
                const tooltip = $(this).data('tooltip');
                if (tooltip) {
                    tooltip.removeClass('show');
                    setTimeout(() => tooltip.remove(), 300);
                }
            }
        );
    });
}

// Call initialization after DOM is ready
$(document).ready(function() {
    initAllEffects();
    
    // Add dynamic color changes based on percentage
    $('#ptc-percentage, #ptc-percentage-slider').on('input', function() {
        const value = parseFloat($(this).val()) || 0;
        updateDynamicColors(value);
    });
    
    // Initialize dynamic colors
    updateDynamicColors(parseFloat($('#ptc-percentage').val()) || 75);
});

// Update colors dynamically based on percentage
function updateDynamicColors(percentage) {
    let color;
    
    if (percentage >= 90) {
        color = '#4CAF50'; // Green for excellent
    } else if (percentage >= 75) {
        color = '#8BC34A'; // Light green for good
    } else if (percentage >= 60) {
        color = '#FFC107'; // Yellow for average
    } else if (percentage >= 40) {
        color = '#FF9800'; // Orange for pass
    } else {
        color = '#F44336'; // Red for fail
    }
    
    // Update header gradient based on percentage
    const intensity = percentage / 100;
    $('.ptc-header').css({
        'background': `linear-gradient(135deg, 
            hsl(${210 + intensity * 60}, 70%, ${50 + intensity * 20}%) 0%, 
            hsl(${270 + intensity * 60}, 60%, ${40 + intensity * 20}%) 100%)`
    });
    
    // Update gauge color
    $('.ptc-gauge-fill').css('border-color', color);
    
    // Update button colors
    $('.ptc-calculate-btn').css({
        'background': `linear-gradient(135deg, ${color} 0%, 
            adjust-hue(${color}, 30) 100%)`
    });
}