{{define "admin/probe_agent.html"}}
{{template "admin/layout_head" .}}
<style>
  .cs-admin-probe-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.85rem;
  }
  .cs-admin-probe-kpi__card {
    background: #fff;
    border: 1px solid rgba(15, 39, 68, 0.08);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    box-shadow: 0 1px 2px rgba(15, 39, 68, 0.04);
  }
  .cs-admin-probe-kpi__label {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.2rem;
  }
  .cs-admin-probe-kpi__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f2744;
    line-height: 1.2;
  }
  .cs-admin-probe-kpi__value--on { color: #059669; }
  .cs-admin-probe-kpi__value--off { color: #94a3b8; }
  .cs-admin-probe-node-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: #0f2744;
    background: #f1f5f9;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
  }
  .cs-admin-probe-actions .btn {
    padding: 0.2rem 0.45rem;
  }
  .cs-admin-probe-panel {
    margin-bottom: 1.25rem;
  }
  .cs-admin-probe-panel__tabbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.55rem 0.75rem;
    padding: 0.55rem 1rem 0;
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  }
  .cs-admin-probe-panel__tabbar-tabs {
    flex: 0 0 auto;
  }
  .cs-admin-probe-panel__tabbar-actions {
    flex: 0 0 auto;
    margin-left: auto;
    padding-bottom: 0.5rem;
  }
  .cs-admin-probe-panel .cs-admin-probe-tabs {
    gap: 0.35rem;
    border-bottom: 0;
  }
  .cs-admin-probe-panel .cs-admin-probe-tabs .nav-item {
    margin-bottom: 0;
  }
  .cs-admin-probe-panel .cs-admin-probe-tabs .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: -1px;
    padding: 0.52rem 0.95rem 0.48rem;
    min-height: 2.15rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    color: #64748b;
    background: rgba(248, 250, 252, 0.85);
    border: 1px solid rgba(203, 213, 225, 0.75);
    border-bottom-color: transparent;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .cs-admin-probe-panel .cs-admin-probe-tabs .nav-link::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0.75rem;
    right: 0.75rem;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
    opacity: 0;
    transform: scaleX(0.65);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .cs-admin-probe-panel .cs-admin-probe-tabs .nav-link i {
    font-size: 1.02rem;
    opacity: 0.82;
    transition: color 0.18s ease, opacity 0.18s ease;
  }
  .cs-admin-probe-panel .cs-admin-probe-tabs .nav-link:hover {
    color: #0f2744;
    background: #fff;
    border-color: rgba(148, 163, 184, 0.45);
    border-bottom-color: transparent;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  }
  .cs-admin-probe-panel .cs-admin-probe-tabs .nav-link:hover i {
    opacity: 1;
    color: #2563eb;
  }
  .cs-admin-probe-panel .cs-admin-probe-tabs .nav-link.active {
    color: #0f2744 !important;
    font-weight: 600;
    background: #fff;
    border-color: rgba(148, 163, 184, 0.32);
    border-bottom-color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  }
  .cs-admin-probe-panel .cs-admin-probe-tabs .nav-link.active::before {
    opacity: 1;
    transform: scaleX(1);
  }
  .cs-admin-probe-panel .cs-admin-probe-tabs .nav-link.active i {
    opacity: 1;
    color: #2563eb;
  }
  .cs-admin-probe-panel .cs-admin-probe-tabs .nav-link:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.45);
    outline-offset: 1px;
  }
  .cs-admin-probe-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    background: rgba(15, 23, 42, 0.07);
    color: #64748b;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .cs-admin-probe-panel .cs-admin-probe-tabs .nav-link:hover .cs-admin-probe-tab-badge {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
  }
  .cs-admin-probe-panel .cs-admin-probe-tabs .nav-link.active .cs-admin-probe-tab-badge {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.16) 0%, rgba(37, 99, 235, 0.18) 100%);
    color: #1d4ed8;
  }
  .cs-admin-probe-tab-content {
    padding-top: 0;
  }
  .cs-admin-probe-tab-content > .tab-pane > .cs-admin-section,
  .cs-admin-probe-tab-content > .tab-pane > form > .cs-admin-section {
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  .cs-admin-probe-tab-content > .tab-pane > .cs-admin-section .cs-admin-section__head,
  .cs-admin-probe-tab-content > .tab-pane > form > .cs-admin-section .cs-admin-section__head {
    border-top: 0;
  }
  .cs-admin-probe-tab-content > .tab-pane > form > .cs-admin-savebar {
    margin: 0;
    padding: 0.85rem 1.25rem 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(248, 250, 252, 0.65);
  }
  .cs-admin-probe-panel .cs-admin-section__head {
    background: #fff;
  }
  .cs-admin-probe-help-doc {
    font-size: 0.8125rem;
    color: #334155;
    line-height: 1.55;
  }
  .cs-admin-probe-help-doc h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f2744;
    margin: 0 0 0.45rem;
  }
  .cs-admin-probe-help-doc h3:not(:first-child) {
    margin-top: 1rem;
  }
  .cs-admin-probe-help-doc ol,
  .cs-admin-probe-help-doc ul {
    margin-bottom: 0.65rem;
    padding-left: 1.25rem;
  }
  .cs-admin-probe-help-doc li + li {
    margin-top: 0.25rem;
  }
  .cs-admin-probe-help-doc pre {
    margin: 0 0 0.65rem;
    padding: 0.65rem 0.75rem;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    font-size: 0.75rem;
    line-height: 1.45;
    overflow-x: auto;
  }
  @keyframes probe-node-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .probe-node-refresh-icon.probe-node-refresh-icon--spin {
    display: inline-block !important;
    animation: probe-node-spin 0.9s linear infinite;
  }
  @keyframes probe-node-status-flash {
    0% { background-color: rgba(37, 99, 235, 0.18); }
    100% { background-color: transparent; }
  }
  .probe-node-status.probe-node-status--changed {
    animation: probe-node-status-flash 1.2s ease-out;
    border-radius: 6px;
  }
