{{define "user/monitor_detail.html"}}
{{template "user/layout_head" .}}
<style>
  .ut-md-probe-panel {
    margin-bottom: 1rem;
    border: 1px solid rgba(15, 39, 68, 0.1);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 39, 68, 0.06);
    overflow: hidden;
  }
  .ut-md-probe-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(15, 39, 68, 0.08);
  }
  .ut-md-probe-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.15rem;
    padding: 0;
    margin: 0;
    margin-bottom: -1px;
    overflow-x: auto;
    scrollbar-width: thin;
    border: none;
  }
  .ut-md-probe-tabs .nav-item { flex-shrink: 0; }
  .ut-md-probe-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.5rem 0.95rem 0.55rem;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
  }
  .ut-md-probe-tabs .nav-link:hover {
    color: #334155;
    background: rgba(255, 255, 255, 0.55);
  }
  .ut-md-probe-tabs .nav-link.active {
    color: #1d4ed8;
    background: #fff;
    border-color: rgba(15, 39, 68, 0.1);
    border-bottom-color: #fff;
    position: relative;
    z-index: 1;
  }
  .ut-md-probe-tabs .nav-link .bx {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.85;
  }
  .ut-md-probe-tabs .nav-link.active .bx { opacity: 1; }
  .ut-md-tab-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: #94a3b8;
  }
  .ut-md-tab-dot--local { background: #4f46e5; }
  .ut-md-tab-dot--remote { background: #2563eb; }
  .ut-md-tab-dot--offline { background: #cbd5e1; }
  .ut-md-range-group {
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 39, 68, 0.06);
  }
  .ut-md-range-group .btn {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-color: rgba(15, 39, 68, 0.1);
  }
  .ut-md-range-group .btn.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
  }
  .ut-md-node-compare {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
  }
  @media (min-width: 576px) {
    .ut-md-node-compare {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 992px) {
    .ut-md-node-compare {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .ut-md-node-card {
    padding: 0.75rem;
    border-radius: 0.55rem;
    background: #f8fafc;
    border: 1px solid rgba(15, 39, 68, 0.08);
  }
  .ut-md-node-card.is-fastest {
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.15);
  }
  .ut-md-node-card.is-slowest {
    border-color: rgba(239, 68, 68, 0.35);
  }
  .ut-md-node-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
  }
  .ut-md-node-card__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .ut-md-node-card__metric-label {
    font-size: 0.6875rem;
    color: #64748b;
  }
  .ut-md-node-card__metric-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f2744;
  }
  .ut-md-node-card__tag {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.1em 0.45em;
    border-radius: 999px;
    margin-left: auto;
  }
  .ut-md-node-card__tag--fast { background: #dcfce7; color: #15803d; }
  .ut-md-node-card__tag--slow { background: #fee2e2; color: #b91c1c; }
  .ut-probe-node-badge {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.2em 0.55em;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ut-probe-node-badge--local {
    background: #4f46e5 !important;
    color: #fff !important;
    font-weight: 600;
  }
  .ut-probe-node-badge--offline { opacity: 0.65; }
  .ut-md-summary-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
  }
  @media (min-width: 768px) {
    .ut-md-summary-stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .ut-md-summary-stat {
    padding: 0.65rem 0.75rem;
    border-radius: 0.55rem;
    background: #f8fafc;
    border: 1px solid rgba(15, 39, 68, 0.08);
  }
  .ut-md-summary-stat__label {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.15rem;
  }
  .ut-md-summary-stat__value {
    font-size: 1rem;
    font-weight: 600;
    color: #0f2744;
  }
  .ut-md-probe-panel__body {
    padding: 1rem 0.75rem 0.75rem;
    background: #fff;
  }
  .ut-md-probe-panel__body .ut-section {
    box-shadow: none;
    border: 1px solid rgba(15, 39, 68, 0.08);
    margin-bottom: 0.85rem;
  }
  .ut-md-probe-panel__head .ut-md-range-group {
    margin-bottom: 0.35rem;
  }
  .ut-md-node-bars {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px dashed rgba(15, 39, 68, 0.1);
  }
  .ut-md-node-bar-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 28%) 1fr auto;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
  }
  .ut-md-node-bar-row__name {
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ut-md-node-bar-row__track {
    height: 0.5rem;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
  }
  .ut-md-node-bar-row__fill {
    height: 100%;
    border-radius: 999px;
    min-width: 2px;
    transition: width .25s ease;
  }
  .ut-md-node-bar-row__fill--fast { background: linear-gradient(90deg, #4ade80, #22c55e); }
  .ut-md-node-bar-row__fill--normal { background: linear-gradient(90deg, #60a5fa, #2563eb); }
  .ut-md-node-bar-row__fill--slow { background: linear-gradient(90deg, #f87171, #ef4444); }
  .ut-md-node-bar-row__value {
    font-weight: 600;
    color: #0f2744;
    font-variant-numeric: tabular-nums;
    min-width: 4.5rem;
    text-align: right;
  }
  .ut-md-tab-loading {
    text-align: center;
    color: #64748b;
    padding: 2rem 1rem;
  }
  .ut-md-chart-wrap {
    position: relative;
    min-height: 180px;
  }
  .ut-md-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.8125rem;
    background: rgba(248, 250, 252, 0.82);
    border-radius: 0.45rem;
    z-index: 1;
  }
  .ut-md-chart-wrap.has-data .ut-md-chart-empty { display: none; }
</style>
<div class="ut-shell-page">
<nav class="ut-breadcrumb" aria-label="{{Tp "public_header" "nav_breadcrumb_aria"}}">
  <ol class="breadcrumb mb-0">
    <li class="breadcrumb-item"><a href="/user/monitors">{{Tp "user_sidebar" "nav_my_monitors"}}</a></li>
    <li class="breadcrumb-item active text-truncate" aria-current="page">{{with index .Data "Monitor"}}{{privacy "text" .name}}{{end}}</li>
  </ol>
</nav>
<header class="ut-pagehead" data-nc-privacy-menu>
  <div class="ut-pagehead__main">
    <div class="ut-pagehead__icon" aria-hidden="true"><i class="bx bx-link"></i></div>
    <div class="ut-pagehead__body">
      <h1 class="ut-pagehead__title">{{with index .Data "Monitor"}}{{privacy "text" .name}}{{end}}</h1>
      <p class="ut-pagehead__desc mb-0">
        <a href="{{with index .Data "Monitor"}}{{.url}}{{end}}" target="_blank" rel="noopener noreferrer" class="ut-url-link small">
          <i class="bx bx-link-external"></i> {{with index .Data "Monitor"}}{{privacy "url" .url}}{{end}}
        </a>
      </p>
    </div>
  </div>
  <div class="ut-pagehead__actions">
    <span class="badge rounded-pill text-bg-{{stateBadge (asInt (index (index .Data "Monitor") "current_state"))}} fs-6">{{stateLabel (asInt (index (index .Data "Monitor") "current_state"))}}</span>
  </div>
</header>

<div class="row g-3 mb-3">
  <div class="col-6 col-md-3">
    <div class="ut-mini-stat">
      <div class="ut-mini-stat__label">{{Tp "user_monitors" "field_expected_status"}}</div>
      <div class="ut-mini-stat__value">{{index (index .Data "Monitor") "expected_status"}}</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="ut-mini-stat">
      <div class="ut-mini-stat__label">{{T "col_interval"}}</div>
      <div class="ut-mini-stat__value">{{formatInterval (asInt (index (index .Data "Monitor") "interval_sec"))}}</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="ut-mini-stat">
      <div class="ut-mini-stat__label">{{T "col_response"}}</div>
      <div class="ut-mini-stat__value" id="mdHeadResponse">{{index (index .Data "Monitor") "last_response_ms"}} ms</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="ut-mini-stat">
      <div class="ut-mini-stat__label">{{T "col_checked"}}</div>
      <div class="ut-mini-stat__value fs-6" id="mdHeadChecked">{{unixTime (index (index .Data "Monitor") "last_checked_at")}}</div>
    </div>
  </div>
</div>

{{if index .Data "ShowMultiNode"}}
<div class="ut-md-probe-panel">
  <div class="ut-md-probe-panel__head">
    <ul class="nav ut-md-probe-tabs" id="mdProbeTabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="md-tab-summary-btn" data-bs-toggle="tab" data-bs-target="#md-tab-summary" type="button" role="tab" aria-controls="md-tab-summary" aria-selected="true" data-tab-key="summary">
          <i class="bx bx-pie-chart-alt-2" aria-hidden="true"></i><span>{{Tp "user_monitor_detail" "tab_summary"}}</span>
        </button>
      </li>
      {{range $i, $node := index .Data "ProbeNodes"}}
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="md-tab-node-{{$i}}-btn" data-bs-toggle="tab" data-bs-target="#md-tab-node-{{$i}}" type="button" role="tab" aria-controls="md-tab-node-{{$i}}" aria-selected="false" data-probe-node="{{$node.probe_node_id}}" data-tab-key="node-{{$node.probe_node_id}}">
          <span class="ut-md-tab-dot{{if eq $node.probe_node_kind "builtin"}} ut-md-tab-dot--local{{else if $node.probe_node_online}} ut-md-tab-dot--remote{{else}} ut-md-tab-dot--offline{{end}}" aria-hidden="true"></span>
          <span>{{$node.probe_node_name}}</span>
        </button>
      </li>
      {{end}}
    </ul>
    <div class="btn-group ut-md-range-group" role="group" aria-label="range">
      <button type="button" class="btn btn-outline-secondary active" data-range="24h">{{Tp "user_monitor_detail" "range_24h"}}</button>
      <button type="button" class="btn btn-outline-secondary" data-range="7d">{{Tp "user_monitor_detail" "range_7d"}}</button>
      <button type="button" class="btn btn-outline-secondary" data-range="30d">{{Tp "user_monitor_detail" "range_30d"}}</button>
    </div>
  </div>

<div class="tab-content ut-md-probe-panel__body" id="mdProbeTabContent">
  <div class="tab-pane fade show active" id="md-tab-summary" role="tabpanel" aria-labelledby="md-tab-summary-btn" tabindex="0">
    <div class="ut-md-summary-stats" id="mdSummaryStats">
      <div class="ut-md-summary-stat"><div class="ut-md-summary-stat__label">{{Tp "user_monitor_detail" "stat_uptime_range"}}</div><div class="ut-md-summary-stat__value" id="mdSumUptime">—</div></div>
      <div class="ut-md-summary-stat"><div class="ut-md-summary-stat__label">{{Tp "user_monitor_detail" "stat_avg_response"}}</div><div class="ut-md-summary-stat__value" id="mdSumAvgMs">—</div></div>
      <div class="ut-md-summary-stat"><div class="ut-md-summary-stat__label">{{Tp "user_monitor_detail" "stat_total_checks"}}</div><div class="ut-md-summary-stat__value" id="mdSumChecks">—</div></div>
      <div class="ut-md-summary-stat"><div class="ut-md-summary-stat__label">{{Tp "user_monitor_detail" "stat_fastest_node"}} / {{Tp "user_monitor_detail" "stat_slowest_node"}}</div><div class="ut-md-summary-stat__value fs-6" id="mdSumFastSlow">—</div></div>
    </div>
    <div class="ut-section mb-3">
      <div class="ut-section__head py-2">
        <div class="ut-section__head-icon"><i class="bx bx-git-compare"></i></div>
        <div class="ut-section__head-text"><h2 class="ut-section__head-title h6 mb-0">{{Tp "user_monitor_detail" "summary_compare_title"}}</h2></div>
      </div>
      <div class="ut-section__body">
        <div class="ut-md-node-compare" id="mdNodeCompare"></div>
        <div class="ut-md-node-bars" id="mdNodeBars" aria-label="{{Tp "user_monitor_detail" "chart_node_compare"}}">
          <div class="small fw-semibold text-muted mb-1">{{Tp "user_monitor_detail" "chart_node_compare"}}</div>
        </div>
      </div>
    </div>
    <div class="row g-3 mb-3">
      <div class="col-lg-6">
        <div class="ut-section mb-0">
          <div class="ut-section__head"><div class="ut-section__head-icon ut-section__head-icon--green"><i class="bx bx-line-chart"></i></div><div class="ut-section__head-text"><h2 class="ut-section__head-title">{{Tp "user_monitor_detail" "chart_uptime"}}</h2></div></div>
          <div class="ut-section__body"><div class="ut-md-chart-wrap" data-md-chart-wrap="summary-uptime"><div class="ut-md-chart-empty">{{Tp "user_monitor_detail" "no_chart_data"}}</div><canvas id="mdUptimeChart" height="180"></canvas></div></div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="ut-section mb-0">
          <div class="ut-section__head"><div class="ut-section__head-icon"><i class="bx bx-timer"></i></div><div class="ut-section__head-text"><h2 class="ut-section__head-title">{{Tp "user_monitor_detail" "chart_response"}}</h2></div></div>
          <div class="ut-section__body"><div class="ut-md-chart-wrap" data-md-chart-wrap="summary-resp"><div class="ut-md-chart-empty">{{Tp "user_monitor_detail" "no_chart_data"}}</div><canvas id="mdRespChart" height="180"></canvas></div></div>
        </div>
      </div>
    </div>
    <div class="ut-section">
      <div class="ut-section__head"><div class="ut-section__head-icon ut-section__head-icon--violet"><i class="bx bx-time-five"></i></div><div class="ut-section__head-text"><h2 class="ut-section__head-title">{{Tp "user_monitor_detail" "recent_logs"}}</h2></div></div>
      <div class="ut-section__body ut-section__body--flush">
        <div class="table-responsive">
          <table class="table table-hover table-sm mb-0 align-middle">
            <thead class="table-light"><tr><th>{{Tp "user_monitors" "col_probe_node"}}</th><th>{{T "col_checked"}}</th><th>{{T "col_code"}}</th><th>{{T "col_response"}}</th><th>{{T "col_result"}}</th><th>{{T "col_error"}}</th></tr></thead>
            <tbody id="mdLogsBody"><tr><td colspan="6" class="text-center text-muted py-4">{{Tp "user_monitor_detail" "loading"}}</td></tr></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  {{range $i, $node := index .Data "ProbeNodes"}}
  <div class="tab-pane fade" id="md-tab-node-{{$i}}" role="tabpanel" aria-labelledby="md-tab-node-{{$i}}-btn" tabindex="0" data-probe-node="{{$node.probe_node_id}}">
    <div class="ut-md-summary-stats md-node-stats">
      <div class="ut-md-summary-stat"><div class="ut-md-summary-stat__label">{{T "col_status"}}</div><div class="ut-md-summary-stat__value"><span class="badge rounded-pill text-bg-{{$node.node_state_badge}}">{{$node.node_state_label}}</span></div></div>
      <div class="ut-md-summary-stat"><div class="ut-md-summary-stat__label">{{Tp "user_monitor_detail" "stat_uptime_range"}}</div><div class="ut-md-summary-stat__value md-node-uptime">—</div></div>
      <div class="ut-md-summary-stat"><div class="ut-md-summary-stat__label">{{Tp "user_monitor_detail" "stat_avg_response"}}</div><div class="ut-md-summary-stat__value md-node-avg">—</div></div>
      <div class="ut-md-summary-stat"><div class="ut-md-summary-stat__label">{{T "col_checked"}}</div><div class="ut-md-summary-stat__value fs-6 md-node-checked">{{$node.last_checked_label}}</div></div>
    </div>
    <div class="row g-3 mb-3">
      <div class="col-lg-6">
        <div class="ut-section mb-0">
          <div class="ut-section__head"><div class="ut-section__head-icon ut-section__head-icon--green"><i class="bx bx-line-chart"></i></div><div class="ut-section__head-text"><h2 class="ut-section__head-title">{{Tp "user_monitor_detail" "chart_uptime"}}</h2></div></div>
          <div class="ut-section__body"><div class="ut-md-chart-wrap md-node-chart-wrap"><div class="ut-md-chart-empty">{{Tp "user_monitor_detail" "no_chart_data"}}</div><canvas class="md-node-uptime-chart" height="180"></canvas></div></div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="ut-section mb-0">
          <div class="ut-section__head"><div class="ut-section__head-icon"><i class="bx bx-timer"></i></div><div class="ut-section__head-text"><h2 class="ut-section__head-title">{{Tp "user_monitor_detail" "chart_response"}}</h2></div></div>
          <div class="ut-section__body"><div class="ut-md-chart-wrap md-node-chart-wrap"><div class="ut-md-chart-empty">{{Tp "user_monitor_detail" "no_chart_data"}}</div><canvas class="md-node-resp-chart" height="180"></canvas></div></div>
        </div>
      </div>
    </div>
    <div class="ut-section">
      <div class="ut-section__head"><div class="ut-section__head-icon ut-section__head-icon--violet"><i class="bx bx-time-five"></i></div><div class="ut-section__head-text"><h2 class="ut-section__head-title">{{Tp "user_monitor_detail" "recent_logs"}}</h2></div></div>
      <div class="ut-section__body ut-section__body--flush">
        <div class="table-responsive">
          <table class="table table-hover table-sm mb-0 align-middle">
            <thead class="table-light"><tr><th>{{T "col_checked"}}</th><th>{{T "col_code"}}</th><th>{{T "col_response"}}</th><th>{{T "col_result"}}</th><th>{{T "col_error"}}</th></tr></thead>
            <tbody class="md-node-logs"><tr><td colspan="5" class="text-center text-muted py-4">{{Tp "user_monitor_detail" "loading"}}</td></tr></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  {{end}}
</div>
</div>

{{else}}
<div class="row g-3 mb-4">
  <div class="col-lg-6">
    <div class="ut-section mb-0">
      <div class="ut-section__head">
        <div class="ut-section__head-icon ut-section__head-icon--green"><i class="bx bx-line-chart"></i></div>
        <div class="ut-section__head-text">
          <h2 class="ut-section__head-title">{{Tp "user_monitor_detail" "chart_uptime"}}</h2>
        </div>
      </div>
      <div class="ut-section__body"><canvas id="uptimeChart" height="180"></canvas></div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="ut-section mb-0">
      <div class="ut-section__head">
        <div class="ut-section__head-icon"><i class="bx bx-timer"></i></div>
        <div class="ut-section__head-text">
          <h2 class="ut-section__head-title">{{Tp "user_monitor_detail" "chart_response"}}</h2>
        </div>
      </div>
      <div class="ut-section__body"><canvas id="respChart" height="180"></canvas></div>
    </div>
  </div>
</div>

<div class="ut-section">
  <div class="ut-section__head">
    <div class="ut-section__head-icon ut-section__head-icon--violet"><i class="bx bx-time-five"></i></div>
    <div class="ut-section__head-text">
      <h2 class="ut-section__head-title">{{Tp "user_monitor_detail" "recent_logs"}}</h2>
    </div>
  </div>
  <div class="ut-section__body ut-section__body--flush">
    <div class="table-responsive">
      <table class="table table-hover table-sm mb-0 align-middle">
        <thead class="table-light">
          <tr><th>{{T "col_checked"}}</th><th>{{T "col_code"}}</th><th>{{T "col_response"}}</th><th>{{T "col_result"}}</th><th>{{T "col_error"}}</th></tr>
        </thead>
        <tbody>
        {{range index .Data "Logs"}}
        <tr>
          <td class="small text-muted">{{unixTime .checked_at}}</td>
          <td>{{if eq (asInt .is_up) 1}}<span class="text-success fw-semibold">{{.status_code}}</span>{{else}}<span class="text-danger fw-semibold">{{.status_code}}</span>{{end}}</td>
          <td>{{.response_ms}} ms</td>
          <td>{{if eq (asInt .is_up) 1}}<span class="badge rounded-pill text-bg-success">{{Tp "user_monitor_detail" "result_up"}}</span>{{else}}<span class="badge rounded-pill text-bg-danger">{{Tp "user_monitor_detail" "result_down"}}</span>{{end}}</td>
          <td class="small text-muted">{{errorTypeLabel .error_type}}</td>
        </tr>
        {{else}}
        <tr><td colspan="5" class="text-center text-muted py-4">—</td></tr>
        {{end}}
        </tbody>
      </table>
    </div>
  </div>
</div>
{{end}}
</div>
{{template "public/script_chartjs" .}}
<script>
var monitorRef = {{jsString (index .Data "MonitorRef")}};
var showMultiNode = {{if index .Data "ShowMultiNode"}}true{{else}}false{{end}};
var probeNodes = {{if index .Data "ProbeNodes"}}{{json (index .Data "ProbeNodes")}}{{else}}[]{{end}};
var i18n = {
  loading: {{jsString (Tp "user_monitor_detail" "loading")}},
  noLogs: {{jsString (Tp "user_monitor_detail" "no_logs")}},
  resultUp: {{jsString (Tp "user_monitor_detail" "result_up")}},
  resultDown: {{jsString (Tp "user_monitor_detail" "result_down")}},
  chartUptime: {{jsString (Tp "user_monitor_detail" "chart_uptime")}},
  chartResponse: {{jsString (Tp "user_monitor_detail" "chart_response")}},
  chartNodeCompare: {{jsString (Tp "user_monitor_detail" "chart_node_compare")}},
  statFastest: {{jsString (Tp "user_monitor_detail" "stat_fastest_node")}},
  statSlowest: {{jsString (Tp "user_monitor_detail" "stat_slowest_node")}},
  noChartData: {{jsString (Tp "user_monitor_detail" "no_chart_data")}}
};
var mdCharts = { uptime: null, resp: null, nodes: {} };
var mdCurrentRange = '24h';

function mdHasChartData(data){
  return !!(data && data.labels && data.labels.length);
}
function mdSetChartWrapState($wrap, hasData){
  if (!$wrap || !$wrap.length) return;
  $wrap.toggleClass('has-data', !!hasData);
}
function mdResizeCharts(charts){
  requestAnimationFrame(function(){
    requestAnimationFrame(function(){
      $.each(charts || [], function(_, c){ if (c && typeof c.resize === 'function') c.resize(); });
    });
  });
}

function mdDestroyChart(key){
  if (mdCharts[key]) { mdCharts[key].destroy(); mdCharts[key] = null; }
}
function mdDestroyNodeCharts(nodeId){
  if (!mdCharts.nodes[nodeId]) return;
  if (mdCharts.nodes[nodeId].uptime) mdCharts.nodes[nodeId].uptime.destroy();
  if (mdCharts.nodes[nodeId].resp) mdCharts.nodes[nodeId].resp.destroy();
  mdCharts.nodes[nodeId] = null;
}
function mdFmtPct(v){ return (v == null || isNaN(v)) ? '—' : v.toFixed(2) + '%'; }
function mdFmtMs(v){ return (v == null || isNaN(v) || v <= 0) ? '—' : v + ' ms'; }

function mdMigrateProbeNodeQueryToHash(){
  try {
    var params = new URLSearchParams(location.search);
    var probeNodeId = (params.get('probe_node') || '').trim();
    if (!probeNodeId) return;
    params.delete('probe_node');
    var qs = params.toString();
    var next = location.pathname + (qs ? ('?' + qs) : '') + '#node-' + encodeURIComponent(probeNodeId);
    history.replaceState(null, '', next);
  } catch (e) {}
}
function mdTabKeyFromHash(){
  var hash = (location.hash || '').replace(/^#/, '').trim();
  if (!hash || hash === 'summary') return 'summary';
  if (hash.indexOf('node-') === 0) {
    try { return 'node-' + decodeURIComponent(hash.slice(5)); } catch(e) { return 'summary'; }
  }
  return 'summary';
}
function mdHashFromTabKey(tabKey){
  if (!tabKey || tabKey === 'summary') return '#summary';
  if (tabKey.indexOf('node-') === 0) return '#node-' + encodeURIComponent(tabKey.slice(5));
  return '#summary';
}
function mdBtnFromTabKey(tabKey){
  if (!tabKey || tabKey === 'summary') return $('#md-tab-summary-btn');
  if (tabKey.indexOf('node-') === 0) {
    var nodeId = tabKey.slice(5);
    var $btn = $('#mdProbeTabs [data-probe-node]').filter(function(){ return String($(this).attr('data-probe-node')) === nodeId; }).first();
    if ($btn.length) return $btn;
  }
  return $('#md-tab-summary-btn');
}
function mdUpdateHash($btn){
  var tabKey = ($btn && $btn.attr('data-tab-key')) || 'summary';
  var next = mdHashFromTabKey(tabKey);
  if (location.hash !== next) history.replaceState(null, '', next);
}
function mdLoadFromBtn($btn){
  if (!$btn || !$btn.length) return;
  var target = $btn.attr('data-bs-target') || '';
  if (target === '#md-tab-summary') mdLoadSummaryTab();
  else {
    var nodeId = $btn.data('probe-node');
    if (nodeId) mdLoadNodeTab(nodeId);
  }
}
function mdActivateTabFromHash(){
  var $btn = mdBtnFromTabKey(mdTabKeyFromHash());
  if (!$btn.length) return;
  if ($btn.hasClass('active')) {
    mdLoadFromBtn($btn);
    return;
  }
  if (window.bootstrap && bootstrap.Tab) bootstrap.Tab.getOrCreateInstance($btn[0]).show();
  else $btn.trigger('click');
}

function mdRenderLineCharts(uptimeEl, respEl, data, nodeId){
  var $upWrap = $(uptimeEl).closest('.ut-md-chart-wrap');
  var $respWrap = $(respEl).closest('.ut-md-chart-wrap');
  if (!mdHasChartData(data)) {
    if (nodeId) mdDestroyNodeCharts(nodeId);
    else { mdDestroyChart('uptime'); mdDestroyChart('resp'); }
    mdSetChartWrapState($upWrap, false);
    mdSetChartWrapState($respWrap, false);
    return;
  }
  mdSetChartWrapState($upWrap, true);
  mdSetChartWrapState($respWrap, true);
  if (nodeId) {
    mdDestroyNodeCharts(nodeId);
    mdCharts.nodes[nodeId] = mdCharts.nodes[nodeId] || {};
  } else {
    mdDestroyChart('uptime');
    mdDestroyChart('resp');
  }
  var upChart = new Chart(uptimeEl, {
    type: 'line',
    data: { labels: data.labels || [], datasets: [{ label: i18n.chartUptime, data: data.uptime_series || [], borderColor:'#22c55e', tension:0.2, fill:false, pointRadius: 1 }] },
    options: { responsive:true, maintainAspectRatio:false, scales:{ y:{ min:0, max:100 } }, plugins:{ legend:{ display:false } } }
  });
  var respChart = new Chart(respEl, {
    type: 'line',
    data: { labels: data.labels || [], datasets: [{ label: i18n.chartResponse, data: data.response_ms || [], borderColor:'#2563eb', tension:0.2, fill:false, pointRadius: 1 }] },
    options: { responsive:true, maintainAspectRatio:false, plugins:{ legend:{ display:false } } }
  });
  if (nodeId) {
    mdCharts.nodes[nodeId].uptime = upChart;
    mdCharts.nodes[nodeId].resp = respChart;
    mdResizeCharts([upChart, respChart]);
  } else {
    mdCharts.uptime = upChart;
    mdCharts.resp = respChart;
    mdResizeCharts([upChart, respChart]);
  }
}

function mdRenderNodeBars(nodeStats){
  var $wrap = $('#mdNodeBars');
  var titleHtml = '<div class="small fw-semibold text-muted mb-1">'+ $('<div/>').text(i18n.chartNodeCompare).html() +'</div>';
  var rows = [];
  var maxMs = 0;
  $.each(nodeStats, function(_, item){
    if (!item || !item.name || item.avg_ms == null || item.avg_ms <= 0) return;
    if (item.avg_ms > maxMs) maxMs = item.avg_ms;
    rows.push(item);
  });
  if (!rows.length) {
    $wrap.html(titleHtml + '<div class="text-muted small">'+ $('<div/>').text(i18n.noChartData).html() +'</div>');
    return;
  }
  var html = titleHtml;
  $.each(rows, function(_, item){
    var pct = maxMs > 0 ? Math.max(4, Math.round((item.avg_ms / maxMs) * 100)) : 0;
    var fillCls = 'ut-md-node-bar-row__fill--normal';
    if (item.is_fastest) fillCls = 'ut-md-node-bar-row__fill--fast';
    else if (item.is_slowest) fillCls = 'ut-md-node-bar-row__fill--slow';
    html += '<div class="ut-md-node-bar-row">'+
      '<span class="ut-md-node-bar-row__name" title="'+ $('<div/>').text(item.name).html() +'">'+ $('<div/>').text(item.name).html() +'</span>'+
      '<div class="ut-md-node-bar-row__track"><div class="ut-md-node-bar-row__fill '+fillCls+'" style="width:'+pct+'%"></div></div>'+
      '<span class="ut-md-node-bar-row__value">'+ mdFmtMs(item.avg_ms) +'</span>'+
    '</div>';
  });
  $wrap.html(html);
}

function mdProbeBadgeHtml(node){
  var cls = 'badge rounded-pill text-bg-' + (node.probe_node_badge || 'secondary') + ' ut-probe-node-badge';
  if (node.probe_node_kind === 'builtin') cls += ' ut-probe-node-badge--local';
  if (node.probe_node_kind === 'remote' && !node.probe_node_online) cls += ' ut-probe-node-badge--offline';
  return '<span class="'+cls+'">'+ $('<div/>').text(node.probe_node_name || '').html() +'</span>';
}

function mdRenderNodeCompare(nodeStats){
  var html = '';
  $.each(nodeStats, function(_, item){
    if (!item) return;
    var cardCls = 'ut-md-node-card';
    if (item.is_fastest) cardCls += ' is-fastest';
    if (item.is_slowest) cardCls += ' is-slowest';
    var tags = '';
    if (item.is_fastest) tags += '<span class="ut-md-node-card__tag ut-md-node-card__tag--fast">'+ $('<div/>').text(i18n.statFastest).html() +'</span>';
    if (item.is_slowest) tags += '<span class="ut-md-node-card__tag ut-md-node-card__tag--slow">'+ $('<div/>').text(i18n.statSlowest).html() +'</span>';
    html += '<div class="'+cardCls+'">'+
      '<div class="ut-md-node-card__head">'+ mdProbeBadgeHtml(item.node) +
      '<span class="badge rounded-pill text-bg-'+(item.state_badge||'secondary')+'">'+ $('<div/>').text(item.state_label||'').html() +'</span>'+ tags +'</div>'+
      '<div class="ut-md-node-card__metrics">'+
        '<div><div class="ut-md-node-card__metric-label">'+ $('<div/>').text(i18n.chartUptime).html() +'</div><div class="ut-md-node-card__metric-value">'+ mdFmtPct(item.uptime_pct) +'</div></div>'+
        '<div><div class="ut-md-node-card__metric-label">'+ $('<div/>').text(i18n.chartResponse).html() +'</div><div class="ut-md-node-card__metric-value">'+ mdFmtMs(item.avg_ms) +'</div></div>'+
        '<div><div class="ut-md-node-card__metric-label">{{T "col_code"}}</div><div class="ut-md-node-card__metric-value">'+ (item.last_code != null ? item.last_code : '—') +'</div></div>'+
        '<div><div class="ut-md-node-card__metric-label">{{T "col_checked"}}</div><div class="ut-md-node-card__metric-value fs-6">'+ $('<div/>').text(item.last_checked || '—').html() +'</div></div>'+
      '</div></div>';
  });
  $('#mdNodeCompare').html(html || '<div class="text-muted small">—</div>');
}

function mdRenderLogs($tbody, logs, showNode){
  if (!logs || !logs.length) {
    $tbody.html('<tr><td colspan="'+(showNode?6:5)+'" class="text-center text-muted py-4">'+ $('<div/>').text(i18n.noLogs).html() +'</td></tr>');
    return;
  }
  var html = '';
  $.each(logs, function(_, row){
    var up = parseInt(row.is_up, 10) === 1;
    var codeCls = up ? 'text-success fw-semibold' : 'text-danger fw-semibold';
    var resultCls = up ? 'success' : 'danger';
    var resultLabel = row.result_label || (up ? i18n.resultUp : i18n.resultDown);
    html += '<tr>';
    if (showNode) {
      html += '<td class="small">'+ $('<div/>').text(row.probe_node_name || row.probe_node_id || '—').html() +'</td>';
    }
    html += '<td class="small text-muted">'+ $('<div/>').text(row.checked_label || '—').html() +'</td>'+
      '<td><span class="'+codeCls+'">'+ (row.status_code != null ? row.status_code : '—') +'</span></td>'+
      '<td>'+ (row.response_ms != null ? row.response_ms : '—') +' ms</td>'+
      '<td><span class="badge rounded-pill text-bg-'+resultCls+'">'+ $('<div/>').text(resultLabel).html() +'</span></td>'+
      '<td class="small text-muted">'+ $('<div/>').text(row.error_label || row.error_type || '').html() +'</td></tr>';
  });
  $tbody.html(html);
}


function mdFetchStats(probeNodeId, range){
  var url = '/api/user/monitors/'+encodeURIComponent(monitorRef)+'/stats?range='+encodeURIComponent(range);
  if (probeNodeId) url += '&probe_node_id='+encodeURIComponent(probeNodeId);
  return $.getJSON(url).then(function(res){ return (res && res.success) ? res.data : null; });
}
function mdFetchLogs(probeNodeId, limit){
  var url = '/api/user/monitors/'+encodeURIComponent(monitorRef)+'/logs?limit='+limit;
  if (probeNodeId) url += '&probe_node_id='+encodeURIComponent(probeNodeId);
  return $.getJSON(url).then(function(res){ return (res && res.success && res.data) ? res.data.logs : []; });
}

function mdBuildNodeStatsList(nodeDataList){
  var withAvg = [];
  $.each(nodeDataList, function(_, item){
    if (!item || item.stats == null) return;
    if (item.stats.total_checks > 0 && item.stats.avg_ms >= 0) {
      withAvg.push({ id: item.id, name: item.name, avg_ms: item.stats.avg_ms, node: item.node, stats: item.stats,
        uptime_pct: item.stats.uptime_pct, state_label: item.state_label, state_badge: item.state_badge,
        last_code: item.last_code, last_checked: item.last_checked });
    }
  });
  var fastestId = null, slowestId = null, minMs = Infinity, maxMs = -1;
  $.each(withAvg, function(_, item){
    if (item.avg_ms < minMs) { minMs = item.avg_ms; fastestId = item.id; }
    if (item.avg_ms > maxMs) { maxMs = item.avg_ms; slowestId = item.id; }
  });
  if (withAvg.length < 2) { fastestId = null; slowestId = null; }
  return $.map(nodeDataList, function(item){
    if (!item) return null;
    return {
      id: item.id, name: item.name, node: item.node,
      uptime_pct: item.stats ? item.stats.uptime_pct : null,
      avg_ms: item.stats ? item.stats.avg_ms : null,
      state_label: item.state_label, state_badge: item.state_badge,
      last_code: item.last_code, last_checked: item.last_checked,
      is_fastest: fastestId && item.id === fastestId,
      is_slowest: slowestId && item.id === slowestId
    };
  });
}

function mdAsArray(v){ return $.isArray(v) ? v : (v != null ? [v] : []); }

function mdLoadSummaryTab(){
  var nodeReqs = $.map(probeNodes, function(node){
    return mdFetchStats(node.probe_node_id, mdCurrentRange).then(function(stats){
      return {
        id: node.probe_node_id,
        name: node.probe_node_name,
        node: node,
        stats: stats,
        state_label: node.node_state_label,
        state_badge: node.node_state_badge,
        last_code: node.last_status_code,
        last_checked: node.last_checked_label
      };
    });
  });
  $.when(mdFetchStats('', mdCurrentRange), mdFetchLogs('', 20), $.when.apply($, nodeReqs)).done(function(aggStats, logs, nodeBundle){
    var nodeDataList = mdAsArray(nodeBundle);
    var compareList = mdBuildNodeStatsList(nodeDataList);
    if (aggStats && aggStats.total_checks > 0) {
      $('#mdSumUptime').text(mdFmtPct(aggStats.uptime_pct));
      $('#mdSumAvgMs').text(mdFmtMs(aggStats.avg_ms));
      $('#mdSumChecks').text(aggStats.total_checks);
    } else {
      $('#mdSumUptime').text('—');
      $('#mdSumAvgMs').text('—');
      $('#mdSumChecks').text('—');
    }
    var fastest = null, slowest = null;
    $.each(compareList, function(_, item){
      if (item.is_fastest) fastest = item.name;
      if (item.is_slowest) slowest = item.name;
    });
    if (fastest && slowest) {
      $('#mdSumFastSlow').text(fastest + ' / ' + slowest);
    } else if (fastest) {
      $('#mdSumFastSlow').text(fastest);
    } else {
      $('#mdSumFastSlow').text('—');
    }
    mdRenderNodeCompare(compareList);
    mdRenderNodeBars(compareList);
    mdRenderLineCharts(document.getElementById('mdUptimeChart'), document.getElementById('mdRespChart'), aggStats);
    mdRenderLogs($('#mdLogsBody'), logs, true);
  }).fail(function(){
    $('#mdLogsBody').html('<tr><td colspan="6" class="text-center text-muted py-4">—</td></tr>');
  });
}

function mdLoadNodeTab(nodeId){
  var $pane = $('#mdProbeTabContent .tab-pane').filter(function(){ return $(this).data('probe-node') === nodeId; });
  if (!$pane.length) return;
  $.when(mdFetchStats(nodeId, mdCurrentRange), mdFetchLogs(nodeId, 20)).done(function(stats, logs){
    stats = stats || null;
    logs = logs || [];
    $pane.find('.md-node-uptime').text(stats && stats.total_checks > 0 ? mdFmtPct(stats.uptime_pct) : '—');
    $pane.find('.md-node-avg').text(stats && stats.total_checks > 0 ? mdFmtMs(stats.avg_ms) : '—');
    mdRenderLineCharts($pane.find('.md-node-uptime-chart')[0], $pane.find('.md-node-resp-chart')[0], stats, nodeId);
    mdRenderLogs($pane.find('.md-node-logs'), logs, false);
  });
}

function mdReloadActiveTab(){
  var $active = $('#mdProbeTabs .nav-link.active');
  var target = $active.attr('data-bs-target') || '';
  if (target === '#md-tab-summary') mdLoadSummaryTab();
  else {
    var nodeId = $active.data('probe-node');
    if (nodeId) mdLoadNodeTab(nodeId);
  }
}

function loadStats(range){
  $.getJSON('/api/user/monitors/'+monitorRef+'/stats?range='+range, function(res){
    if(!res.success) return;
    var d = res.data;
    mdRenderLineCharts(document.getElementById('uptimeChart'), document.getElementById('respChart'), d);
  });
}

$(function(){
  if (showMultiNode) {
    mdMigrateProbeNodeQueryToHash();
    $('#mdProbeTabs button[data-bs-toggle="tab"]').on('shown.bs.tab', function(e){
      var $btn = $(e.target);
      mdUpdateHash($btn);
      mdLoadFromBtn($btn);
    });
    mdActivateTabFromHash();
    $(window).on('hashchange', mdActivateTabFromHash);
    $('.ut-md-range-group [data-range]').on('click', function(){
      var range = $(this).data('range');
      if (!range || range === mdCurrentRange) return;
      mdCurrentRange = range;
      $('.ut-md-range-group [data-range]').removeClass('active');
      $(this).addClass('active');
      mdReloadActiveTab();
    });
  } else {
    loadStats('24h');
  }
});
</script>
{{template "user/layout_foot" .}}
{{end}}