@extends('layouts.walls')

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

@section('content')
  @php
    $timWidgetIds = ['map' => 683, '1h' => 696, '24h' => 697, '7d' => 698];
    $timWidgets = [];
    foreach ($timWidgetIds as $timKey => $timWidgetId) {
      $timWidget = \App\Models\SplunkSearches::find($timWidgetId);
      if (!$timWidget) {
        continue;
      }
      $timFrom = '';
      $timTo = '';
      if ($timWidget->period_only) {
        $timFrom = $timWidget->period_from;
        $timTo = $timWidget->period_to;
      }
      $timWidgets[] = ['key' => $timKey, 'id' => $timWidgetId, 'from' => $timFrom, 'to' => $timTo];
    }
    $timFlags = array_map(function ($timFlagPath) {
      return basename($timFlagPath, '.png');
    }, glob(public_path('theme/png/*.png')));
    $timClientQuery = \App\Client::whereNotNull('cust_id')->where('cust_id', '!=', '');
    if ((int) account()->id !== \App\Models\Account::GLESEC_ACCOUNT_ID) {
      $timClientQuery->where('client_id', account()->id);
    }
    $timClients = $timClientQuery->pluck('name', 'cust_id')->toArray();
  @endphp

  <div class="sw-wall sw-wall--tim">
    @include('monitoring_wall.partials._sw-topbar', ['subtitle' => 'Global Attack Surface'])

    <main class="sw-main">
      <div class="sw-tim-left">
        <section id="tim-counters" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
        <section id="tim-map" class="sw-card grow">
          @include('monitoring_wall.partials._sw-loader', ['label' => 'Locating attack sources'])
        </section>
      </div>

      <section id="tim-feed" class="sw-card">
        @include('monitoring_wall.partials._sw-loader')
      </section>
    </main>
  </div>

  @include('monitoring_wall.partials._sw-bootstrap')
  <script src="{{ asset('theme/assets/js/sw-world-dots.js') }}"></script>

  <script>
    const TIM_ENDPOINT = "{{ url('/get-widget-data') }}";
    const TIM_WIDGETS = {!! json_encode($timWidgets) !!};
    const TIM_FLAG_BASE = "{{ asset('theme/png') }}";
    const TIM_FLAGS = new Set({!! json_encode($timFlags) !!});
    const TIM_CLIENTS = {!! json_encode($timClients) !!};
  </script>

  <script>