</style>
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-globe" "Title" (T "admin.probe.title") "Desc" (T "admin.probe.desc"))}}
<p class="small text-muted mb-3">{{T "admin.probe.runtime_path"}} <code class="ut-admin-code">{{index .Data "RuntimeCachePath"}}</code> · {{T "admin.probe.site_url"}} <code class="ut-admin-code">{{index .Data "SiteURL"}}</code></p>

<div class="cs-admin-probe-kpi">
  <div class="cs-admin-probe-kpi__card">
    <div class="cs-admin-probe-kpi__label">{{T "admin.probe.kpi_agent"}}</div>
    <div class="cs-admin-probe-kpi__value {{if index .Data "ProbeAgentEnabled"}}cs-admin-probe-kpi__value--on{{else}}cs-admin-probe-kpi__value--off{{end}}">
      {{if index .Data "ProbeAgentEnabled"}}{{T "admin.probe.enabled"}}{{else}}{{T "admin.probe.disabled"}}{{end}}
    </div>
  </div>
  <div class="cs-admin-probe-kpi__card">
    <div class="cs-admin-probe-kpi__label">{{T "admin.probe.kpi_nodes"}}</div>
    <div class="cs-admin-probe-kpi__value">{{index .Data "NodeTotal"}}</div>
  </div>
  <div class="cs-admin-probe-kpi__card">
    <div class="cs-admin-probe-kpi__label">{{T "admin.probe.kpi_online"}}</div>
    <div class="cs-admin-probe-kpi__value cs-admin-probe-kpi__value--on" id="probe-kpi-node-online">{{index .Data "NodeOnline"}}</div>
  </div>
  <div class="cs-admin-probe-kpi__card">
    <div class="cs-admin-probe-kpi__label">{{T "admin.probe.kpi_default"}}</div>
    <div class="cs-admin-probe-kpi__value" style="font-size:1rem;"><code class="ut-admin-code">{{index .Data "DefaultNodeID"}}</code></div>
  </div>
</div>

<section class="cs-admin-section cs-admin-probe-panel" aria-label="{{T "admin.probe.panel_aria"}}">
  <div class="cs-admin-probe-panel__tabbar">
    <nav class="cs-admin-probe-panel__tabbar-tabs" aria-label="{{T "admin.probe.tabs_aria"}}">
      <ul class="nav nav-tabs cs-admin-probe-tabs mb-0" id="probeAgentTabs" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="probe-tab-settings" data-bs-toggle="tab" data-bs-target="#probe-pane-settings" type="button" role="tab" aria-controls="probe-pane-settings" aria-selected="true"><i class="bx bx-cog" aria-hidden="true"></i><span>{{T "admin.probe.tab_settings"}}</span></button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="probe-tab-nodes" data-bs-toggle="tab" data-bs-target="#probe-pane-nodes" type="button" role="tab" aria-controls="probe-pane-nodes" aria-selected="false"><i class="bx bx-server" aria-hidden="true"></i><span>{{T "admin.probe.tab_nodes"}}</span><span class="cs-admin-probe-tab-badge">{{index .Data "NodeTotal"}}</span></button>
        </li>
      </ul>
    </nav>
    <div class="cs-admin-probe-panel__tabbar-actions">
      <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#probeAgentHelpModal"><i class="bx bx-book-open me-1"></i>{{T "admin.probe.help_btn"}}</button>
    </div>
  </div>

  <div class="tab-content cs-admin-probe-tab-content" id="probeAgentTabContent">
  <div class="tab-pane fade show active" id="probe-pane-settings" role="tabpanel" aria-labelledby="probe-tab-settings" tabindex="0">
