/**
 * WP Debug Frontend Panel JavaScript
 *
 * @package WP_Debug
 * @since 1.0.0
 */

(function($) {
    'use strict';

    /**
     * WP Debug Panel
     */
    const WPDebugPanel = {

        /**
         * Initialize
         */
        init: function() {
            this.toggleButton = $('#wp-debug-toggle');
            this.panel = $('#wp-debug-panel');
            this.closeButton = $('.wp-debug-panel-close');
            this.tabs = $('.wp-debug-tab');

            // Restore panel state from localStorage
            this.restoreState();

            // Bind events
            this.bindEvents();

            // Log initialization
            if (window.console && console.log) {
                console.log('[WP Debug] Panel initialized');
            }
        },

        /**
         * Bind events
         */
        bindEvents: function() {
            const self = this;

            // Toggle button click
            this.toggleButton.on('click', function(e) {
                e.preventDefault();
                self.togglePanel();
            });

            // Close button click
            this.closeButton.on('click', function(e) {
                e.preventDefault();
                self.hidePanel();
            });

            // Tab clicks
            this.tabs.on('click', function(e) {
                e.preventDefault();
                const tabName = $(this).data('tab');
                self.switchTab(tabName);
            });

            // Press Escape to close
            $(document).on('keydown', function(e) {
                if (e.key === 'Escape' && self.panel.is(':visible')) {
                    self.hidePanel();
                }
            });

            // Click outside to close
            $(document).on('click', function(e) {
                if (self.panel.is(':visible') &&
                    !self.panel.is(e.target) &&
                    self.panel.has(e.target).length === 0 &&
                    !self.toggleButton.is(e.target) &&
                    self.toggleButton.has(e.target).length === 0) {
                    self.hidePanel();
                }
            });
        },

        /**
         * Toggle panel visibility
         */
        togglePanel: function() {
            if (this.panel.is(':visible')) {
                this.hidePanel();
            } else {
                this.showPanel();
            }
        },

        /**
         * Show panel
         */
        showPanel: function() {
            this.panel.attr('data-visible', 'true').fadeIn(300);
            this.saveState('visible', true);

            // Log
            if (window.console && console.log) {
                console.log('[WP Debug] Panel opened');
            }
        },

        /**
         * Hide panel
         */
        hidePanel: function() {
            this.panel.fadeOut(300, function() {
                $(this).attr('data-visible', 'false');
            });
            this.saveState('visible', false);

            // Log
            if (window.console && console.log) {
                console.log('[WP Debug] Panel closed');
            }
        },

        /**
         * Switch tab
         */
        switchTab: function(tabName) {
            // Update tab buttons
            this.tabs.removeClass('active');
            this.tabs.filter('[data-tab="' + tabName + '"]').addClass('active');

            // Update tab content
            $('.wp-debug-tab-content').removeClass('active');
            $('.wp-debug-tab-content[data-tab="' + tabName + '"]').addClass('active');

            // Save active tab
            this.saveState('activeTab', tabName);

            // Log
            if (window.console && console.log) {
                console.log('[WP Debug] Switched to tab: ' + tabName);
            }
        },

        /**
         * Save state to localStorage
         */
        saveState: function(key, value) {
            if (typeof Storage !== 'undefined') {
                try {
                    localStorage.setItem('wpDebugPanel_' + key, JSON.stringify(value));
                } catch (e) {
                    // Ignore storage errors
                }
            }
        },

        /**
         * Get state from localStorage
         */
        getState: function(key, defaultValue) {
            if (typeof Storage !== 'undefined') {
                try {
                    const value = localStorage.getItem('wpDebugPanel_' + key);
                    return value !== null ? JSON.parse(value) : defaultValue;
                } catch (e) {
                    return defaultValue;
                }
            }
            return defaultValue;
        },

        /**
         * Restore panel state
         */
        restoreState: function() {
            // Restore visibility
            const isVisible = this.getState('visible', false);
            if (isVisible) {
                this.panel.show().attr('data-visible', 'true');
            }

            // Restore active tab
            const activeTab = this.getState('activeTab', 'overview');
            this.switchTab(activeTab);
        },

        /**
         * Refresh panel data (for future AJAX updates)
         */
        refresh: function() {
            if (window.console && console.log) {
                console.log('[WP Debug] Refreshing panel data...');
            }

            // This could be extended to fetch fresh data via AJAX
            // For now, it just logs
            if (typeof wpDebugData !== 'undefined' && wpDebugData.ajaxUrl) {
                $.ajax({
                    url: wpDebugData.ajaxUrl,
                    type: 'POST',
                    data: {
                        action: 'wp_debug_refresh',
                        nonce: wpDebugData.nonce
                    },
                    success: function(response) {
                        if (window.console && console.log) {
                            console.log('[WP Debug] Panel data refreshed', response);
                        }
                    },
                    error: function(xhr, status, error) {
                        if (window.console && console.error) {
                            console.error('[WP Debug] Refresh failed:', error);
                        }
                    }
                });
            }
        }
    };

    /**
     * Initialize on document ready
     */
    $(document).ready(function() {
        WPDebugPanel.init();
    });

    /**
     * Expose to window for external access
     */
    window.WPDebugPanel = WPDebugPanel;

})(jQuery);