$(document).ready(function() {
    // Load port lists into the dropdown
    const scanId = getActiveScanId();
    if (scanId) {
        showScan(scanId);
    }

    // this prevents the browser from
    // triggering the shutdown beacon
    // when user clicks the logo
    setUrlParam('loaded', 'true')
    

    // Handle form submission
    $('#scan-form').on('submit', function(event) {
        event.preventDefault();
        if ($('#scan-submit').text() == 'Scan') {
            submitNewScan()
        } else {
            terminateScan();
        }
        

    });

    // Handle filter input
    $('#filter').on('input', function() {
        const filter = $(this).val();
        const currentSrc = $('#ip-table-frame').attr('src');
        const newSrc = currentSrc.split('?')[0] + '?filter=' + filter;
        $('#ip-table-frame').attr('src', newSrc);
    });

    $('#settings-btn').on('click', function() {
        $('#advanced-modal').modal('show');
    });

});

function submitNewScan() {
    const config = getScanConfig();
    config.subnet = $('#subnet').val();
    $.ajax('/api/scan', {
        data: JSON.stringify(config),
        contentType: 'application/json',
        type: 'POST',
        success: function(response) {
            if (response.status === 'running') {
                showScan(response.scan_id);
            }
        }
    });
}

function getActiveScanId() {
    const url = new URL(window.location.href);
    return url.searchParams.get('scan_id');
}

function showScan(scanId) {
    pollScanSummary(scanId);
    setScanState(false);

    $('#no-scan').addClass('div-hide');
    $('#scan-results').removeClass('div-hide');
    
    $('#export-link').attr('href','/export/' + scanId);
    //$('#overview-frame').attr('src', '/scan/' + scanId + '/overview');
    $('#ip-table-frame').attr('src', '/scan/' + scanId + '/table');
    
    setUrlParam('scan_id', scanId);
}


$(document).on('click', function(event) {
    if (!$(event.target).closest('.port-list-wrapper').length) {
        $('#port-list-dropdown').removeClass('open');
    }
});

function setScanState(scanEnabled) {
    const button = $('#scan-submit');
    console.log('set scan state- scanning',scanEnabled)

    if (scanEnabled) {
        button.text("Scan");
        button.removeClass('btn-danger').addClass('btn-primary');
    } else {
        button.text("Stop");
        button.removeClass('btn-primary').addClass('btn-danger');
    }
}


function resizeIframe(iframe) {
    // Adjust the height of the iframe to match the content
    setTimeout( () => {
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
    },100);
}

function observeIframeContent(iframe) {
    const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

    // Use MutationObserver to observe changes within the iframe
    const observer = new MutationObserver(() => {
        resizeIframe(iframe);
    });

    // Configure the observer to watch for changes in the subtree of the body
    observer.observe(iframeDocument.body, {
        childList: true,
        subtree: true,
        attributes: true,  // In case styles/attributes change height
    });
}
function terminateScan() {
    const button = $('#scan-submit');
    button.prop('disabled', true); 
    const scanId = getActiveScanId();
    $.get(`/api/scan/${scanId}/terminate`, function(ans) {
        setScanState(true);
        button.prop('disabled', false); 
    });
}
function pollScanSummary(id) {
    $.get(`/api/scan/${id}/summary`, function(summary) {
        const meta = summary.metadata || {};
        let progress = $('#scan-progress-bar');
        if (meta.running || meta.stage == 'terminating') {
            progress.css('height','2px');
            progress.css('width',`${meta.percent_complete}vw`);
            setTimeout(() => {pollScanSummary(id)},500);
        } else {
            progress.css('width','100vw');
            progress.css('background-color','var(--success-accent)')
            setTimeout(() => {progress.css('height','0px');},500);
            setScanState(true);
            
            // wait to make the width smaller for animation to be clean
            setTimeout(() => {
                progress.css('width','0vw');
                progress.css('background-color','var(--primary-accent)')
            },1000);
        }
        updateOverviewUI(summary);
        updateWarningsUI(summary.warnings || []);
    }).fail(function(req) {
        if (req === 404) {
            console.log('Scan not found, redirecting to home');
            window.location.href = '/';
        }
    });
}

