// Frontend API client - calls our Express backend
class FrontendApiClient {
    constructor() {
        this.baseUrl = ''; // Same origin as the current page
    }

    async getClusterMembers() {
        try {
            const response = await fetch('/api/cluster/members', {
                method: 'GET',
                headers: {
                    'Accept': 'application/json'
                }
            });

            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }

            return await response.json();
        } catch (error) {
            throw new Error(`Request failed: ${error.message}`);
        }
    }

    async getNodeStatus(ip) {
        try {
            // Create a proxy endpoint that forwards the request to the specific node
            const response = await fetch(`/api/node/status/${encodeURIComponent(ip)}`, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json'
                }
            });

            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }

            return await response.json();
        } catch (error) {
            throw new Error(`Request failed: ${error.message}`);
        }
    }

    async getTasksStatus() {
        try {
            const response = await fetch('/api/tasks/status', {
                method: 'GET',
                headers: {
                    'Accept': 'application/json'
                }
            });

            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }

            return await response.json();
        } catch (error) {
            throw new Error(`Request failed: ${error.message}`);
        }
    }
}

// Global client instance
const client = new FrontendApiClient();

// Function to refresh cluster members
async function refreshClusterMembers() {
    const container = document.getElementById('cluster-members-container');
    
    // Show loading state
    container.innerHTML = `
        <div class="loading">
            <div>Loading cluster members...</div>
        </div>
    `;

    try {
        const response = await client.getClusterMembers();
        console.log(response);
        displayClusterMembers(response.members);
    } catch (error) {
        console.error('Failed to fetch cluster members:', error);
        container.innerHTML = `
            <div class="error">
                <strong>Error loading cluster members:</strong><br>
                ${error.message}
            </div>
        `;
    }
}

// Function to load detailed node information
async function loadNodeDetails(card, memberIp) {
    console.log('Loading node details for IP:', memberIp);
    const memberDetails = card.querySelector('.member-details');
    console.log('Member details element:', memberDetails);
    
    try {
        console.log('Fetching node status...');
        const nodeStatus = await client.getNodeStatus(memberIp);
        console.log('Node status received:', nodeStatus);
        displayNodeDetails(memberDetails, nodeStatus);
    } catch (error) {
        console.error('Failed to load node details:', error);
        memberDetails.innerHTML = `
            <div class="error">
                <strong>Error loading node details:</strong><br>
                ${error.message}
            </div>
        `;
    }
}