@verbatim
    const MW = 1000, MH = 500;
    const ll = (lon, lat) => [(lon + 180) / 360 * MW, (90 - lat) / 180 * MH];
    const fin = v => { const n = parseFloat(v); return isFinite(n) ? n : null; };

    const FEED_LIMIT = 150;
    const MAP_COL = {
      critical: '#ff2d6e', high: '#ef4444', medium: '#f97316',
      low: '#eab308', informational: '#3b82f6', unknown: '#71717a'
    };
    const SEV_BADGE = {
      critical: 'is-critical', high: 'is-high', medium: 'is-medium',
      low: 'is-low', informational: 'is-info', unknown: ''
    };
    const LEGEND_ORDER = ['critical', 'high', 'medium', 'low', 'informational', 'unknown'];

    function sevKey(s) {
      const k = String(s == null ? '' : s).split(',')[0].trim().toLowerCase();
      if (!k) return 'unknown';
      if (MAP_COL[k]) return k;
      if (k.indexOf('crit') === 0) return 'critical';
      if (k.indexOf('high') === 0) return 'high';
      if (k.indexOf('med') === 0 || k.indexOf('warn') === 0) return 'medium';
      if (k.indexOf('low') === 0 || k === 'notice') return 'low';
      if (k.indexOf('info') === 0) return 'informational';
      return 'unknown';
    }
    const sevLabel = s => { const k = sevKey(s); return k === 'informational' ? 'Info' : k.charAt(0).toUpperCase() + k.slice(1); };
    const mapColor = s => MAP_COL[sevKey(s)];

    const flat = v => Array.isArray(v) ? (v.length ? flat(v[0]) : null) : v;
    const clip = (s, n) => { s = String(s == null ? '' : s); return s.length > n ? s.slice(0, n - 1) + '…' : s; };
    const uniq = list => list.filter((v, i) => v && list.indexOf(v) === i);
    const countrySlug = c => String(c == null ? '' : c).trim().toLowerCase().replace(/[^a-z]+/g, '-').replace(/^-|-$/g, '');

    function flagImg(country) {
      const slug = countrySlug(country);
      if (!slug || !TIM_FLAGS.has(slug)) return '';
      return `<img class="sw-tim-flag" src="${TIM_FLAG_BASE}/${slug}.png" alt="">`;
    }

    const WORLD_PATH = (function () {
      const W = window.SW_WORLD;
      if (!W || !W.dots || !W.dots.length) return '';
      const sx = MW / (W.GW - 1), sy = MH / (W.GH - 1);
      let d = '';
      for (let i = 0; i < W.dots.length; i++) {
        const gx = W.dots[i][0], gy = W.dots[i][1];
        if (gy === 0) continue;
        d += 'M' + (gx * sx).toFixed(1) + ' ' + (gy * sy).toFixed(1) + 'l.01 0';
      }
      return d;
    })();

    const GRATICULE = (function () {
      let g = '';
      for (let lon = -150; lon <= 150; lon += 30) { const x = ll(lon, 0)[0].toFixed(1); g += `<line x1="${x}" y1="0" x2="${x}" y2="${MH}"/>`; }
      for (let lat = -60; lat <= 60; lat += 30) { const y = ll(0, lat)[1].toFixed(1); g += `<line x1="0" y1="${y}" x2="${MW}" y2="${y}"/>`; }
      return g;
    })();

    const ARC_DASH = '11 9';

    function arcsSvg(feed) {
      const hubs = {};
      const stride = Math.max(1, Math.ceil(feed.length / 56));
      let glow = '', arcs = '', dots = '';
      feed.forEach((f, i) => {
        if (f.sLat == null || f.sLon == null || f.eLat == null || f.eLon == null) return;
        const a = ll(f.sLon, f.sLat), b = ll(f.eLon, f.eLat);
        const x1 = a[0], y1 = a[1], x2 = b[0], y2 = b[1];
        const col = mapColor(f.severity);
        const dx = x2 - x1, dy = y2 - y1, len = Math.hypot(dx, dy) || 1;
        const lift = Math.min(150, len * 0.32);
        const cx = (x1 + x2) / 2 + (-dy / len) * lift, cy = (y1 + y2) / 2 + (dx / len) * lift - 18;
        const p = `M ${x1.toFixed(1)} ${y1.toFixed(1)} Q ${cx.toFixed(1)} ${cy.toFixed(1)} ${x2.toFixed(1)} ${y2.toFixed(1)}`;
        const hot = sevKey(f.severity) === 'critical';
        glow += `<path d="${p}" fill="none" stroke="${col}" stroke-width="${hot ? 4.6 : 3.4}" stroke-linecap="round" stroke-dasharray="${ARC_DASH}" opacity="0.15"/>`;
        arcs += `<path d="${p}" fill="none" stroke="${col}" stroke-width="${hot ? 2.2 : 1.6}" stroke-linecap="round" stroke-dasharray="${ARC_DASH}" opacity="0.72"/>`;
        if (f.animate !== false && i % stride === 0) {
          const dur = (2.6 + (i % 5) * 0.5 + ((i * 37) % 13) / 13 * 1.4).toFixed(1);
          dots += `<circle r="${hot ? 2.8 : 2.2}" fill="color-mix(in srgb, ${col} 70%, white)" style="filter:drop-shadow(0 0 4px ${col})">
              <animateMotion dur="${dur}s" repeatCount="indefinite" rotate="auto" path="${p}"/>
            </circle>`;
        }
        hubs[Math.round(x2 / 2) * 2 + ',' + Math.round(y2 / 2) * 2] = [x2, y2];
      });
      let pops = '', blips = '';
      Object.keys(hubs).forEach(k => {
        const x = hubs[k][0].toFixed(1), y = hubs[k][1].toFixed(1);
        pops += `<circle cx="${x}" cy="${y}" r="14" fill="url(#tim-hub)" opacity="0.45"/>
          <circle cx="${x}" cy="${y}" r="2.6" fill="var(--cyan)" opacity="0.7" style="filter:drop-shadow(0 0 5px var(--cyan))"/>`;
        blips += `<circle class="sw-tim-blip" cx="${x}" cy="${y}" r="8" fill="none" stroke="var(--cyan)" stroke-width="1.4" opacity="0.35"/>`;
      });
      return { base: `<g filter="url(#tim-soft)">${glow}</g>${arcs}${pops}`, fx: blips + dots };
    }

    function mapSvg(feed) {
      const layers = arcsSvg(feed);
      return `<svg class="sw-tim-map__svg" viewBox="0 0 ${MW} ${MH}" preserveAspectRatio="xMidYMid meet">
          <defs>
            <radialGradient id="tim-ocean" cx="50%" cy="42%" r="78%">
              <stop offset="0%" stop-color="#16161a"/><stop offset="60%" stop-color="#101013"/><stop offset="100%" stop-color="#0a0a0c"/>
            </radialGradient>
            <radialGradient id="tim-hub" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stop-color="#22d3ee"/><stop offset="100%" stop-color="#22d3ee" stop-opacity="0"/>
            </radialGradient>
            <filter id="tim-soft" filterUnits="userSpaceOnUse" x="-20" y="-20" width="${MW + 40}" height="${MH + 40}">
              <feGaussianBlur stdDeviation="2.5"/>
            </filter>
          </defs>
          <rect x="0" y="0" width="${MW}" height="${MH}" fill="url(#tim-ocean)"/>
          <g class="sw-tim-grat">${GRATICULE}</g>
          <path class="sw-tim-land" d="${WORLD_PATH}"/>
          ${layers.base}
        </svg>
        <svg class="sw-tim-map__svg sw-tim-map__fx" viewBox="0 0 ${MW} ${MH}" preserveAspectRatio="xMidYMid meet">${layers.fx}</svg>`;
    }

    function labelPicker(resp) {
      const labels = (resp && resp.data_labels) || [];
      const lower = labels.map(l => String(l).toLowerCase());
      return row => name => {
        const i = lower.indexOf(name.toLowerCase());
        return i === -1 ? null : row[i];
      };
    }

    function adaptCounters(byKey) {
      const one = key => {
        const resp = byKey[key];
        const row = resp && Array.isArray(resp.data) && resp.data[0];
        if (!row) return { critical: null, high: null };
        const at = labelPicker(resp)(row);
        return { critical: +at('Critical') || 0, high: +at('High') || 0 };
      };
      return { '1h': one('1h'), '24h': one('24h'), '7d': one('7d') };
    }

    function adaptFeed(resp) {
      if (!resp || !Array.isArray(resp.data)) return [];
      const pick = labelPicker(resp);
      const feed = [];
      resp.data.forEach(row => {
        const at = pick(row);
        const srcIp = flat(at('src')) || flat(at('source_ip'));
        const dst = flat(at('dest')) || flat(at('destination_ip_or_fqdn'));
        const sLat = fin(at('start_lat')), sLon = fin(at('start_lon'));
        const eLat = fin(at('end_lat')), eLon = fin(at('end_lon'));
        if (!srcIp || !dst) return;
        const service = String(flat(at('source_index')) || flat(at('service_code')) || '').split('_')[0];
        const clientId = flat(at('client_id'));
        const animate = at('animate');
        feed.push({
          client: clientId ? TIM_CLIENTS[clientId] : accountName,
          service: service,
          vector: flat(at('attack_vector')) || flat(at('category')) || '',
          srcIp: srcIp,
          country: flat(at('src_country')) || flat(at('source_country')) || '',
          city: flat(at('source_city')) || '',
          dst: dst,
          dstGeo: flat(at('destination_geo')) || flat(at('dest_country')) || '',
          severity: flat(at('severity')) || '',
          sLat: sLat, sLon: sLon, eLat: eLat, eLon: eLon,
          animate: animate == null ? true : String(animate) !== 'false'
        });
      });
      return feed.slice(0, FEED_LIMIT);
    }

    function counterTile(label, c) {
      const metric = (v, tone, name) => `
        <div class="sw-tim-ctr__metric ${tone}">
          <div class="sw-tim-ctr__val">${fmt(v)}</div>
          <div class="sw-tim-ctr__name">${name}</div>
        </div>`;
      return `<div class="sw-tim-ctr">
          <div class="sw-tim-ctr__label">${label}</div>
          <div class="sw-tim-ctr__grid">${metric(c.critical, 'is-critical', 'Critical')}${metric(c.high, 'is-high', 'High')}</div>
        </div>`;
    }

    function renderCounters(counters) {
      $("#tim-counters").empty().append(
        cardHead('acc-red', 'Attack Counters', 'Critical &amp; High · 1h / 24h / 7d', '') + `
          <div class="sw-card__body nopad">
            <div class="sw-tim-counters">
              ${counterTile('Last 1h', counters['1h'])}
              ${counterTile('Last 24h', counters['24h'])}
              ${counterTile('Last 7d', counters['7d'])}
            </div>
          </div>`);
    }

    function renderMap(feed) {
      const present = LEGEND_ORDER.filter(k => feed.some(f => sevKey(f.severity) === k));
      const legend = (present.length ? present : ['critical', 'high', 'medium', 'low']).map(k =>
        `<span class="sw-tim-legend__item"><i style="--c:${MAP_COL[k]}"></i>${k}</span>`).join('');
      const services = uniq(feed.map(f => f.service));
      const clients = uniq(feed.map(f => f.client));
      const geo = feed.filter(f => f.sLat != null && f.eLat != null).length;
      $("#tim-map").empty().append(
        cardHead('acc-cyan', 'Live Attack Map', 'Inbound' + (services.length ? ' · ' + esc(services.slice(0, 3).join(' · ')) : ''), 'realtime') + `
          <div class="sw-card__body nopad">
            <div class="sw-tim-map">
              ${geo ? mapSvg(feed) : '<div class="sw-tim-map__empty">No geolocated attacks in this window</div>'}
              <div class="sw-tim-legend">${legend}</div>
              <div class="sw-tim-hubtag"><i></i>Defended · ${esc(clients.slice(0, 3).map(c => clip(c, 22)).join(' · ')) || accountName}</div>
            </div>
          </div>`);
    }

    function feedRows(feed) {
      const row = f => `
        <div class="sw-tim-feed__row">
          <div>
            <div class="sw-tim-feed__strong">${esc(f.client || '—')}</div>
            <div class="sw-tim-feed__sub">${esc(clip(f.vector, 26))}</div>
          </div>
          <div>
            <div class="sw-tim-feed__ip">${esc(f.srcIp)}</div>
            <div class="sw-tim-feed__geo">${flagImg(f.country)}<span>${esc(clip(f.city ? f.country + ' · ' + f.city : f.country, 30))}</span></div>
          </div>
          <div>
            <div class="sw-tim-feed__ip is-dim">${esc(f.dst)}</div>
            <div class="sw-tim-feed__sub">${esc(clip(f.dstGeo, 26))}</div>
          </div>
          <div>${badge(esc(sevLabel(f.severity)), SEV_BADGE[sevKey(f.severity)])}</div>
        </div>`;
      return feed.length
        ? feed.map(row).join('')
        : '<div class="sw-tim-feed__empty">No attacks in this window</div>';
    }

    function renderFeed(feed, rows) {
      $("#tim-feed").empty().append(
        cardHead('acc-red', 'Live Attack Feed', 'Source → Destination', feed.length + ' events') + `
          <div class="sw-card__body nopad">
            <div class="sw-tim-feed">
              <div class="sw-tim-feed__head">
                <div>Client</div><div>Source</div><div>Target</div><div>Severity</div>
              </div>
              <div class="sw-tim-feed__scroll"><div class="sw-tim-feed__rows">${rows}</div></div>
            </div>
          </div>`);
      marquee(feed.length ? rows : '');
    }

    function marquee(rows) {
      const scroll = $("#tim-feed .sw-tim-feed__scroll")[0];
      const inner = $("#tim-feed .sw-tim-feed__rows")[0];
      if (!scroll || !inner || !rows) return;
      requestAnimationFrame(function setup() {
        if (!inner.isConnected) return;
        const single = inner.scrollHeight;
        const panel = scroll.clientHeight;
        if (single <= panel - 4) { feedPos = 0; return; }
        inner.insertAdjacentHTML('beforeend', rows);
        inner.style.willChange = 'transform';
        const PANEL_MS = 12000;
        let pos = feedPos % single, last = null;
        inner.style.transform = 'translateY(' + (-pos).toFixed(2) + 'px)';
        function tick(ts) {
          if (!inner.isConnected) return;
          if (last == null) last = ts;
          const dt = Math.min(100, ts - last);
          last = ts;
          pos += panel * (dt / PANEL_MS);
          if (pos >= single) pos -= single;
          feedPos = pos;
          inner.style.transform = 'translateY(' + (-pos).toFixed(2) + 'px)';
          requestAnimationFrame(tick);
        }
        requestAnimationFrame(tick);
      });
    }

    function statusPill(counters, 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; }
      if (state === 'stale') { pill.addClass('tone-zinc'); label.text('Stale Data'); return; }
      const crit = counters['1h'].critical;
      if (crit == null) { pill.addClass('tone-zinc'); label.text('Partial Data'); return; }
      if (crit > 0) { pill.addClass('tone-red'); label.text(fmt(crit) + ' Critical · 1h'); }
      else { pill.addClass('tone-green'); label.text('Operational'); }
    }

    function renderWall(d, state) {
      renderCounters(d.counters);
      const rows = feedRows(d.feed);
      if (rows !== feedHtml) {
        feedHtml = rows;
        renderMap(d.feed);
        renderFeed(d.feed, rows);
      }
      statusPill(d.counters, state);
    }

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

    let timInFlight = false;
    let feedHtml = null;
    let feedPos = 0;
    const timData = {};

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

    function timLoad() {
      if (timInFlight) return;
      timInFlight = true;
      $.when.apply($, TIM_WIDGETS.map(timFetch)).always(function () {
        timInFlight = false;
        const results = TIM_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)) { timData[r.key] = r.resp; anyFresh = true; }
        });
        const state = anyFresh ? 'live' : (Object.keys(timData).length ? 'stale' : 'offline');
        renderWall({ counters: adaptCounters(timData), feed: adaptFeed(timData.map) }, state);
        tickClock();
      });
    }

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