<form method="post" action="/admin/probe-agent" id="probe-agent-settings-form">
  <input type="hidden" name="action" value="save_settings">
  <section id="probe-agent-config" class="cs-admin-section">
    <div class="cs-admin-section__head">
      <div class="cs-admin-section__head-icon cs-admin-section__head-icon--indigo"><i class="bx bx-globe"></i></div>
      <div class="cs-admin-section__head-text">
        <h2 class="cs-admin-section__head-title">{{T "admin.probe.global_title"}}</h2>
        <p class="cs-admin-section__head-sub">{{T "admin.probe.global_sub"}} <button type="button" class="btn btn-link btn-sm p-0 align-baseline" data-bs-toggle="modal" data-bs-target="#probeAgentHelpModal">{{T "admin.probe.view_help"}}</button></p>
      </div>
    </div>
    <div class="cs-admin-section__body">
      <div class="cs-admin-settings-groups">
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-toggle-left" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.common.basic_switch"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.probe.switch_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="cs-admin-field ut-admin-switch-row">
              <div class="ut-admin-switch-row__head">
                <label class="form-label mb-0" for="probe_agent_enabled">{{T "admin.probe.enable_agent"}}</label>
                <div class="form-check form-switch mb-0">
                  <input class="form-check-input" type="checkbox" role="switch" id="probe_agent_enabled" name="probe_agent_enabled" value="1" {{if index .Data "ProbeAgentEnabled"}}checked{{end}} aria-label="{{T "admin.probe.enable_agent"}}">
                </div>
              </div>
              <div class="form-text mb-0">{{T "admin.probe.enable_hint"}}</div>
            </div>
          </div>
        </div>
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-key" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.probe.secret_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.probe.secret_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="cs-admin-field">
              <label class="form-label">{{T "admin.probe.secret_label"}}</label>
              <input type="password" class="form-control form-control-sm font-monospace" name="probe_agent_secret" placeholder="{{if index .Data "AgentSecretMasked"}}{{index .Data "AgentSecretMasked"}}{{else}}change-me-shared-secret{{end}}" autocomplete="new-password">
              <div class="form-text mb-0">{{T "admin.probe.secret_hint"}}</div>
            </div>
          </div>
        </div>
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-timer" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.probe.sched_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.probe.sched_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="row g-2">
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.probe.default_node"}}</label>
                <input type="text" class="form-control form-control-sm font-monospace" name="probe_agent_default_node_id" value="{{index .Data "DefaultNodeID"}}" placeholder="local">
                <div class="form-text mb-0">{{T "admin.probe.default_node_hint"}}</div>
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.probe.batch_size"}}</label>
                <input type="number" class="form-control form-control-sm" name="probe_agent_task_batch_size" min="1" max="200" value="{{index .Data "TaskBatchSize"}}">
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.probe.offline_sec"}}</label>
                <input type="number" class="form-control form-control-sm" name="probe_agent_offline_sec" min="30" max="3600" value="{{index .Data "NodeOfflineSec"}}">
                <div class="form-text mb-0">{{T "admin.probe.offline_hint"}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="cs-admin-savebar">
    <p class="cs-admin-savebar__hint mb-0"><i class="bx bx-info-circle me-1"></i>{{T "admin.common.save_hint_hot"}}</p>
    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-save me-1"></i>{{T "admin.probe.save_global"}}</button>
    </div>
  </div>
</form>
  </div>

  <div class="tab-pane fade" id="probe-pane-nodes" role="tabpanel" aria-labelledby="probe-tab-nodes" tabindex="0">
<section class="cs-admin-section">
  <div class="cs-admin-section__head">
    <div class="cs-admin-section__head-icon cs-admin-section__head-icon--indigo"><i class="bx bx-server"></i></div>
    <div class="cs-admin-section__head-text flex-grow-1">
      <h2 class="cs-admin-section__head-title">{{T "admin.probe.nodes_title"}}</h2>
      <p class="cs-admin-section__head-sub">{{T "admin.probe.nodes_sub_prefix"}} <button type="button" class="btn btn-link btn-sm p-0 align-baseline" data-bs-toggle="modal" data-bs-target="#probeAgentHelpModal">{{T "admin.probe.help_btn"}}</button> {{T "admin.probe.nodes_sub_mid"}} <span class="text-muted"><i class="bx bx-refresh probe-node-refresh-icon d-none" id="probeNodeRefreshIcon"></i> <span id="probeNodeLastRefresh">{{T "admin.probe.auto_refresh"}}</span></span></p>
    </div>
    <span class="badge text-bg-light">{{index .Data "NodeTotal"}} {{T "admin.probe.node_count_suffix"}}</span>
    <button type="button" class="btn btn-primary btn-sm ms-auto" data-bs-toggle="modal" data-bs-target="#probeNodeAddModal"><i class="bx bx-plus me-1"></i>{{T "admin.probe.add_node"}}</button>
  </div>
  <div class="cs-admin-section__body cs-admin-section__body--flush">
    <div class="table-responsive">
      <table class="table table-hover mb-0 align-middle">
        <thead class="table-light">
          <tr>
            <th>{{T "admin.probe.col_id"}}</th>
            <th>{{T "admin.probe.col_name_region"}}</th>
            <th>{{T "admin.probe.col_agent_url"}}</th>
            <th>{{T "admin.probe.col_monitors"}}</th>
            <th>{{T "admin.probe.col_heartbeat"}}</th>
            <th>{{T "admin.probe.col_status"}}</th>
            <th class="text-end" style="min-width:11rem">{{T "admin.probe.col_actions"}}</th>
          </tr>
        </thead>
        <tbody id="probe-node-tbody">
          {{range index .Data "Nodes"}}
          <tr data-node-id="{{index . "ID"}}">
            <td>
              <span class="cs-admin-probe-node-id">{{index . "ID"}}</span>
              {{with index . "AgentVersion"}}<div class="small text-muted mt-1 probe-node-version">v{{.}}</div>{{end}}
            </td>
            <td>
              <span class="fw-semibold">{{index . "Name"}}</span>
              <div class="small text-muted">{{index . "RegionLabel"}} <span class="text-body-secondary">({{index . "RegionCode"}})</span></div>
            </td>
            <td class="small"><code class="ut-admin-code text-break">{{index . "BaseURL"}}</code></td>
            <td class="probe-node-monitor-count">{{index . "MonitorCount"}}{{if index . "MaxMonitors"}} <span class="text-muted">/ {{index . "MaxMonitors"}}</span>{{end}}</td>
            <td class="small text-nowrap probe-node-heartbeat">{{index . "LastHeartbeat"}}</td>
            <td class="probe-node-status"><span class="badge rounded-pill text-bg-{{index . "StatusClass"}}">{{index . "StatusLabel"}}</span></td>
            <td class="text-end text-nowrap cs-admin-probe-actions">
              <button type="button" class="btn btn-outline-primary btn-sm btn-test-node" data-node-id="{{index . "ID"}}" title="{{T "admin.probe.btn_test"}}"><i class="bx bx-pulse"></i></button>
              <button type="button" class="btn btn-outline-secondary btn-sm btn-edit-node" title="{{T "admin.probe.btn_edit"}}"
                data-bs-toggle="modal" data-bs-target="#probeNodeEditModal"
                data-id="{{index . "ID"}}"
                data-name="{{index . "Name"}}"
                data-region-code="{{index . "RegionCode"}}"
                data-region-label="{{index . "RegionLabel"}}"
                data-base-url="{{index . "BaseURL"}}"
                data-max-monitors="{{index . "MaxMonitors"}}"
                data-enabled="{{if index . "Enabled"}}1{{else}}0{{end}}"><i class="bx bx-edit-alt"></i></button>
              <button type="button" class="btn btn-outline-danger btn-sm btn-delete-node" title="{{T "admin.probe.btn_delete"}}"
                data-bs-toggle="modal" data-bs-target="#probeNodeDeleteModal"
                data-node-id="{{index . "ID"}}"
                data-node-name="{{index . "Name"}}"><i class="bx bx-trash"></i></button>
            </td>
          </tr>
          {{else}}
          <tr><td colspan="7" class="text-center text-muted py-5">
            <i class="bx bx-globe d-block fs-2 mb-2 opacity-50"></i>
            {{T "admin.probe.empty_nodes"}}
          </td></tr>
          {{end}}
        </tbody>
      </table>
    </div>
  </div>
</section>
  </div>
  </div>
</section>

<div class="modal fade" id="probeAgentHelpModal" tabindex="-1" aria-labelledby="probeAgentHelpModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header border-bottom py-2">
        <h5 class="modal-title" id="probeAgentHelpModalLabel"><i class="bx bx-book-open"></i> {{T "admin.probe.help_modal_title"}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "admin.common.close"}}"></button>
      </div>
      <div class="modal-body cs-admin-probe-help-doc">
        <p class="mb-3">{{T "admin.probe.help_intro"}}</p>

        <h3>{{T "admin.probe.help_steps_title"}}</h3>
        <ol>
          <li>{{T "admin.probe.help_step1"}}</li>
          <li>{{T "admin.probe.help_step2"}}</li>
          <li>{{T "admin.probe.help_step3"}}
            <ul class="mt-1 mb-0">
              <li><code>agent_id</code> → {{T "admin.probe.col_id"}}</li>
              <li><code>main_site.base_url</code> → <code class="ut-admin-code">{{index .Data "SiteURL"}}</code></li>
              <li><code>main_site.agent_secret</code> → {{T "admin.probe.secret_label"}}</li>
            </ul>
          </li>
          <li>{{T "admin.probe.help_step4"}}</li>
        </ol>

        <h3>{{T "admin.probe.help_config_title"}}</h3>
        <pre>{
  "agent_id": "probe-ap-sg-01",
  "main_site": {
    "base_url": "{{index .Data "SiteURL"}}",
    "agent_secret": "{{T "admin.probe.help_secret_same"}}"
  }
}</pre>

        <h3>{{T "admin.probe.help_ok_title"}}</h3>
        <ul class="mb-0">
          <li>{{T "admin.probe.help_ok1"}}</li>
          <li>{{T "admin.probe.help_ok2"}}</li>
          <li>{{T "admin.probe.help_ok3"}}</li>
        </ul>
        <p class="mb-0 mt-3 small text-muted">{{T "admin.probe.help_trouble"}}</p>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal">{{T "admin.probe.help_got_it"}}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="probeNodeAddModal" tabindex="-1" aria-labelledby="probeNodeAddModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header border-bottom py-2">
        <h5 class="modal-title" id="probeNodeAddModalLabel"><i class="bx bx-plus-circle"></i>{{T "admin.probe.add_modal_title"}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "admin.common.close"}}"></button>
      </div>
      <div class="modal-body">
        <p class="ut-modal-intro">{{T "admin.probe.add_intro"}}</p>
        <form method="post" action="/admin/probe-agent" id="probe-node-add-form">
          <input type="hidden" name="action" value="add_node">
          <div class="row g-2">
            <div class="col-md-6">
              <label class="form-label" for="add_node_id">{{T "admin.probe.field_node_id"}}</label>
              <input type="text" class="form-control form-control-sm font-monospace" name="node_id" id="add_node_id" required pattern="[a-z][a-z0-9-]{2,62}" placeholder="probe-ap-sg-01">
              <div class="form-text">{{T "admin.probe.node_id_hint"}}</div>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="add_node_name">{{T "admin.probe.field_name"}}</label>
              <input type="text" class="form-control form-control-sm" name="node_name" id="add_node_name" required placeholder="{{T "admin.probe.name_ph"}}">
            </div>
            <div class="col-md-4">
              <label class="form-label" for="add_region_code">{{T "admin.probe.field_region_code"}}</label>
              <input type="text" class="form-control form-control-sm" name="region_code" id="add_region_code" placeholder="ap-sg">
            </div>
            <div class="col-md-4">
              <label class="form-label" for="add_region_label">{{T "admin.probe.field_region_label"}}</label>
              <input type="text" class="form-control form-control-sm" name="region_label" id="add_region_label" placeholder="{{T "admin.probe.region_label_ph"}}">
            </div>
            <div class="col-md-4">
              <label class="form-label" for="add_max_monitors">{{T "admin.probe.field_max_monitors"}}</label>
              <input type="number" class="form-control form-control-sm" name="max_monitors" id="add_max_monitors" min="0" value="0">
              <div class="form-text">{{T "admin.probe.max_monitors_hint"}}</div>
            </div>
            <div class="col-12">
              <label class="form-label" for="add_base_url">{{T "admin.probe.field_base_url"}}</label>
              <input type="url" class="form-control form-control-sm font-monospace" name="base_url" id="add_base_url" placeholder="http://127.0.0.1:9091">
              <div class="form-text">{{T "admin.probe.base_url_hint"}}</div>
            </div>
            <div class="col-12">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch" id="add_node_enabled" name="node_enabled" value="1" checked>
                <label class="form-check-label" for="add_node_enabled">{{T "admin.probe.field_enabled"}}</label>
              </div>
            </div>
          </div>
          <div class="d-flex flex-wrap gap-2 justify-content-end pt-3 mt-3 border-top">
            <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">{{T "admin.common.cancel"}}</button>
            <button type="submit" class="btn btn-sm btn-primary"><i class="bx bx-plus me-1"></i>{{T "admin.probe.add_node"}}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="probeNodeEditModal" tabindex="-1" aria-labelledby="probeNodeEditModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header border-bottom py-2">
        <h5 class="modal-title" id="probeNodeEditModalLabel"><i class="bx bx-edit-alt"></i>{{T "admin.probe.edit_modal_title"}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "admin.common.close"}}"></button>
      </div>
      <div class="modal-body">
        <form method="post" action="/admin/probe-agent" id="probe-node-edit-form">
          <input type="hidden" name="action" value="update_node">
          <div class="row g-2">
            <div class="col-md-6">
              <label class="form-label" for="edit_node_id">{{T "admin.probe.field_node_id_ro"}}</label>
              <input type="text" class="form-control form-control-sm font-monospace bg-light" name="node_id" id="edit_node_id" readonly>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="edit_node_name">{{T "admin.probe.field_name"}}</label>
              <input type="text" class="form-control form-control-sm" name="node_name" id="edit_node_name" required>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="edit_region_code">{{T "admin.probe.field_region_code"}}</label>
              <input type="text" class="form-control form-control-sm" name="region_code" id="edit_region_code">
            </div>
            <div class="col-md-4">
              <label class="form-label" for="edit_region_label">{{T "admin.probe.field_region_label"}}</label>
              <input type="text" class="form-control form-control-sm" name="region_label" id="edit_region_label">
            </div>
            <div class="col-md-4">
              <label class="form-label" for="edit_max_monitors">{{T "admin.probe.field_max_monitors"}}</label>
              <input type="number" class="form-control form-control-sm" name="max_monitors" id="edit_max_monitors" min="0" value="0">
            </div>
            <div class="col-12">
              <label class="form-label" for="edit_base_url">{{T "admin.probe.field_base_url"}}</label>
              <input type="url" class="form-control form-control-sm font-monospace" name="base_url" id="edit_base_url">
            </div>
            <div class="col-12">
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch" id="edit_node_enabled" name="node_enabled" value="1">
                <label class="form-check-label" for="edit_node_enabled">{{T "admin.probe.field_enabled"}}</label>
              </div>
            </div>
          </div>
          <div class="d-flex flex-wrap gap-2 justify-content-end pt-3 mt-3 border-top">
            <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">{{T "admin.common.cancel"}}</button>
            <button type="submit" class="btn btn-sm btn-primary"><i class="bx bx-save me-1"></i>{{T "admin.probe.save_edit"}}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="probeNodeDeleteModal" tabindex="-1" aria-labelledby="probeNodeDeleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header border-bottom py-2">
        <h5 class="modal-title" id="probeNodeDeleteModalLabel"><i class="bx bx-trash text-danger"></i>{{T "admin.probe.del_modal_title"}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{T "admin.common.close"}}"></button>
      </div>
      <div class="modal-body small">
        <p class="mb-2">{{T "admin.probe.del_confirm"}}</p>
        <p class="mb-0 fw-semibold"><code id="probe-node-del-id">—</code> · <span id="probe-node-del-name">—</span></p>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">{{T "admin.common.cancel"}}</button>
        <form method="post" action="/admin/probe-agent" id="probe-node-delete-form" class="d-inline mb-0">
          <input type="hidden" name="action" value="delete_node">
          <input type="hidden" name="node_id" id="delete_node_id" value="">
          <button type="submit" class="btn btn-sm btn-danger">{{T "admin.probe.del_btn"}}</button>
        </form>
      </div>
    </div>
  </div>