// Function to display node details
function displayNodeDetails(container, nodeStatus) {
    console.log('Displaying node details in container:', container);
    console.log('Node status data:', nodeStatus);
    
    container.innerHTML = `
        <div class="tabs-container">
            <div class="tabs-header">
                <button class="tab-button active" data-tab="status">Status</button>
                <button class="tab-button" data-tab="endpoints">Endpoints</button>
                <button class="tab-button" data-tab="tasks">Tasks</button>
                <button class="tab-button" data-tab="firmware">Firmware</button>
            </div>
            
            <div class="tab-content active" id="status-tab">
                <div class="detail-row">
                    <span class="detail-label">Free Heap:</span>
                    <span class="detail-value">${Math.round(nodeStatus.freeHeap / 1024)}KB</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Chip ID:</span>
                    <span class="detail-value">${nodeStatus.chipId}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">SDK Version:</span>
                    <span class="detail-value">${nodeStatus.sdkVersion}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">CPU Frequency:</span>
                    <span class="detail-value">${nodeStatus.cpuFreqMHz}MHz</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Flash Size:</span>
                    <span class="detail-value">${Math.round(nodeStatus.flashChipSize / 1024)}KB</span>
                </div>
            </div>
            
            <div class="tab-content" id="endpoints-tab">
                <h4>Available API Endpoints:</h4>
                ${nodeStatus.api ? nodeStatus.api.map(endpoint => 
                    `<div class="endpoint-item">${endpoint.method === 1 ? 'GET' : 'POST'} ${endpoint.uri}</div>`
                ).join('') : '<div class="endpoint-item">No API endpoints available</div>'}
            </div>
            
            <div class="tab-content" id="tasks-tab">
                <div class="loading-tasks">Loading tasks...</div>
            </div>
            
            <div class="tab-content" id="firmware-tab">
                <div class="firmware-upload">
                    <h4>Firmware Update</h4>
                    <div class="upload-area">
                        <input type="file" id="firmware-file" accept=".bin,.hex" style="display: none;">
                        <button class="upload-btn" data-action="select-file">
                            📁 Choose Firmware File
                        </button>
                        <div class="upload-info">Select a .bin or .hex file to upload</div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Set up tab switching
    setupTabs(container);
    
    // Load tasks data for the tasks tab
    loadTasksData(container, nodeStatus);
    
    console.log('Node details HTML set successfully');
}

// Function to set up tab switching
function setupTabs(container) {
    const tabButtons = container.querySelectorAll('.tab-button');
    const tabContents = container.querySelectorAll('.tab-content');
    
    tabButtons.forEach(button => {
        button.addEventListener('click', (e) => {
            // Prevent the click event from bubbling up to the card
            e.stopPropagation();
            
            const targetTab = button.dataset.tab;
            
            // Remove active class from all buttons and contents
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabContents.forEach(content => content.classList.remove('active'));
            
            // Add active class to clicked button and corresponding content
            button.classList.add('active');
            const targetContent = container.querySelector(`#${targetTab}-tab`);
            if (targetContent) {
                targetContent.classList.add('active');
            }
        });
    });
    
    // Also prevent event propagation on tab content areas
    tabContents.forEach(content => {
        content.addEventListener('click', (e) => {
            e.stopPropagation();
        });
    });
    
    // Set up firmware upload button
    const uploadBtn = container.querySelector('.upload-btn[data-action="select-file"]');
    if (uploadBtn) {
        uploadBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            const fileInput = container.querySelector('#firmware-file');
            if (fileInput) {
                fileInput.click();
            }
        });
    }
}

// Function to load tasks data
async function loadTasksData(container, nodeStatus) {
    const tasksTab = container.querySelector('#tasks-tab');
    if (!tasksTab) return;
    
    try {
        const response = await client.getTasksStatus();
        console.log('Tasks data received:', response);
        
        if (response && response.length > 0) {
            const tasksHTML = response.map(task => `
                <div class="task-item">
                    <div class="task-header">
                        <span class="task-name">${task.name || 'Unknown Task'}</span>
                        <span class="task-status ${task.running ? 'running' : 'stopped'}">
                            ${task.running ? '🟢 Running' : '🔴 Stopped'}
                        </span>
                    </div>
                    <div class="task-details">
                        <span class="task-interval">Interval: ${task.interval}ms</span>
                        <span class="task-enabled">${task.enabled ? '🟢 Enabled' : '🔴 Disabled'}</span>
                    </div>
                </div>
            `).join('');
            
            tasksTab.innerHTML = `
                <h4>Active Tasks</h4>
                ${tasksHTML}
            `;
        } else {
            tasksTab.innerHTML = `
                <div class="no-tasks">
                    <div>📋 No active tasks found</div>
                    <div style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.7;">
                        This node has no running tasks
                    </div>
                </div>
            `;
        }
    } catch (error) {
        console.error('Failed to load tasks:', error);
        tasksTab.innerHTML = `
            <div class="error">
                <strong>Error loading tasks:</strong><br>
                ${error.message}
            </div>
        `;
    }
}

