function openModal() {
    document.getElementById('modal-overlay').classList.add('open');
}

function closeModal() {
    document.getElementById('modal-overlay').classList.remove('open');
    document.getElementById('modal-content').innerHTML = '';
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        if (document.getElementById('modal-overlay').classList.contains('open')) {
            closeModal();
        } else {
            exitConnectMode();
        }
    }
});

document.body.addEventListener('htmx:afterSwap', function(evt) {
    if (evt.detail.target.id === 'modal-content') {
        openModal();
    }
});

var connectMode = false;
var selectedPort = null;
var selectedEl = null;

function toggleConnectMode() {
    connectMode = !connectMode;
    if (connectMode) {
        document.body.classList.add('connect-mode');
    } else {
        exitConnectMode();
    }
    updateConnectButtons();
}

function exitConnectMode() {
    connectMode = false;
    document.body.classList.remove('connect-mode');
    if (selectedEl) selectedEl.classList.remove('port-selected');
    selectedPort = null;
    selectedEl = null;
    updateConnectButtons();
    document.getElementById('connect-status').textContent = '';
}

function updateConnectButtons() {
    document.querySelectorAll('.btn-connect-mode').forEach(function(btn) {
        btn.textContent = connectMode ? 'Cancel Connect' : 'Connect Mode';
        btn.classList.toggle('active', connectMode);
    });
}

function portClick(el, portId, evt) {
    if (!connectMode) return true;
    evt.preventDefault();
    evt.stopPropagation();

    if (selectedPort === portId) {
        exitConnectMode();
        return false;
    }

    if (selectedPort === null) {
        selectedPort = portId;
        selectedEl = el;
        el.classList.add('port-selected');
        document.getElementById('connect-status').textContent = 'Selected ' + el.textContent.trim() + '. Click another port.';
    } else {
        var p1 = selectedPort;
        var p2 = portId;
        exitConnectMode();
        openModal();
        htmx.ajax('GET', '/connections/connect-form?p1=' + p1 + '&p2=' + p2, {target: '#modal-content', swap: 'innerHTML'});
    }
    return false;
}