<link rel="stylesheet" href="<%=resource%>/css/common.css?v=6.1.4">
<style>
    /* 页面卡片边框 */
    .cbi-section.cbi-tblsection {
        border: 1px solid var(--border-color-low, #e0e0e0);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        margin-top: 20px;
        padding: 4px;
    }

    .config-label {
        font-weight: 500;
        font-size: 14px;
        width: 150px;
        flex-shrink: 0;
    }

    .config-row {
        margin-top: 14px;
        display: flex;
        align-items: center;
    }

    .config-row input[type="text"] {
        padding: 6px 10px;
        border: 1px solid var(--border-color-medium, #dadce0);
        border-radius: 4px;
        font-size: 13px;
        width: 200px;
    }

    .desc {
        margin-top: 8px;
        max-width: 650px;
        padding: 10px 14px;
        border-radius: 6px;
        border-left: 3px solid #1a73e8;
        opacity: 0.75;
    }
    .desc span {
        font-size: 13px;
        line-height: 1.5;
        display: block;
    }

    .submit-button {
        padding: 8px 20px;
        width: 150px;
        height: auto;
        margin-top: 0;
        background-color: #1a73e8;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
    }
    .submit-button:hover {
        background-color: #1557b0;
    }

    .version-value {
        font-size: 14px;
        font-weight: 500;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
    }
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 24px;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    input:checked + .slider {
        background-color: #1a73e8;
    }
    input:checked + .slider:before {
        transform: translateX(20px);
    }
</style>

<script type="text/javascript">//<![CDATA[

		function init_data() {
			getAppFilterAdvData(); 
		}
        function showSuccessMessage(message = '<%:Settings saved successfully%>') {
			const modal = document.getElementById('modal');
			const messageElement = modal.querySelector('p');
			messageElement.textContent = message;
			modal.style.display = 'flex';
			setTimeout(() => {
				modal.style.display = 'none';
			}, 1000);
		}

		

        function validateLanIfname(lanIfname) {
            const regex = /^[a-zA-Z0-9.-]{2,8}$/;
            return regex.test(lanIfname);
        }

        function submitAppFilterAdv() {
            const lanIfname = document.getElementById('lan_ifname').value;
            const autoLoadEngineSwitch = document.getElementById('autoLoadEngineSwitch').checked;
            const disableHnatSwitch = document.getElementById('disableHnatSwitch').checked;

            if (!validateLanIfname(lanIfname)) {
                alert('<%:Invalid LAN interface name. Please ensure it is no more than 8 characters long and contains only letters, numbers, dot, and -.%>');
                return;
            }



            new XHR().post('<%=url('admin/network/set_app_filter_adv')%>', {
                lan_ifname: lanIfname,
                auto_load_engine: autoLoadEngineSwitch ? 1 : 0,
                disable_hnat: disableHnatSwitch ? 1 : 0,
            },
            function (x, data) {
                showSuccessMessage();
            });
        }

        function disableFlowOffloading() {
            new XHR().post('<%=url('admin/network/disable_flow_offloading')%>', {},
            function (x, data) {
                showSuccessMessage('<%:关闭成功%>');
            });
        }

        function clearActiveTime() {
            if (!confirm('<%:Are you sure you want to clear active time of all users?%>')) {
                return;
            }
            new XHR().post('<%=url('admin/network/cmd')%>', {
                action: 'clear_active_time'
            },
            function (x, data) {
                if (data && data.code === 0) {
                    showSuccessMessage('<%:Active time cleared successfully%>');
                } else {
                    alert(data ? (data.message || '<%:Failed to clear active time%>') : '<%:Failed to clear active time%>');
                }
            });
        }

        function clearOfflineUsers() {
            if (!confirm('<%:Are you sure you want to clear all offline users?%>')) {
                return;
            }
            new XHR().post('<%=url('admin/network/cmd')%>', {
                action: 'clear_offline_users'
            },
            function (x, data) {
                if (data && data.code === 0) {
                    showSuccessMessage('<%:Offline users cleared successfully%>');
                } else {
                    alert(data ? (data.message || '<%:Failed to clear offline users%>') : '<%:Failed to clear offline users%>');
                }
            });
        }
 
		function submitHandle() {
			submitAppFilterAdv();
		}

		function openModal() {
			document.getElementById('modal').style.display = 'block';
            setTimeout(closeModal, 2000);
		}

		function closeModal() {
			document.getElementById('modal').style.display = 'none';
		}

        function getAppFilterAdvData() {
			console.log("getAppFilterAdvData");
            new XHR().get('<%=url('admin/network/get_app_filter_adv')%>', null,
                function (x, data) {
                    document.getElementById('lan_ifname').value = data.data.lan_ifname;
                    if (data.data.auto_load_engine == 1) {
                        document.getElementById('autoLoadEngineSwitch').checked = true;
                    } else {
                        document.getElementById('autoLoadEngineSwitch').checked = false;
                    }
                    if (data.data.disable_hnat == 1) {
                        document.getElementById('disableHnatSwitch').checked = true;
                    } else {
                        document.getElementById('disableHnatSwitch').checked = false;
                    }
                }
            );
            
            new XHR().get('<%=url('admin/network/get_oaf_status')%>', null,
                function (x, data) {
                    if (data && data.data) {
                        document.getElementById('oafVersion').textContent = data.data.version || '--';
                        document.getElementById('engineVersion').textContent = data.data.engine_version || '--';
                    }
                }
            );
        }


        window.onload = function() {
            init_data();
        };
//]]></script>

<div id="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: 1000; justify-content: center; align-items: center;">
    <div style="background-color: rgba(0, 0, 0, 0.65); padding: 14px 24px; border-radius: 6px; text-align: center; color: white; display: flex; justify-content: center; align-items: center;">
        <p style="margin: 0; color: white; font-size: 14px;"><%:Settings saved successfully%></p>
    </div>
</div>

<div class="cbi-section cbi-tblsection">
    <div style="max-width: 1000px; margin-left: 10px; padding: 10px 15px;">

        <div class="config-row">
            <label class="config-label"><%:OAF Version%></label>
            <span id="oafVersion" class="version-value">--</span>
        </div>
        
        <div class="config-row">
            <label class="config-label"><%:OAF Driver Version%></label>
            <span id="engineVersion" class="version-value">--</span>
        </div>
        
        <div class="config-row">
            <label for="autoLoadEngineSwitch" class="config-label" style="cursor: pointer;"><%:Auto-load OAF driver%></label>
            <label class="switch">
                <input type="checkbox" id="autoLoadEngineSwitch" name="autoLoadEngineSwitch" />
                <span class="slider"></span>
            </label>
        </div>

        <div class="desc">
            <span><%:If the OAF driver cannot be manually unloaded or the current driver is unstable, you can turn off auto-loading at startup and manually install a suitable driver. It is recommended to use the official stable OpenWrt firmware.%></span>
        </div>

        <div class="config-row">
            <label for="disableHnatSwitch" class="config-label" style="cursor: pointer;"><%:Disable Hardware Acceleration%></label>
            <label class="switch">
                <input type="checkbox" id="disableHnatSwitch" name="disableHnatSwitch" />
                <span class="slider"></span>
            </label>
        </div>

        <div class="desc">
            <span><%:Disable hardware acceleration (HNAT/ECM) and flow offloading to ensure application filtering works correctly. When enabled, this will automatically disable hardware acceleration and flow offloading features.%></span>
        </div>

        <div class="config-row">
            <label for="lan_ifname" class="config-label"><%:LAN Interface%></label>
            <input type="text" id="lan_ifname">
        </div>

        <div class="desc">
            <span><%:The name of the LAN interface, used for detecting client info, supports fuzzy matching, but a complete interface name must be specified in bypass mode %></span>
        </div>
<!-- 
        <div class="config-row">
            <label class="config-label"><%:Flow Offloading%></label>
            <button type="button" class="submit-button" onclick="disableFlowOffloading()"><%:Disable Flow Offloading%></button>
        </div> 

        <div class="desc">
            <span><%:Flow offloading may affect filtering function. If the filtering feature does not work, you can disable flow offloading here and test again. Note: This only disables flow offloading temporarily. To permanently disable flow offloading, please turn it off in the firewall settings.%></span>
        </div> -->

        <div class="config-row">
            <label class="config-label"><%:Clear Active Time%></label>
            <button type="button" class="submit-button" onclick="clearActiveTime()" style="background-color: #ea4335;"><%:Clear Active Time%></button>
        </div>

        <div class="config-row">
            <label class="config-label"><%:Clear Offline Users%></label>
            <button type="button" class="submit-button" onclick="clearOfflineUsers()" style="background-color: #ea4335;"><%:Clear Offline Users%></button>
        </div>
        
        <div style="margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px;">
            <button type="button" class="submit-button" onclick="location.reload()" style="background: transparent; color: #1a73e8; border: 1px solid var(--border-color-medium, #d1d5db);"><%:Refresh%></button>
            <button type="button" class="submit-button" onclick="submitHandle()"><%:Save%></button>
        </div>
    </div>
</div>
