@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--threat-level">
    @include('monitoring_wall.partials._sw-topbar', ['subtitle' => 'Global SOC Posture'])

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

      <div class="sw-right">
        <section id="banner" class="sw-card sw-banner">
          @include('monitoring_wall.partials._sw-loader')
        </section>
        <section id="counters" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
        <section id="escalation" class="sw-card">
          @include('monitoring_wall.partials._sw-loader')
        </section>
      </div>
    </main>
  </div>

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

  <script>
    const threatCodes = Object.fromEntries(Object.entries(threatLevels).map(([n, name]) => [n, name.split(' ')[0].toUpperCase()]));
    const threatTone = {1: 'green', 2: 'yellow', 3: 'orange', 4: 'red', 5: 'zinc'};
    const tierColor = n => `var(--t${n})`;
    const ageStr = s => String(s ?? '').replace(/^\d{4}-/, '').replace(/:\d{2}$/, '');

    function threatStatusPill(level, code) {
      const pill = $("#sw-status");
      pill.removeClass('tone-green tone-yellow tone-orange tone-red tone-zinc')
        .addClass('tone-' + threatTone[level]).show();
      $("#sw-status-label").text('Level ' + level + ' · ' + code);
    }

    function renderBanner(level, counts) {
      const code = threatCodes[level];
      const col = tierColor(level);

      const cx = 94, cy = 88, r = 72, f = level / 5;
      const pol = a => [cx + r * Math.cos(a), cy - r * Math.sin(a)];
      const [sx, sy] = pol(Math.PI);
      const [ex, ey] = pol(0);
      const [vx, vy] = pol(Math.PI * (1 - f));

      const gauge = `
        <svg class="sw-banner__gauge" width="190" height="112" viewBox="0 0 190 112">
          <path d="M${sx} ${sy} A ${r} ${r} 0 0 1 ${ex} ${ey}" fill="none" style="stroke:rgba(255,255,255,0.08)" stroke-width="15" stroke-linecap="round"/>
          <path d="M${sx} ${sy} A ${r} ${r} 0 0 1 ${vx.toFixed(1)} ${vy.toFixed(1)}" fill="none" style="stroke:${col};filter:drop-shadow(0 0 6px ${col})" stroke-width="15" stroke-linecap="round"/>
          <text x="${cx}" y="82" text-anchor="middle" font-size="46" font-weight="800" style="fill:color-mix(in srgb, ${col} 78%, white)">${level}</text>
          <text x="${cx}" y="102" text-anchor="middle" font-size="11" font-weight="700" letter-spacing="1" style="fill:var(--fg-subtle)">OF 5</text>
        </svg>`;

      const activeAtLevel = counts[level];
      const sub = fmt(activeAtLevel) + ' active TAC case' + (activeAtLevel === 1 ? '' : 's') + ' at this level';

      const text = `
        <div class="sw-banner__text">
          <div class="sw-banner__eyebrow" style="color:color-mix(in srgb, ${col} 60%, white)">Active Threat Condition</div>
          <div class="sw-banner__headline">LEVEL ${level} · <span style="color:color-mix(in srgb, ${col} 72%, white)">${code}</span></div>
          <div class="sw-banner__sub">${sub}</div>
        </div>`;

      $("#banner")
        .attr('style', `background:linear-gradient(100deg, color-mix(in srgb, ${col} 4.5%, var(--surface)), var(--surface) 60%);border-color:color-mix(in srgb, ${col} 26%, transparent)`)
        .append(`<div class="sw-banner__body">${gauge}${text}</div>`);
    }

    function renderCases(cases) {
      const rows = cases.map(c => {
        const n = c.threat_level;
        const col = tierColor(n);
        return `
          <tr>
            <td class="mono">${caseLink(c.id)}</td>
            <td>
              <span class="sw-tl-lvl" style="color:color-mix(in srgb, ${col} 62%, white)">
                <span class="sw-tl-lvl__dot" style="background:${col};box-shadow:0 0 6px color-mix(in srgb, ${col} 70%, transparent)"></span>
                L${n} · ${esc(threatLevels[n] ?? '')}
              </span>
            </td>
            <td class="muted">${ownerName(c.control)}</td>
            <td class="mono muted">${ageStr(c.created_at)}</td>
          </tr>
        `;
      }).join('') || '<tr><td colspan="4" class="sw-empty">No cases found</td></tr>';

      $("#cases").append(`
        ${cardHead('acc-blue', 'Contributing TAC Cases', 'Most recent', cases.length + ' cases')}
        <div class="sw-card__body nopad">
          <div class="sw-table-wrap">
            <table class="sw-table roomy">
              <thead>
                <tr>
                  <th>Case</th>
                  <th>Threat Level</th>
                  <th>Owner</th>
                  <th>Age</th>
                </tr>
              </thead>
              <tbody>${rows}</tbody>
            </table>
          </div>
        </div>
      `);
    }

    function renderCounters(counts) {
      const maxC = Math.max(1, counts[1], counts[2], counts[3], counts[4], counts[5]);

      const rows = [5, 4, 3, 2, 1].map(function (n) {
        const v = counts[n], on = v > 0, col = tierColor(n);
        const w = Math.max(2, v / maxC * 100);
        return `
          <div class="sw-tl-counter${on ? '' : ' is-off'}">
            <div class="sw-tl-counter__top">
              <span class="sw-tl-counter__id">
                <span class="sw-tl-counter__dot" style="background:${col};${on ? 'box-shadow:0 0 10px ' + col : ''}"></span>
                <span class="sw-tl-counter__lbl"${on ? ` style="color:color-mix(in srgb, ${col} 55%, white)"` : ''}>L${n} · ${threatCodes[n]}</span>
              </span>
              <span class="sw-tl-counter__val">${fmt(v)}</span>
            </div>
            <div class="sw-tl-counter__track">
              <div class="sw-tl-counter__fill" style="width:${w}%;background:${col};${on ? 'box-shadow:0 0 8px ' + col : 'opacity:.3'}"></div>
            </div>
          </div>`;
      }).join('');

      $("#counters").append(`
        ${cardHead('acc-cyan', 'Level Counters', 'Active cases by tier')}
        <div class="sw-card__body nopad">
          <div class="sw-tl-counters">${rows}</div>
        </div>
      `);
    }

    function renderEscalation(cases) {
      const escCases = cases.filter(c => c.threat_level >= 4);

      const body = escCases.length
        ? `<div class="sw-tl-esc-list">${escCases.map(c => `
          <div class="sw-tl-esc-row">
            <span class="mono sw-tl-esc-row__id">#${esc(c.id)}</span>
            ${badge('L' + c.threat_level + ' · ' + (threatLevels[c.threat_level] ?? ''), threatBadgeClass[c.threat_level] || '')}
          </div>`).join('')}</div>`
        : `
          <div class="sw-tl-esc-empty">
            <div class="sw-tl-esc-empty__mark">&#10003;</div>
            <div class="sw-tl-esc-empty__title">No Active Escalations</div>
            <div class="sw-tl-esc-empty__sub">No cases at TEVR or Incident level</div>
          </div>`;

      $("#escalation").append(`
        ${cardHead('acc-red', 'Escalation Strip', 'Critical only · L4 / L5')}
        <div class="sw-card__body pad">${body}</div>
      `);
    }

    swWallInit("{{ route('threat-level-data') }}", function (resp) {
      const cases = resp.cases || [];
      const counts = {};
      for (let n = 1; n <= 5; n++) {
        counts[n] = Number(resp.casesCountByThreatLevel && resp.casesCountByThreatLevel[n]) || 0;
      }
      const level = (cases[0] && cases[0].threat_level) || 1;

      $("#cases, #banner, #counters, #escalation").empty();

      renderBanner(level, counts);
      renderCases(cases);
      renderCounters(counts);
      renderEscalation(cases);
      threatStatusPill(level, threatCodes[level]);
    });
  </script>
@endsection