/**
 * PT Piano - Popup Dialogs Controller
 * Handles modal visibility (Settings, Song Library, Clear Confirmation) and loader fading.
 */
(function($) {
    'use strict';

    // Settings Popup Handler
    const SettingsPopup = {
        init: function() {
            this.popup = $('#settingsPopup');
            this.openBtn = $('#openSettingsBtn');
            this.closeBtn = $('#closeSettingsBtn');
            
            this.bindEvents();
        },

        bindEvents: function() {
            // Open settings popup
            this.openBtn.on('click', (e) => {
                e.preventDefault();
                this.open();
            });

            // Close settings popup
            this.closeBtn.on('click', (e) => {
                e.preventDefault();
                this.close();
            });

            // Close on overlay click
            this.popup.on('click', (e) => {
                if ($(e.target).hasClass('popup-overlay')) {
                    this.close();
                }
            });

            // Close on ESC key
            $(document).on('keydown', (e) => {
                if (e.key === 'Escape' && this.popup.hasClass('active')) {
                    this.close();
                }
            });
        },

        open: function() {
            this.popup.addClass('active');
            $('body').css('overflow', 'hidden');
        },

        close: function() {
            this.popup.removeClass('active');
            $('body').css('overflow', '');
        }
    };

    // Record Limit Popup Handler
    const RecordLimitPopup = {
        init: function() {
            this.popup = $('#recordLimitPopup');
            this.closeBtn = $('#closePopupBtn');
            
            this.bindEvents();
        },

        bindEvents: function() {
            this.closeBtn.on('click', (e) => {
                e.preventDefault();
                this.close();
            });

            this.popup.on('click', (e) => {
                if ($(e.target).hasClass('popup-overlay')) {
                    this.close();
                }
            });
        },

        open: function() {
            this.popup.addClass('active');
        },

        close: function() {
            this.popup.removeClass('active');
        }
    };
	
	// 🎼 Song Popup Handler
	const SongPopup = {
		init: function() {
			this.popup = $('#songPopup');
			this.openBtn = $('#openSongSettingsBtn');
			this.closeBtn = $('#closeSongPopupBtn');

			this.bindEvents();
		},

		bindEvents: function() {
			this.openBtn.on('click', (e) => {
				e.preventDefault();
				this.open();
			});

			this.closeBtn.on('click', (e) => {
				e.preventDefault();
				this.close();
			});

			this.popup.on('click', (e) => {
				if ($(e.target).hasClass('popup-overlay')) {
					this.close();
				}
			});
		},

		open: function() {
			this.popup.addClass('active');
			$('body').css('overflow', 'hidden');
		},

		close: function() {
			this.popup.removeClass('active');
			$('body').css('overflow', '');
		}
	};

    // Loader Handler
    const LoaderHandler = {
        init: function() {
            this.loader = $('.ptpiano-loader');
            this.content = $('.ptpiano-content');
        },

        hide: function() {
            this.loader.fadeOut(300, () => {
                this.content.fadeIn(300);
            });
        },

        show: function() {
            this.content.fadeOut(300, () => {
                this.loader.fadeIn(300);
            });
        }
    };

    // Clear Confirm Popup Handler
    const ClearConfirmPopup = {
        init: function() {
            this.popup = $('#clearConfirmPopup');
            this.closeBtn = $('#closeClearPopupBtn');
            this.confirmBtn = $('#confirmClearBtn');
            this.cancelBtn = $('#cancelClearBtn');
            this.onConfirm = null;
            
            this.bindEvents();
        },

        bindEvents: function() {
            this.closeBtn.on('click', (e) => {
                e.preventDefault();
                this.close();
            });

            this.cancelBtn.on('click', (e) => {
                e.preventDefault();
                this.close();
            });

            this.confirmBtn.on('click', (e) => {
                e.preventDefault();
                if (this.onConfirm) this.onConfirm();
                this.close();
            });

            // Close on overlay click
            this.popup.on('click', (e) => {
                if ($(e.target).hasClass('popup-overlay')) {
                    this.close();
                }
            });

            // Close on ESC
            $(document).on('keydown', (e) => {
                if (e.key === 'Escape' && this.popup.hasClass('active')) {
                    this.close();
                }
            });
        },

        open: function(callback) {
            this.onConfirm = callback;
            this.popup.addClass('active');
        },

        close: function() {
            this.popup.removeClass('active');
            this.onConfirm = null;
        }
    };

    // Save Warning Popup Handler
    const SaveWarningPopup = {
        init: function() {
            this.popup = $('#saveWarningPopup');
            this.closeBtn = $('#closeSaveWarningPopupBtn');
            this.okBtn = $('#closeSaveWarningBtn');
            
            this.bindEvents();
        },

        bindEvents: function() {
            this.closeBtn.on('click', (e) => {
                e.preventDefault();
                this.close();
            });

            this.okBtn.on('click', (e) => {
                e.preventDefault();
                this.close();
            });

            // Close on overlay click
            this.popup.on('click', (e) => {
                if ($(e.target).hasClass('popup-overlay')) {
                    this.close();
                }
            });

            // Close on ESC
            $(document).on('keydown', (e) => {
                if (e.key === 'Escape' && this.popup.hasClass('active')) {
                    this.close();
                }
            });
        },

        open: function() {
            this.popup.addClass('active');
        },

        close: function() {
            this.popup.removeClass('active');
        }
    };

    // Clear Button Handler
    const ClearControl = {
        init: function() {
            this.clearBtn = $('#clearBtn');
            
            this.bindEvents();
        },

        bindEvents: function() {
            this.clearBtn.on('click', () => {
                ClearConfirmPopup.open(() => {
                    $(document).trigger('recording:clear');
                    $('#played-notes').empty();
                });
            });
        }
    };

    // Initialize all components when document is ready
    $(document).ready(function() {		
        // Show loader initially, hide after short delay to simulate loading
        const loader = LoaderHandler;
        loader.init();
        
        // Initialize all components immediately so they are available
        SettingsPopup.init();
        SongPopup.init();
        RecordLimitPopup.init();
        ClearConfirmPopup.init();
        SaveWarningPopup.init();
        ClearControl.init();

        setTimeout(() => {
            loader.hide();
            console.log('PT Piano Popup Controller - Initialized');
        }, 1500);
    });

    // Expose to global scope for external access if needed
    window.PTPiano = {
        SettingsPopup,
        RecordLimitPopup,
		SongPopup,
        LoaderHandler,
        SaveWarningPopup
    };

})(jQuery);