function updateWarningsUI(warnings) {
    const badge = $('#warnings-badge');
    const modalBody = $('#warnings-modal-body');
    
    if (!warnings || warnings.length === 0) {
        badge.addClass('div-hide');
        return;
    }
    
    // Render badge
    badge.removeClass('div-hide');
    badge.html(`
        <span class="scan-warnings-badge" data-bs-toggle="modal" data-bs-target="#warningsModal">
            <i class="fa-solid fa-triangle-exclamation"></i>
            <span>${warnings.length}</span>
        </span>
    `);
    
    // Render modal body
    let html = `<p class="small mb-3" style="color: var(--text-placeholder);">
        Resource constraints caused thread concurrency to be reduced during the scan.
    </p>`;
    
    warnings.forEach(w => {
        html += `<div class="warning-item mb-2" style="background: var(--primary-bg-accent); border-radius: 4px; padding: 10px; border-left: 3px solid var(--warning-accent);">
            <div class="small" style="color: var(--text-color);">${w.message || 'Thread multiplier reduced'}</div>`;
        if (w.old_multiplier && w.new_multiplier) {
            html += `<div class="mt-1" style="font-size: 0.75rem; color: var(--text-placeholder);">
                <span>${Math.round(w.old_multiplier * 100)}% → ${Math.round(w.new_multiplier * 100)}%</span>
                <span class="ms-2" style="color: var(--warning-accent);">(-${Math.round(w.decrease_percent)}%)</span>
            </div>`;
        }
        html += `</div>`;
    });
    
    modalBody.html(html);
}

function updateOverviewUI(summary) {
    // helper to turn a number of seconds into "MM:SS"
    function formatMMSS(totalSeconds) {
      const secs = Math.floor(totalSeconds);
      const m = Math.floor(secs / 60);
      const s = secs % 60;
      // pad minutes and seconds to 2 digits
      const mm = String(m).padStart(2, '0');
      const ss = String(s).padStart(2, '0');
      return `${mm}:${ss}`;
    }

    // Extract metadata from the new nested structure
    const meta = summary.metadata || {};

    const alive       = meta.devices_alive || 0;
    const scanned     = meta.devices_scanned || 0;
    const total       = meta.devices_total || 0;

    // ensure we have a number of elapsed seconds
    const runtimeSec  = parseFloat(meta.run_time) || 0;
    const pctComplete = Number(meta.percent_complete) || 0;

    // compute remaining seconds correctly
    const remainingSec = pctComplete > 0
      ? (runtimeSec * (100 - pctComplete)) / pctComplete
      : 0;

    // update everything…
    $('#scan-devices-alive').text(alive);
    $('#scan-devices-scanned').text(scanned);
    $('#scan-devices-total').text(total);

    // …but format runtime and remaining as MM:SS
    $('#scan-run-time').text(formatMMSS(runtimeSec));
    if (pctComplete < 10) {
        $('#scan-remain-time').text('??:??');
    } else {
        $('#scan-remain-time').text(formatMMSS(remainingSec));
    }

    $('#scan-stage').text(meta.stage || 'Unknown');
}

// Bind the iframe's load event to initialize the observer
$('#ip-table-frame').on('load', function() {
    resizeIframe(this); // Initial resizing after iframe loads
    observeIframeContent(this); // Start observing for dynamic changes
});

function setUrlParam(param, value) {
    const url = new URL(window.location.href);
    if (value === null || value === undefined) {
        url.searchParams.delete(param);
    } else {
        url.searchParams.set(param, value);
    }
    window.history.pushState({}, '', url);
}



$(window).on('resize', function() {
    resizeIframe($('#ip-table-frame')[0]);
});

function openDeviceDetail(deviceIp) {
    try {
        const scanId = getActiveScanId();
        if (!scanId || !deviceIp) return;

        const safeIp = encodeURIComponent(deviceIp.trim());

        // Remove any existing modal instance to avoid duplicates
        $('#device-modal').remove();

        $.get(`/device/${scanId}/${safeIp}`, function(html) {
            // Append modal HTML to the document
            $('body').append(html);

            // Show the modal
            const $modal = $('#device-modal');
            $modal.modal('show');

            // Clean up after closing
            $modal.on('hidden.bs.modal', function() {
                $(this).remove();
            });
        }).fail(function() {
            console.error('Failed to load device details');
        });
    } catch (e) {
        console.error('Error opening device detail modal:', e);
    }
}





