// Tab management JavaScript
let currentTabId = null;

// Get current tab from cookie
function getCurrentTabFromCookie() {
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
        const [name, value] = cookie.trim().split('=');
        if (name === 'current_tab') {
            return value;
        }
    }
    return null;
}

// Load tabs list
async function loadTabs() {
    try {
        const response = await fetch('/tabs');
        const data = await response.json();
        
        // Get current tab from cookie first, then from server response
        currentTabId = getCurrentTabFromCookie() || data.current_tab_id;
        renderTabsList(data.tabs, data.tab_order, currentTabId);
        
        // Load current tab content if available
        if (currentTabId) {
            loadTabContent(currentTabId);
        } else if (data.tab_order && data.tab_order.length > 0) {
            // Set first tab as current if none is set
            await setCurrentTab(data.tab_order[0]);
        }
    } catch (error) {
        console.error('Failed to load tabs:', error);
        const container = document.getElementById('tabs-list');
        if (container) {
            container.innerHTML = '<div class="error">Failed to load tabs</div>';
        }
    }
}

// Render tabs list in the main UI
function renderTabsList(tabs, tabOrder, currentTabId) {
    const container = document.getElementById('tabs-list');
    if (!container) return;
    
    if (!tabOrder || tabOrder.length === 0) {
        container.innerHTML = '<div class="muted-text">No tabs available</div>';
        return;
    }
    
    let html = '<div class="tabs-list">';
    for (const tabId of tabOrder) {
        const tab = tabs[tabId];
        if (tab) {
            const activeClass = tabId === currentTabId ? 'active' : '';
            const tabName = tab.name || `Tab ${tabId}`;
            html += `
                <button class="tab-button ${activeClass}" 
                        data-tab-id="${tabId}"
                        title="Click to select, right-click to edit"
                        onclick="selectTab('${tabId}')">
                    ${tabName}
                </button>
            `;
        }
    }
    html += '</div>';
    container.innerHTML = html;
}

// Render tabs list in modal (like profiles)
function renderTabsListModal(tabs, tabOrder, currentTabId) {
    const container = document.getElementById('tabs-list-modal');
    if (!container) return;
    
    container.innerHTML = "";
    let entries = [];

    if (Array.isArray(tabOrder)) {
        entries = tabOrder.map((tabId) => [tabId, tabs[tabId] || {}]);
    } else if (tabs && typeof tabs === "object") {
        entries = Object.entries(tabs).filter(([key]) => {
            return key !== 'current_tab_id' && key !== 'tabs' && key !== 'tab_order';
        });
    }

    if (entries.length === 0) {
        const empty = document.createElement("p");
        empty.className = "muted-text";
        empty.textContent = "No tabs found.";
        container.appendChild(empty);
        return;
    }

    entries.forEach(([tabId, tab]) => {
        const row = document.createElement("div");
        row.className = "profiles-row";

        const label = document.createElement("span");
        label.textContent = (tab && tab.name) || tabId;
        if (String(tabId) === String(currentTabId)) {
            label.textContent = `✓ ${label.textContent}`;
            label.style.fontWeight = "bold";
            label.style.color = "#FFD700";
        }

        const applyButton = document.createElement("button");
        applyButton.className = "btn btn-secondary btn-small";
        applyButton.textContent = "Select";
        applyButton.addEventListener("click", async () => {
            await selectTab(tabId);
            document.getElementById('tabs-modal').classList.remove('active');
        });

        const editButton = document.createElement("button");
        editButton.className = "btn btn-secondary btn-small";
        editButton.textContent = "Edit";
        editButton.addEventListener("click", () => {
            openEditTabModal(tabId, tab);
        });

        const deleteButton = document.createElement("button");
        deleteButton.className = "btn btn-danger btn-small";
        deleteButton.textContent = "Delete";
        deleteButton.addEventListener("click", async () => {
            const confirmed = confirm(`Delete tab "${label.textContent}"?`);
            if (!confirmed) {
                return;
            }
            try {
                const response = await fetch(`/tabs/${tabId}`, {
                    method: "DELETE",
                    headers: { Accept: "application/json" },
                });
                if (!response.ok) {
                    const errorData = await response.json().catch(() => ({ error: "Failed to delete tab" }));
                    throw new Error(errorData.error || "Failed to delete tab");
                }
                // Clear cookie if deleted tab was current
                if (tabId === currentTabId) {
                    document.cookie = 'current_tab=; path=/; max-age=0';
                    currentTabId = null;
                }
                await loadTabsModal();
                await loadTabs(); // Reload main tabs list
            } catch (error) {
                console.error("Delete tab failed:", error);
                alert("Failed to delete tab: " + error.message);
            }
        });

        row.appendChild(label);
        row.appendChild(applyButton);
        row.appendChild(editButton);
        row.appendChild(deleteButton);
        container.appendChild(row);
    });
}

