@extends('layouts.walls')

@section('additional_styles')
  <link rel="stylesheet" href="{{ asset('theme/assets/css/monitoring-wall.css') }}">
@endsection

@section('content')
  @php
    $prtgWidgetIds = [689, 693, 691, 692, 694, 695, 686, 688, 687];
    $prtgWidgets = [];
    foreach ($prtgWidgetIds as $prtgWidgetId) {
      $prtgWidget = \App\Models\SplunkSearches::find($prtgWidgetId);
      if (!$prtgWidget) {
        continue;
      }
      $prtgFrom = '';
      $prtgTo = '';
      if ($prtgWidget->period_only) {
        $prtgFrom = $prtgWidget->period_from;
        $prtgTo = $prtgWidget->period_to;
      }
      $prtgWidgets[] = ['id' => $prtgWidgetId, 'from' => $prtgFrom, 'to' => $prtgTo];
    }
  @endphp

  <div class="sw-wall sw-wall--mss-csm">
    @include('monitoring_wall.partials._sw-topbar', ['subtitle' => 'Continuous Service Monitoring'])

    <main class="sw-main">
      <div id="prtg-gauges" class="sw-prtg-gauges">
        @include('monitoring_wall.partials._sw-loader')
      </div>

      <div class="sw-prtg-row2">
        <section id="prtg-critical" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
        <section id="prtg-degradation" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
      </div>

      <div class="sw-prtg-row3">
        <section id="prtg-infra" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
        <section id="prtg-byclient" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
        <section id="prtg-ping" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
      </div>
    </main>
  </div>

  @include('monitoring_wall.partials._sw-bootstrap')

  <script>
    const PRTG_ENDPOINT = "{{ url('/get-widget-data') }}";
    const PRTG_WIDGETS = {!! json_encode($prtgWidgets) !!};
  </script>

  <script>
