@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--csa1">
    @include('monitoring_wall.partials._sw-topbar', ['subtitle' => 'Cybersecurity Situational Awareness'])

    <main class="sw-main">
      <div class="sw-col">
        <section id="top-domain" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
        <section id="posture" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
        <section id="domain-index" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
      </div>

      <section id="radar" class="sw-card">
        @include('monitoring_wall.partials._sw-loader', ['label' => 'Mapping risk surface'])
      </section>

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

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

  @php
    $csaSearches = \App\Models\RadarSearches::getCodeArrayByDashboardsRaw([
      'CSA-TOP-RISK-DOMAIN', 'CSA-POSTURE-TREND', 'CSA-CONTRIBUTING-CONDITIONS'
    ]);
  @endphp

  <script>
    const csaToken = '{{ csrf_token() }}';
    const csaSearchIds = @json($csaSearches ?? []);

    const DOMAINS = ['NETWORK', 'ENDPOINT', 'APPLICATION', 'DATA', 'USERS', 'PERSISTENCY', 'CLOUD/EXTERNAL'];
    const SIGNAL = {
      internal_vuln: 'Internal Vulnerability', internal_vuln_critical: 'Critical Internal Vulnerability',
      external_vuln_critical: 'Critical External Vulnerability',
      dlp_incident: 'DLP Incident', bas_dlp_gap: 'BAS DLP Gap',
      webapp_attack: 'CloudWAF Attack Detected', cloud_waf_vuln: 'Multiple Critical CloudWAF Vulnerabilities',
      bas_application_gap: 'BAS Application Gap', bas_endpoint_gap: 'BAS Endpoint Gap',
      endpoint_anomaly: 'Endpoint Anomaly', malicious_file: 'Malicious File Detected',
      suspicious_process: 'Suspicious Process', endpoint_network: 'Endpoint Network Alert',
      duo_denied: 'Authentication Denied', duo_locked_out: 'Account Locked Out',
      perimeter_attack: 'Perimeter Attack', pan_threat: 'Firewall Threat',
      persistent_attacker: 'Persistent Attacker Detected'
    };
    const THREAT_COLOR = {1: 'GREEN', 2: 'YELLOW', 3: 'ORANGE', 4: 'RED', 5: 'BLACK'};
    const threatCodes = Object.fromEntries(
      Object.entries(threatLevels).map(([n, name]) => [n, String(name).split(' ')[0].toUpperCase()])
    );

    const gradeTone = s => s >= 75 ? 'red' : s >= 50 ? 'orange' : s >= 25 ? 'yellow' : 'green';
    const gradeColor = s => `var(--${gradeTone(s)})`;
    const gradeHex = s => ({red: '#ef4444', orange: '#f97316', yellow: '#eab308', green: '#22c55e'})[gradeTone(s)];
    const gradeAccent = s => 'acc-' + gradeTone(s);
    const sevColor = sev => {
      const s = String(sev || '').toLowerCase();
      return s === 'critical' ? 'var(--sev-critical)' : s === 'high' ? 'var(--sev-high)'
        : s === 'medium' ? 'var(--sev-medium)' : 'var(--sev-low)';
    };

    function csaVal(row, labels, name) {
      if (!labels) return null;
      name = String(name).toLowerCase();
      for (let i = 0; i < labels.length; i++) {
        if (String(labels[i]).toLowerCase() === name) return row[i];
      }
      return null;
    }
    function canonDomain(raw) {
      const d = String(raw || '').trim().toUpperCase();
      if (d === 'USER') return 'USERS';
      if (d === 'CLOUD/EXT' || d === 'CLOUD' || d === 'EXTERNAL') return 'CLOUD/EXTERNAL';
      return d;
    }
    function sevFromRisk(r) { return r >= 90 ? 'critical' : r >= 70 ? 'high' : r >= 40 ? 'medium' : 'low'; }
    function riskFromSev(sev) {
      const s = String(sev || '').toLowerCase();
      return s === 'critical' ? 100 : s === 'high' ? 75 : s === 'medium' ? 50 : s === 'low' ? 25 : 0;
    }
    function signalLabel(sig) {
      if (!sig) return '';
      if (SIGNAL[sig]) return SIGNAL[sig];
      return String(sig).replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
    }

    function buildData(widgets, threatData) {
      const topW = widgets['CSA-TOP-RISK-DOMAIN'];
      const postW = widgets['CSA-POSTURE-TREND'];
      const condW = widgets['CSA-CONTRIBUTING-CONDITIONS'];

      const condRows = [];
      if (condW && Array.isArray(condW.data)) {
        const L = condW.data_labels || [];
        condW.data.forEach(function (row) {
          if (!Array.isArray(row)) return;
          const domain = canonDomain(csaVal(row, L, 'domain') != null ? csaVal(row, L, 'domain') : csaVal(row, L, 'type'));
          if (!domain) return;
          const riskRaw = csaVal(row, L, 'risk');
          const sev = String(csaVal(row, L, 'severity') || '').toLowerCase();
          let risk = (riskRaw == null || riskRaw === '') ? null : Math.round(+riskRaw);
          if (risk == null || !isFinite(risk)) risk = sev ? riskFromSev(sev) : null;
          if (risk != null) risk = Math.max(0, Math.min(100, risk));
          condRows.push({
            domain, risk, service: csaVal(row, L, 'service') || '',
            signal: csaVal(row, L, 'contributing_signal') || '',
            severity: sev || sevFromRisk(risk || 0)
          });
        });
      }

      let topDomain;
      if (topW && Array.isArray(topW.data) && topW.data.length) {
        const L = topW.data_labels || [], row = topW.data[0];
        const riskRaw = csaVal(row, L, 'risk');
        const sev = String(csaVal(row, L, 'severity') || '').toLowerCase();
        let risk = (riskRaw == null || riskRaw === '') ? riskFromSev(sev) : Math.round(+riskRaw);
        if (!isFinite(risk)) risk = 0;
        risk = Math.max(0, Math.min(100, risk));
        topDomain = {
          name: canonDomain(csaVal(row, L, 'domain')) || '—', score: risk,
          service: csaVal(row, L, 'service') || '',
          reason: signalLabel(csaVal(row, L, 'contributing_signal') || ''), hasData: true
        };
      } else if (condRows.length) {
        let top = condRows[0];
        condRows.forEach(function (r) { if ((r.risk || 0) > (top.risk || 0)) top = r; });
        topDomain = { name: top.domain, score: top.risk || 0, service: top.service, reason: signalLabel(top.signal), hasData: true };
      } else {
        topDomain = { name: '—', score: 0, service: '', reason: 'Awaiting data…', hasData: false };
      }

      const pool = condRows.filter(r => r.risk != null).map(r => ({ domain: r.domain, risk: r.risk }));
      if (topDomain.hasData) pool.push({ domain: topDomain.name, risk: topDomain.score });
      const best = {};
      pool.forEach(function (r) { if (best[r.domain] == null || r.risk > best[r.domain]) best[r.domain] = r.risk; });
      const domains = DOMAINS.map(name => best[name] != null ? { name, score: best[name], hasData: true } : { name, score: 0, hasData: false });

      const active = domains.filter(d => d.hasData).map(d => d.score);
      const composite = active.length ? Math.round(active.reduce((a, b) => a + b, 0) / active.length) : 0;

      const seen = {};
      const conditions = condRows.slice()
        .sort((a, b) => (b.risk || 0) - (a.risk || 0))
        .filter(function (r) { const k = r.domain + '|' + r.signal; if (seen[k]) return false; seen[k] = true; return true; })
        .slice(0, 10)
        .map(r => ({ domain: r.domain, reason: signalLabel(r.signal), service: r.service, severity: r.severity, risk: r.risk }));

      let posture = null;
      if (postW && Array.isArray(postW.data) && postW.data.length) {
        const L = postW.data_labels || [], row = postW.data[0];
        posture = {
          trajectory: String(csaVal(row, L, 'trajectory') || '').toLowerCase(),
          improving: +csaVal(row, L, 'improving_domains') || 0,
          stable: +csaVal(row, L, 'stable_domains') || 0,
          worsening: +csaVal(row, L, 'worsening_domains') || 0
        };
      }
      const activeN = domains.filter(d => d.hasData).length;
      const pt = posture || { trajectory: 'stable', improving: 0, stable: activeN, worsening: 0 };
      const trajectory = (pt.trajectory || 'stable').toUpperCase();
      const trajectoryCounts = { improving: pt.improving, stable: pt.stable, worsening: pt.worsening };

      let threat;
      if (threatData) {
        const cases = threatData.cases || [];
        const counts = threatData.casesCountByThreatLevel || {};
        let maxLevel = 0;
        cases.forEach(function (c) { const lv = +c.threat_level || 0; if (lv > maxLevel) maxLevel = lv; });
        if (!maxLevel) Object.keys(counts).forEach(function (k) { if ((+counts[k] || 0) > 0 && +k > maxLevel) maxLevel = +k; });
        if (!maxLevel) maxLevel = 1;
        let total = 0;
        Object.keys(counts).forEach(function (k) { total += (+counts[k] || 0); });
        threat = { tier: maxLevel, cases: total };
      }

      return { topDomain, domains, composite, trajectory, trajectoryCounts, conditions, threat };
    }

    function radarSvg(d) {
      const S = 620, c = S / 2, maxR = 232, N = d.domains.length, TAU = Math.PI * 2;
      const ang = i => -Math.PI / 2 + i * TAU / N;
      const half = (TAU / N) / 2;
      const rOf = s => maxR * Math.min(1, s / 100);
      const parts = [];

      parts.push('<defs><radialGradient id="csa-coreg" cx="50%" cy="45%" r="60%">' +
        '<stop offset="0%" stop-color="#0b1220"/><stop offset="100%" stop-color="#0a0a0c"/></radialGradient></defs>');

      d.domains.forEach(function (dm, i) {
        if (dm.hasData === false || !dm.score) return;
        const r = rOf(dm.score), a1 = ang(i) - half, a2 = ang(i) + half;
        const p1x = (c + r * Math.cos(a1)).toFixed(1), p1y = (c + r * Math.sin(a1)).toFixed(1);
        const p2x = (c + r * Math.cos(a2)).toFixed(1), p2y = (c + r * Math.sin(a2)).toFixed(1);
        const col = gradeHex(dm.score), top = dm.name === d.topDomain.name;
        parts.push('<path d="M ' + c + ' ' + c + ' L ' + p1x + ' ' + p1y + ' A ' + r + ' ' + r + ' 0 0 1 ' + p2x + ' ' + p2y + ' Z" ' +
          'fill="' + col + '" fill-opacity="0.16" stroke="' + col + '" stroke-opacity="0.28" stroke-width="1"/>');
        parts.push('<path d="M ' + p1x + ' ' + p1y + ' A ' + r + ' ' + r + ' 0 0 1 ' + p2x + ' ' + p2y + '" fill="none" ' +
          'stroke="' + col + '" stroke-width="' + (top ? 5 : 3.5) + '" stroke-linecap="round" ' +
          'style="filter:drop-shadow(0 0 ' + (top ? 10 : 6) + 'px ' + col + ')"/>');
      });

      [0.25, 0.5, 0.75, 1].forEach(function (f) {
        parts.push('<circle cx="' + c + '" cy="' + c + '" r="' + (maxR * f) + '" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1"/>');
        parts.push('<text x="' + (c + 4) + '" y="' + (c - maxR * f + 2).toFixed(1) + '" fill="var(--fg-faint)" ' +
          'font-size="9.5" font-family="JetBrains Mono" dominant-baseline="middle">' + Math.round(100 * f) + '</text>');
      });

      const outer = [];
      for (let i = 0; i < N; i++) {
        const x = (c + maxR * Math.cos(ang(i))).toFixed(1), y = (c + maxR * Math.sin(ang(i))).toFixed(1);
        parts.push('<line x1="' + c + '" y1="' + c + '" x2="' + x + '" y2="' + y + '" stroke="rgba(255,255,255,0.07)" stroke-width="1"/>');
        outer.push(x + ',' + y);
      }
      parts.push('<polygon points="' + outer.join(' ') + '" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>');

      d.domains.forEach(function (dm, i) {
        const lx = c + (maxR + 30) * Math.cos(ang(i)), ly = c + (maxR + 30) * Math.sin(ang(i));
        const a = ang(i), anchor = Math.abs(Math.cos(a)) < 0.3 ? 'middle' : (Math.cos(a) > 0 ? 'start' : 'end');
        const noData = dm.hasData === false;
        parts.push('<text x="' + lx.toFixed(1) + '" y="' + ly.toFixed(1) + '" text-anchor="' + anchor + '" dominant-baseline="middle" ' +
          'fill="var(--fg-muted)" font-size="16" font-weight="600" letter-spacing="0.06em" font-family="Inter">' + dm.name + '</text>');
        parts.push('<text x="' + lx.toFixed(1) + '" y="' + (ly + 20).toFixed(1) + '" text-anchor="' + anchor + '" dominant-baseline="middle" ' +
          'fill="' + (noData ? 'var(--fg-faint)' : gradeHex(dm.score)) + '" font-size="15" font-weight="700" font-family="JetBrains Mono">' +
          (noData ? 'n/a' : dm.score) + '</text>');
      });

      parts.push('<circle cx="' + c + '" cy="' + c + '" r="66" fill="url(#csa-coreg)" stroke="rgba(34,211,238,0.35)" stroke-width="1.5" ' +
        'style="filter:drop-shadow(0 0 18px rgba(34,211,238,0.25))"/>');
      parts.push('<text x="' + c + '" y="' + (c - 4) + '" text-anchor="middle" dominant-baseline="middle" fill="#fff" ' +
        'font-size="42" font-weight="800" font-family="Inter" letter-spacing="-0.03em">' + d.composite + '%</text>');
      parts.push('<text x="' + c + '" y="' + (c + 24) + '" text-anchor="middle" fill="var(--fg-subtle)" ' +
        'font-size="10" font-weight="600" letter-spacing="0.07em" font-family="Inter">COMPOSITE RISK</text>');

      const svg = '<svg viewBox="0 0 ' + S + ' ' + S + '">' + parts.join('') + '</svg>';
      const sweepDelay = -(new Date().getTime() % 5000);
      const sweep = '<div class="csa-sweep" style="animation-delay:' + sweepDelay + 'ms"><div class="csa-sweep__arm"></div></div>';
      return '<div class="csa-radar"><div class="csa-radar__inner">' + sweep + svg + '</div></div>';
    }

    function renderTopDomain(td) {
      const has = td.hasData !== false;
      const hex = has ? gradeHex(td.score) : '#52525b';
      const accent = has ? gradeAccent(td.score) : '';
      $("#top-domain").append(`${cardHead(accent, 'Top Risk Domain', '')}
        <div class="sw-card__body">
          <div class="csa-top">
            <div class="csa-top__num" style="background:linear-gradient(180deg, color-mix(in srgb, ${hex} 85%, white), ${hex});-webkit-background-clip:text;background-clip:text;color:transparent">${has ? td.score : '&mdash;'}</div>
            <div class="csa-top__meta">
              <div class="csa-top__name" style="color:color-mix(in srgb, ${hex} 72%, white)">${esc(td.name)}</div>
              <div class="csa-top__svc">${esc(td.service)}</div>
              <div class="csa-top__reason" style="color:color-mix(in srgb, ${hex} 55%, white)">${esc(td.reason)}</div>
            </div>
          </div>
        </div>`);
    }

    function renderPosture(d) {
      const icon = d.trajectory === 'STABLE' ? '&rarr;' : d.trajectory === 'WORSENING' ? '&searr;' : '&nearr;';
      const tc = d.trajectoryCounts;
      const counts = [['Improving', tc.improving, 'var(--green)'], ['Stable', tc.stable, 'var(--fg-subtle)'], ['Worsening', tc.worsening, 'var(--red)']]
        .map(c => `<div class="csa-count"><div class="csa-count__v" style="color:${c[2]}">${fmt(c[1])}</div><div class="csa-count__l">${c[0]}</div></div>`)
        .join('');
      $("#posture").append(`${cardHead('acc-cyan', 'Posture Trend', 'Domain trajectory')}
        <div class="sw-card__body">
          <div class="csa-posture">
            <div class="csa-posture__left">
              <div class="csa-posture__traj">${esc(d.trajectory)} ${icon}</div>
              <div class="csa-eyebrow">Trajectory</div>
            </div>
            <div class="csa-posture__counts">${counts}</div>
          </div>
        </div>`);
    }

    function renderDomainIndex(domains) {
      const bars = domains.slice().sort((a, b) => b.score - a.score).map(function (dm) {
        const noData = dm.hasData === false, col = gradeColor(dm.score);
        return `<div class="sw-hbar">
          <div class="sw-hbar__top">
            <span class="sw-hbar__name"${noData ? ' style="color:var(--fg-faint)"' : ''}>${dm.name}</span>
            <span class="sw-hbar__val" style="color:${noData ? 'var(--fg-faint)' : col}">${noData ? 'n/a' : dm.score}</span>
          </div>
          <div class="sw-hbar__track" style="height:13px">
            <div class="sw-hbar__fill" style="width:${noData ? 0 : dm.score}%;background:${noData ? 'transparent' : col};color:${col}"></div>
          </div>
        </div>`;
      }).join('');
      $("#domain-index").append(`${cardHead('acc-orange', 'Domain Risk Index', 'All 7 sectors')}
        <div class="sw-card__body"><div class="sw-hbars">${bars}</div></div>`);
    }

    function renderRadar(d) {
      $("#radar").append(`${cardHead('acc-cyan', 'Security Domain Radar', '7-sector risk surface')}
        <div class="sw-card__body nopad">${radarSvg(d)}</div>`);
    }

    function renderConditions(conds) {
      const rows = conds.map(function (c) {
        const sc = sevColor(c.severity);
        return `<div class="csa-cond">
          <span class="csa-cond__dot" style="background:${sc};box-shadow:0 0 8px color-mix(in srgb, ${sc} 50%, transparent)"></span>
          <div class="csa-cond__main">
            <div class="csa-cond__reason">${esc(c.reason)}</div>
            <div class="csa-cond__sub">${esc(c.domain)} &middot; ${esc(c.service)}</div>
          </div>
          <span class="csa-cond__risk" style="color:${c.risk == null ? 'var(--fg-faint)' : gradeColor(c.risk)}">${c.risk == null ? '&mdash;' : c.risk}</span>
        </div>`;
      }).join('') || '<div class="sw-note sw-subtle">No contributing conditions</div>';
      $("#conditions").append(`${cardHead('acc-orange', 'Contributing Conditions', '', conds.length + ' active')}
        <div class="sw-card__body nopad"><div class="csa-conds">${rows}</div></div>`);
    }

    function renderThreat(t) {
      t = t || {};
      const known = t.tier >= 1 && t.tier <= 5;
      const col = known ? 'var(--t' + t.tier + ')' : 'var(--fg-subtle)';
      const label = known ? THREAT_COLOR[t.tier] : 'UNKNOWN';
      const code = known ? (threatCodes[t.tier] || '') : 'no data';
      const cases = (t.cases != null && t.cases !== '') ? fmt(t.cases) : '&mdash;';
      const accent = known ? {1: 'acc-green', 2: 'acc-yellow', 3: 'acc-orange', 4: 'acc-red', 5: 'acc-violet'}[t.tier] : '';
      $("#threat").append(`${cardHead(accent, 'Threat Level', '')}
        <div class="sw-card__body">
          <div class="csa-threat">
            <div class="csa-threat__tile" style="background:radial-gradient(circle at 50% 0%, color-mix(in srgb, ${col} 14%, transparent), transparent 70%), var(--surface-2);border:1px solid color-mix(in srgb, ${col} 34%, transparent);box-shadow:inset 0 0 32px color-mix(in srgb, ${col} 9%, transparent)">
              <div class="csa-threat__eyebrow" style="color:color-mix(in srgb, ${col} 65%, white)">Current Threat Level</div>
              <div class="csa-threat__label" style="color:color-mix(in srgb, ${col} 74%, white)">${label}</div>
              <div class="csa-threat__code">${esc(code)}</div>
            </div>
            <div class="csa-threat__active">
              <span class="csa-eyebrow">Active Threats</span>
              <span class="csa-threat__count">${cases}</span>
              <span class="sw-subtle">cases</span>
            </div>
          </div>
        </div>`);
    }

    function statusPill(d) {
      const has = d.domains.some(x => x.hasData);
      const pill = $("#sw-status"), label = $("#sw-status-label");
      pill.removeClass('tone-green tone-yellow tone-orange tone-red tone-zinc').show();
      if (!has) { pill.addClass('tone-zinc'); label.text('No Data'); return; }
      const c = d.composite, tone = c >= 75 ? 'red' : c >= 50 ? 'orange' : c >= 25 ? 'yellow' : 'green';
      pill.addClass('tone-' + tone);
      label.text('Risk ' + c);
    }

    let lastRenderKey;
    function renderAll(widgets, threatData) {
      const d = buildData(widgets, threatData);
      const key = JSON.stringify(d);
      if (key === lastRenderKey) return;
      lastRenderKey = key;
      $("#top-domain, #posture, #domain-index, #radar, #conditions, #threat").empty();
      renderTopDomain(d.topDomain);
      renderPosture(d);
      renderDomainIndex(d.domains);
      renderRadar(d);
      renderConditions(d.conditions);
      renderThreat(d.threat);
      statusPill(d);
    }

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

    let csaInFlight = false;
    const csaWidgets = {};
    let csaThreatData = null;
    function loadCsa() {
      if (csaInFlight) return;
      csaInFlight = true;
      const jobs = [];

      csaSearchIds.forEach(function (s) {
        jobs.push($.ajax({
          url: '/get-widget-data',
          type: 'POST', dataType: 'json',
          data: {_token: csaToken, id: s.id, from: s.period_to || '-24h@h', type: 'radar', to: 'now'}
        }).then(
          function (resp) { if (resp && Array.isArray(resp.data)) csaWidgets[String(s.dashboard || '').toUpperCase()] = resp; },
          function () {}
        ));
      });

      jobs.push($.ajax({url: "{{ route('threat-level-data') }}", type: 'GET', dataType: 'json'}).then(
        function (resp) { if (resp) csaThreatData = resp; },
        function () {}
      ));

      $.when.apply($, jobs).always(function () {
        try { renderAll(csaWidgets, csaThreatData); } catch (e) { console.error('CSA render error:', e); }
        tickClock();
        csaInFlight = false;
      });
    }

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