(function () {
    'use strict';

    // Tab configuration with table IDs for view components
    const tabConfig = {
        'pr-list': {
            title: 'All Purchase Requests',
            tableId: 1,
            endpoint: '/PRMgmt/GetTabbedById'
        },
        'pr-approved': {
            title: 'Approved Purchase Requests (No PO)',
            tableId: 2,
            endpoint: '/PRMgmt/GetTabbedById'
        },
        'pr-removed': {
            title: 'Deleted Purchase Requests',
            tableId: 3,
            endpoint: '/PRMgmt/GetTabbedById'
        }
    };

    let currentTab = 'pr-list';
    let isSwitching = false;

    function init() {
        const tabs = document.querySelectorAll('.pr-tab-btn');
        tabs.forEach(tab => {
            tab.addEventListener('click', handleTabClick);
        });

        // Load initial tab content
        loadTabContent('pr-list');
    }

    function handleTabClick(e) {
        if (isSwitching) return;

        const btn = e.currentTarget;
        const tabId = btn.getAttribute('data-tab');

        if (tabId === currentTab) return;

        switchTab(tabId, btn);
    }

    function switchTab(tabId, btn) {
        if (!tabConfig[tabId]) {
            console.error('Invalid tab ID:', tabId);
            return;
        }

        isSwitching = true;

        // Update active states
        document.querySelectorAll('.pr-tab-btn').forEach(b => {
            b.classList.remove('active');
        });
        btn.classList.add('active');

        // Update title
        updateTitle(tabConfig[tabId].title);

        // Load view component
        loadTabContent(tabId, btn);

        currentTab = tabId;
    }

    function updateTitle(title) {
        const titleEl = document.getElementById('pageTitle');
        if (!titleEl) return;

        // Fade out with slide
        titleEl.classList.add('updating');

        setTimeout(() => {
            titleEl.textContent = title;

            // Trigger reflow
            void titleEl.offsetWidth;

            // Fade in
            titleEl.classList.remove('updating');
        }, 250);
    }

    function loadTabContent(tabId, btn = null) {
        const config = tabConfig[tabId];
        if (!config) {
            console.error('Tab config not found:', tabId);
            isSwitching = false;
            return;
        }

        // Show loading state
        if (btn) {
            btn.classList.add('loading');
        }
        showContainerLoading(true);

        // Call your existing function
        prTabbedComponent(config.tableId, config.endpoint, function (success) {
            // Hide loading state
            if (btn) {
                btn.classList.remove('loading');
            }
            showContainerLoading(false);
            isSwitching = false;

            if (!success) {
                console.error('Failed to load tab content');
            }
        });
    }

    function showContainerLoading(isLoading) {
        const container = document.getElementById('TabbedContainer');
        if (!container) return;

        if (isLoading) {
            container.style.opacity = '0.5';
            container.style.pointerEvents = 'none';
        } else {
            container.style.opacity = '1';
            container.style.pointerEvents = 'auto';
        }
    }

    // Initialize on DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

    // Public API
    window.PRTabs = {
        switchTo: function (tabId) {
            const btn = document.querySelector(`.pr-tab-btn[data-tab="${tabId}"]`);
            if (btn && !isSwitching) {
                switchTab(tabId, btn);
            }
        },
        reload: function () {
            loadTabContent(currentTab);
        },
        getCurrent: function () {
            return currentTab;
        },
        addTab: function (tabId, config) {
            // Dynamically add new tab configuration
            tabConfig[tabId] = config;
        }
    };

})();

// Updated prTabbedComponent to work with callback
function prTabbedComponent(id, endpoint, callback) {
    $.ajax({
        url: endpoint,
        type: 'GET',
        data: { TableId: id }, // Note: capital T to match your controller parameter
        success: function (response) {
            $('#TabbedContainer').html(response);
            
            if (callback) callback(true);
        },
        error: function (xhr, status, error) {
            console.error("Error loading component:", error);
            $('#TabbedContainer').html('<div class="alert alert-danger">Failed to load content. Please try again.</div>');
            if (callback) callback(false);
        }
    });
}