/**
 * Dashboard JavaScript Enhancements
 * Adds modern interactions to the Text to Speech dashboard
 */

(function($) {
    'use strict';

    $(document).ready(function() {
        
        // Add smooth transitions to navigation items
        $('.mementor-tts-nav-item').on('mouseenter', function() {
            $(this).css('transform', 'translateY(-2px)');
        }).on('mouseleave', function() {
            $(this).css('transform', 'translateY(0)');
        });

        // Enhance form inputs with focus effects
        $('.mementor-tts-input, .mementor-tts-select').on('focus', function() {
            $(this).parent().addClass('focused');
        }).on('blur', function() {
            $(this).parent().removeClass('focused');
        });

        // API Key visibility toggle enhancement
        $('#toggle-api-key').on('click', function(e) {
            e.preventDefault();
            const $input = $('#mementor_tts_api_key');
            const $icon = $(this).find('.dashicons');
            
            if ($input.attr('type') === 'password') {
                $input.attr('type', 'text');
                $icon.removeClass('dashicons-visibility').addClass('dashicons-hidden');
                $(this).attr('title', 'Hide API Key');
            } else {
                $input.attr('type', 'password');
                $icon.removeClass('dashicons-hidden').addClass('dashicons-visibility');
                $(this).attr('title', 'Show API Key');
            }
        });

        // Add loading states to buttons
        $('.button').on('click', function() {
            const $btn = $(this);
            if ($btn.hasClass('mementor-tts-reset-api-key')) {
                return; // Skip for reset button
            }
            if ($btn.closest('form').length && !$btn.hasClass('no-loading')) {
                $btn.addClass('mementor-tts-loading');
                $btn.prop('disabled', true);
            }
        });

        // Enhance select dropdowns
        $('.mementor-tts-select').on('change', function() {
            $(this).addClass('selected');
        });

        // Add ripple effect to buttons
        $('.button, .mementor-tts-nav-item').on('click', function(e) {
            const $this = $(this);
            const ripple = $('<span class="ripple"></span>');
            
            $this.css('position', 'relative');
            $this.css('overflow', 'hidden');
            
            const size = Math.max($this.width(), $this.height());
            ripple.css({
                width: size,
                height: size
            });
            
            $this.prepend(ripple);
            
            const x = e.pageX - $this.offset().left - size / 2;
            const y = e.pageY - $this.offset().top - size / 2;
            
            ripple.css({
                top: y + 'px',
                left: x + 'px'
            }).addClass('ripple-animation');
            
            setTimeout(function() {
                ripple.remove();
            }, 600);
        });

        // Smooth scroll for anchor links
        $('a[href^="#"]').on('click', function(e) {
            const target = $(this.getAttribute('href'));
            if (target.length) {
                e.preventDefault();
                $('html, body').animate({
                    scrollTop: target.offset().top - 100
                }, 500);
            }
        });

        // Add fade-in animation to sections
        $('.mementor-tts-section').each(function(index) {
            $(this).css('animation-delay', (index * 0.1) + 's');
        });

        // Enhance tooltip functionality
        $('.tooltip-icon').hover(
            function() {
                const $tooltip = $(this).find('.tooltip-text');
                $tooltip.fadeIn(200);
            },
            function() {
                const $tooltip = $(this).find('.tooltip-text');
                $tooltip.fadeOut(200);
            }
        );

        // Add copy to clipboard for code blocks
        $('code').on('click', function() {
            const $code = $(this);
            const text = $code.text();
            
            if (navigator.clipboard) {
                navigator.clipboard.writeText(text).then(function() {
                    const originalText = $code.text();
                    $code.text('Copied!');
                    setTimeout(function() {
                        $code.text(originalText);
                    }, 1000);
                });
            }
        });

        // Storage location change animation
        $('#mementor_tts_storage_location').on('change', function() {
            const $helpers = $('.mementor-tts-helper-text');
            $helpers.fadeOut(200, function() {
                // Callback after fade out
                $(this).fadeIn(200);
            });
        });

        // Add pulse animation to upgrade button
        setInterval(function() {
            $('.mementor-tts-upgrade-nav-button').addClass('pulse');
            setTimeout(function() {
                $('.mementor-tts-upgrade-nav-button').removeClass('pulse');
            }, 1000);
        }, 5000);

    });

    // Add CSS for animations
    const style = document.createElement('style');
    style.textContent = `
        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            transform: scale(0);
            pointer-events: none;
        }
        
        .ripple-animation {
            animation: ripple 0.6s ease-out;
        }
        
        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }
        
        .pulse {
            animation: pulse 1s ease-in-out;
        }
        
        @keyframes pulse {
            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);
            }
        }
        
        .focused {
            transform: scale(1.01);
            transition: transform 0.2s ease;
        }
    `;
    document.head.appendChild(style);

})(jQuery);