{% extends "base.html" %}
{% block title %}Routing Management - OpenVPN Manager{% endblock %}

{% block content %}
<style>
.routing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(155deg, rgba(var(--stat-rgb), 0.10), rgba(17, 24, 39, 0.55) 65%);
    border: 1px solid rgba(var(--stat-rgb), 0.25);
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 10px 26px -18px rgba(var(--stat-rgb), 0.6);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.routing-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--stat-rgb), 0.5);
    box-shadow: 0 14px 28px -14px rgba(var(--stat-rgb), 0.4);
}
.light-theme .routing-card {
    background: linear-gradient(155deg, rgba(var(--stat-rgb-light), 0.07), rgba(255, 255, 255, 0.85) 65%);
    border-color: rgba(var(--stat-rgb-light), 0.28);
    box-shadow: 0 10px 22px -18px rgba(var(--stat-rgb-light), 0.35);
}
.light-theme .routing-card:hover {
    border-color: rgba(var(--stat-rgb-light), 0.55);
    box-shadow: 0 14px 24px -14px rgba(var(--stat-rgb-light), 0.28);
}
.routing-card-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background-color: rgba(var(--stat-rgb), 0.16);
    color: rgb(var(--stat-rgb));
    box-shadow: 0 0 14px -4px rgba(var(--stat-rgb), 0.5);
}
.light-theme .routing-card-icon {
    background-color: rgba(var(--stat-rgb-light), 0.12);
    color: rgb(var(--stat-rgb-light));
    box-shadow: 0 0 10px -3px rgba(var(--stat-rgb-light), 0.35);
}
/* Compact badge variant: the 4 top-of-page counters folded into the title row
   instead of their own full-width card row, so the tab content starts right
   after the title -- wide enough to carry a short label directly (not just
   an icon + number behind a hover tooltip), still far smaller than the
   original full stat card. */
