/**
 * This script converts normalized component names to their original form
 * using the actual original names from the data source.
 */

// Function to get the original name from normalized name
function getOriginalName(normalizedName, sourceType) {
    if (!window.nameMappings || !window.nameMappings[sourceType]) {
        return normalizedName;
    }
    
    const mapping = window.nameMappings[sourceType][normalizedName];
    if (!mapping) {
        return normalizedName;
    }
    
    return mapping.originalName || normalizedName;
}

// Function to get the control panel from normalized name
function getControlPanel(normalizedName, sourceType) {
    if (!window.nameMappings || !window.nameMappings[sourceType]) {
        return "";
    }
    
    const mapping = window.nameMappings[sourceType][normalizedName];
    if (!mapping) {
        return "";
    }
    
    return mapping.controlPanel || "";
}

document.addEventListener('DOMContentLoaded', function() {
    // Only proceed if we have the mappings
    if (!window.nameMappings) {
        console.warn('Name mappings not found');
        return;
    }
    
    // Find all tables showing component names
    const tables = document.querySelectorAll('.table-container table');
    
    tables.forEach(table => {
        const rows = table.querySelectorAll('tbody tr');
        
        rows.forEach(row => {
            const cells = row.querySelectorAll('td');
            if (cells.length >= 1) {
                const nameCell = cells[0];
                const controlPanelCell = cells.length > 1 ? cells[1] : null;
                
                if (nameCell) {
                    const normalizedName = nameCell.textContent.trim();
                    
                    // Determine which source to use based on which tab we're in
                    let sourceType = '';
                    const tabPanel = table.closest('.tab-pane');
                    if (tabPanel) {
                        const tabId = tabPanel.id;
                        if (tabId === 'scada-dwg') {
                            if (table.closest('.card').querySelector('h5').textContent.includes('SCADA')) {
                                sourceType = 'scada';
                            } else {
                                sourceType = 'dwg';
                            }
                        } else if (tabId === 'manifest-dwg') {
                            if (table.closest('.card').querySelector('h5').textContent.includes('Manifest')) {
                                sourceType = 'manifest';
                            } else {
                                sourceType = 'dwg';
                            }
                        }
                    }
                    
                    if (sourceType && window.nameMappings[sourceType] && window.nameMappings[sourceType][normalizedName]) {
                        const mapping = window.nameMappings[sourceType][normalizedName];
                        
                        // Update the name cell with original name
                        if (mapping.originalName) {
                            nameCell.textContent = mapping.originalName;
                        }
                        
                        // Update the control panel cell if needed (in case it was empty) and only if it exists
                        if (controlPanelCell && mapping.controlPanel && !controlPanelCell.textContent.trim()) {
                            controlPanelCell.textContent = mapping.controlPanel;
                        }
                    }
                }
            }
        });
    });
    
    // Add header note to explain what's displayed
    document.querySelectorAll('.card-header').forEach(header => {
        if (header.querySelector('h5')) {
            const note = document.createElement('div');
            note.className = 'small text-light mt-1';
            note.textContent = 'Names shown in their original format from source data';
            header.appendChild(note);
        }
    });
    
    // Add CSS styles for the original names
    const style = document.createElement('style');
    style.textContent = `
        .original-name {
            font-weight: bold;
            color: #198754;
        }
    `;
    document.head.appendChild(style);
    
    // Add a debug section to help troubleshoot name lookups if needed
    if (window.location.search.includes('debug=1')) {
        const debugArea = document.createElement('div');
        debugArea.className = 'card mt-4';
        debugArea.innerHTML = `
            <div class="card-header bg-secondary text-white">
                <h5>Name Mapping Debug</h5>
            </div>
            <div class="card-body">
                <p>Enter a normalized name to look up its original form:</p>
                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="debug-lookup-input" placeholder="Enter normalized name (with underscores)">
                    <select class="form-select" id="debug-source-select">
                        <option value="scada">SCADA</option>
                        <option value="manifest">Manifest</option>
                        <option value="dwg">DWG</option>
                    </select>
                    <button class="btn btn-outline-secondary" type="button" id="debug-lookup-btn">Lookup</button>
                </div>
                <div id="debug-result" class="alert alert-info" style="display:none;"></div>
                <hr>
                <details>
                    <summary>View all mappings</summary>
                    <pre id="debug-all-mappings" style="max-height:400px;overflow:auto;"></pre>
                </details>
            </div>
        `;
        
        document.querySelector('.container-fluid').appendChild(debugArea);
        
        // Fill mappings data
        const debugMappings = document.getElementById('debug-all-mappings');
        debugMappings.textContent = JSON.stringify(window.nameMappings, null, 2);
        
        // Set up lookup functionality
        document.getElementById('debug-lookup-btn').addEventListener('click', function() {
            const input = document.getElementById('debug-lookup-input').value.trim();
            const sourceType = document.getElementById('debug-source-select').value;
            const result = document.getElementById('debug-result');
            
            if (input) {
                const mapping = window.nameMappings[sourceType] && window.nameMappings[sourceType][input];
                
                if (mapping) {
                    result.innerHTML = `
                        <strong>Original name:</strong> ${mapping.originalName || input}<br>
                        <strong>Control Panel:</strong> ${mapping.controlPanel || 'Not specified'}<br>
                        <strong>Source:</strong> ${sourceType.toUpperCase()}
                    `;
                } else {
                    result.textContent = `No mapping found for "${input}" in ${sourceType.toUpperCase()} source`;
                }
                
                result.style.display = 'block';
            }
        });
    }

    // Add tooltips to table cells if needed
    const nameCells = document.querySelectorAll('td.item-name');
    nameCells.forEach(cell => {
        const normalizedName = cell.textContent.trim();
        const sourceType = cell.dataset.source; // 'scada', 'manifest', or 'dwg'
        const originalName = getOriginalName(normalizedName, sourceType);
        
        if (originalName && originalName !== normalizedName) {
            cell.title = `Original: ${originalName}`;
        }
    });
});