// Load tabs in modal
async function loadTabsModal() {
    const container = document.getElementById('tabs-list-modal');
    if (!container) return;
    
    container.innerHTML = "";
    const loading = document.createElement("p");
    loading.className = "muted-text";
    loading.textContent = "Loading tabs...";
    container.appendChild(loading);

    try {
        const response = await fetch("/tabs", {
            headers: { Accept: "application/json" },
        });
        if (!response.ok) {
            throw new Error("Failed to load tabs");
        }
        const data = await response.json();
        const tabs = data.tabs || data;
        const currentTabId = getCurrentTabFromCookie() || data.current_tab_id || null;
        renderTabsListModal(tabs, data.tab_order || [], currentTabId);
    } catch (error) {
        console.error("Load tabs failed:", error);
        container.innerHTML = "";
        const errorMessage = document.createElement("p");
        errorMessage.className = "muted-text";
        errorMessage.textContent = "Failed to load tabs.";
        container.appendChild(errorMessage);
    }
}

// Select a tab
async function selectTab(tabId) {
    // Update active state
    document.querySelectorAll('.tab-button').forEach(btn => {
        btn.classList.remove('active');
    });
    const btn = document.querySelector(`[data-tab-id="${tabId}"]`);
    if (btn) {
        btn.classList.add('active');
    }
    
    // Set as current tab
    await setCurrentTab(tabId);
    // Load tab content
    loadTabContent(tabId);
}

// Set current tab in cookie
async function setCurrentTab(tabId) {
    try {
        const response = await fetch(`/tabs/${tabId}/set-current`, {
            method: 'POST'
        });
        const data = await response.json();
        if (response.ok) {
            currentTabId = tabId;
            // Also set cookie on client side
            document.cookie = `current_tab=${tabId}; path=/; max-age=31536000`;
        } else {
            console.error('Failed to set current tab:', data.error);
        }
    } catch (error) {
        console.error('Error setting current tab:', error);
    }
}

// Load tab content
async function loadTabContent(tabId) {
    const container = document.getElementById('tab-content');
    if (!container) return;
    
    try {
        const response = await fetch(`/tabs/${tabId}`);
        const tab = await response.json();
        
        if (tab.error) {
            container.innerHTML = `<div class="error">${tab.error}</div>`;
            return;
        }
        
        // Render tab content (presets section)
        const tabName = tab.name || `Tab ${tabId}`;
        const deviceNames = Array.isArray(tab.names) ? tab.names.join(',') : '';
        container.innerHTML = `
            <div class="presets-section" data-tab-id="${tabId}" data-device-names="${deviceNames}">
                <h3>Presets for ${tabName}</h3>
                <div class="profiles-actions" style="margin-bottom: 1rem;">
                    <button class="btn btn-primary" id="preset-add-btn-tab">Add Preset</button>
                    <button class="btn btn-secondary" id="send-tab-presets-btn">Send Presets</button>
                </div>
                <div id="presets-list-tab" class="presets-list">
                    <!-- Presets will be loaded here by presets.js -->
                </div>
            </div>
        `;
        
        // Wire up "Send Presets" button for this tab
        const sendBtn = container.querySelector('#send-tab-presets-btn');
        if (sendBtn) {
            sendBtn.addEventListener('click', () => {
                sendTabPresets(tabId);
            });
        }
        
        // Trigger presets loading if the function exists
        if (typeof renderTabPresets === 'function') {
            renderTabPresets(tabId);
        }
    } catch (error) {
        console.error('Failed to load tab content:', error);
        container.innerHTML = '<div class="error">Failed to load tab content</div>';
    }
}