// Function to display cluster members
function displayClusterMembers(members) {
    const container = document.getElementById('cluster-members-container');
    
    if (!members || members.length === 0) {
        container.innerHTML = `
            <div class="empty-state">
                <div class="empty-state-icon">🌐</div>
                <div>No cluster members found</div>
                <div style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.7;">
                    The cluster might be empty or not yet discovered
                </div>
            </div>
        `;
        return;
    }

    const membersHTML = members.map(member => {
        const statusClass = member.status === 'active' ? 'status-online' : 'status-offline';
        const statusText = member.status === 'active' ? 'Online' : 'Offline';
        const statusIcon = member.status === 'active' ? '🟢' : '🔴';
        
        return `
            <div class="member-card" data-member-ip="${member.ip}">
                <div class="member-header">
                    <div class="member-info">
                        <div class="member-name">${member.hostname || 'Unknown Device'}</div>
                        <div class="member-ip">${member.ip || 'No IP'}</div>
                        <div class="member-status ${statusClass}">
                            ${statusIcon} ${statusText}
                        </div>
                        <div class="member-latency">
                            <span class="latency-label">Latency:</span>
                            <span class="latency-value">${member.latency ? member.latency + 'ms' : 'N/A'}</span>
                        </div>
                    </div>
                    <div class="expand-icon">▶️</div>
                </div>
                <div class="member-details">
                    <div class="loading-details">Loading detailed information...</div>
                </div>
            </div>
        `;
    }).join('');

    container.innerHTML = membersHTML;

    // Add event listeners for expand/collapse
    console.log('Setting up event listeners for', members.length, 'member cards');
    
    // Small delay to ensure DOM is ready
    setTimeout(() => {
        document.querySelectorAll('.member-card').forEach((card, index) => {
            const expandIcon = card.querySelector('.expand-icon');
            const memberDetails = card.querySelector('.member-details');
            const memberIp = card.dataset.memberIp;
            
            console.log(`Setting up card ${index} with IP: ${memberIp}`);

            // Make the entire card clickable
            card.addEventListener('click', async (e) => {
                // Don't trigger if clicking on the expand icon (to avoid double-triggering)
                if (e.target === expandIcon) {
                    return;
                }
                
                console.log('Card clicked for IP:', memberIp);
                
                const isExpanding = !card.classList.contains('expanded');
                console.log('Is expanding:', isExpanding);
                
                if (isExpanding) {
                    // Expanding - fetch detailed status
                    console.log('Starting to expand...');
                    await loadNodeDetails(card, memberIp);
                    card.classList.add('expanded');
                    expandIcon.classList.add('expanded');
                    console.log('Card expanded successfully');
                } else {
                    // Collapsing
                    console.log('Collapsing...');
                    card.classList.remove('expanded');
                    expandIcon.classList.remove('expanded');
                    console.log('Card collapsed successfully');
                }
            });
            
            // Keep the expand icon click handler for visual feedback
            if (expandIcon) {
                expandIcon.addEventListener('click', async (e) => {
                    e.stopPropagation();
                    console.log('Expand icon clicked for IP:', memberIp);
                    
                    const isExpanding = !card.classList.contains('expanded');
                    console.log('Is expanding:', isExpanding);
                    
                    if (isExpanding) {
                        // Expanding - fetch detailed status
                        console.log('Starting to expand...');
                        await loadNodeDetails(card, memberIp);
                        card.classList.add('expanded');
                        expandIcon.classList.add('expanded');
                        console.log('Card expanded successfully');
                    } else {
                        // Collapsing
                        console.log('Collapsing...');
                        card.classList.remove('expanded');
                        expandIcon.classList.remove('expanded');
                        console.log('Card collapsed successfully');
                    }
                });
                
                console.log(`Event listener added for expand icon on card ${index}`);
            } else {
                console.error(`No expand icon found for card ${index}`);
            }
            
            console.log(`Event listener added for card ${index}`);
        });
    }, 100);
}

// Load cluster members when page loads
document.addEventListener('DOMContentLoaded', function() {
    refreshClusterMembers();
});

// Auto-refresh every 30 seconds
setInterval(refreshClusterMembers, 30000);