(() => {
    function applyTypeFilter(typeSelect, portSelect, selectedId) {
        const endpointType = typeSelect.value;
        let visibleCount = 0;
        let matchedSelected = false;
        const currentValue = selectedId || portSelect.value || '';

        for (const option of portSelect.options) {
            const optionType = option.dataset.endpointType || '';
            if (!optionType) {
                option.hidden = false;
                option.disabled = false;
                continue;
            }

            const visible = optionType === endpointType;
            option.hidden = !visible;
            option.disabled = !visible;

            if (visible) {
                visibleCount += 1;
                if (option.value === currentValue) {
                    option.selected = true;
                    matchedSelected = true;
                }
            } else if (option.selected) {
                option.selected = false;
            }
        }

        const placeholder = portSelect.options[0];
        if (placeholder) {
            placeholder.textContent = visibleCount > 0 ? '- Port waehlen -' : '- Keine Ports verfuegbar -';
        }

        if (!matchedSelected) {
            portSelect.value = '';
        }
    }

    function bindPair(typeSelectId, portSelectId) {
        const typeSelect = document.getElementById(typeSelectId);
        const portSelect = document.getElementById(portSelectId);
        if (!typeSelect || !portSelect) {
            return;
        }

        applyTypeFilter(typeSelect, portSelect, portSelect.dataset.selectedId || '');
        typeSelect.addEventListener('change', () => {
            applyTypeFilter(typeSelect, portSelect, '');
        });
    }

    function enforceTopologyTypeRules(typeA, typeB) {
        const allowWithPatchpanel = { patchpanel: true, outlet: true };
        const selectedA = typeA.value;
        const selectedB = typeB.value;

        const applyRules = (sourceType, targetSelect) => {
            for (const option of targetSelect.options) {
                const value = option.value;
                if (!value) {
                    option.disabled = false;
                    continue;
                }
                if (sourceType === 'patchpanel') {
                    option.disabled = !allowWithPatchpanel[value];
                } else {
                    option.disabled = false;
                }
            }
            if (targetSelect.selectedOptions.length > 0 && targetSelect.selectedOptions[0].disabled) {
                targetSelect.value = '';
            }
        };

        applyRules(selectedA, typeB);
        applyRules(selectedB, typeA);
    }

    document.addEventListener('DOMContentLoaded', () => {
        bindPair('port_a_type', 'port_a_id');
        bindPair('port_b_type', 'port_b_id');

        const typeA = document.getElementById('port_a_type');
        const typeB = document.getElementById('port_b_type');
        if (!typeA || !typeB) {
            return;
        }

        const syncRules = () => {
            enforceTopologyTypeRules(typeA, typeB);
        };

        syncRules();
        typeA.addEventListener('change', syncRules);
        typeB.addEventListener('change', syncRules);
    });
})();