// Send all presets used by a tab via the /presets/send HTTP endpoint.
async function sendTabPresets(tabId) {
    try {
        // Load tab data to determine which presets are used
        const tabResponse = await fetch(`/tabs/${tabId}`, {
            headers: { Accept: 'application/json' },
        });
        if (!tabResponse.ok) {
            alert('Failed to load tab to send presets.');
            return;
        }
        const tabData = await tabResponse.json();

        // Extract preset IDs from tab (supports grid, flat, and legacy formats)
        let presetIds = [];
        if (Array.isArray(tabData.presets_flat)) {
            presetIds = tabData.presets_flat;
        } else if (Array.isArray(tabData.presets)) {
            if (tabData.presets.length && typeof tabData.presets[0] === 'string') {
                // Flat array of IDs
                presetIds = tabData.presets;
            } else if (tabData.presets.length && Array.isArray(tabData.presets[0])) {
                // 2D grid
                presetIds = tabData.presets.flat();
            }
        }
        presetIds = (presetIds || []).filter(Boolean);

        if (!presetIds.length) {
            alert('This tab has no presets to send.');
            return;
        }

        // Call server-side ESPNow sender with just the IDs; it handles chunking.
        const response = await fetch('/presets/send', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
            body: JSON.stringify({ preset_ids: presetIds }),
        });

        const data = await response.json().catch(() => ({}));
        if (!response.ok) {
            const msg = (data && data.error) || 'Failed to send presets.';
            alert(msg);
            return;
        }

        const sent = typeof data.presets_sent === 'number' ? data.presets_sent : presetIds.length;
        const messages = typeof data.messages_sent === 'number' ? data.messages_sent : '?';
        alert(`Sent ${sent} preset(s) in ${messages} ESPNow message(s).`);
    } catch (error) {
        console.error('Failed to send tab presets:', error);
        alert('Failed to send tab presets.');
    }
}

// Open edit tab modal
function openEditTabModal(tabId, tab) {
    const modal = document.getElementById('edit-tab-modal');
    const idInput = document.getElementById('edit-tab-id');
    const nameInput = document.getElementById('edit-tab-name');
    const idsInput = document.getElementById('edit-tab-ids');
    
    if (idInput) idInput.value = tabId;
    if (nameInput) nameInput.value = tab ? (tab.name || '') : '';
    if (idsInput) idsInput.value = tab && tab.names ? tab.names.join(', ') : '1';
    
    if (modal) modal.classList.add('active');
}