.routing-stat-badge {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 5rem; padding: 0.45rem 0.7rem; border-radius: 0.7rem; flex-shrink: 0;
    background: rgba(var(--stat-rgb), 0.12);
    border: 1px solid rgba(var(--stat-rgb), 0.25);
}
.routing-stat-badge .rsb-top { display: flex; align-items: center; gap: 0.35rem; }
.routing-stat-badge i { font-size: 0.85rem; color: rgb(var(--stat-rgb)); opacity: 0.9; }
.routing-stat-badge .rsb-value { font-size: 1.1rem; font-weight: 700; color: rgb(var(--stat-rgb)); line-height: 1; font-variant-numeric: tabular-nums; }
.routing-stat-badge .rsb-label { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: rgb(var(--stat-rgb)); opacity: 0.75; margin-top: 0.2rem; white-space: nowrap; }
@media (min-width: 640px) {
    .routing-stat-badge { min-width: 5.8rem; padding: 0.6rem 0.9rem; border-radius: 0.8rem; }
    .routing-stat-badge .rsb-top { gap: 0.4rem; }
    .routing-stat-badge i { font-size: 0.95rem; }
    .routing-stat-badge .rsb-value { font-size: 1.3rem; }
    .routing-stat-badge .rsb-label { font-size: 0.65rem; margin-top: 0.25rem; }
}
.light-theme .routing-stat-badge { background: rgba(var(--stat-rgb-light), 0.08); border-color: rgba(var(--stat-rgb-light), 0.22); }
.light-theme .routing-stat-badge i, .light-theme .routing-stat-badge .rsb-value, .light-theme .routing-stat-badge .rsb-label { color: rgb(var(--stat-rgb-light)); }
.routing-btn {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    background-color: rgba(75, 85, 99, 0.3);
    color: #d1d5db;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.routing-btn:hover { background-color: #4f46e5; color: #fff; }
.routing-btn-danger:hover { background-color: #dc2626; }
.routing-btn-sm { padding: 0.35rem 0.55rem; }
.light-theme .routing-btn { background-color: rgba(209, 213, 219, 0.5); color: #374151; }
.routing-type-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
}
.light-theme .routing-type-badge { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.routing-rule-pin { color: #6b7280; text-align: center; }
.routing-rule-default-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}
.routing-rule-note { display: inline-block; margin-left: 0.5rem; font-size: 0.72rem; color: #fbbf24; }
.light-theme .routing-rule-pin { color: #9ca3af; }
.light-theme .routing-rule-default-tag { background: rgba(100, 116, 139, 0.14); color: #475569; }
.light-theme .routing-rule-note { color: #b45309; }
.routing-target-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 0.4rem;
    background: rgba(74, 222, 128, 0.14);
    color: #86efac;
}
.light-theme .routing-target-badge { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.routing-status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #6b7280;
    margin-right: 0.35rem;
}
.routing-status-dot.is-active { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.6); }
.light-theme .routing-status-dot { background: #9ca3af; }
.light-theme .routing-status-dot.is-active { background: #16a34a; box-shadow: 0 0 6px rgba(22, 163, 74, 0.45); }
.routing-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #6b7280;
    border: 1px dashed rgba(107, 114, 128, 0.4);
    border-radius: 1rem;
}
.routing-empty i { font-size: 1.6rem; margin-bottom: 0.5rem; display: block; opacity: 0.6; }
.light-theme .routing-empty { color: #4b5563; border-color: rgba(107, 114, 128, 0.35); }
.routing-table-wrap { overflow-x: auto; border: 1px solid rgba(75, 85, 99, 0.3); border-radius: 0.75rem; }
.routing-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.routing-table th { text-align: left; padding: 0.6rem 0.9rem; background: rgba(75, 85, 99, 0.15); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #9ca3af; }
.routing-table td { padding: 0.6rem 0.9rem; border-top: 1px solid rgba(75, 85, 99, 0.2); vertical-align: middle; }
.light-theme .routing-table-wrap { border-color: rgba(209, 213, 219, 0.7); }
.light-theme .routing-table th { background: rgba(243, 244, 246, 0.8); color: #4b5563; }
.light-theme .routing-table td { border-top-color: rgba(209, 213, 219, 0.5); }
.routing-mono { font-family: monospace; font-size: 0.82rem; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.routing-source-sub { font-size: 0.72rem; opacity: 0.65; margin-top: 0.15rem; }
.routing-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; border-bottom: 1px solid rgba(75, 85, 99, 0.3); margin-bottom: 1.25rem; }
.light-theme .routing-tabs { border-bottom-color: rgba(209, 213, 219, 0.7); }
.routing-tab-btn {
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #9ca3af;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.routing-tab-btn:hover { color: #d1d5db; }
.routing-tab-btn.active { color: #818cf8; border-color: #818cf8; }
.light-theme .routing-tab-btn { color: #6b7280; }
.light-theme .routing-tab-btn:hover { color: #1f2937; }
.light-theme .routing-tab-btn.active { color: #4f46e5; border-color: #4f46e5; }
.routing-tab-content { display: none; }
.routing-tab-content.active { display: block; }
.routing-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 50; display: none; align-items: center; justify-content: center; padding: 1rem; }
.routing-modal-overlay.active { display: flex; }
.routing-modal-overlay--nested { z-index: 60; }
.routing-modal { background: rgba(31, 41, 55, 0.95); backdrop-filter: blur(16px); border: 1px solid rgba(75, 85, 99, 0.5); border-radius: 1rem; width: 100%; max-width: 28rem; padding: 1.5rem; }
.light-theme .routing-modal { background: rgba(255,255,255,0.97); border-color: rgba(209, 213, 219, 0.7); }
.routing-input { width: 100%; padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(75, 85, 99, 0.5); color: inherit; font-size: 0.85rem; }
.light-theme .routing-input { background: #f3f4f6; border-color: rgba(209, 213, 219, 0.8); }
.routing-target-picker-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.6rem 0.8rem; border-radius: 0.5rem;
    background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(75, 85, 99, 0.5); color: inherit;
    font-size: 0.85rem; font-weight: 600; cursor: pointer; text-align: left;
    transition: border-color 0.15s ease;
}
.routing-target-picker-btn:hover { border-color: rgba(129, 140, 248, 0.6); }
.routing-target-picker-btn .routing-target-picker-value { color: #93c5fd; }
.routing-target-picker-btn.is-empty .routing-target-picker-value { color: #9ca3af; font-weight: 500; }
.light-theme .routing-target-picker-btn { background: #f3f4f6; border-color: rgba(209, 213, 219, 0.8); }
.light-theme .routing-target-picker-btn .routing-target-picker-value { color: #1d4ed8; }
.light-theme .routing-target-picker-btn.is-empty .routing-target-picker-value { color: #6b7280; }
.routing-target-row-btn { white-space: nowrap; }
.routing-label { font-size: 0.75rem; font-weight: 600; color: #9ca3af; display: block; margin-bottom: 0.35rem; }
.light-theme .routing-label { color: #4b5563; }
.routing-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; }
.routing-select-card {
    --stat-rgb: 129,140,248; --stat-rgb-light: 79,70,229;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 0.65rem 0.75rem; border-radius: 0.7rem;
    border: 1.5px solid rgba(75, 85, 99, 0.45);
    background: rgba(55, 65, 81, 0.35);
    cursor: pointer; font-size: 0.8rem; font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}
.routing-select-card:hover { border-color: rgba(var(--stat-rgb), 0.65); }
.routing-select-card.selected {
    border-color: rgb(var(--stat-rgb)); background: rgba(var(--stat-rgb), 0.2); color: rgb(var(--stat-rgb));
    box-shadow: inset 0 0 0 1.5px rgb(var(--stat-rgb)), 0 4px 12px -4px rgba(var(--stat-rgb), 0.5);
}
.light-theme .routing-select-card { background: rgba(243, 244, 246, 0.75); border-color: rgba(209, 213, 219, 0.9); color: #374151; }
.light-theme .routing-select-card:hover { border-color: rgba(var(--stat-rgb-light), 0.65); }
.light-theme .routing-select-card.selected {
    border-color: rgb(var(--stat-rgb-light)); background: rgba(var(--stat-rgb-light), 0.12); color: rgb(var(--stat-rgb-light));
    box-shadow: inset 0 0 0 1.5px rgb(var(--stat-rgb-light)), 0 4px 12px -4px rgba(var(--stat-rgb-light), 0.35);
}
.routing-delay-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(107, 114, 128, 0.2); color: #9ca3af; font-variant-numeric: tabular-nums; }
.routing-delay-badge.good { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.routing-delay-badge.ok { background: rgba(250, 204, 21, 0.15); color: #facc15; }
.routing-delay-badge.bad { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.light-theme .routing-delay-badge { background: rgba(107, 114, 128, 0.14); color: #4b5563; }
.light-theme .routing-delay-badge.good { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.light-theme .routing-delay-badge.ok { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.light-theme .routing-delay-badge.bad { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }

.routing-topo-card { position: relative; background: rgba(31, 41, 55, 0.4); border: 1px solid rgba(75, 85, 99, 0.3); border-radius: 1rem; padding: 1.1rem 1.25rem; }
.light-theme .routing-topo-card { background: rgba(255, 255, 255, 0.6); border-color: rgba(209, 213, 219, 0.7); }
.routing-topo-export-btn { position: absolute; top: 0.9rem; right: 1rem; z-index: 2; background: transparent; border: 1px solid rgba(75, 85, 99, 0.5); color: #9ca3af; width: 1.9rem; height: 1.9rem; border-radius: 0.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.8rem; transition: background .15s, color .15s, border-color .15s; }
.routing-topo-export-btn:hover { background: rgba(79, 70, 229, 0.12); color: #818cf8; border-color: #818cf8; }
.light-theme .routing-topo-export-btn { border-color: rgba(209, 213, 219, 0.8); color: #6b7280; }
.routing-topology-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
#routingTopologySvg { display: block; min-width: 1000px; }
.routing-topo-total-banner { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0.9rem; border: 1px solid rgba(75, 85, 99, 0.3); background: rgba(79, 70, 229, 0.05); border-radius: 0.6rem; font-size: 0.72rem; color: #9ca3af; margin-bottom: 0.8rem; flex-wrap: wrap; }
.light-theme .routing-topo-total-banner { border-color: rgba(209, 213, 219, 0.7); color: #4b5563; }
.routing-topo-total-banner .rt-label { color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.65rem; font-weight: 700; }
.light-theme .routing-topo-total-banner .rt-label { color: #6b7280; }
.routing-topo-total-banner .rt-dl { color: #4ade80; font-weight: 700; }
.routing-topo-total-banner .rt-ul { color: #c084fc; font-weight: 700; }
.routing-topo-total-banner .rt-total { color: #6b7280; }
/* Solid, fully opaque fill on purpose -- edges are drawn UNDERNEATH the node
   boxes in SVG paint order (topo-edges group precedes topo-nodes), and a
   translucent fill let an edge's own approach segment show through the box
   it terminates at. */
.topo-node rect { fill: #1f2937; stroke: rgba(75, 85, 99, 0.5); stroke-width: 1; transition: stroke .15s; }
.light-theme .topo-node rect { fill: #ffffff; stroke: rgba(209, 213, 219, 0.8); }
.topo-node:hover rect { stroke: #818cf8; }
.topo-node.dest.direct rect { stroke: rgba(74, 222, 128, 0.45); }
.topo-node.dest.block rect { stroke: rgba(248, 113, 113, 0.45); }
.topo-node.dest.node rect { stroke: rgba(96, 165, 250, 0.4); }
.topo-node.dest.lb rect { stroke: rgba(192, 132, 252, 0.4); }
.topo-label { fill: #e5e7eb; font-family: inherit; font-size: 12px; font-weight: 600; }
.light-theme .topo-label { fill: #1f2937; }
.topo-sub { fill: #9ca3af; font-family: inherit; font-size: 9.5px; }
.light-theme .topo-sub { fill: #6b7280; }
.topo-x-mark { fill: #f87171; font-family: inherit; font-size: 16px; font-weight: 700; }
.topo-dot.alive { fill: #4ade80; }
.topo-dot.dead { fill: #f87171; }
.topo-dot.unknown { fill: #facc15; }
.topo-edge { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .85; transition: stroke-width .4s ease; }
.topo-flow-dot { transition: opacity .5s ease; }
.topo-col-header { fill: #9ca3af; font-family: inherit; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.light-theme .topo-col-header { fill: #6b7280; }
.topo-empty { fill: #6b7280; font-family: inherit; font-size: 13px; }
.light-theme .topo-empty { fill: #4b5563; }
.topo-traffic { fill: #d1d5db; font-family: inherit; font-size: 9.5px; font-weight: 600; }
.light-theme .topo-traffic { fill: #374151; }
.topo-traffic-total { fill: #6b7280; font-family: inherit; font-size: 8.5px; }

</style>

<div class="container mx-auto px-4 py-8">

    <div class="mb-6 flex justify-between items-center">
        <a href="{{ url_for('index_with_path') }}" class="bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white px-6 py-2 rounded-lg items-center gap-2 transition-all duration-200 hover:shadow-lg">
            <i class="fas fa-arrow-left fa-fw"></i>
            <span>Home</span>
        </a>
    </div>

    <div class="mb-4 flex justify-between items-start flex-wrap gap-3">
        <div>
            <h1 class="text-xl font-bold"><i class="fas fa-route mr-2 text-indigo-400"></i>Routing</h1>
            <p class="text-sm opacity-70">Outbounds, load-balancer groups and routing rules for sing-box traffic.</p>
        </div>
        <div class="flex items-center gap-2 flex-wrap">
            <div class="routing-stat-badge" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
                <div class="rsb-top"><i class="fas fa-server"></i><span class="rsb-value" id="routingStatOutbounds">0</span></div>
                <span class="rsb-label">Outbounds</span>
            </div>
            <div class="routing-stat-badge" style="--stat-rgb: 192,132,252; --stat-rgb-light: 147,51,234;">
                <div class="rsb-top"><i class="fas fa-layer-group"></i><span class="rsb-value" id="routingStatGroups">0</span></div>
                <span class="rsb-label">Balancers</span>
            </div>
            <div class="routing-stat-badge" style="--stat-rgb: 251,191,36; --stat-rgb-light: 217,119,6;">
                <div class="rsb-top"><i class="fas fa-shield-alt"></i><span class="rsb-value" id="routingStatRules">0</span></div>
                <span class="rsb-label">Rules</span>
            </div>
            <div class="routing-stat-badge" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
                <div class="rsb-top"><i class="fas fa-diagram-project"></i><span class="rsb-value" id="routingStatSources">0</span></div>
                <span class="rsb-label">Sources</span>
            </div>
            <button type="button" class="routing-btn" style="background:#4f46e5;color:#fff;align-self:stretch;" onclick="routingApplyNow()" title="Rebuilds the sing-box config and re-applies iptables rules from what's saved — use this if you suspect the live state drifted (e.g. after a service restart or an error).">
                <i class="fas fa-rotate"></i> Re-sync
            </button>
        </div>
    </div>

    <div class="routing-tabs">
        <button type="button" class="routing-tab-btn active" data-routing-tab="outbounds" onclick="routingSwitchTab('outbounds')">Outbounds</button>
        <button type="button" class="routing-tab-btn" data-routing-tab="groups" onclick="routingSwitchTab('groups')">Load Balancer</button>
        <button type="button" class="routing-tab-btn" data-routing-tab="rules" onclick="routingSwitchTab('rules')">Rules</button>
        <button type="button" class="routing-tab-btn" data-routing-tab="sources" onclick="routingSwitchTab('sources')">Traffic Sources</button>
        <button type="button" class="routing-tab-btn" data-routing-tab="relays" onclick="routingSwitchTab('relays')">Relays</button>
        <button type="button" class="routing-tab-btn" data-routing-tab="topology" onclick="routingSwitchTab('topology')">Topology</button>
    </div>

    <div id="routing-tab-outbounds" class="routing-tab-content active">
        <div class="mb-4 flex gap-2 flex-wrap">
            <button type="button" class="routing-btn" style="background:#4f46e5;color:#fff;" onclick="routingOpenModal('routingAddOutboundModal')"><i class="fas fa-plus"></i> Add Outbound</button>
            <button type="button" class="routing-btn" onclick="routingTestAllDelays()"><i class="fas fa-bolt"></i> Test All Latency</button>
        </div>
        <div id="routingOutboundsList"><div class="routing-empty"><i class="fas fa-spinner fa-spin"></i><p>Loading...</p></div></div>
    </div>

    <div id="routing-tab-groups" class="routing-tab-content">
        <div class="mb-4"><button type="button" class="routing-btn" style="background:#4f46e5;color:#fff;" onclick="routingOpenGroupModal()"><i class="fas fa-plus"></i> Add Load Balancer</button></div>
        <div id="routingGroupsList"><div class="routing-empty"><i class="fas fa-spinner fa-spin"></i><p>Loading...</p></div></div>
    </div>

    <div id="routing-tab-rules" class="routing-tab-content">
        <div class="mb-4"><button type="button" class="routing-btn" style="background:#4f46e5;color:#fff;" onclick="routingOpenRuleModal()"><i class="fas fa-plus"></i> Add Rule</button></div>
        <div id="routingRulesList"><div class="routing-empty"><i class="fas fa-spinner fa-spin"></i><p>Loading...</p></div></div>
    </div>

    <div id="routing-tab-sources" class="routing-tab-content">
        <p class="text-xs opacity-60 mb-4"><i class="fas fa-circle-info"></i> Every client range and sing-box inbound on this server, in one place. Pick where each one's traffic should go — changes apply immediately.</p>
        <div id="routingSourcesList"><div class="routing-empty"><i class="fas fa-spinner fa-spin"></i><p>Loading...</p></div></div>
    </div>

    <div id="routing-tab-relays" class="routing-tab-content">
        <p class="text-xs opacity-60 mb-4"><i class="fas fa-circle-info"></i> Expose a sing-box inbound through a remote relay VPS, preserving the real client IP. Add a relay server, let it install and verify, then create tunnels on it.</p>

        <div class="flex items-center justify-between mb-3">
            <h3 class="font-bold text-sm"><i class="fas fa-server mr-1 opacity-70"></i> Relay Servers</h3>
            <button type="button" class="routing-btn" style="background:#4f46e5;color:#fff;" onclick="routingOpenAddRelayModal()"><i class="fas fa-plus"></i> Add Relay</button>
        </div>
        <div id="routingRelaysList" class="mb-6"><div class="routing-empty"><i class="fas fa-spinner fa-spin"></i><p>Loading...</p></div></div>

        <div class="flex items-center justify-between mb-3">
            <h3 class="font-bold text-sm"><i class="fas fa-diagram-project mr-1 opacity-70"></i> Tunnels</h3>
            <button type="button" class="routing-btn" onclick="routingOpenAddTunnelModal()"><i class="fas fa-plus"></i> Add Tunnel</button>
        </div>
        <div id="routingTunnelsList"><div class="routing-empty"><i class="fas fa-spinner fa-spin"></i><p>Loading...</p></div></div>
    </div>

    <div id="routing-tab-topology" class="routing-tab-content">
        <div class="routing-topo-card">
            <button type="button" class="routing-topo-export-btn" onclick="routingExportTopologyImage()" title="Export diagram as PNG"><i class="fas fa-camera"></i></button>
            <div class="routing-topo-total-banner" id="routingTopoTotalBanner">
                <span class="rt-label"><i class="fas fa-chart-line"></i> Live Traffic</span>
                <span class="rt-part"><i class="fas fa-arrow-down"></i> <span class="rt-dl" id="routingTopoTotalDl">0 B/s</span></span>
                <span class="rt-part"><i class="fas fa-arrow-up"></i> <span class="rt-ul" id="routingTopoTotalUl">0 B/s</span></span>
                <span class="rt-total" id="routingTopoTotalVol">Total: 0 B</span>
            </div>
            <div class="routing-topology-wrap" dir="ltr">
                <svg id="routingTopologySvg" dir="ltr" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 900 300" preserveAspectRatio="xMinYMin meet"></svg>
            </div>
        </div>
    </div>

</div>

<div id="routingAddOutboundModal" class="routing-modal-overlay">
    <div class="routing-modal">
        <h3 class="font-bold mb-4"><i class="fas fa-server mr-2 text-indigo-400"></i>Add Outbound</h3>
        <label class="routing-label">Share Link or Subscription URL</label>
        <input type="text" id="routingOutboundUrl" class="routing-input mb-2" placeholder="vless://... or vmess://... or ss://... or trojan://... or a subscription http(s):// link">
        <p class="text-xs mb-3" style="color: var(--text-muted, #9ca3af); line-height:1.6;">
            Single link: <b>vless / vmess / trojan / shadowsocks (ss) / hysteria2 (hy2) / tuic</b> — Reality, TLS, and plain configs all supported (ws / grpc / http(h2) / httpupgrade / quic transports).<br>
            Subscription: paste an <b>http(s)://</b> link instead (the whole account/subscription page) and every outbound inside it is checked and added automatically — one bad entry inside it won't block the rest.
        </p>
        <div id="routingAddOutboundProgress" class="hidden text-xs mb-3 flex items-center gap-2" style="color: var(--text-muted, #9ca3af);">
            <i class="fas fa-spinner fa-spin"></i>
            <span id="routingAddOutboundProgressText"></span>
        </div>
        <div class="flex gap-2 justify-end mt-4">
            <button type="button" class="routing-btn" onclick="routingCloseModal('routingAddOutboundModal')">Cancel</button>
            <button type="button" class="routing-btn" id="routingAddOutboundBtn" style="background:#4f46e5;color:#fff;" onclick="routingAddOutbound()">Add</button>
        </div>
    </div>
</div>

<div id="routingAddGroupModal" class="routing-modal-overlay">
    <div class="routing-modal">
        <h3 class="font-bold mb-4"><i class="fas fa-layer-group mr-2 text-indigo-400"></i>Add Load Balancer</h3>
        <label class="routing-label">Name</label>
        <input type="text" id="routingGroupName" class="routing-input mb-3" placeholder="eu-group">
        <label class="routing-label">Outbounds</label>
        <div id="routingGroupOutboundsChecklist" class="routing-select-grid mb-3" style="max-height:14rem;overflow-y:auto;padding:0.2rem;--stat-rgb:96,165,250;--stat-rgb-light:37,99,235;"></div>
        <div class="flex gap-2 justify-end mt-4">
            <button type="button" class="routing-btn" onclick="routingCloseModal('routingAddGroupModal')">Cancel</button>
            <button type="button" class="routing-btn" style="background:#4f46e5;color:#fff;" onclick="routingAddGroup()">Add</button>
        </div>
    </div>
</div>

<div id="routingAddRuleModal" class="routing-modal-overlay">
    <div class="routing-modal">
        <h3 class="font-bold mb-4"><i class="fas fa-shield-alt mr-2 text-indigo-400"></i>Add Routing Rule</h3>
        <label class="routing-label">Type</label>
        <select id="routingRuleType" class="routing-input mb-3" onchange="routingUpdateRuleValueField()">
            <option value="domain_suffix">Domain Suffix</option>
            <option value="ip_cidr">IP / CIDR</option>
            <option value="geosite">Geosite Category</option>
            <option value="game">Game</option>
        </select>
        <label class="routing-label">Value</label>
        <input type="text" id="routingRuleValue" class="routing-input mb-3" placeholder="example.com, another.com">
        <select id="routingRuleGeosite" class="routing-input mb-3" style="display:none;">
            {% for slug, label in geosite_categories.items() %}
            <option value="{{ slug }}">{{ label }}</option>
            {% endfor %}
        </select>
        <select id="routingRuleGame" class="routing-input mb-3" style="display:none;">
            {% for slug, label in geosite_game_categories.items() %}
            <option value="{{ slug }}">{{ label }}</option>
            {% endfor %}
        </select>
        <label class="routing-label">Target</label>
        <button type="button" class="routing-target-picker-btn mb-3" id="routingRuleTargetBtn" onclick="routingOpenTargetPicker(routingRuleTargetValue, routingSetRuleTargetValue)">
            <span class="routing-target-picker-value" id="routingRuleTargetValueLabel">Direct</span>
            <i class="fas fa-chevron-down text-xs opacity-60"></i>
        </button>
        <div class="flex gap-2 justify-end mt-4">
            <button type="button" class="routing-btn" onclick="routingCloseModal('routingAddRuleModal')">Cancel</button>
            <button type="button" class="routing-btn" style="background:#4f46e5;color:#fff;" onclick="routingAddRule()">Add</button>
        </div>
    </div>
</div>

<div id="routingTargetPickerModal" class="routing-modal-overlay routing-modal-overlay--nested">
    <div class="routing-modal" style="max-width: 30rem;">
        <h3 class="font-bold mb-2"><i class="fas fa-bullseye mr-2 text-indigo-400"></i>Choose Target</h3>
        <div id="routingTargetPickerBody"></div>
        <div class="flex justify-end mt-4">
            <button type="button" class="routing-btn" onclick="routingCloseModal('routingTargetPickerModal')">Close</button>
        </div>
    </div>
</div>

<div id="routingSimplePickerModal" class="routing-modal-overlay routing-modal-overlay--nested">
    <div class="routing-modal" style="max-width: 26rem;">
        <h3 class="font-bold mb-2" id="routingSimplePickerTitle"></h3>
        <div id="routingSimplePickerBody" class="routing-select-grid" style="--stat-rgb:45,212,191;--stat-rgb-light:13,148,136;"></div>
        <div class="flex justify-end mt-4">
            <button type="button" class="routing-btn" onclick="routingCloseModal('routingSimplePickerModal')">Close</button>
        </div>
    </div>
</div>

<div id="routingAddRelayModal" class="routing-modal-overlay">
    <div class="routing-modal">
        <h3 class="font-bold mb-4" id="routingRelayModalTitle"><i class="fas fa-tower-broadcast mr-2 text-indigo-400"></i>Add Relay</h3>
        <label class="routing-label">Name</label>
        <input type="text" id="routingRelayName" class="routing-input mb-3" placeholder="de-relay-1">
        <label class="routing-label">Host / IP</label>
        <input type="text" id="routingRelayHost" class="routing-input mb-3" placeholder="203.0.113.10">
        <div class="grid grid-cols-2 gap-3 mb-3">
            <div><label class="routing-label">SSH Port</label><input type="number" id="routingRelaySshPort" class="routing-input" value="22"></div>
            <div><label class="routing-label">SSH User</label><input type="text" id="routingRelaySshUser" class="routing-input" value="root"></div>
        </div>
        <label class="routing-label" id="routingRelaySshPasswordLabel">SSH Password</label>
        <input type="password" id="routingRelaySshPassword" class="routing-input mb-3" autocomplete="new-password">
        <div class="flex gap-2 justify-end mt-4">
            <button type="button" class="routing-btn" onclick="routingCloseModal('routingAddRelayModal')">Cancel</button>
            <button type="button" class="routing-btn" style="background:#4f46e5;color:#fff;" onclick="routingSaveRelay()" id="routingRelaySaveBtn">Add</button>
        </div>
    </div>
</div>

<div id="routingAddTunnelModal" class="routing-modal-overlay">
    <div class="routing-modal">
        <h3 class="font-bold mb-4"><i class="fas fa-diagram-project mr-2 text-indigo-400"></i>Add Tunnel</h3>
        <label class="routing-label">Relay</label>
        <button type="button" class="routing-target-picker-btn mb-3" id="routingTunnelRelayBtn" onclick="routingOpenSimplePicker('Choose Relay', ROUTING_RELAYS.filter(r => r.status === 'active').map(r => [String(r.id), r.name]), routingTunnelRelayId, routingSetTunnelRelay)">
            <span class="routing-target-picker-value" id="routingTunnelRelayLabel">Choose...</span>
            <i class="fas fa-chevron-down text-xs opacity-60"></i>
        </button>
        <label class="routing-label">sing-box Inbound</label>
        <button type="button" class="routing-target-picker-btn mb-3" id="routingTunnelInboundBtn" onclick="routingOpenSimplePicker('Choose Inbound', ROUTING_ALL_INBOUNDS.map(i => [String(i.inbound_id), i.tag]), routingTunnelInboundId, routingSetTunnelInbound)">
            <span class="routing-target-picker-value" id="routingTunnelInboundLabel">Choose...</span>
            <i class="fas fa-chevron-down text-xs opacity-60"></i>
        </button>
        <label class="routing-label">Public Port (on the relay)</label>
        <input type="number" id="routingTunnelPublicPort" class="routing-input mb-3" placeholder="443">
        <div class="flex gap-2 justify-end mt-4">
            <button type="button" class="routing-btn" onclick="routingCloseModal('routingAddTunnelModal')">Cancel</button>
            <button type="button" class="routing-btn" style="background:#4f46e5;color:#fff;" onclick="routingAddTunnel()" id="routingTunnelDeployBtn">Deploy</button>
        </div>
    </div>
</div>

<script>
// Every value rendered below can come from admin-entered free text (relay
// name/host, outbound tags, range labels, ...) and gets inserted via
// innerHTML -- never trust it as pre-formed markup.
function routingEscapeHtml(str) {
    return String(str ?? '').replace(/[&<>"']/g, c => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'}[c]));
}
// For a value embedded inside a single-quoted JS string literal that itself
// sits inside a double-quoted HTML attribute (e.g. onclick="fn('${...}')"):
// escape backslashes/quotes for the JS-string layer, then HTML-escape the
// result so the browser's HTML parser can't be tricked into ending the
// attribute early on a raw double-quote before JS ever sees it.
function routingJsAttr(str) {
    const jsEscaped = String(str ?? '').replace(/\\/g, '\\\\').replace(/'/g, "\\'");
    return routingEscapeHtml(jsEscaped);
}

function routingShowToast(message, isError = false) {
    const existing = document.querySelector('.routing-toast');
    if (existing) existing.remove();
    const toast = document.createElement('div');
    toast.className = `routing-toast fixed bottom-5 left-1/2 transform -translate-x-1/2 z-50 px-4 py-2 rounded-lg text-sm font-medium shadow-lg transition-all duration-300 ${isError ? 'bg-red-600 text-white' : 'bg-green-600 text-white'}`;
    toast.innerHTML = `<i class="fas ${isError ? 'fa-exclamation-triangle' : 'fa-check-circle'} mr-2"></i>${message}`;
    document.body.appendChild(toast);
    setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 300); }, 3000);
}

function routingOpenModal(id) { document.getElementById(id).classList.add('active'); }
function routingCloseModal(id) { document.getElementById(id).classList.remove('active'); }
document.querySelectorAll('.routing-modal-overlay').forEach(function (overlay) {
    // Track where the mousedown started separately from the click target --
    // dragging to select text inside a form field and releasing the mouse
    // over the backdrop makes the browser fire `click` with e.target ===
    // overlay (the nearest common ancestor of the two elements), which used
    // to close the modal and discard whatever was typed even though the
    // click "started" inside the form.
    let mousedownOnBackdrop = false;
    overlay.addEventListener('mousedown', function (e) { mousedownOnBackdrop = (e.target === overlay); });
    overlay.addEventListener('click', function (e) {
        if (mousedownOnBackdrop && e.target === overlay) overlay.classList.remove('active');
        mousedownOnBackdrop = false;
    });
});

let routingActiveTab = 'outbounds';
const ROUTING_LOADERS = {};
let ROUTING_NODES = [];
let ROUTING_GROUPS = [];

function routingSwitchTab(tab) {
    routingActiveTab = tab;
    document.querySelectorAll('.routing-tab-btn').forEach(b => b.classList.toggle('active', b.dataset.routingTab === tab));
    document.querySelectorAll('.routing-tab-content').forEach(c => c.classList.toggle('active', c.id === 'routing-tab-' + tab));
    if (tab === 'outbounds') { routingStartDelayAutoRefresh(); } else { routingStopDelayAutoRefresh(); }
    if (tab === 'topology') { routingStartTopoPoll(); routingStartTrafficSnapshotPoll(); } else { routingStopTopoPoll(); routingStopTrafficSnapshotPoll(); }
    if (ROUTING_LOADERS[tab]) ROUTING_LOADERS[tab]();
}

function routingApplyNow() {
    fetch('{{ url_for('api_routing_apply') }}', { method: 'POST' })
        .then(r => r.json())
        .then(d => routingShowToast(d.message, !d.success))
        .catch(() => routingShowToast('Network error', true));
}

function routingTargetPickerSectionHtml(title, entries, selected) {
    if (!entries.length) return '';
    return `<div class="routing-label mt-3">${routingEscapeHtml(title)}</div>
        <div class="routing-select-grid mb-1">${entries.map(([v, label, rgb, rgbLight]) => `
            <div class="routing-select-card${selected === v ? ' selected' : ''}" style="--stat-rgb:${rgb};--stat-rgb-light:${rgbLight};" onclick="routingPickTarget('${routingJsAttr(v)}')">${routingEscapeHtml(label)}</div>`).join('')}
        </div>`;
}

let ROUTING_TARGET_PICKER_CALLBACK = null;

function routingOpenTargetPicker(selected, onSelect, hideNotRouted) {
    ROUTING_TARGET_PICKER_CALLBACK = onSelect;
    const html = (hideNotRouted ? '' : routingTargetPickerSectionHtml('Not Routed', [['', 'Not routed', '148,163,184', '100,116,139']], selected))
        + routingTargetPickerSectionHtml('System', [
            ['direct', 'Direct', '74,222,128', '22,163,74'],
            ['block', 'Block', '248,113,113', '220,38,38'],
        ], selected)
        + routingTargetPickerSectionHtml('Outbounds', ROUTING_NODES.filter(n => n.is_active).map(n => [n.tag, n.tag, '96,165,250', '37,99,235']), selected)
        + routingTargetPickerSectionHtml('Load Balancers', ROUTING_GROUPS.map(g => [g.name, g.name, '192,132,252', '147,51,234']), selected);
    document.getElementById('routingTargetPickerBody').innerHTML = html;
    routingOpenModal('routingTargetPickerModal');
}

function routingPickTarget(value) {
    routingCloseModal('routingTargetPickerModal');
    const cb = ROUTING_TARGET_PICKER_CALLBACK;
    ROUTING_TARGET_PICKER_CALLBACK = null;
    if (cb) cb(value);
}

let ROUTING_SIMPLE_PICKER_CALLBACK = null;

function routingOpenSimplePicker(title, items, selected, onSelect) {
    document.getElementById('routingSimplePickerTitle').textContent = title;
    ROUTING_SIMPLE_PICKER_CALLBACK = onSelect;
    const body = document.getElementById('routingSimplePickerBody');
    body.innerHTML = items.length
        ? items.map(([v, label]) => `<div class="routing-select-card${selected === v ? ' selected' : ''}" onclick="routingPickSimple('${routingJsAttr(v)}')">${routingEscapeHtml(label)}</div>`).join('')
        : '<p class="text-xs opacity-60">Nothing available yet.</p>';
    routingOpenModal('routingSimplePickerModal');
}

function routingPickSimple(value) {
    routingCloseModal('routingSimplePickerModal');
    const cb = ROUTING_SIMPLE_PICKER_CALLBACK;
    ROUTING_SIMPLE_PICKER_CALLBACK = null;
    if (cb) cb(value);
}

let routingRuleTargetValue = 'direct';
function routingSetRuleTargetValue(v) {
    routingRuleTargetValue = v;
    document.getElementById('routingRuleTargetValueLabel').textContent = v || 'Not routed';
    document.getElementById('routingRuleTargetBtn').classList.toggle('is-empty', !v);
}

ROUTING_LOADERS.outbounds = function () {
    fetch('{{ url_for('api_routing_nodes_list') }}')
        .then(r => r.json())
        .then(d => {
            document.getElementById('routingOutboundsList').innerHTML = d.html;
            document.getElementById('routingStatOutbounds').textContent = d.nodes.length;
            ROUTING_NODES = d.nodes;
            routingApplyCachedDelays(d.nodes);
        });
};

let ROUTING_DELAY_TIMER = null;
let ROUTING_DELAY_TEST_IN_FLIGHT = false;

function routingSetDelayBadge(nodeId, ms, checkedAt) {
    const el = document.getElementById('routing-delay-' + nodeId);
    if (!el) return;
    el.classList.remove('good', 'ok', 'bad');
    el.title = checkedAt ? 'Last checked ' + new Date(checkedAt * 1000).toLocaleTimeString() : '';
    if (ms === null || ms === undefined) {
        el.textContent = '—';
    } else if (!ms) {
        el.textContent = 'Timeout';
        el.classList.add('bad');
    } else {
        el.textContent = ms + 'ms';
        el.classList.add(ms <= 150 ? 'good' : (ms <= 400 ? 'ok' : 'bad'));
    }
}

function routingTestOneDelay(nodeId) {
    const el = document.getElementById('routing-delay-' + nodeId);
    if (el) { el.classList.remove('good', 'ok', 'bad'); el.textContent = '...'; }
    fetch(`{{ url_for('api_routing_nodes_test_delay', node_id=0) }}`.replace('/0/', '/' + nodeId + '/'), { method: 'POST' })
        .then(r => r.json())
        .then(d => routingSetDelayBadge(nodeId, d.success ? d.delay_ms : null, d.success ? d.checked_at : null));
}

function routingApplyCachedDelays(nodes) {
    (nodes || []).forEach(n => routingSetDelayBadge(n.id, n.delay_ms, n.delay_checked_at));
}

function routingRefreshCachedDelays() {
    if (routingActiveTab !== 'outbounds' || ROUTING_DELAY_TEST_IN_FLIGHT) return;
    fetch('{{ url_for('api_routing_nodes_delays') }}')
        .then(r => r.json())
        .then(d => {
            if (!d.success || ROUTING_DELAY_TEST_IN_FLIGHT) return;
            Object.entries(d.delays).forEach(([id, v]) => routingSetDelayBadge(id, v.ms, v.checked_at));
        })
        .catch(() => {});
}

function routingTestAllDelays() {
    if (ROUTING_DELAY_TEST_IN_FLIGHT) return;
    ROUTING_DELAY_TEST_IN_FLIGHT = true;
    document.querySelectorAll('.routing-delay-badge').forEach(el => { el.classList.remove('good', 'ok', 'bad'); el.textContent = '...'; });
    fetch('{{ url_for('api_routing_nodes_test_delay_all') }}', { method: 'POST' })
        .then(r => r.json())
        .then(d => {
            if (!d.success) return;
            Object.entries(d.delays).forEach(([id, ms]) => routingSetDelayBadge(id, ms, d.checked_at));
        })
        .finally(() => { ROUTING_DELAY_TEST_IN_FLIGHT = false; });
}

function routingStartDelayAutoRefresh() {
    routingStopDelayAutoRefresh();
    ROUTING_DELAY_TIMER = setInterval(routingRefreshCachedDelays, 30000);
}

function routingStopDelayAutoRefresh() {
    if (ROUTING_DELAY_TIMER) { clearInterval(ROUTING_DELAY_TIMER); ROUTING_DELAY_TIMER = null; }
}

let ROUTING_ADD_OUTBOUND_IN_FLIGHT = false;

function routingAddOutbound() {
    if (ROUTING_ADD_OUTBOUND_IN_FLIGHT) return;
    const url = document.getElementById('routingOutboundUrl').value.trim();
    if (!url) { routingShowToast('Enter a share link or subscription URL', true); return; }
    const btn = document.getElementById('routingAddOutboundBtn');
    const progressBox = document.getElementById('routingAddOutboundProgress');
    const progressText = document.getElementById('routingAddOutboundProgressText');
    ROUTING_ADD_OUTBOUND_IN_FLIGHT = true;
    btn.disabled = true;
    btn.style.opacity = '0.6';
    progressBox.classList.remove('hidden');
    progressText.textContent = 'Sending...';
    const fd = new FormData(); fd.append('url', url);
    fetch('{{ url_for('api_routing_nodes_add') }}', { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => {
            routingShowToast(d.message, !d.success);
            if (d.success) { routingCloseModal('routingAddOutboundModal'); document.getElementById('routingOutboundUrl').value = ''; ROUTING_LOADERS.outbounds(); }
        })
        .catch(() => routingShowToast('Network error while adding the outbound.', true))
        .finally(() => {
            ROUTING_ADD_OUTBOUND_IN_FLIGHT = false;
            btn.disabled = false;
            btn.style.opacity = '';
            progressBox.classList.add('hidden');
        });
}

if (typeof socket !== 'undefined') {
    socket.on('routing_add_progress', function(data) {
        if (!ROUTING_ADD_OUTBOUND_IN_FLIGHT) return;
        const progressText = document.getElementById('routingAddOutboundProgressText');
        if (!progressText) return;
        if (data.stage === 'fetching') {
            progressText.textContent = 'Fetching subscription...';
        } else if (data.stage === 'retrying') {
            progressText.textContent = `Connection to the subscription server is slow, retrying (attempt ${data.attempt}/3)...`;
        } else if (data.stage === 'fetched') {
            progressText.textContent = `Found ${data.total} outbound(s) in the subscription, checking each one...`;
        } else if (data.stage === 'checking') {
            const suffix = data.tag ? ` — "${data.tag}"` : '';
            const resultLabel = data.result === 'added' ? 'added' : data.result === 'duplicate' ? 'skipped (duplicate)' : data.result === 'failed' ? 'failed' : '';
            progressText.textContent = `Checking ${data.current}/${data.total}${suffix}${resultLabel ? ' — ' + resultLabel : ''}`;
        } else if (data.stage === 'applying') {
            progressText.textContent = 'Applying to sing-box...';
        } else if (data.stage === 'done') {
            progressText.textContent = `Done — ${data.added} added, ${data.skipped} skipped, ${data.failed} failed.`;
        } else if (data.stage === 'error') {
            progressText.textContent = data.message || 'Error';
        }
    });
}

function routingToggleOutbound(id) {
    fetch(`{{ url_for('api_routing_nodes_toggle', node_id=0) }}`.replace('/0/', '/' + id + '/'), { method: 'POST' })
        .then(r => r.json())
        .then(d => { routingShowToast(d.message || (d.success ? 'Updated' : 'Failed'), !d.success); ROUTING_LOADERS.outbounds(); });
}

function routingDeleteOutbound(id, tag) {
    if (!confirm(`Delete outbound "${tag}"?`)) return;
    fetch(`{{ url_for('api_routing_nodes_delete', node_id=0) }}`.replace('/0/', '/' + id + '/'), { method: 'POST' })
        .then(r => r.json())
        .then(d => { routingShowToast(d.success ? 'Deleted' : (d.message || 'Failed'), !d.success); ROUTING_LOADERS.outbounds(); });
}

ROUTING_LOADERS.groups = function () {
    fetch('{{ url_for('api_routing_groups_list') }}')
        .then(r => r.json())
        .then(d => {
            document.getElementById('routingGroupsList').innerHTML = d.html;
            document.getElementById('routingStatGroups').textContent = d.groups.length;
            ROUTING_GROUPS = d.groups;
        });
};

function routingOpenGroupModal() {
    fetch('{{ url_for('api_routing_groups_list') }}')
        .then(r => r.json())
        .then(d => {
            const box = document.getElementById('routingGroupOutboundsChecklist');
            if (!d.available_nodes.length) { box.innerHTML = '<p class="text-xs opacity-60">No active outbounds yet.</p>'; }
            else {
                box.innerHTML = d.available_nodes.map(n => `
                    <div class="routing-select-card" data-value="${routingEscapeHtml(n.tag)}" onclick="this.classList.toggle('selected')">
                        <span>${routingEscapeHtml(n.tag)}</span>
                    </div>`).join('');
            }
            routingOpenModal('routingAddGroupModal');
        });
}

function routingAddGroup() {
    const name = document.getElementById('routingGroupName').value.trim();
    const tags = Array.from(document.querySelectorAll('#routingGroupOutboundsChecklist .routing-select-card.selected')).map(c => c.dataset.value);
    if (!name || !tags.length) { routingShowToast('Name and at least one outbound are required', true); return; }
    const fd = new FormData(); fd.append('name', name); tags.forEach(t => fd.append('node_tags', t));
    fetch('{{ url_for('api_routing_groups_add') }}', { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => {
            routingShowToast(d.message, !d.success);
            if (d.success) { routingCloseModal('routingAddGroupModal'); document.getElementById('routingGroupName').value = ''; ROUTING_LOADERS.groups(); }
        });
}

function routingDeleteGroup(id, name) {
    if (!confirm(`Delete group "${name}"?`)) return;
    fetch(`{{ url_for('api_routing_groups_delete', group_id=0) }}`.replace('/0/', '/' + id + '/'), { method: 'POST' })
        .then(r => r.json())
        .then(d => { routingShowToast(d.success ? 'Deleted' : (d.message || 'Failed'), !d.success); ROUTING_LOADERS.groups(); });
}

ROUTING_LOADERS.rules = function () {
    fetch('{{ url_for('api_routing_rules_list') }}')
        .then(r => r.json())
        .then(d => {
            document.getElementById('routingRulesList').innerHTML = d.html;
            document.getElementById('routingStatRules').textContent = d.rules.length;
            routingInitRulesSortable();
        });
};

let routingRulesSortable = null;
function routingInitRulesSortable() {
    const tbody = document.getElementById('routingRulesTbody');
    if (!tbody) return;
    if (routingRulesSortable) routingRulesSortable.destroy();
    routingRulesSortable = Sortable.create(tbody, {
        animation: 150,
        ghostClass: 'sortable-ghost',
        handle: '.routing-drag-handle',
        onEnd: function () {
            const newOrder = Array.from(tbody.querySelectorAll('tr')).map(el => el.dataset.id);
            routingSaveRulesOrder(newOrder);
        }
    });
}

function routingSaveRulesOrder(orderArray) {
    fetch('{{ url_for('api_routing_rules_reorder') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ order: orderArray })
    })
        .then(r => r.json())
        .then(d => {
            routingShowToast(d.success ? 'Rule order saved' : (d.message || 'Failed to save order'), !d.success);
            if (!d.success) ROUTING_LOADERS.rules();
        })
        .catch(() => { routingShowToast('Network error while saving order', true); ROUTING_LOADERS.rules(); });
}

function routingUpdateRuleValueField() {
    const type = document.getElementById('routingRuleType').value;
    document.getElementById('routingRuleValue').style.display = (type === 'geosite' || type === 'game') ? 'none' : 'block';
    document.getElementById('routingRuleGeosite').style.display = type === 'geosite' ? 'block' : 'none';
    document.getElementById('routingRuleGame').style.display = type === 'game' ? 'block' : 'none';
}

function routingOpenRuleModal() {
    routingSetRuleTargetValue('direct');
    routingOpenModal('routingAddRuleModal');
}

function routingAddRule() {
    const uiType = document.getElementById('routingRuleType').value;
    const type = uiType === 'game' ? 'geosite' : uiType;
    const value = uiType === 'geosite' ? document.getElementById('routingRuleGeosite').value
                : uiType === 'game' ? document.getElementById('routingRuleGame').value
                : document.getElementById('routingRuleValue').value.trim();
    const target = routingRuleTargetValue;
    if (!value || !target) { routingShowToast('All fields are required', true); return; }
    const fd = new FormData(); fd.append('type', type); fd.append('value', value); fd.append('target', target);
    fetch('{{ url_for('api_routing_rules_add') }}', { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => {
            routingShowToast(d.message, !d.success);
            if (d.success) { routingCloseModal('routingAddRuleModal'); document.getElementById('routingRuleValue').value = ''; ROUTING_LOADERS.rules(); }
        });
}

function routingDeleteRule(id) {
    if (!confirm('Delete this rule?')) return;
    fetch(`{{ url_for('api_routing_rules_delete', rule_id=0) }}`.replace('/0/', '/' + id + '/'), { method: 'POST' })
        .then(r => r.json())
        .then(d => { routingShowToast(d.success ? 'Deleted' : (d.message || 'Failed'), !d.success); ROUTING_LOADERS.rules(); });
}

function routingSetRuleTarget(id, target) {
    const fd = new FormData(); fd.append('target', target);
    fetch(`{{ url_for('api_routing_rules_set_target', rule_id=0) }}`.replace('/0/', '/' + id + '/'), { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => { routingShowToast(d.message || (d.success ? 'Updated' : 'Failed'), !d.success); ROUTING_LOADERS.rules(); });
}

function routingSetIranDefaultTarget(target) {
    const fd = new FormData(); fd.append('target', target);
    fetch('{{ url_for('api_routing_rules_iran_default_set_target') }}', { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => { routingShowToast(d.message || (d.success ? 'Updated' : 'Failed'), !d.success); ROUTING_LOADERS.rules(); })
        .catch(() => routingShowToast('Network error', true));
}

const ROUTING_PROTOCOL_LABELS = {
    wireguard: 'WireGuard', openvpn: 'OpenVPN', openvpn_tunnel: 'OpenVPN',
    l2tp: 'L2TP/IPsec', cisco: 'Cisco AnyConnect',
};

function routingRenderSources(inbounds, ranges) {
    const box = document.getElementById('routingSourcesList');
    let routedCount = 0;
    const inboundRows = inbounds.map(i => {
        if (i.target) routedCount++;
        const current = i.target || '';
        return `<tr>
            <td><span class="routing-mono" title="${routingEscapeHtml(i.tag)}">${routingEscapeHtml(i.tag)}</span><div class="routing-source-sub">sing-box inbound</div></td>
            <td><span class="routing-type-badge">${routingEscapeHtml(i.type)}</span></td>
            <td><button type="button" class="routing-btn routing-btn-sm routing-target-row-btn" onclick="routingOpenTargetPicker('${routingJsAttr(current)}', function(v){ routingSetInboundTarget(${i.inbound_id}, v); })">${routingEscapeHtml(current || 'Not routed')} <i class="fas fa-chevron-down ml-1" style="font-size:0.65rem;opacity:0.6;"></i></button></td>
        </tr>`;
    }).join('');
    const rangeRows = ranges.map(r => {
        if (r.target) routedCount++;
        const proto = ROUTING_PROTOCOL_LABELS[r.protocol] || r.protocol;
        const current = r.target || '';
        const safeProtocol = routingJsAttr(r.protocol);
        const safeRange = routingJsAttr(r.range);
        const safeLabel = routingJsAttr(r.label || '');
        return `<tr>
            <td><span class="routing-mono" title="${routingEscapeHtml(r.range)}">${routingEscapeHtml(r.range)}</span><div class="routing-source-sub">${routingEscapeHtml(r.label)}</div></td>
            <td><span class="routing-type-badge">${routingEscapeHtml(proto)}</span></td>
            <td><button type="button" class="routing-btn routing-btn-sm routing-target-row-btn" onclick="routingOpenTargetPicker('${routingJsAttr(current)}', function(v){ routingSetRangeTarget('${safeProtocol}', '${safeRange}', '${safeLabel}', v); })">${routingEscapeHtml(current || 'Not routed')} <i class="fas fa-chevron-down ml-1" style="font-size:0.65rem;opacity:0.6;"></i></button></td>
        </tr>`;
    }).join('');
    document.getElementById('routingStatSources').textContent = routedCount;
    if (!inboundRows && !rangeRows) {
        box.innerHTML = '<div class="routing-empty"><i class="fas fa-diagram-project"></i><p>No traffic sources detected yet.</p></div>';
        return;
    }
    box.innerHTML = `<div class="routing-table-wrap"><table class="routing-table">
        <thead><tr><th>Source</th><th>Protocol</th><th>Goes to</th></tr></thead>
        <tbody>${inboundRows}${rangeRows}</tbody>
    </table></div>`;
}

ROUTING_LOADERS.sources = function () {
    Promise.all([
        fetch('{{ url_for('api_routing_mappings_list') }}').then(r => r.json()),
        fetch('{{ url_for('api_routing_ranges_list') }}').then(r => r.json()),
    ]).then(([m, r]) => routingRenderSources(m.inbounds || [], r.ranges || []));
};

function routingSetInboundTarget(inboundId, target) {
    const fd = new FormData(); fd.append('singbox_inbound_id', inboundId); fd.append('target', target);
    fetch('{{ url_for('api_routing_mappings_set') }}', { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => { routingShowToast(d.message || (d.success ? 'Updated' : 'Failed'), !d.success); ROUTING_LOADERS.sources(); });
}

function routingSetRangeTarget(protocol, rangeValue, label, target) {
    const fd = new FormData(); fd.append('protocol', protocol); fd.append('range_value', rangeValue); fd.append('label', label); fd.append('target', target);
    fetch('{{ url_for('api_routing_ranges_set') }}', { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => { routingShowToast(d.message || (d.success ? 'Updated' : 'Failed'), !d.success); ROUTING_LOADERS.sources(); });
}

let ROUTING_RELAYS = [];
let ROUTING_ALL_INBOUNDS = [];
let routingTunnelRelayId = '';
let routingTunnelInboundId = '';

function routingRelayStatusClass(status) {
    if (status === 'active' || status === 'reachable') return 'good';
    if (status === 'error' || status === 'unreachable') return 'bad';
    if (status === 'installing') return 'ok';
    return '';
}

let ROUTING_RELAY_PROVISION_POLLERS = {};

function routingRenderRelayServers(relays) {
    const box = document.getElementById('routingRelaysList');
    if (!relays.length) {
        box.innerHTML = '<div class="routing-empty"><i class="fas fa-server"></i><p>No relay servers yet. Add one -- it installs and verifies itself, then you can create tunnels on it.</p></div>';
        return;
    }
    box.innerHTML = relays.map(r => `<div class="routing-card mb-3" style="--stat-rgb: 45,212,191; --stat-rgb-light: 13,148,136;">
        <div class="flex items-start justify-between mb-2">
            <div class="flex items-center gap-3 min-w-0">
                <div class="routing-card-icon"><i class="fas fa-server"></i></div>
                <div class="min-w-0">
                    <h3 class="font-bold text-sm truncate" title="${routingEscapeHtml(r.name)}">${routingEscapeHtml(r.name)}</h3>
                    <p class="text-xs opacity-70 truncate">${routingEscapeHtml(r.host)}:${r.ssh_port} (${routingEscapeHtml(r.ssh_user)})</p>
                </div>
            </div>
            <span class="routing-delay-badge ${routingRelayStatusClass(r.status)}" id="routingRelayBadge-${r.id}">${routingEscapeHtml(r.status)}</span>
        </div>
        <div class="text-xs opacity-70 mb-2 hidden" id="routingRelayProgress-${r.id}"></div>
        <div class="flex gap-2">
            <button type="button" class="routing-btn flex-1" onclick="routingTestRelaySsh(${r.id})"><i class="fas fa-plug"></i> Test SSH</button>
            <button type="button" class="routing-btn flex-1" style="background:#4f46e5;color:#fff;" onclick="routingProvisionRelay(${r.id})" id="routingRelayInstallBtn-${r.id}" ${r.status === 'installing' ? 'disabled' : ''}><i class="fas fa-download"></i> ${r.status === 'active' ? 'Reinstall' : 'Install'}</button>
            <button type="button" class="routing-btn flex-1" onclick="routingOpenEditRelayModal(${r.id})"><i class="fas fa-pen"></i> Edit</button>
            <button type="button" class="routing-btn routing-btn-danger flex-1" onclick="routingDeleteRelay(${r.id}, '${routingJsAttr(r.name)}')"><i class="fas fa-trash"></i> Delete</button>
        </div>
    </div>`).join('');
}

function routingRenderTunnelsTable(relays, tunnels) {
    const box = document.getElementById('routingTunnelsList');
    if (!tunnels.length) {
        box.innerHTML = '<div class="routing-empty"><i class="fas fa-diagram-project"></i><p>No tunnels yet. Install a relay server above, then add a tunnel on it.</p></div>';
        return;
    }
    const relayById = {};
    relays.forEach(r => { relayById[r.id] = r; });
    const rows = tunnels.map(t => `<tr>
        <td class="routing-mono">${relayById[t.relay_id] ? routingEscapeHtml(relayById[t.relay_id].name) : '—'}</td>
        <td class="routing-mono">${t.inbound_tag ? routingEscapeHtml(t.inbound_tag) : '—'}</td>
        <td class="routing-mono">${t.public_port}</td>
        <td><span class="routing-delay-badge ${routingRelayStatusClass(t.status)}">${routingEscapeHtml(t.status)}</span></td>
        <td class="text-right whitespace-nowrap">
            <button type="button" class="routing-btn routing-btn-sm" title="Test reachability" onclick="routingTestTunnel(${t.id})"><i class="fas fa-satellite-dish"></i></button>
            <button type="button" class="routing-btn routing-btn-danger routing-btn-sm" onclick="routingDeleteTunnel(${t.id})"><i class="fas fa-trash"></i></button>
        </td>
    </tr>`).join('');
    box.innerHTML = `<div class="routing-table-wrap"><table class="routing-table">
        <thead><tr><th>Relay</th><th>Inbound</th><th>Public Port</th><th>Status</th><th></th></tr></thead>
        <tbody>${rows}</tbody>
    </table></div>`;
}

ROUTING_LOADERS.relays = function () {
    fetch('{{ url_for('api_routing_relays_list') }}')
        .then(r => r.json())
        .then(d => {
            ROUTING_RELAYS = d.relays || [];
            routingRenderRelayServers(ROUTING_RELAYS);
            routingRenderTunnelsTable(ROUTING_RELAYS, d.tunnels || []);
            // If a relay is mid-install (e.g. this poll survived a tab switch
            // or page reload), resume watching it instead of leaving its
            // card stuck on a stale "installing" badge with no progress.
            ROUTING_RELAYS.forEach(r => { if (r.status === 'installing' && !ROUTING_RELAY_PROVISION_POLLERS[r.id]) routingPollProvisionStatus(r.id); });
        });
};

function routingProvisionRelay(id) {
    fetch(`{{ url_for('api_routing_relays_provision', relay_id=0) }}`.replace('/0/', '/' + id + '/'), { method: 'POST' })
        .then(r => r.json())
        .then(d => {
            if (!d.success) { routingShowToast(d.message || 'Failed to start installation', true); return; }
            routingPollProvisionStatus(id);
        });
}

function routingPollProvisionStatus(id) {
    if (ROUTING_RELAY_PROVISION_POLLERS[id]) return;
    const badge = document.getElementById('routingRelayBadge-' + id);
    const progress = document.getElementById('routingRelayProgress-' + id);
    const installBtn = document.getElementById('routingRelayInstallBtn-' + id);
    if (badge) { badge.textContent = 'installing'; badge.className = 'routing-delay-badge ok'; }
    if (installBtn) installBtn.disabled = true;
    if (progress) progress.classList.remove('hidden');

    const tick = () => {
        fetch(`{{ url_for('api_routing_relays_provision_status', relay_id=0) }}`.replace('/0/', '/' + id + '/'))
            .then(r => r.json())
            .then(d => {
                const pct = d.total ? Math.round((d.stage / d.total) * 100) : 0;
                if (progress) progress.textContent = `${d.message || ''} (${d.stage}/${d.total} — ${pct}%)`;
                if (d.status === 'success') {
                    clearInterval(ROUTING_RELAY_PROVISION_POLLERS[id]);
                    delete ROUTING_RELAY_PROVISION_POLLERS[id];
                    if (badge) { badge.textContent = 'active'; badge.className = 'routing-delay-badge good'; }
                    if (installBtn) { installBtn.disabled = false; installBtn.innerHTML = '<i class="fas fa-download"></i> Reinstall'; }
                    if (progress) progress.textContent = 'Installed and running.';
                    routingShowToast('Relay installed and running -- you can add a tunnel now.');
                    ROUTING_LOADERS.relays();
                } else if (d.status === 'error') {
                    clearInterval(ROUTING_RELAY_PROVISION_POLLERS[id]);
                    delete ROUTING_RELAY_PROVISION_POLLERS[id];
                    if (badge) { badge.textContent = 'error'; badge.className = 'routing-delay-badge bad'; }
                    if (installBtn) installBtn.disabled = false;
                    if (progress) progress.textContent = 'Failed: ' + (d.message || 'unknown error');
                    routingShowToast('Installation failed: ' + (d.message || 'unknown error'), true);
                }
            });
    };
    tick();
    ROUTING_RELAY_PROVISION_POLLERS[id] = setInterval(tick, 1200);
}

let routingEditingRelayId = null;

function routingOpenAddRelayModal() {
    routingEditingRelayId = null;
    document.getElementById('routingRelayModalTitle').innerHTML = '<i class="fas fa-tower-broadcast mr-2 text-indigo-400"></i>Add Relay';
    document.getElementById('routingRelayName').value = '';
    document.getElementById('routingRelayHost').value = '';
    document.getElementById('routingRelaySshPort').value = '22';
    document.getElementById('routingRelaySshUser').value = 'root';
    document.getElementById('routingRelaySshPassword').value = '';
    document.getElementById('routingRelaySshPasswordLabel').textContent = 'SSH Password';
    document.getElementById('routingRelaySaveBtn').textContent = 'Add';
    routingOpenModal('routingAddRelayModal');
}

function routingOpenEditRelayModal(id) {
    const relay = ROUTING_RELAYS.find(r => r.id === id);
    if (!relay) return;
    routingEditingRelayId = id;
    document.getElementById('routingRelayModalTitle').innerHTML = '<i class="fas fa-tower-broadcast mr-2 text-indigo-400"></i>Edit Relay';
    document.getElementById('routingRelayName').value = relay.name;
    document.getElementById('routingRelayHost').value = relay.host;
    document.getElementById('routingRelaySshPort').value = relay.ssh_port;
    document.getElementById('routingRelaySshUser').value = relay.ssh_user;
    document.getElementById('routingRelaySshPassword').value = '';
    document.getElementById('routingRelaySshPasswordLabel').textContent = 'SSH Password (leave blank to keep current)';
    document.getElementById('routingRelaySaveBtn').textContent = 'Save';
    routingOpenModal('routingAddRelayModal');
}

function routingSaveRelay() {
    const name = document.getElementById('routingRelayName').value.trim();
    const host = document.getElementById('routingRelayHost').value.trim();
    const sshPort = document.getElementById('routingRelaySshPort').value.trim() || '22';
    const sshUser = document.getElementById('routingRelaySshUser').value.trim() || 'root';
    const sshPassword = document.getElementById('routingRelaySshPassword').value;
    const isEdit = routingEditingRelayId !== null;
    if (!name || !host || (!isEdit && !sshPassword)) {
        routingShowToast(isEdit ? 'Name and host are required' : 'Name, host and SSH password are required', true);
        return;
    }
    const fd = new FormData();
    fd.append('name', name); fd.append('host', host); fd.append('ssh_port', sshPort);
    fd.append('ssh_user', sshUser); fd.append('ssh_password', sshPassword);
    const url = isEdit
        ? `{{ url_for('api_routing_relays_edit', relay_id=0) }}`.replace('/0/', '/' + routingEditingRelayId + '/')
        : '{{ url_for('api_routing_relays_add') }}';
    const btn = document.getElementById('routingRelaySaveBtn');
    if (btn.disabled) return;
    const originalLabel = btn.textContent;
    btn.disabled = true;
    btn.textContent = 'Saving...';
    fetch(url, { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => {
            routingShowToast(d.message, !d.success);
            if (d.success) {
                routingCloseModal('routingAddRelayModal');
                ROUTING_LOADERS.relays();
                if (!isEdit && d.relay_id) routingProvisionRelay(d.relay_id);
            }
        })
        .finally(() => { btn.disabled = false; btn.textContent = originalLabel; });
}

function routingTestRelaySsh(id) {
    routingShowToast('Testing SSH connection...');
    fetch(`{{ url_for('api_routing_relays_test_ssh', relay_id=0) }}`.replace('/0/', '/' + id + '/'), { method: 'POST' })
        .then(r => r.json())
        .then(d => { routingShowToast(d.message, !d.success); ROUTING_LOADERS.relays(); });
}

function routingDeleteRelay(id, name) {
    if (!confirm(`Delete relay "${name}" and all its tunnels?`)) return;
    if (ROUTING_RELAY_PROVISION_POLLERS[id]) { clearInterval(ROUTING_RELAY_PROVISION_POLLERS[id]); delete ROUTING_RELAY_PROVISION_POLLERS[id]; }
    fetch(`{{ url_for('api_routing_relays_delete', relay_id=0) }}`.replace('/0/', '/' + id + '/'), { method: 'POST' })
        .then(r => r.json())
        .then(d => { routingShowToast(d.success ? 'Deleted' : (d.message || 'Failed'), !d.success); ROUTING_LOADERS.relays(); });
}

function routingSetTunnelRelay(v) {
    routingTunnelRelayId = v;
    const relay = ROUTING_RELAYS.find(r => String(r.id) === v);
    document.getElementById('routingTunnelRelayLabel').textContent = relay ? relay.name : 'Choose...';
}

function routingSetTunnelInbound(v) {
    routingTunnelInboundId = v;
    const inbound = ROUTING_ALL_INBOUNDS.find(i => String(i.inbound_id) === v);
    document.getElementById('routingTunnelInboundLabel').textContent = inbound ? inbound.tag : 'Choose...';
}

function routingOpenAddTunnelModal() {
    const installedRelays = ROUTING_RELAYS.filter(r => r.status === 'active');
    if (!installedRelays.length) {
        routingShowToast('No installed relay servers yet -- add a relay and wait for it to finish installing first.', true);
        return;
    }
    routingTunnelRelayId = '';
    routingTunnelInboundId = '';
    document.getElementById('routingTunnelRelayLabel').textContent = 'Choose...';
    document.getElementById('routingTunnelInboundLabel').textContent = 'Choose...';
    document.getElementById('routingTunnelPublicPort').value = '';
    fetch('{{ url_for('api_routing_mappings_list') }}')
        .then(r => r.json())
        .then(d => {
            ROUTING_ALL_INBOUNDS = d.inbounds || [];
            routingOpenModal('routingAddTunnelModal');
        });
}

function routingAddTunnel() {
    const publicPort = document.getElementById('routingTunnelPublicPort').value.trim();
    if (!routingTunnelRelayId || !routingTunnelInboundId || !publicPort) {
        routingShowToast('Relay, inbound and public port are all required', true);
        return;
    }
    const fd = new FormData();
    fd.append('relay_id', routingTunnelRelayId);
    fd.append('singbox_inbound_id', routingTunnelInboundId);
    fd.append('public_port', publicPort);
    const btn = document.getElementById('routingTunnelDeployBtn');
    if (btn.disabled) return;
    const originalLabel = btn.textContent;
    btn.disabled = true;
    btn.textContent = 'Deploying...';
    routingShowToast('Deploying tunnel — this can take a moment...');
    fetch('{{ url_for('api_routing_relay_tunnels_add') }}', { method: 'POST', body: fd })
        .then(r => r.json())
        .then(d => {
            routingShowToast(d.message, !d.success);
            if (d.success) { routingCloseModal('routingAddTunnelModal'); ROUTING_LOADERS.relays(); }
        })
        .finally(() => { btn.disabled = false; btn.textContent = originalLabel; });
}

function routingTestTunnel(id) {
    fetch(`{{ url_for('api_routing_relay_tunnels_test', tunnel_id=0) }}`.replace('/0/', '/' + id + '/'), { method: 'POST' })
        .then(r => r.json())
        .then(d => routingShowToast(d.message, !d.success));
}

function routingDeleteTunnel(id) {
    if (!confirm('Delete this tunnel?')) return;
    fetch(`{{ url_for('api_routing_relay_tunnels_delete', tunnel_id=0) }}`.replace('/0/', '/' + id + '/'), { method: 'POST' })
        .then(r => r.json())
        .then(d => { routingShowToast(d.success ? 'Deleted' : (d.message || 'Failed'), !d.success); ROUTING_LOADERS.relays(); });
}

// ============================================================================
// Topology diagram -- ported from sc.py's own renderTopology()/topoAnimFrame()
// animation engine (same requestAnimationFrame dot-flow-along-a-path design,
// same signature-based skip-if-unchanged re-render), adapted to this
// project's unified `sources` list (sc.py only ever had one source kind --
// sing-box inbounds -- this system also routes WireGuard/OpenVPN/L2TP/Cisco
// ranges, so both kinds share the left column here) and to the color
// language the rest of this Routing page already established in the target
// picker (gray=not routed, green=direct, red=block, blue=outbounds,
// purple=load balancers) instead of sc.py's single-hue hacker-green theme.
// ============================================================================
function routingFormatBytes(bytes) {
    if (!bytes || bytes < 1) return '0 B';
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    let i = Math.floor(Math.log(bytes) / Math.log(1024));
    if (i >= units.length) i = units.length - 1;
    const val = bytes / Math.pow(1024, i);
    return (i === 0 ? val.toFixed(0) : val.toFixed(val < 10 ? 2 : 1)) + ' ' + units[i];
}
function routingFormatSpeed(bytesPerSec) { return routingFormatBytes(bytesPerSec) + '/s'; }

const ROUTING_TOPO_NO_TRAFFIC_THRESHOLD = 100;
const ROUTING_TOPO_MB_PER_DOT = 0.5;
const ROUTING_TOPO_MAX_DOTS = 12;
const ROUTING_TOPO_MAX_REF_MBPS = ROUTING_TOPO_MB_PER_DOT * ROUTING_TOPO_MAX_DOTS;

function routingComputeEdgeVisual(speedBytesPerSec) {
    const isIdle = speedBytesPerSec < ROUTING_TOPO_NO_TRAFFIC_THRESHOLD;
    const speedMBps = speedBytesPerSec / 1048576;
    const widthNorm = Math.min(1, speedMBps / ROUTING_TOPO_MAX_REF_MBPS);
    return {
        isIdle,
        dotCount: isIdle ? 1 : Math.min(ROUTING_TOPO_MAX_DOTS, Math.max(1, Math.round(speedMBps / ROUTING_TOPO_MB_PER_DOT))),
        dotR: 2 + widthNorm * 1.2,
        dotDur: 4 - widthNorm * 3,
    };
}

let routingTopoEdgeState = {};
let routingTopoRafId = null;
let routingTopoLastFrameTime = null;
let routingLastTopologySignature = null;
let routingLastTrafficSnapshot = {};

function routingStopTopoAnimLoop() {
    if (routingTopoRafId) { cancelAnimationFrame(routingTopoRafId); routingTopoRafId = null; }
    routingTopoLastFrameTime = null;
}
function routingStartTopoAnimLoop() {
    if (routingTopoRafId) return;
    routingTopoLastFrameTime = null;
    routingTopoRafId = requestAnimationFrame(routingTopoAnimFrame);
}
function routingSpawnEdgeDot(st, id, edgesGroup) {
    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    circle.setAttribute('class', 'topo-flow-dot');
    circle.setAttribute('data-source-id', id);
    circle.setAttribute('r', st.r.toFixed(1));
    circle.setAttribute('fill', st.color);
    const pt = st.pathEl.getPointAtLength(0);
    circle.setAttribute('cx', pt.x.toFixed(2));
    circle.setAttribute('cy', pt.y.toFixed(2));
    edgesGroup.appendChild(circle);
    st.dots.push({ el: circle, progress: 0 });
}
function routingTopoAnimFrame(now) {
    // اگه یه فریم به هر دلیلی throw کنه (مثلاً یه المان SVG که همزمان با
    // رندر مجددِ توپولوژی از صفحه حذف شده)، حلقه نباید بی‌صدا بمیره --
    // چون requestAnimationFrame خودش رو دوباره صدا نمی‌زنه مگه اینکه
    // صریحاً از داخل همین فریم بخوایمش. finally تضمین می‌کنه فریم بعدی
    // همیشه زمان‌بندی بشه، چه این فریم خطا بده چه نده (self-healing).
    try {
        if (routingTopoLastFrameTime === null) routingTopoLastFrameTime = now;
        const dt = Math.min(0.1, (now - routingTopoLastFrameTime) / 1000);
        routingTopoLastFrameTime = now;
        const edgesGroup = document.querySelector('#routingTopologySvg g.topo-edges');
        for (const id in routingTopoEdgeState) {
            const st = routingTopoEdgeState[id];
            if (!st.pathEl || !st.pathEl.isConnected || st.totalLength <= 0) continue;
            const rate = st.dur > 0 ? (dt / st.dur) : 0;
            for (let i = st.dots.length - 1; i >= 0; i--) {
                const dot = st.dots[i];
                dot.progress += rate;
                if (dot.progress >= 1) {
                    if (dot.el && dot.el.parentNode) dot.el.remove();
                    st.dots.splice(i, 1);
                    continue;
                }
                const pt = st.pathEl.getPointAtLength(dot.progress * st.totalLength);
                dot.el.setAttribute('cx', pt.x.toFixed(2));
                dot.el.setAttribute('cy', pt.y.toFixed(2));
            }
            if (!st.isIdle && st.targetCount > 0 && edgesGroup) {
                st.spawnTimer += dt;
                const spawnInterval = st.dur / st.targetCount;
                if (st.spawnTimer >= spawnInterval) {
                    st.spawnTimer = 0;
                    routingSpawnEdgeDot(st, id, edgesGroup);
                }
            }
        }
    } catch (e) {
        console.error('routingTopoAnimFrame error (recovering):', e);
    } finally {
        routingTopoRafId = requestAnimationFrame(routingTopoAnimFrame);
    }
}
function routingEnsureEdgeDotState(id, pathEl, color) {
    routingTopoEdgeState[id] = { pathEl, totalLength: pathEl.getTotalLength(), color, dots: [], dur: 4, r: 2, isIdle: true, targetCount: 0, spawnTimer: 0 };
    return routingTopoEdgeState[id];
}
function routingSyncEdgeDotCount(id, ev) {
    const st = routingTopoEdgeState[id];
    if (!st) return;
    st.dur = ev.dotDur; st.r = ev.dotR; st.isIdle = ev.isIdle; st.targetCount = ev.dotCount;
}

function routingTopologySignature(data) {
    const nodeSig = data.nodes.map(n => n.tag + ':' + (n.status || 'unknown')).sort().join(',');
    const srcSig = data.sources.map(s => s.id + ':' + (s.target || '')).sort().join(',');
    const lbSig = data.loadbalancers.map(l => l.name + ':' + l.nodes.slice().sort().join('+')).sort().join(',');
    const ruleSig = data.rules.map(r => r.id + ':' + r.type + ':' + r.value + ':' + r.target).sort().join(',');
    return [nodeSig, srcSig, lbSig, ruleSig].join('|');
}

function routingTopoColorFor(targetTag, destObj) {
    if (targetTag === 'block') return '#f87171';
    if (targetTag === 'direct') return '#4ade80';
    if (destObj && destObj.kind === 'lb') return '#c084fc';
    if (destObj && destObj.kind === 'node') return '#60a5fa';
    return '#94a3b8';
}

function routingRenderTopology(data, traffic) {
    const svg = document.getElementById('routingTopologySvg');
    if (!svg) return;
    traffic = traffic || {};
    routingStopTopoAnimLoop();
    routingTopoEdgeState = {};
    const edgeDotQueue = [];

    const RULE_TYPE_LABELS = { domain_suffix: 'Domain', ip_cidr: 'IP / CIDR', geosite: 'Geosite', iran_default: 'Default' };

    const nodeStatusByTag = {};
    data.nodes.forEach(n => { nodeStatusByTag[n.tag] = n.status || 'unknown'; });

    const destTargeted = {};
    data.sources.forEach(s => { if (s.target) destTargeted[s.target] = true; });
    data.rules.forEach(r => { if (r.target) destTargeted[r.target] = true; });

    const destinations = [];
    const destIndex = {};
    const standaloneTags = data.nodes.filter(n => destTargeted[n.tag]).map(n => n.tag).sort();
    standaloneTags.forEach(tag => {
        destIndex[tag] = destinations.length;
        destinations.push({ tag, kind: 'node', label: tag, status: nodeStatusByTag[tag] || 'unknown', jump: 'outbounds' });
    });
    const lbs = data.loadbalancers.slice().sort((a, b) => a.name < b.name ? -1 : 1);
    lbs.forEach(lb => {
        const members = lb.nodes.map(t => ({ tag: t, status: nodeStatusByTag[t] || 'unknown' }));
        destIndex[lb.name] = destinations.length;
        destinations.push({ tag: lb.name, kind: 'lb', label: lb.name, members, jump: 'groups' });
    });
    destIndex['direct'] = destinations.length;
    destinations.push({ tag: 'direct', kind: 'direct', label: 'DIRECT' });
    destIndex['block'] = destinations.length;
    destinations.push({ tag: 'block', kind: 'block', label: 'BLOCK' });

    const srcItems = data.sources.map(s => ({
        key: s.id, label: routingTruncateText(s.label, 20), sub: s.sub ? routingTruncateText(s.sub, 22) : '',
        jump: 'sources', targetTag: s.target || null,
        sortIdx: (s.target && destIndex.hasOwnProperty(s.target)) ? destIndex[s.target] : 999,
    })).sort((a, b) => a.sortIdx - b.sortIdx);

    const srcRules = data.rules.map(r => ({
        key: 'rule:' + r.id, label: routingTruncateText(r.value, 20), sub: RULE_TYPE_LABELS[r.type] || r.type,
        jump: 'rules', targetTag: r.target,
        sortIdx: destIndex.hasOwnProperty(r.target) ? destIndex[r.target] : 999,
    })).sort((a, b) => a.sortIdx - b.sortIdx);

    if (srcItems.length === 0 && srcRules.length === 0) {
        svg.setAttribute('viewBox', '0 0 900 120');
        svg.innerHTML = '<text x="20" y="50" class="topo-empty">No sources or rules configured yet.</text><text x="20" y="72" class="topo-empty">Add an outbound and route a source to see the traffic flow here.</text>';
        return;
    }

    const rowH = 80, padTop = 40, boxH = 60;
    const leftW = 200, midW = 230, rightW = 190, gap = 260;
    const leftX = 24, midX = leftX + leftW + gap, rightX = midX + midW + gap;
    const svgW = rightX + rightW + 24;
    let svgH = padTop * 2 + Math.max(srcItems.length, destinations.length, srcRules.length) * rowH;
    if (svgH < 300) svgH = 300;
    svg.setAttribute('viewBox', `0 0 ${svgW} ${svgH}`);

    function renderSourceCol(items, xBase, width, anchorRight, showTraffic) {
        const pos = {};
        let html = '';
        items.forEach((it, i) => {
            const yTop = padTop + i * rowH, yMid = yTop + boxH / 2;
            // Edges must leave from the box's OUTER edge facing the destination
            // column, not its own left corner -- anchoring at xBase regardless
            // of column drew the left column's edges starting at its own left
            // edge, cutting straight across the box's full width before ever
            // exiting it (visible as a line running through the card).
            pos[it.key] = { x: anchorRight ? (xBase + width) : xBase, y: yMid };
            let labelY, subHtml, trafficHtml, totalHtml;
            if (showTraffic) {
                labelY = 16;
                subHtml = it.sub ? `<text x="13" y="29" class="topo-sub">${routingEscapeHtml(it.sub)}</text>` : '';
                trafficHtml = `<text x="13" y="43" class="topo-traffic" data-traffic-id="${routingEscapeHtml(it.key)}">–</text>`;
                totalHtml = `<text x="13" y="56" class="topo-traffic-total" data-traffic-total-id="${routingEscapeHtml(it.key)}">–</text>`;
            } else {
                labelY = it.sub ? 17 : (boxH / 2 + 5);
                subHtml = it.sub ? `<text x="13" y="31" class="topo-sub">${routingEscapeHtml(it.sub)}</text>` : '';
                trafficHtml = ''; totalHtml = '';
            }
            html += `<g class="topo-node src" data-jump="${it.jump}" transform="translate(${xBase},${yTop})">`
                + `<rect width="${width}" height="${boxH}" rx="9"></rect>`
                + `<text x="13" y="${labelY}" class="topo-label">${routingEscapeHtml(it.label)}</text>`
                + subHtml + trafficHtml + totalHtml + `</g>`;
        });
        return { pos, html };
    }

    const L1 = renderSourceCol(srcItems, leftX, leftW, true, true);
    const L3 = renderSourceCol(srcRules, rightX, rightW, false, false);

    const destPosLeft = {}, destPosRight = {};
    let destHtml = '';
    destinations.forEach((d, i) => {
        const yTop = padTop + i * rowH, yMid = yTop + boxH / 2;
        destPosLeft[d.tag] = { x: midX, y: yMid };
        destPosRight[d.tag] = { x: midX + midW, y: yMid };
        let inner = '';
        if (d.kind === 'lb') {
            const memberNames = d.members.map(m => m.tag).join(', ');
            const lbAllDead = d.members.length > 0 && d.members.every(m => m.status === 'dead');
            inner += `<text x="13" y="17" class="topo-label">${routingEscapeHtml(d.label)}</text>`;
            inner += `<text x="13" y="31" class="topo-sub">${routingEscapeHtml(routingTruncateText(memberNames, 30))}</text>`;
            if (lbAllDead) inner += `<text x="${midW - 18}" y="${boxH / 2 + 6}" class="topo-x-mark" text-anchor="middle">✕</text>`;
        } else {
            const textX = d.kind === 'node' ? 25 : 13;
            if (d.kind === 'node') {
                inner += `<circle class="topo-dot ${d.status}" cx="13" cy="${boxH / 2}" r="4"></circle>`;
                if (d.status === 'dead') inner += `<text x="${midW - 18}" y="${boxH / 2 + 6}" class="topo-x-mark" text-anchor="middle">✕</text>`;
            }
            inner += `<text x="${textX}" y="${boxH / 2 + 5}" class="topo-label">${routingEscapeHtml(d.label)}</text>`;
        }
        destHtml += `<g class="topo-node dest ${d.kind}" data-jump="${d.jump || ''}" transform="translate(${midX},${yTop})">`
            + `<rect width="${midW}" height="${boxH}" rx="9"></rect>` + inner + `</g>`;
    });

    const headerY = padTop - 16;
    const headersHtml = `<text x="${leftX}" y="${headerY}" class="topo-col-header">Sources</text>`
        + `<text x="${midX}" y="${headerY}" class="topo-col-header">Outbounds</text>`
        + `<text x="${rightX}" y="${headerY}" class="topo-col-header">Rules</text>`;

    let edgesHtml = '', edgeId = 0;
    srcItems.forEach(s => {
        // Unlike sc.py, this system has no independent enable/disable toggle
        // on a mapping/range -- clearing a target deletes the row outright
        // (see api_routing_mappings_set/api_routing_ranges_set), so "not
        // routed" here always means no target at all, never a real target
        // temporarily switched off. There's nothing to draw a disabled dashed
        // edge to, so an unrouted source simply gets no edge.
        if (!s.targetTag) return;
        const sp = L1.pos[s.key], dp = destPosLeft[s.targetTag];
        if (!sp || !dp) return;
        edgeId++;
        const pathId = 'routingTopoEdge' + edgeId;
        const midXc = (sp.x + dp.x) / 2;
        const d0 = `M${sp.x},${sp.y} C${midXc},${sp.y} ${midXc},${dp.y} ${dp.x},${dp.y}`;
        const color = routingTopoColorFor(s.targetTag, destinations[destIndex[s.targetTag]]);
        const edgeTraffic = traffic[s.key];
        const edgeSpeed = edgeTraffic ? (edgeTraffic.speed_dl + edgeTraffic.speed_ul) : 0;
        const ev = routingComputeEdgeVisual(edgeSpeed);
        edgesHtml += `<path id="${pathId}" class="topo-edge" data-source-id="${routingEscapeHtml(s.key)}" style="stroke-width:2.5px" stroke="${color}" d="${d0}"></path>`;
        edgeDotQueue.push({ id: s.key, pathId, color, ev });
    });
    srcRules.forEach(s => {
        const sp = L3.pos[s.key], dp = s.targetTag ? destPosRight[s.targetTag] : null;
        if (!sp || !dp) return;
        edgeId++;
        const pathId = 'routingTopoEdge' + edgeId;
        const midXc = (sp.x + dp.x) / 2;
        const d0 = `M${sp.x},${sp.y} C${midXc},${sp.y} ${midXc},${dp.y} ${dp.x},${dp.y}`;
        const color = routingTopoColorFor(s.targetTag, destinations[destIndex[s.targetTag]]);
        edgesHtml += `<path id="${pathId}" class="topo-edge" style="stroke-width:2.5px" stroke="${color}" d="${d0}"></path>`;
    });

    svg.innerHTML = `<g class="topo-headers">${headersHtml}</g><g class="topo-edges">${edgesHtml}</g><g class="topo-nodes">${L1.html}${destHtml}${L3.html}</g>`;

    edgeDotQueue.forEach(eq => {
        const pathEl = document.getElementById(eq.pathId);
        if (!pathEl) return;
        routingEnsureEdgeDotState(eq.id, pathEl, eq.color);
        routingSyncEdgeDotCount(eq.id, eq.ev);
    });
    if (edgeDotQueue.length > 0) routingStartTopoAnimLoop();

    svg.querySelectorAll('[data-jump]').forEach(el => {
        const tab = el.getAttribute('data-jump');
        if (!tab) return;
        el.style.cursor = 'pointer';
        el.addEventListener('click', () => routingSwitchTab(tab));
    });
}

function routingTruncateText(s, n) {
    s = String(s ?? '');
    return s.length > n ? s.slice(0, n - 1) + '…' : s;
}

function routingUpdateTopologyEdgeTraffic(traffic) {
    for (const id in routingTopoEdgeState) {
        const t = traffic[id];
        const v = t ? (t.speed_dl + t.speed_ul) : 0;
        routingSyncEdgeDotCount(id, routingComputeEdgeVisual(v));
    }
}

function routingLoadTopology(force) {
    fetch('{{ url_for("api_routing_topology") }}').then(r => r.json()).then(data => {
        const sig = routingTopologySignature(data);
        if (force || sig !== routingLastTopologySignature) {
            routingLastTopologySignature = sig;
            routingRenderTopology(data, routingLastTrafficSnapshot);
        }
    }).catch(() => {});
}

let routingTopoPollInterval = null;
function routingStartTopoPoll() { if (!routingTopoPollInterval) routingTopoPollInterval = setInterval(() => routingLoadTopology(false), 15000); }
function routingStopTopoPoll() { if (routingTopoPollInterval) { clearInterval(routingTopoPollInterval); routingTopoPollInterval = null; } routingStopTopoAnimLoop(); }

function routingExportTopologyImage() {
    const svg = document.getElementById('routingTopologySvg');
    if (!svg) return;
    try {
        const clone = svg.cloneNode(true);
        const vb = svg.getAttribute('viewBox').split(' ').map(Number);
        const w = vb[2], h = vb[3];
        clone.setAttribute('width', w); clone.setAttribute('height', h);
        const isLight = document.body.classList.contains('light-theme');
        const bgColor = isLight ? '#ffffff' : '#111827';
        const bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        bgRect.setAttribute('x', '0'); bgRect.setAttribute('y', '0');
        bgRect.setAttribute('width', w); bgRect.setAttribute('height', h);
        bgRect.setAttribute('fill', bgColor);
        clone.insertBefore(bgRect, clone.firstChild);
        const svgString = new XMLSerializer().serializeToString(clone);
        const svgDataUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgString);
        const scale = 3;
        const img = new Image();
        img.onload = function () {
            const canvas = document.createElement('canvas');
            canvas.width = w * scale; canvas.height = h * scale;
            const ctx = canvas.getContext('2d');
            ctx.fillStyle = bgColor; ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, w * scale, h * scale);
            canvas.toBlob(function (blob) {
                if (!blob) { routingShowToast('Export failed', true); return; }
                const url = URL.createObjectURL(blob);
                const now = new Date();
                const pad = n => n < 10 ? '0' + n : n;
                const stamp = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}_${pad(now.getHours())}-${pad(now.getMinutes())}`;
                const a = document.createElement('a');
                a.href = url; a.download = `routing-topology-${stamp}.png`;
                document.body.appendChild(a); a.click(); document.body.removeChild(a);
                setTimeout(() => URL.revokeObjectURL(url), 1000);
            }, 'image/png');
        };
        img.onerror = () => routingShowToast('Export failed', true);
        img.src = svgDataUrl;
    } catch (e) { routingShowToast('Export failed', true); }
}

ROUTING_LOADERS.topology = function () { routingLoadTopology(true); };

// ============================================================================
// Traffic banner + edge-speed feed for the Topology diagram only -- the full
// Traffic monitoring page (stat cards, charts, date-range report) now lives
// on its own dedicated page (routing_traffic.html / routingTrafficPage),
// reached via the "Traffic" link above and from Settings.
// ============================================================================
function routingApplyTrafficData(data) {
    routingLastTrafficSnapshot = data;
    document.querySelectorAll('[data-traffic-id]').forEach(el => {
        const t = data[el.getAttribute('data-traffic-id')];
        el.textContent = t ? `↓${routingFormatSpeed(t.speed_dl)} ↑${routingFormatSpeed(t.speed_ul)}` : '↓0 B/s ↑0 B/s';
    });
    document.querySelectorAll('[data-traffic-total-id]').forEach(el => {
        const t = data[el.getAttribute('data-traffic-total-id')];
        el.textContent = t ? routingFormatBytes(t.total_dl + t.total_ul) : '0 B';
    });
    const tot = data.total || { speed_dl: 0, speed_ul: 0, total_dl: 0, total_ul: 0 };
    const elDl = document.getElementById('routingTopoTotalDl');
    const elUl = document.getElementById('routingTopoTotalUl');
    const elVol = document.getElementById('routingTopoTotalVol');
    if (elDl) elDl.textContent = routingFormatSpeed(tot.speed_dl);
    if (elUl) elUl.textContent = routingFormatSpeed(tot.speed_ul);
    if (elVol) elVol.textContent = 'Total: ' + routingFormatBytes(tot.total_dl + tot.total_ul);
    routingUpdateTopologyEdgeTraffic(data);
}

function routingLoadTrafficSnapshot() {
    fetch('{{ url_for("api_routing_traffic") }}').then(r => r.json()).then(routingApplyTrafficData).catch(() => {});
}
let routingTrafficSnapshotInterval = null;
function routingStartTrafficSnapshotPoll() { if (!routingTrafficSnapshotInterval) { routingLoadTrafficSnapshot(); routingTrafficSnapshotInterval = setInterval(routingLoadTrafficSnapshot, 2000); } }
function routingStopTrafficSnapshotPoll() { if (routingTrafficSnapshotInterval) { clearInterval(routingTrafficSnapshotInterval); routingTrafficSnapshotInterval = null; } }

document.addEventListener('DOMContentLoaded', function () {
    ROUTING_LOADERS.outbounds();
    ROUTING_LOADERS.groups();
    ROUTING_LOADERS.rules();
    ROUTING_LOADERS.sources();
    ROUTING_LOADERS.relays();
    routingStartDelayAutoRefresh();
});

document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        routingStopDelayAutoRefresh();
        routingStopTopoPoll();
        routingStopTrafficSnapshotPoll();
        return;
    }
    routingStartDelayAutoRefresh();
    routingRefreshCachedDelays();
    if (routingActiveTab === 'topology') {
        routingStartTopoPoll();
        routingStartTrafficSnapshotPoll();
        routingLoadTopology(false);
        routingLoadTrafficSnapshot();
    }
});
</script>
{% endblock %}