@extends('layouts.walls')
@section('content')

  @php
    $wallUser = auth()->guard('skywatch-wall')->user();
    $accountId = $wallUser->account_id;
  @endphp

  <div class="logout-float">
    <span class="wall-title">{{ \App\Models\SkywatchWall::$walls[$wall] }}</span>
    <span id="last-updated" class="mr-3" style="color: #fff; font-size: 12px;">{{ \Carbon\Carbon::now() }}</span>
    <button class="btn btn-sm btn-outline-secondary mr-2" onclick="refreshWallData()">
      <i class="fa fa-refresh"></i> Refresh
    </button>
    <a href="{{ route('wallLogout') }}" class="btn btn-sm btn-outline-secondary">Logout</a>
    <a href="{{ route('wallLogout',['toSkywatch'=>true]) }}" class="btn btn-sm btn-outline-secondary">Logout and Back to Skywatch</a>
  </div>

  <style>
    body, html { overflow: hidden !important; height: 100%; }

    .csa-layout {
      display: flex; flex-direction: row; width: 100%;
      height: calc(100vh - 48px); padding: 4px 4px 36px 4px;
      gap: 4px; box-sizing: border-box; margin-top: 48px; overflow: hidden;
    }
    .csa-col-side { width: 22%; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; min-height: 0; }
    .csa-col-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
    .csa-widget {
      background: linear-gradient(135deg, #0d1b2a 0%, #0a1520 100%);
      border: 1px solid #1a3a5c; border-radius: 6px; padding: 8px 12px;
      flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; box-sizing: border-box;
    }
    .csa-widget-head {
      font-size: 12px; font-weight: bold; color: #fff; text-transform: uppercase;
      letter-spacing: 1px; border-bottom: 1px solid #1a3a5c; padding-bottom: 5px;
      margin-bottom: 6px; white-space: nowrap; text-align: left; flex-shrink: 0;
    }
    .csa-domain-name { color: #0a96cb; font-size: 26px; font-weight: 900; letter-spacing: 2px; text-align: left; margin: 0 0 6px 0; line-height: 1.1; flex-shrink: 0; }
    .csa-score-line { text-align: left; color: #fff; font-size: 13px; margin: 3px 0; flex-shrink: 0; }
    .csa-score-line span { color: #0a96cb; font-weight: bold; font-size: 14px; }
    .csa-service-line { text-align: left; color: #98a6ad; font-size: 11px; margin: 3px 0; flex-shrink: 0; }
    .csa-reason-line { text-align: left; color: #98a6ad; font-size: 10px; font-style: italic; margin-top: 6px; line-height: 1.4; flex-shrink: 0; }
    .csa-trend-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; flex: 1; gap: 8px; min-height: 0; padding-top: 4px; }
    .csa-trend-trajectory { font-size: 13px; font-weight: bold; color: #fff; text-align: left; flex-shrink: 0; }
    .csa-trend-counts { font-size: 11px; color: #98a6ad; text-align: left; line-height: 1.8; flex-shrink: 0; }
    .csa-conditions-tbl-head { display: flex; flex-direction: row; font-size: 11px; color: #0a96cb; padding-bottom: 4px; border-bottom: 1px solid #1a3a5c; margin-bottom: 4px; flex-shrink: 0; }
    .csa-conditions-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow: hidden; }
    .csa-conditions-list li { display: flex; flex-direction: row; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid #111e2e; font-size: 10px; }
    .csa-cond-domain { width: 36%; font-weight: bold; font-size: 10px; display: flex; align-items: flex-start; gap: 4px; }
    .csa-cond-reason { width: 64%; color: #fff; font-size: 10px; line-height: 1.4; }
    .csa-cond-reason small { color: #98a6ad; display: block; }
    .csa-threat-pill { border-radius: 28px; padding: 10px 12px; text-align: center; width: 100%; box-sizing: border-box; flex-shrink: 0; }
    .csa-threat-active { color: #98a6ad; font-size: 13px; text-align: center; margin-top: 10px; flex-shrink: 0; }
    .csa-radar-wrap { width: 100%; max-width: 520px; position: relative; flex-shrink: 0; margin: 0 auto; }
    .csa-radar-wrap svg { width: 100% !important; height: auto !important; display: block; }
    .csa-events-tbl { width: 100%; max-width: 520px; margin-top: 6px; flex-shrink: 0; }
    .csa-events-tbl .top_l_info ul { display: flex !important; float: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; }
    .csa-events-tbl .top_l_info ul li { flex: 1 !important; width: auto !important; float: none !important; color: #0a96cb; font-size: 10px; font-weight: bold; padding: 0 2px; line-height: 1.8; }
    .csa-events-tbl .content_scroll_radar { min-height: 40px !important; max-height: 60px !important; }
    .csa-events-tbl .content_scroll_radar ul { display: flex !important; float: none !important; margin: 0 !important; width: 100% !important; }
    .csa-events-tbl .content_scroll_radar ul li { flex: 1 !important; width: auto !important; float: none !important; font-size: 10px; padding: 0 2px; line-height: 1.8; }
  </style>

  {{-- Domain radar searches (existing) --}}
  <div style="display:none;">
    {!! \App\Models\RadarSearches::getCodeArray([9,10,11,12,13,14,15],'-30d@d','now') !!}
  </div>

  {{-- Radar SVG helpers --}}
  <script>
    function getSvgSizes(element) {
      return {
        width: element.getAttribute('width') || element.getAttribute('viewBox').split(' ')[2],
        height: element.getAttribute('height') || element.getAttribute('viewBox').split(' ')[3]
      };
    }
    function setRadarCenterVal(val) {
      var svgns = 'http://www.w3.org/2000/svg';
      var text = document.getElementById('center-radar-val') || document.createElementNS(svgns, 'text');
      var radar = document.getElementById('svg-radar');
      if (!radar) return;
      var radarWidth = getSvgSizes(radar).width, radarHeight = getSvgSizes(radar).height;
      if (text.textContent && text.textContent.length > 0) { text.textContent = val; }
      else {
        text.setAttributeNS(null, 'font-size', '32'); text.setAttributeNS(null, 'font-weight', '700');
        text.setAttributeNS(null, 'fill', '#00b1dd'); text.setAttributeNS(null, 'id', 'center-radar-val');
        $(text).attr('class', 'remove_tt'); text.appendChild(document.createTextNode(val)); radar.appendChild(text);
      }
      var posX = (radarWidth / 2) - (text.getBBox().width / 2);
      var posY = (radarHeight / 2) + (text.getBBox().height / 4);
      text.setAttributeNS(null, 'x', posX); text.setAttributeNS(null, 'y', posY);
    }

    var RADAR_CX = 274.9, RADAR_CY = 275, RADAR_SECTOR_COUNT = 7;
    var RADAR_SECTOR_STEP = 360 / RADAR_SECTOR_COUNT, RADAR_SECTOR_HALF = RADAR_SECTOR_STEP / 2;
    var RADAR_POINT_PAD_DEG = 4, RADAR_POINT_MIN_R = 85, RADAR_POINT_MAX_R = 200;

    function setRadarSectorPoint(value, color, cls, sectorIndex) {
      var centerDeg = sectorIndex * RADAR_SECTOR_STEP;
      var angleDeg = centerDeg + (Math.random() - 0.5) * (RADAR_SECTOR_HALF - RADAR_POINT_PAD_DEG) * 2;
      var angleRad = angleDeg * Math.PI / 180;
      var r = RADAR_POINT_MIN_R + Math.random() * (RADAR_POINT_MAX_R - RADAR_POINT_MIN_R);
      addRadarPoint(value, RADAR_CX + r * Math.sin(angleRad), RADAR_CY - r * Math.cos(angleRad), color, cls);
    }
    function setNetwork(v,c,cls)      { setRadarSectorPoint(v,c,cls,0); }
    function setEndpoint(v,c,cls)     { setRadarSectorPoint(v,c,cls,1); }
    function setApplication(v,c,cls)  { setRadarSectorPoint(v,c,cls,2); }
    function setData(v,c,cls)         { setRadarSectorPoint(v,c,cls,3); }
    function setUsers(v,c,cls)        { setRadarSectorPoint(v,c,cls,4); }
    function setPersistency(v,c,cls)  { setRadarSectorPoint(v,c,cls,5); }
    function setCloudExternal(v,c,cls){ setRadarSectorPoint(v,c,cls,6); }

    function addRadarPoint(val, x, y, color, cls) {
      cls = cls || 'remove_tt';
      var svgns = 'http://www.w3.org/2000/svg', radar = document.getElementById('svg-radar');
      var text = document.createElementNS(svgns, 'text'), circleWrap = document.createElementNS(svgns, 'g');
      var circle = document.createElementNS(svgns, 'circle');
      text.setAttributeNS(null, 'font-size', '8'); text.setAttributeNS(null, 'fill', '#fff');
      circle.setAttributeNS(null, 'stroke', 'white'); $(text).attr('class', cls + ' opacity');
      text.appendChild(document.createTextNode(val));
      circle.setAttributeNS(null, 'r', '11'); $(circle).attr('class', cls + ' opacity');
      circle.setAttributeNS(null, 'fill', color); circle.setAttributeNS(null, 'cx', x); circle.setAttributeNS(null, 'cy', y);
      radar.appendChild(circleWrap); circleWrap.appendChild(circle); circleWrap.appendChild(text);
      text.setAttributeNS(null, 'x', (x - (text.getBBox().width / 2)));
      text.setAttributeNS(null, 'y', (y + (text.getBBox().height / 4)));
    }
    setRadarCenterVal(0);
  </script>

  <div class="csa-layout">

    {{-- LEFT --}}
    <div class="csa-col-side">
      <div class="csa-widget">
        <div class="csa-widget-head">TOP RISK DOMAIN</div>
        <div class="csa-domain-name" id="top-risk-domain-name">—</div>
        <div class="csa-score-line">Score: <span id="top-risk-score">—</span></div>
        <div class="csa-service-line">Service: <span id="top-risk-service">—</span></div>
        <div class="csa-reason-line" id="top-risk-reason">—</div>
      </div>
      <div class="csa-widget">
        <div class="csa-widget-head">POSTURE TREND (Last 24h)</div>
        <div class="csa-trend-body">
          <svg id="trend-svg" viewBox="0 0 140 46" width="130" height="46" xmlns="http://www.w3.org/2000/svg" style="overflow:visible; flex-shrink:0;">
            <polyline id="trend-line" points="10,10 40,18 70,26 100,34 125,42" fill="none" stroke="#e74c3c" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/>
            <polygon id="trend-arrowhead" points="122,36 140,43 122,50" fill="#e74c3c"/>
          </svg>
          <div class="csa-trend-trajectory">
            Trajectory: <span id="trend-label" style="color:#f39c12;">—</span> <span id="trend-arrow-icon">—</span>
          </div>
          <div class="csa-trend-counts">
            Improving: <span id="trend-improving" style="color:#2ecc71;">0</span>,
            Stable: <span id="trend-stable" style="color:#f39c12;">0</span>,
            Worsening: <span id="trend-worsening" style="color:#e74c3c;">0</span> domains
          </div>
        </div>
      </div>
    </div>

    {{-- CENTER --}}
    <div class="csa-col-center">
      <div class="csa-radar-wrap">
        @include('dashboards.ecsm.__radar_svg')
      </div>
      <div class="csa-events-tbl">
        <div class="top_l_info">
          <ul><li>Service</li><li>Sector</li><li>Severity</li><li>Risk</li></ul>
        </div>
        <div class="content_scroll_radar">
          <ul><li></li><li></li><li></li><li></li></ul>
        </div>
      </div>
    </div>

    {{-- RIGHT --}}
    <div class="csa-col-side">
      <div class="csa-widget">
        <div class="csa-widget-head">CONTRIBUTING CONDITIONS (Max 5)</div>
        <div class="csa-conditions-tbl-head">
          <span style="width:36%;">Domain</span>
          <span style="width:64%;">Condition/Reason</span>
        </div>
        <ul class="csa-conditions-list" id="contributing-conditions-list">
          <li><span class="csa-cond-domain" style="color:#98a6ad; width:100%;">Loading...</span></li>
        </ul>
      </div>
      <div class="csa-widget">
        <div class="csa-widget-head">THREAT LEVEL</div>
        <div id="csa-threat-pill" class="csa-threat-pill" style="border: 2px solid #2ecc71; background: rgba(46,204,113,0.18);">
        <span id="csa-threat-text" style="color:#2ecc71; font-size:13px; font-weight:bold; letter-spacing:1px; text-transform:uppercase;">
          THREAT LEVEL: NONE
        </span>
        </div>
        <div class="csa-threat-active">
          Active Threats: <b id="csa-active-threats" style="font-size:18px; color:#2ecc71;">0</b> Cases
        </div>
      </div>
    </div>
  </div>

  <script>
    var csaGmpAccountId = {{ $accountId }};
    var csaGmpTk = '{{ csrf_token() }}';

    var csaSignalLabels = {
      webapp_attack:'CloudWAF Attack Detected', bas_application_gap:'BAS Application Gap',
      endpoint_anomaly:'Endpoint Anomaly', malicious_file:'Malicious File Detected',
      bas_endpoint_gap:'BAS Endpoint Gap', suspicious_process:'Suspicious Process',
      endpoint_network:'Endpoint Network Alert', duo_denied:'Duo Auth Denied',
      duo_locked_out:'User Locked Out', perimeter_attack:'Perimeter Attack',
      pan_threat:'Firewall Threat', internal_vuln_critical:'Critical Internal Vulnerability',
      external_vuln_critical:'Critical External Vulnerability',
      persistent_attacker:'Persistent Attacker Detected', dlp_incident:'DLP Incident',
      bas_dlp_gap:'BAS DLP Gap', cloud_waf_vuln:'Multiple Critical CloudWAF Vulnerabilities',
    };
    function csaSignal(s) { return csaSignalLabels[s] || s; }
    function csaColor(sev) {
      var s=(sev||'').toLowerCase();
      if(s==='critical') return '#A5163C'; if(s==='high') return '#F25814';
      if(s==='medium') return '#F2639B'; return '#92C71B';
    }
    function csaVal(row, labels, label) {
      var idx=labels.findIndex(function(l){return l.toLowerCase()===label.toLowerCase();});
      return (idx>=0 && row[idx]!==undefined) ? row[idx] : null;
    }

    function updateTrendSvg(trajectory) {
      var line=document.getElementById('trend-line'), ah=document.getElementById('trend-arrowhead');
      if(!line||!ah) return;
      if(trajectory==='worsening'){
        line.setAttribute('points','10,10 40,18 70,26 100,34 125,42'); ah.setAttribute('points','122,36 140,43 122,50');
        line.setAttribute('stroke','#e74c3c'); ah.setAttribute('fill','#e74c3c');
      } else if(trajectory==='improving'){
        line.setAttribute('points','10,42 40,34 70,26 100,18 125,10'); ah.setAttribute('points','122,4 140,10 122,17');
        line.setAttribute('stroke','#2ecc71'); ah.setAttribute('fill','#2ecc71');
      } else {
        line.setAttribute('points','10,26 40,24 70,28 100,25 125,26'); ah.setAttribute('points','122,20 140,26 122,32');
        line.setAttribute('stroke','#f39c12'); ah.setAttribute('fill','#f39c12');
      }
    }

    function handleTopRiskDomain(data, labels) {
      if(!data||!data.length) return; var row=data[0];
      document.getElementById('top-risk-domain-name').textContent=(csaVal(row,labels,'domain')||'—').toUpperCase();
      document.getElementById('top-risk-score').textContent=csaVal(row,labels,'risk')||'—';
      document.getElementById('top-risk-service').textContent=csaVal(row,labels,'service')||'—';
      document.getElementById('top-risk-reason').textContent='Reason: '+csaSignal(csaVal(row,labels,'contributing_signal')||'');
    }

    function handlePostureTrend(data, labels) {
      if(!data||!data.length) return; var row=data[0];
      var traj=(csaVal(row,labels,'trajectory')||'stable').toLowerCase();
      document.getElementById('trend-improving').textContent=csaVal(row,labels,'improving_domains')||0;
      document.getElementById('trend-stable').textContent=csaVal(row,labels,'stable_domains')||0;
      document.getElementById('trend-worsening').textContent=csaVal(row,labels,'worsening_domains')||0;
      var label=document.getElementById('trend-label'), icon=document.getElementById('trend-arrow-icon');
      if(traj==='worsening'){label.textContent='WORSENING';label.style.color='#e74c3c';icon.textContent='↘';}
      else if(traj==='improving'){label.textContent='IMPROVING';label.style.color='#2ecc71';icon.textContent='↗';}
      else{label.textContent='STABLE';label.style.color='#f39c12';icon.textContent='→';}
      updateTrendSvg(traj);
    }

    function handleContributingConditions(data, labels) {
      if(!data||!data.length) return;
      var list=document.getElementById('contributing-conditions-list'); list.innerHTML='';
      data.slice(0,5).forEach(function(row) {
        var domain=csaVal(row,labels,'domain')||'(blank)', svc=csaVal(row,labels,'service')||'—';
        var signal=csaVal(row,labels,'contributing_signal')||'—', sev=csaVal(row,labels,'severity')||'';
        var color=csaColor(sev), li=document.createElement('li');
        li.innerHTML='<span class="csa-cond-domain" style="color:'+color+';">' +
          '<span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:'+color+';flex-shrink:0;margin-top:2px;"></span>' +
          domain.toUpperCase()+'</span><span class="csa-cond-reason">'+svc+'<small>'+csaSignal(signal)+'</small></span>';
        list.appendChild(li);
      });
    }

    // CSA searches — direct AJAX for GMP (bypass RADAR.blade.php mechanism)
    @php
      $csaSearches = \App\Models\RadarSearches::getCodeArrayByDashboardsRaw(['CSA-TOP-RISK-DOMAIN','CSA-POSTURE-TREND','CSA-CONTRIBUTING-CONDITIONS']);
    @endphp

    var csaSearchIds = @json($csaSearches ?? []);

    function loadCsaWidgets() {
      csaSearchIds.forEach(function(search) {
        $.ajax({
          url: '/get-widget-data',
          data: {
            '_token': csaGmpTk,
            'id': search.id,
            'from': search.period_to || '-24h@h',
            'type': 'radar',
            'to': 'now',
          },
          type: 'POST',
          dataType: 'json',
          success: function(resp) {
            if (!resp.data) return;
            var dashboard = (search.dashboard || '').toUpperCase();
            if(dashboard==='CSA-TOP-RISK-DOMAIN')        handleTopRiskDomain(resp.data, resp.data_labels);
            if(dashboard==='CSA-POSTURE-TREND')           handlePostureTrend(resp.data, resp.data_labels);
            if(dashboard==='CSA-CONTRIBUTING-CONDITIONS') handleContributingConditions(resp.data, resp.data_labels);
          }
        });
      });
    }

    // Threat Level
    var threatLevelMeta = @json(\App\Models\Cases::$threatLevelMeta);
    var threatLevels    = @json(\App\Models\Cases::$threatLevels);

    function hexToRgb(hex) {
      return parseInt(hex.slice(1,3),16)+','+parseInt(hex.slice(3,5),16)+','+parseInt(hex.slice(5,7),16);
    }

    function loadThreatLevel() {
      $.ajax({
        url: "{{ route('threat-level-data') }}",
        type: "GET", dataType: "json",
        success: function(resp) {
          var cases=resp.cases||[], counts=resp.casesCountByThreatLevel||{};
          var maxLevel=1;
          cases.forEach(function(c){ if(c.threat_level>maxLevel) maxLevel=c.threat_level; });
          var color=threatLevelMeta[maxLevel]||'#2ecc71', label=threatLevels[maxLevel]||'NONE';
          var total=0; Object.values(counts).forEach(function(v){ total+=parseInt(v)||0; });
          var pill=document.getElementById('csa-threat-pill'), text=document.getElementById('csa-threat-text');
          var threats=document.getElementById('csa-active-threats');
          if(pill){ pill.style.border='2px solid '+color; pill.style.background='rgba('+hexToRgb(color)+', 0.18)'; }
          if(text){ text.style.color=color; text.textContent='THREAT LEVEL: '+label; }
          if(threats){ threats.style.color=color; threats.textContent=total; }
        }
      });
    }

    $(document).ready(function() {
      var headerH = $('.logout-float').outerHeight(true) || 48;
      $('.csa-layout').css({ 'margin-top': headerH+'px', 'height': 'calc(100vh - '+headerH+'px)' });

      loadCsaWidgets();
      loadThreatLevel();

      var updateInterval = {{ env('MONITORING_WALL_UPDATE_INTERVAL', 60000) }};
      setInterval(loadCsaWidgets, updateInterval);
      setInterval(loadThreatLevel, updateInterval);
    });

    function refreshWallData() {
      loadCsaWidgets();
      loadThreatLevel();
      $("#last-updated").text(new Date().toLocaleString());
    }
  </script>

@endsection