@extends('layouts.walls')

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

@section('content')
  <div class="sw-wall sw-wall--notable-event">
    @include('monitoring_wall.partials._sw-topbar', ['subtitle' => 'GNE Detection Engine'])

    <main class="sw-main">
      <div class="sw-col">
        <section id="notable-events" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
        <section id="event-volume" class="sw-card grow">
          @include('monitoring_wall.partials._sw-loader')
        </section>
      </div>
      <div class="sw-col">
        <section id="critical-notable-events" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
        <section id="notable-event-statistics" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
        <section id="last-notable-events" class="sw-card grow">
          @include('monitoring_wall.partials._sw-loader')
        </section>
      </div>
    </main>
  </div>

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

  <script>
    const num = v => { const n = +v; return isFinite(n) ? n : 0; };
    const hm = v => { const m = String(v ?? '').match(/(\d{2}):(\d{2})/); return m ? m[1] + ':' + m[2] : ''; };
    const heatColor = r => `hsl(${Math.round(140 - 140 * Math.max(0, Math.min(1, r)))}, 75%, 52%)`;

    const engHealth = e => e.success > 0 ? (e.errors > e.success ? 'DEGRADED' : 'OPTIMAL') : (e.errors > 0 ? 'DEGRADED' : 'STALE');
    const engCls = s => s === 'OPTIMAL' ? 'is-ok' : s === 'DEGRADED' ? 'is-warn' : 'is-down';

    function engineStatusPill(engine) {
      const degraded = engine.filter(e => engHealth(e) === 'DEGRADED').length;
      const stale = engine.filter(e => engHealth(e) === 'STALE').length;
      const pill = $("#sw-status");
      const label = $("#sw-status-label");
      pill.removeClass('tone-red tone-orange tone-green').show();
      if (degraded > 0) {
        pill.addClass('tone-orange');
        label.text(degraded + ' Degraded');
      } else if (stale > 0) {
        pill.addClass('tone-orange');
        label.text(stale + ' Stale');
      } else {
        pill.addClass('tone-green');
        label.text('Engine Optimal');
      }
    }

    function topGneTable(gne) {
      const head = cardHead('acc-cyan', 'Top GNE Types', 'Last 24 hours', gne.length + ' active');

      if (!gne.length) {
        $("#notable-events").append(`
          ${head}
          <div class="sw-card__body pad">
            <div class="sw-subtle sw-note">No notable events found.</div>
          </div>
        `);
        return;
      }

      const rows = gne.map(g => `
        <tr>
          <td class="sw-rank">${esc(g.gne)}</td>
          <td class="strong">${esc(g.name)}</td>
          <td class="num">${fmt(g.c24)}</td>
          <td class="num muted">${fmt(g.c7)}</td>
          <td>${prioBadge(g.priorityId)}</td>
          <td class="num">${fmt(g.cases)}</td>
        </tr>
      `).join('');

      $("#notable-events").append(`
        ${head}
        <div class="sw-card__body nopad">
          <div class="sw-table-wrap">
            <table class="sw-table">
              <thead>
                <tr>
                  <th>GNE</th>
                  <th>Notable Event</th>
                  <th class="num">24h</th>
                  <th class="num">7d</th>
                  <th>Priority</th>
                  <th class="num">Cases</th>
                </tr>
              </thead>
              <tbody>${rows}</tbody>
            </table>
          </div>
        </div>
      `);
    }

    function eventVolume(gne) {
      const head = cardHead('acc-blue', 'Event Volume', 'Firings · last 24h');
      const bars = [...gne].sort((a, b) => b.c24 - a.c24);

      if (!bars.length) {
        $("#event-volume").append(`
          ${head}
          <div class="sw-card__body pad">
            <div class="sw-subtle sw-note">No notable events found.</div>
          </div>
        `);
        return;
      }

      const maxV = Math.max(1, ...bars.map(g => g.c24));

      const html = bars.map(g => {
        const ratio = g.c24 / maxV;
        const color = heatColor(ratio);
        const w = Math.max(3, ratio * 100);
        return `
          <div class="sw-hbar">
            <div class="sw-hbar__top">
              <span class="sw-hbar__name"><span class="sw-rank sw-hbar__rank">${esc(g.gne)}</span>${esc(g.name)}</span>
              <span class="sw-hbar__val">${fmt(g.c24)}</span>
            </div>
            <div class="sw-hbar__track">
              <div class="sw-hbar__fill" style="width:${w}%;background:${color};color:${color}"></div>
            </div>
          </div>
        `;
      }).join('');

      $("#event-volume").append(`
        ${head}
        <div class="sw-card__body pad">
          <div class="sw-hbars">${html}</div>
        </div>
      `);
    }

    function criticalTable(events) {
      const head = cardHead('acc-red', 'New Critical / High', 'Last 60 minutes');

      if (!events.length) {
        $("#critical-notable-events").append(`
          ${head}
          <div class="sw-card__body pad">
            <div class="sw-subtle sw-note">No new critical/high events.</div>
          </div>
        `);
        return;
      }

      const rows = events.map(e => {
        const c = e.case || {};
        const s = e.search || {};
        return `
          <tr>
            <td class="mono">${hm(e.updated_at)}</td>
            <td class="sw-rank">#${esc(s.gne ?? '')}</td>
            <td class="strong">${esc(s.name ?? '')}</td>
            <td>${prioBadge(c.priority)}</td>
            <td class="mono">${caseLink(c.id)}</td>
            <td>${statusBadge(c.status)}</td>
          </tr>
        `;
      }).join('');

      $("#critical-notable-events").append(`
        ${head}
        <div class="sw-card__body nopad">
          <div class="sw-table-wrap">
            <table class="sw-table">
              <thead>
                <tr>
                  <th>Time</th>
                  <th>GNE</th>
                  <th>Event</th>
                  <th>Priority</th>
                  <th>Case</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>${rows}</tbody>
            </table>
          </div>
        </div>
      `);
    }

    function trendingBlock(ns) {
      const trend = (label, now, prev) => {
        const n = num(now), p = num(prev);
        return {label, now: n, prev: p, pct: p > 0 ? Math.round((n - p) / p * 100) : (n > 0 ? 100 : 0)};
      };
      const trends = [
        trend('Last Hour', ns.last_hour, ns.previous_hour),
        trend('Last 24 Hours', ns.last_24h, ns.previous_24h),
        trend('Last 7 Days', ns.last_7d, ns.previous_7d)
      ];

      const cards = trends.map(t => {
        const up = t.pct >= 0;
        return `
          <div class="sw-metric">
            <div class="sw-metric__label">${t.label}</div>
            <div class="sw-metric__row">
              <div class="sw-metric__delta ${up ? 'up' : 'down'}">
                <span class="sw-metric__arrow">${up ? '▲' : '▼'}</span>${up ? '+' : ''}${t.pct}%
              </div>
            </div>
            <div class="sw-metric__sub">${fmt(t.now)} vs ${fmt(t.prev)}</div>
          </div>
        `;
      }).join('');

      $("#notable-event-statistics").append(`
        ${cardHead('acc-violet', 'Trending Analysis', 'Summarized trajectory')}
        <div class="sw-card__body pad">
          <div class="sw-metric-row">${cards}</div>
        </div>
      `);
    }

    function engineHealth(engine) {
      const head = cardHead('acc-green', 'GNE Engine Health', 'Preventing silent failures');

      if (!engine.length) {
        $("#last-notable-events").append(`
          ${head}
          <div class="sw-card__body pad">
            <div class="sw-subtle sw-note">No engine data.</div>
          </div>
        `);
        return;
      }

      const rows = engine.map(e => {
        const st = engHealth(e);
        return `
          <tr>
            <td class="strong">${esc(e.name)}</td>
            <td>${badge(st, engCls(st))}</td>
            <td class="num" style="color:var(--orange)">${fmt(e.errors)}</td>
            <td class="num">${fmt(e.success)}</td>
            <td class="mono muted">${esc(e.last)}</td>
          </tr>
        `;
      }).join('');

      $("#last-notable-events").append(`
        ${head}
        <div class="sw-card__body nopad">
          <div class="sw-table-wrap">
            <table class="sw-table roomy">
              <thead>
                <tr>
                  <th>Search</th>
                  <th>Status</th>
                  <th class="num">Errors</th>
                  <th class="num">Success</th>
                  <th>Last Result</th>
                </tr>
              </thead>
              <tbody>${rows}</tbody>
            </table>
          </div>
        </div>
      `);
    }

    swWallInit("{{ route('notable-event-data') }}", function (resp) {
      $("#notable-events, #event-volume, #critical-notable-events, #notable-event-statistics, #last-notable-events").empty();

      const gne = (resp.splunkSearchNotableEvents || []).map(g => ({
        gne: '#' + (g.gne ?? ''),
        name: g.name || '',
        c24: num(g.successful_commands_sum_last_day),
        c7: num(g.successful_commands_sum_last_7_days),
        priorityId: (g.case_config && g.case_config.priority_id != null) ? g.case_config.priority_id : null,
        cases: num(g.events_count)
      })).sort((a, b) => b.cases - a.cases).slice(0, 10);

      const engine = Object.values(resp.lastNotableEvents || {}).map(e => ({
        name: (e.search && e.search.name) || '',
        errors: num(e.failed_commands_sum_last_7_days),
        success: num(e.successful_commands_sum_last_7_days),
        last: e.updated_at || ''
      }));

      topGneTable(gne);
      eventVolume(gne);
      criticalTable(resp.criticalNotableEvents || []);
      trendingBlock(resp.notableEventStatistic || {});
      engineHealth(engine);
      engineStatusPill(engine);
    });
  </script>
@endsection