@verbatim
    const clip = (s, n) => { s = String(s || ''); return s.length > n ? s.slice(0, n - 1) + '…' : s; };
    const sevClass = p => /crit/i.test(p) ? 'is-critical' : /high/i.test(p) ? 'is-high' : /med/i.test(p) ? 'is-medium' : /low/i.test(p) ? 'is-low' : '';
    const slaBadge = s => !s ? '<span class="sw-subtle">—</span>' : /out/i.test(s) ? badge('Out of SLA', 'is-breach') : badge('In SLA', 'is-ok');
    const prtgStatus = s => /open/i.test(s) ? badge(esc(s), 'is-open') : /answer/i.test(s) ? badge(esc(s), 'is-warn') : (s ? badge(esc(s), '') : '<span class="sw-subtle">—</span>');

    const num = x => { if (x == null) return 0; const n = parseFloat(String(x).replace(/[,\s]/g, '')); return isFinite(n) ? n : 0; };
    const cleanSite = s => String(s || '').replace(/^https?:\/\//i, '').replace(/\/+$/, '');
    const stripEmoji = s => String(s || '').replace(/[^\x00-\x7F]+/g, '').trim();
    const rowsOf = resp => (resp && Array.isArray(resp.data)) ? resp.data : [];
    const mapRows = (resp, pick) => {
      const labels = (resp && resp.data_labels) || [];
      return rowsOf(resp).map(row => pick(name => row[labels.indexOf(name)]));
    };

    function adapt(byId) {
      const cell = id => { const r = byId[id]; return (r && r.data && r.data[0]) ? r.data[0][0] : null; };
      const infraRows = rowsOf(byId[686]);
      const infraLabels = (byId[686] && byId[686].data_labels) || [];
      const infraFirst = infraRows[0] || [];
      const infraAt = name => infraFirst[infraLabels.indexOf(name)];
      const ping = mapRows(byId[687], g => ({ avg: num(g('Ping Time (ms)')), min: num(g('Minimum (ms)')), max: num(g('Maximum (ms)')) }));
      return {
        gauges: { total: num(cell(689)), available: num(cell(693)), down: num(cell(691)), warning: num(cell(692)) },
        criticalDown: mapRows(byId[694], g => ({
          priority: g('Priority'), client: g('cust_name'), site: cleanSite(g('Site_Name')),
          sensor: g('Message') || g('Sensor'), downtime: g('Down_Since'), sla: g('SLA'),
          case: g('Case #'), status: g('Case Status')
        })),
        degradation: mapRows(byId[695], g => ({
          priority: g('Priority'), client: g('cust_name'),
          sensor: g('Sensor'), issue: g('Issue'), case: g('Case #')
        })),
        infra: {
          status: stripEmoji(infraAt('Severity')) || 'Normal',
          message: infraRows.length > 1
            ? infraRows.length + ' active infrastructure alerts'
            : ([infraAt('Site_Name'), infraAt('Issue')].filter(x => x && x !== '-').join(' — ') || 'No active alerts')
        },
        byClient: mapRows(byId[688], g => ({
          client: g('Client'), available: num(g('Available')), degraded: num(g('Degraded')), down: num(g('Down'))
        })),
        ping: { avg: ping.map(p => p.avg), min: ping.map(p => p.min), max: ping.map(p => p.max) }
      };
    }

    function gaugeRing(value, max, color, display) {
      const size = 128, sw = 9, r = (size - sw) / 2 - 1, c = size / 2, circ = 2 * Math.PI * r;
      const f = Math.max(0, Math.min(1, max ? value / max : 0));
      return `<svg class="sw-prtg-ring" viewBox="0 0 ${size} ${size}">
          <circle cx="${c}" cy="${c}" r="${r}" fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="${sw}"/>
          <circle cx="${c}" cy="${c}" r="${r}" fill="none" stroke-width="${sw}" stroke-linecap="round"
            style="stroke:${color}" stroke-dasharray="${(f * circ).toFixed(1)} ${circ.toFixed(1)}" transform="rotate(-90 ${c} ${c})"/>
          <text x="${c}" y="${(c + size * 0.105).toFixed(1)}" text-anchor="middle" font-size="${(size * 0.3).toFixed(0)}" font-weight="800" fill="#fafafa">${display}</text>
        </svg>`;
    }

    function gaugeCard(label, value, max, color, unit, display) {
      return `<div class="sw-card sw-prtg-gauge">
          ${gaugeRing(value, max, color, display == null ? value : display)}
          <div class="sw-prtg-gauge__meta">
            <div class="sw-prtg-gauge__label">${label}</div>
            <div class="sw-prtg-gauge__unit">${unit}</div>
          </div>
        </div>`;
    }

    function renderGauges(g) {
      const total = g.total, avail = g.available;
      const pct = total ? Math.round(avail / total * 100) : 0;
      $("#prtg-gauges").empty().append(
        gaugeCard('Total Monitored', total, total || 1, 'var(--blue)', 'Web services', total) +
        gaugeCard('Available Now', avail, total || 1, 'var(--green)', pct + '% of fleet', avail) +
        gaugeCard('Down', g.down, total || 1, 'var(--red)', 'Out of service', g.down) +
        gaugeCard('Warning', g.warning, total || 1, 'var(--yellow)', 'Degraded sensors', g.warning)
      );
    }

    function renderCritical(rows) {
      const body = rows.length ? rows.map((r, i) => `
          <tr>
            <td class="sw-rank">${i + 1}</td>
            <td>${badge(esc(r.priority || '—'), sevClass(r.priority))}</td>
            <td><div class="strong col-clip">${esc(r.client)}</div><div class="sw-subtle col-clip" style="font-size:12px">${esc(r.site)}</div></td>
            <td class="muted col-clip">${esc(clip(r.sensor, 60))}</td>
            <td class="num" style="color:var(--red);white-space:nowrap">${esc(r.downtime)}</td>
            <td>${slaBadge(r.sla)}</td>
            <td class="mono" style="color:var(--blue)">${r.case ? '#' + esc(r.case) : '—'}</td>
            <td>${prtgStatus(r.status)}</td>
          </tr>`).join('') : '<tr><td colspan="8" class="sw-empty">No active outages</td></tr>';
      $("#prtg-critical").empty().append(
        cardHead('acc-red', 'Critical Services Down', 'Active outages', rows.length + ' down') + `
          <div class="sw-card__body nopad">
            <div class="sw-table-wrap">
              <table class="sw-table compact">
                <colgroup><col style="width:34px"><col style="width:106px"><col style="width:22%"><col><col style="width:92px"><col style="width:124px"><col style="width:62px"><col style="width:112px"></colgroup>
                <thead><tr><th>#</th><th>Priority</th><th>Client / Site</th><th>Sensor / Message</th><th class="num">Downtime</th><th>SLA</th><th>Case</th><th>Status</th></tr></thead>
                <tbody>${body}</tbody>
              </table>
            </div>
          </div>`);
    }

    function renderDegradation(rows) {
      const body = rows.length ? rows.map((r, i) => `
          <tr>
            <td class="sw-rank">${i + 1}</td>
            <td>${badge(esc(r.priority || '—'), sevClass(r.priority))}</td>
            <td class="strong col-clip">${esc(r.client)}</td>
            <td class="muted col-clip">${esc(clip(r.sensor, 40))}</td>
            <td>${r.issue ? badge(esc(clip(r.issue, 40)), 'is-warn') : '<span class="sw-subtle">—</span>'}</td>
            <td class="mono" style="color:var(--blue)">${r.case ? '#' + esc(r.case) : '—'}</td>
          </tr>`).join('') : '<tr><td colspan="6" class="sw-empty">No warnings</td></tr>';
      $("#prtg-degradation").empty().append(
        cardHead('acc-yellow', 'Service Degradation & Warnings', 'Sensor warnings', rows.length ? rows.length + ' warnings' : '') + `
          <div class="sw-card__body nopad">
            <div class="sw-table-wrap">
              <table class="sw-table compact">
                <colgroup><col style="width:34px"><col style="width:90px"><col style="width:22%"><col><col style="width:22%"><col style="width:66px"></colgroup>
                <thead><tr><th>#</th><th>Pri</th><th>Client</th><th>Sensor</th><th>Issue</th><th>Case</th></tr></thead>
                <tbody>${body}</tbody>
              </table>
            </div>
          </div>`);
    }

    function renderInfra(inf) {
      const normal = /normal/i.test(inf.status) || !inf.status;
      const col = normal ? 'var(--fg-subtle)' : 'var(--red)';
      const mark = normal ? '✓' : '⚠';
      $("#prtg-infra").empty().append(
        cardHead(normal ? '' : 'acc-red', 'Infrastructure & Certificates', '', '') + `
          <div class="sw-card__body pad">
            <div class="sw-prtg-infra__mark" style="color:${col}">${mark}</div>
            <div class="sw-prtg-infra__msg">${esc(inf.message)}</div>
          </div>`);
    }

    function renderByClient(list) {
      const rowFn = c => {
        const col = c.available >= 99 ? 'var(--green)' : c.available >= 85 ? 'var(--yellow)' : 'var(--red)';
        const status = c.down > 0 ? c.down.toFixed(1) + '% down' : c.degraded > 0 ? c.degraded.toFixed(1) + '% degraded' : 'fully operational';
        return `<tr>
            <td class="strong"><span class="sw-prtg-cli"><span class="sw-prtg-cli__dot" style="background:${col};box-shadow:0 0 8px ${col}"></span>${esc(c.client)}</span></td>
            <td class="muted" style="font-size:13px">${status}</td>
            <td class="num" style="color:color-mix(in srgb, ${col} 62%, white);font-weight:700">${c.available.toFixed(1)}%</td>
          </tr>`;
      };
      const body = list.length ? list.map(rowFn).join('') : '<tr><td colspan="3" class="sw-empty">No data</td></tr>';
      $("#prtg-byclient").empty().append(
        cardHead('acc-cyan', 'Availability by Client', '', '') + `
          <div class="sw-card__body nopad">
            <div class="sw-table-wrap">
              <table class="sw-table compact">
                <thead><tr><th>Client</th><th>Status</th><th class="num">%</th></tr></thead>
                <tbody>${body}</tbody>
              </table>
            </div>
          </div>`);
    }

    function pingSvg(p) {
      const W = 960, H = 210, padT = 14, padB = 8, padL = 8, padR = 8;
      const avg = p.avg || [], min = p.min || [], max = p.max || [], n = avg.length;
      if (n < 2) return '<div class="sw-subtle sw-note">No ping data.</div>';
      const hi = Math.max(1, Math.max.apply(null, max) * 1.1);
      const xs = i => padL + i * (W - padL - padR) / (n - 1);
      const ys = v => H - padB - v / hi * (H - padT - padB);
      const path = arr => arr.map((v, i) => (i ? 'L' : 'M') + xs(i).toFixed(1) + ' ' + ys(v).toFixed(1)).join(' ');
      const grid = [0.25, 0.5, 0.75].map(f => `<line x1="0" y1="${(H * f).toFixed(1)}" x2="${W}" y2="${(H * f).toFixed(1)}" stroke="rgba(255,255,255,0.05)" stroke-width="1"/>`).join('');
      return `<svg class="sw-prtg-ping__svg" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none">
          ${grid}
          <path d="${path(max)}" fill="none" stroke="rgba(244,63,94,0.55)" stroke-width="1.3" stroke-dasharray="2 3"/>
          <path d="${path(min)}" fill="none" stroke="rgba(132,204,22,0.5)" stroke-width="1.3" stroke-dasharray="2 3"/>
          <path d="${path(avg)}" fill="none" stroke="#22d3ee" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" style="filter:drop-shadow(0 0 6px rgba(34,211,238,0.5))"/>
        </svg>`;
    }

    function renderPing(p) {
      $("#prtg-ping").empty().append(
        cardHead('acc-cyan', 'Ping Response Time', 'ms · last hours', '') + `
          <div class="sw-card__body pad">
            <div class="sw-prtg-ping">
              <div class="sw-prtg-ping__legend">
                <span style="color:var(--cyan)">● Avg</span>
                <span style="color:rgba(244,63,94,0.85)">— Max</span>
                <span style="color:rgba(132,204,22,0.85)">— Min</span>
              </div>
              <div class="sw-prtg-ping__chart">${pingSvg(p)}</div>
            </div>
          </div>`);
    }

    function statusPill(g, state) {
      const pill = $("#sw-status"), label = $("#sw-status-label");
      pill.removeClass('tone-green tone-orange tone-red tone-zinc').show();
      if (state === 'offline') { pill.addClass('tone-zinc'); label.text('Data Unavailable'); return; }
      const suffix = state === 'stale' ? ' · stale' : '';
      if (g.down > 0) { pill.addClass('tone-red'); label.text(g.down + ' Services Down' + suffix); }
      else if (g.warning > 0) { pill.addClass('tone-orange'); label.text(g.warning + ' Warnings' + suffix); }
      else if (state === 'stale') { pill.addClass('tone-zinc'); label.text('Stale Data'); }
      else { pill.addClass('tone-green'); label.text('All Operational'); }
    }

    function renderWall(d, state) {
      renderGauges(d.gauges);
      renderCritical(d.criticalDown);
      renderDegradation(d.degradation);
      renderInfra(d.infra);
      renderByClient(d.byClient);
      renderPing(d.ping);
      statusPill(d.gauges, state);
    }

    function tickClock() {
      const dt = new Date();
      $("#sw-clock").text(dt.toLocaleDateString('en-US') + ' · ' + dt.toLocaleTimeString('en-US', { hour12: false }));
    }

    let prtgInFlight = false;
    const prtgData = {};

    function prtgFetch(w) {
      return $.ajax({
        url: PRTG_ENDPOINT,
        type: "post",
        dataType: "json",
        data: { _token: tk, id: w.id, from: w.from || '', to: w.to || '' }
      }).then(
        resp => ({ id: w.id, resp: resp }),
        () => ({ id: w.id, resp: null })
      );
    }

    function prtgLoad() {
      if (prtgInFlight) return;
      prtgInFlight = true;
      $.when.apply($, PRTG_WIDGETS.map(prtgFetch)).always(function () {
        prtgInFlight = false;
        const results = PRTG_WIDGETS.length > 1 ? Array.prototype.slice.call(arguments) : [arguments[0]];
        let anyFresh = false;
        results.forEach(r => {
          if (r && r.resp && Array.isArray(r.resp.data)) { prtgData[r.id] = r.resp; anyFresh = true; }
        });
        const state = anyFresh ? 'live' : (Object.keys(prtgData).length ? 'stale' : 'offline');
        renderWall(adapt(prtgData), state);
        tickClock();
      });
    }

    $(document).ready(function () {
      prtgLoad();
      tickClock();
      $("#refresh-btn").on("click", prtgLoad);
      setInterval(prtgLoad, monitoringWallUpdateInterval);
      setInterval(tickClock, 1000);
    });
@endverbatim
  </script>
@endsection