</div>

</div>
<script>
(function () {
  var serverErr = {{if index .Data "Err"}}{{jsString (index .Data "Err")}}{{else}}""{{end}};
  var i18nProbe = {
    opOk: {{jsString (T "admin.common.op_ok")}},
    opOkShort: {{jsString (T "admin.common.op_ok_short")}},
    opFail: {{jsString (T "admin.common.op_fail")}},
    testOk: {{jsString (T "admin.probe.js_test_ok")}},
    testFail: {{jsString (T "admin.probe.js_test_fail")}},
    updatedAt: {{jsString (T "admin.probe.js_updated_at")}},
    statusOffline: {{jsString (T "admin.probe.status_offline")}},
    done: {{jsString (T "admin.common.done")}},
    reqFail: {{jsString (T "admin.common.request_fail_http")}}
  };


  function cleanOkQuery() {
    try {
      var u = new URL(window.location.href);
      if (!u.searchParams.has('ok')) return;
      showAdminToast(true, i18nProbe.opOk);
      u.searchParams.delete('ok');
      var qs = u.searchParams.toString();
      history.replaceState(null, '', u.pathname + (qs ? ('?' + qs) : '') + u.hash);
    } catch (e) {}
  }

  function ajaxPostForm($form, onSuccess) {
    var $btn = $form.find('button[type="submit"]').prop('disabled', true);
    $.ajax({
      url: $form.attr('action'),
      method: 'POST',
      data: $form.serialize(),
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      dataType: 'json'
    }).done(function (res) {
      if (res && res.success) {
        var msg = (res.data && res.data.message) || res.message || i18nProbe.opOkShort;
        if (onSuccess) onSuccess(msg, res);
        else {
          showAdminToast(true, msg);
          setTimeout(function () { location.reload(); }, 600);
        }
      } else {
        showAdminToast(false, (res && res.message) || i18nProbe.opFail);
      }
    }).fail(function (xhr) {
      var msg = i18nProbe.opFail;
      try {
        var j = JSON.parse(xhr.responseText);
        if (j.message) msg = j.message;
      } catch (err) {}
      showAdminToast(false, msg);
    }).always(function () {
      $btn.prop('disabled', false);
    });
  }

  function hideModal(id) {
    var el = document.getElementById(id);
    if (el && window.bootstrap && bootstrap.Modal) {
      bootstrap.Modal.getOrCreateInstance(el).hide();
    }
  }

  function modalFormSuccess(modalId, msg) {
    hideModal(modalId);
    showAdminToast(true, msg);
    setTimeout(function () { reloadWithTab('nodes'); }, 600);
  }

  function probeTabFromHash() {
    var h = (window.location.hash || '').replace(/^#/, '').toLowerCase();
    if (h === 'nodes') return 'nodes';
    if (h === 'settings' || h === '') return 'settings';
    return null;
  }

  function showProbeTab(tab) {
    var isNodes = tab === 'nodes';
    var settingsBtn = document.getElementById('probe-tab-settings');
    var nodesBtn = document.getElementById('probe-tab-nodes');
    var settingsPane = document.getElementById('probe-pane-settings');
    var nodesPane = document.getElementById('probe-pane-nodes');
    if (!settingsBtn || !nodesBtn || !settingsPane || !nodesPane) return;

    function applyManual() {
      if (isNodes) {
        settingsBtn.classList.remove('active');
        settingsBtn.setAttribute('aria-selected', 'false');
        nodesBtn.classList.add('active');
        nodesBtn.setAttribute('aria-selected', 'true');
        settingsPane.classList.remove('show', 'active');
        nodesPane.classList.add('show', 'active');
      } else {
        nodesBtn.classList.remove('active');
        nodesBtn.setAttribute('aria-selected', 'false');
        settingsBtn.classList.add('active');
        settingsBtn.setAttribute('aria-selected', 'true');
        nodesPane.classList.remove('show', 'active');
        settingsPane.classList.add('show', 'active');
      }
    }

    // Tab may run before bootstrap in layout_foot
    if (window.bootstrap && bootstrap.Tab) {
      bootstrap.Tab.getOrCreateInstance(isNodes ? nodesBtn : settingsBtn).show();
      return;
    }
    applyManual();
  }

  function setProbeTabHash(tab, replace) {
    try {
      var u = new URL(window.location.href);
      var hash = tab === 'nodes' ? '#nodes' : '#settings';
      var qs = u.searchParams.toString();
      var url = u.pathname + (qs ? ('?' + qs) : '') + hash;
      if (replace) history.replaceState(null, '', url);
      else history.pushState(null, '', url);
    } catch (e) {}
  }

  function reloadWithTab(tab) {
    location.href = '/admin/probe-agent' + (tab === 'nodes' ? '#nodes' : '#settings');
  }

  function initProbeAgentTabs() {
    var tab = 'settings';
    try {
      var params = new URLSearchParams(window.location.search);
      tab = probeTabFromHash();
      if (tab === null && params.get('tab') === 'nodes') {
        tab = 'nodes';
        params.delete('tab');
        history.replaceState(null, '', window.location.pathname + (params.toString() ? ('?' + params.toString()) : '') + '#nodes');
      } else if (tab === null) {
        tab = 'settings';
      }
      showProbeTab(tab);
    } catch (e) {
      tab = 'settings';
    }

    window.addEventListener('hashchange', function () {
      var hashTab = probeTabFromHash();
      if (hashTab === 'nodes') {
        showProbeTab('nodes');
        startProbeNodeRefresh();
      } else if (hashTab === 'settings') {
        showProbeTab('settings');
        stopProbeNodeRefresh();
      }
    });
    return tab;
  }

  cleanOkQuery();
  if (serverErr) showAdminToast(false, serverErr);
  var initialProbeTab = initProbeAgentTabs();

  $('#probe-agent-settings-form').on('submit', function (e) {
    e.preventDefault();
    ajaxPostForm($(this), function (msg) {
      showAdminToast(true, msg);
    });
  });

  $('#probe-node-add-form').on('submit', function (e) {
    e.preventDefault();
    ajaxPostForm($(this), function (msg) {
      modalFormSuccess('probeNodeAddModal', msg);
    });
  });

  $('#probe-node-edit-form').on('submit', function (e) {
    e.preventDefault();
    ajaxPostForm($(this), function (msg) {
      modalFormSuccess('probeNodeEditModal', msg);
    });
  });

  $('#probe-node-delete-form').on('submit', function (e) {
    e.preventDefault();
    ajaxPostForm($(this), function (msg) {
      modalFormSuccess('probeNodeDeleteModal', msg);
    });
  });

  $('#probeNodeAddModal').on('hidden.bs.modal', function () {
    var form = document.getElementById('probe-node-add-form');
    if (form) form.reset();
    $('#add_node_enabled').prop('checked', true);
  });

  $('#probeNodeEditModal').on('show.bs.modal', function (e) {
    var $btn = $(e.relatedTarget);
    if (!$btn.hasClass('btn-edit-node')) return;
    $('#edit_node_id').val($btn.data('id'));
    $('#edit_node_name').val($btn.data('name'));
    $('#edit_region_code').val($btn.data('region-code'));
    $('#edit_region_label').val($btn.data('region-label'));
    $('#edit_base_url').val($btn.data('base-url'));
    $('#edit_max_monitors').val($btn.data('max-monitors'));
    $('#edit_node_enabled').prop('checked', String($btn.data('enabled')) === '1');
  });

  $('#probeNodeDeleteModal').on('show.bs.modal', function (e) {
    var $btn = $(e.relatedTarget);
    if (!$btn.hasClass('btn-delete-node')) return;
    var id = String($btn.data('node-id') || '');
    var name = String($btn.data('node-name') || '');
    $('#delete_node_id').val(id);
    $('#probe-node-del-id').text(id || '—');
    $('#probe-node-del-name').text(name || '—');
  });

  $('.btn-test-node').on('click', function () {
    var id = $(this).attr('data-node-id');
    var $btn = $(this).prop('disabled', true);
    $.ajax({
      url: '/admin/probe-agent/test/' + encodeURIComponent(id),
      method: 'POST',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      dataType: 'json'
    }).done(function (res) {
      var msg = (res && res.data && res.data.message) ? res.data.message : (res.message || i18nProbe.done);
      showAdminToast(!!(res && res.success), (res && res.success ? i18nProbe.testOk : i18nProbe.testFail) + msg);
    }).fail(function (xhr) {
      showAdminToast(false, i18nProbe.reqFail + xhr.status);
    }).always(function () { $btn.prop('disabled', false); });
  });

  var probeNodeRefreshTimer = null;
  var PROBE_NODE_REFRESH_MS = 10000;

  function isProbeNodesTabActive() {
    if (probeTabFromHash() === 'nodes') return true;
    var pane = document.getElementById('probe-pane-nodes');
    return pane && pane.classList.contains('active');
  }

  function formatProbeNodeMonitorCount(node) {
    var count = node.monitor_count != null ? node.monitor_count : 0;
    var max = node.max_monitors != null ? parseInt(node.max_monitors, 10) : 0;
    if (max > 0) return count + ' <span class="text-muted">/ ' + max + '</span>';
    return String(count);
  }

  function applyProbeNodeStatus(nodes) {
    if (!nodes || !nodes.length) return;
    var map = {};
    nodes.forEach(function (n) { map[n.id] = n; });
    $('#probe-node-tbody tr[data-node-id]').each(function () {
      var id = $(this).attr('data-node-id');
      var node = map[id];
      if (!node) return;
      $(this).find('.probe-node-heartbeat').text(node.last_heartbeat || '-');
      var $statusCell = $(this).find('.probe-node-status');
      var oldLabel = ($statusCell.find('.badge').text() || '').trim();
      var newLabel = node.status_label || i18nProbe.statusOffline;
      $statusCell.html(
        '<span class="badge rounded-pill text-bg-' + (node.status_class || 'secondary') + '">' +
        newLabel + '</span>'
      );
      if (oldLabel && oldLabel !== newLabel) {
        $statusCell.addClass('probe-node-status--changed');
        setTimeout(function () { $statusCell.removeClass('probe-node-status--changed'); }, 1200);
      }
      $(this).find('.probe-node-monitor-count').html(formatProbeNodeMonitorCount(node));
      var ver = (node.agent_version || '').trim();
      var $ver = $(this).find('.probe-node-version');
      if (ver) {
        if ($ver.length) $ver.text('v' + ver);
        else $(this).find('.cs-admin-probe-node-id').after('<div class="small text-muted mt-1 probe-node-version">v' + ver + '</div>');
      } else if ($ver.length) {
        $ver.remove();
      }
    });
  }

  function refreshProbeNodeStatus(silent) {
    if (!isProbeNodesTabActive()) return;
    if (document.hidden) return;
    var $icon = $('#probeNodeRefreshIcon');
    if (!silent) $icon.addClass('probe-node-refresh-icon--spin');
    $.getJSON('/admin/probe-agent/status', function (res) {
      if (!silent) $icon.removeClass('probe-node-refresh-icon--spin');
      if (!res || !res.success || !res.data) return;
      var d = res.data;
      if (d.node_online != null) $('#probe-kpi-node-online').text(d.node_online);
      applyProbeNodeStatus(d.nodes || []);
      var now = new Date();
      $('#probeNodeLastRefresh').text(
        i18nProbe.updatedAt + now.getHours().toString().padStart(2, '0') + ':' +
        now.getMinutes().toString().padStart(2, '0') + ':' +
        now.getSeconds().toString().padStart(2, '0')
      );
    }).fail(function () {
      if (!silent) $icon.removeClass('probe-node-refresh-icon--spin');
    });
  }

  function startProbeNodeRefresh() {
    if (!probeNodeRefreshTimer) {
      probeNodeRefreshTimer = setInterval(function () { refreshProbeNodeStatus(true); }, PROBE_NODE_REFRESH_MS);
    }
    refreshProbeNodeStatus(true);
  }

  function stopProbeNodeRefresh() {
    if (!probeNodeRefreshTimer) return;
    clearInterval(probeNodeRefreshTimer);
    probeNodeRefreshTimer = null;
  }

  $('#probeAgentTabs button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
    setProbeTabHash(e.target.id === 'probe-tab-nodes' ? 'nodes' : 'settings', true);
    if (e.target.id === 'probe-tab-nodes') startProbeNodeRefresh();
    else stopProbeNodeRefresh();
  });

  document.addEventListener('visibilitychange', function () {
    if (!document.hidden && isProbeNodesTabActive()) refreshProbeNodeStatus(true);
  });

  $(window).on('beforeunload', function () { stopProbeNodeRefresh(); });

  if (initialProbeTab === 'nodes') {
    // Bootstrap Tab is async; refresh after pane activates
    setTimeout(function () { startProbeNodeRefresh(); }, 0);
  }
})();
</script>
{{template "admin/layout_foot" .}}
{{end}}