// Update an existing tab
async function updateTab(tabId, name, ids) {
    try {
        const names = ids ? ids.split(',').map(id => id.trim()) : ['1'];
        const response = await fetch(`/tabs/${tabId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name: name,
                names: names
            })
        });
        
        const data = await response.json();
        if (response.ok) {
            // Reload tabs list
            await loadTabsModal();
            await loadTabs();
            // Close modal
            document.getElementById('edit-tab-modal').classList.remove('active');
            return true;
        } else {
            alert(`Error: ${data.error || 'Failed to update tab'}`);
            return false;
        }
    } catch (error) {
        console.error('Failed to update tab:', error);
        alert('Failed to update tab');
        return false;
    }
}

// Create a new tab
async function createTab(name, ids) {
    try {
        const names = ids ? ids.split(',').map(id => id.trim()) : ['1'];
        const response = await fetch('/tabs', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name: name,
                names: names
            })
        });
        
        const data = await response.json();
        if (response.ok) {
            // Reload tabs list
            await loadTabsModal();
            await loadTabs();
            // Select the new tab
            if (data && Object.keys(data).length > 0) {
                const newTabId = Object.keys(data)[0];
                await selectTab(newTabId);
            }
            return true;
        } else {
            alert(`Error: ${data.error || 'Failed to create tab'}`);
            return false;
        }
    } catch (error) {
        console.error('Failed to create tab:', error);
        alert('Failed to create tab');
        return false;
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
    loadTabs();
    
    // Set up tabs modal
    const tabsButton = document.getElementById('tabs-btn');
    const tabsModal = document.getElementById('tabs-modal');
    const tabsCloseButton = document.getElementById('tabs-close-btn');
    const newTabNameInput = document.getElementById('new-tab-name');
    const newTabIdsInput = document.getElementById('new-tab-ids');
    const createTabButton = document.getElementById('create-tab-btn');
    
    if (tabsButton && tabsModal) {
        tabsButton.addEventListener('click', () => {
            tabsModal.classList.add('active');
            loadTabsModal();
        });
    }
    
    if (tabsCloseButton) {
        tabsCloseButton.addEventListener('click', () => {
            tabsModal.classList.remove('active');
        });
    }
    
    if (tabsModal) {
        tabsModal.addEventListener('click', (event) => {
            if (event.target === tabsModal) {
                tabsModal.classList.remove('active');
            }
        });
    }

    // Right-click on a tab button in the main header bar to edit that tab
    document.addEventListener('contextmenu', async (event) => {
        const btn = event.target.closest('.tab-button');
        if (!btn || !btn.dataset.tabId) {
            return;
        }
        event.preventDefault();
        const tabId = btn.dataset.tabId;
        try {
            const response = await fetch(`/tabs/${tabId}`);
            if (response.ok) {
                const tab = await response.json();
                openEditTabModal(tabId, tab);
            } else {
                alert('Failed to load tab for editing');
            }
        } catch (error) {
            console.error('Failed to load tab:', error);
            alert('Failed to load tab for editing');
        }
    });
    
    // Set up create tab
    const createTabHandler = async () => {
        if (!newTabNameInput) return;
        const name = newTabNameInput.value.trim();
        const ids = (newTabIdsInput && newTabIdsInput.value.trim()) || '1';
        
        if (name) {
            await createTab(name, ids);
            if (newTabNameInput) newTabNameInput.value = '';
            if (newTabIdsInput) newTabIdsInput.value = '1';
        }
    };
    
    if (createTabButton) {
        createTabButton.addEventListener('click', createTabHandler);
    }
    
    if (newTabNameInput) {
        newTabNameInput.addEventListener('keypress', (event) => {
            if (event.key === 'Enter') {
                createTabHandler();
            }
        });
    }
    
    // Set up edit tab form
    const editTabForm = document.getElementById('edit-tab-form');
    if (editTabForm) {
        editTabForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const idInput = document.getElementById('edit-tab-id');
            const nameInput = document.getElementById('edit-tab-name');
            const idsInput = document.getElementById('edit-tab-ids');
            
            const tabId = idInput ? idInput.value : null;
            const name = nameInput ? nameInput.value.trim() : '';
            const ids = idsInput ? idsInput.value.trim() : '1';
            
            if (tabId && name) {
                await updateTab(tabId, name, ids);
                editTabForm.reset();
            }
        });
    }
    
    // Close edit modal when clicking outside
    const editTabModal = document.getElementById('edit-tab-modal');
    if (editTabModal) {
        editTabModal.addEventListener('click', (event) => {
            if (event.target === editTabModal) {
                editTabModal.classList.remove('active');
            }
        });
    }
});

// Export for use in other scripts
window.tabsManager = {
    loadTabs,
    selectTab,
    createTab,
    updateTab,
    openEditTabModal,
    getCurrentTabId: () => currentTabId
};
