{% extends "base.html" %}
{% from "scans/_result_render.html" import ri %}
{% block title %}{{ scan.target }} — Results{% endblock %}

{% block content %}
<style>
.sev-badge { display:inline-block; padding:0.08rem 0.45rem; border-radius:3px; font-size:0.62rem;
  font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }
.sev-critical { background:rgba(244,63,94,0.18); color:#f43f5e; border:1px solid rgba(244,63,94,0.5); }
.sev-high     { background:rgba(251,146,60,0.18); color:#fb923c; border:1px solid rgba(251,146,60,0.5); }
.sev-medium   { background:rgba(251,191,36,0.15); color:#fbbf24; border:1px solid rgba(251,191,36,0.45); }
.sev-low, .sev-info { background:rgba(56,189,248,0.15); color:#38bdf8; border:1px solid rgba(56,189,248,0.4); }
.dork-list { display:flex; flex-direction:column; gap:0.3rem; }
.dork-row { display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
  border-radius:4px; padding:0.3rem 0.5rem; }
.dork-q { font-family:var(--font-mono,monospace); font-size:0.72rem; color:var(--text,#aeb8c7);
  word-break:break-all; }
.dork-run { font-size:0.62rem; font-weight:700; letter-spacing:0.05em; color:#00ff41;
  text-decoration:none; white-space:nowrap; flex-shrink:0; }
.dork-run:hover { text-shadow:0 0 6px rgba(0,255,65,0.6); }
</style>
<div class="page-header">
  <div class="page-title-block">
    <div class="breadcrumb">
      <a href="{{ url_for('scans.list_scans') }}" class="bc-link">Scans</a>
      <span class="bc-sep">›</span>
      <span class="bc-current">{{ scan.target[:50] }}</span>
    </div>
    <h1 class="page-title">
      <span class="target-sigil">◈</span>
      <span class="target-display">{{ scan.target }}</span>
      <span class="status-badge status-{{ scan.status }} {% if scan.status == 'running' %}pulse-anim{% endif %}">
        {{ scan.status.upper() }}
      </span>
    </h1>
  </div>
  <div class="header-actions">
    <a href="{{ url_for('scans.scan_summary', scan_id=scan.id) }}" class="btn btn-secondary">▦ Summary view</a>
    {% if scan.status == 'running' %}
      <form action="{{ url_for('scans.abort_scan', scan_id=scan.id) }}" method="POST" style="display:inline">
        <button class="btn btn-danger">⬛ ABORT</button>
      </form>
    {% else %}
      <form action="{{ url_for('scans.rescan', scan_id=scan.id) }}" method="POST" style="display:inline">
        <button class="btn btn-primary">↻ Re-scan</button>
      </form>
      <a href="{{ url_for('export.export_options', scan_id=scan.id) }}" class="btn btn-secondary">
        ↓ EXPORT INTEL
      </a>
    {% endif %}
    <form action="{{ url_for('scans.delete_scan', scan_id=scan.id) }}" method="POST" style="display:inline"
          onsubmit="return confirm('Delete this scan?')">
      <button class="btn btn-ghost">✕ Delete</button>
    </form>
  </div>
</div>

<!-- Scan meta strip -->
<div class="scan-meta-strip">
  <div class="meta-item">
    <span class="meta-label">TYPE</span>
    <span class="meta-val">{{ scan.scan_type or '—' }}</span>
  </div>
  <div class="meta-item">
    <span class="meta-label">PROFILE</span>
    <span class="meta-val">{{ scan.profile or '—' }}</span>
  </div>
  <div class="meta-item">
    <span class="meta-label">RESULTS</span>
    <span class="meta-val neon-cyan">{{ scan.result_count }}</span>
  </div>
  <div class="meta-item">
    <span class="meta-label">DURATION</span>
    <span class="meta-val">{% if scan.duration_seconds %}{{ "%.1f"|format(scan.duration_seconds) }}s{% else %}—{% endif %}</span>
  </div>
  <div class="meta-item">
    <span class="meta-label">RISK SCORE</span>
    <div class="shadow-score-wrap">
      <div class="shadow-score-bar">
        <div class="shadow-score-fill" style="width: {{ scan.shadow_score or 0 }}%"></div>
      </div>
      <span class="shadow-score-num {% if (scan.shadow_score or 0) > 70 %}neon-red{% elif (scan.shadow_score or 0) > 40 %}neon-orange{% else %}neon-green{% endif %}">
        {{ "%.0f"|format(scan.shadow_score or 0) }}/100
      </span>
    </div>
  </div>
  <div class="meta-item">
    <span class="meta-label">THREAT LEVEL</span>
    <span class="threat-badge threat-{{ scan.threat_level or 'unknown' }}">
      {{ (scan.threat_level or 'unknown').upper() }}
    </span>
  </div>
</div>

<!-- Live terminal (visible when running) -->
{% if is_live %}
<div class="live-section">
  <div class="live-header">
    <span class="live-indicator pulse-anim">◉</span>
    <span>LIVE ACTIVITY</span>
    <div class="progress-bar-wrap">
      <div class="progress-bar">
        <div class="progress-fill" id="progress-fill" style="width: {{ scan.progress }}%"></div>
      </div>
      <span id="progress-pct">{{ scan.progress }}%</span>
    </div>
  </div>
  <div id="live-terminal" class="terminal-output terminal-large">
    <div class="term-line term-system">
      <span class="term-prompt">[PHANTOMSIGNAL]</span>
      <span class="term-msg">Scan running...</span>
    </div>
  </div>
</div>
{% endif %}

<!-- Results tabs -->
<div class="results-section">
  <div class="tab-bar">
    <button class="tab-btn active" data-tab="all">ALL ({{ results|length }})</button>
    {% for module, items in grouped_results.items() %}
    <button class="tab-btn" data-tab="{{ module }}">
      {{ module.upper().replace('_', ' ') }} ({{ items|length }})
    </button>
    {% endfor %}
    <button class="tab-btn" data-tab="anomalies">
      ⚠ ANOMALIES ({{ results|selectattr('is_anomaly')|list|length }})
    </button>
  </div>

  <!-- All results -->
  <div class="tab-pane active" id="tab-all">
    <div class="results-list" id="results-all">
      {% for result in results %}
      <div class="result-card {% if result.is_anomaly %}result-anomaly{% endif %}"
           data-module="{{ result.module }}"
           data-type="{{ result.result_type }}">
        <div class="result-header" onclick="toggleResult(this)">
          <div class="result-meta">
            <span class="result-module">[{{ result.module }}]</span>
            <span class="result-type">{{ result.result_type }}</span>
            <span class="result-source">⚡ {{ result.source or '—' }}</span>
            {% if result.tags %}
              {% for tag in result.tags[:4] %}
                <span class="result-tag">{{ tag }}</span>
              {% endfor %}
            {% endif %}
          </div>
          <div class="result-stats">
            <span class="conf-badge">CONF {{ "%.0f"|format((result.confidence or 0) * 100) }}%</span>
            {% if result.is_anomaly %}
              <span class="anomaly-badge-sm">⚠ ANOMALY</span>
            {% endif %}
            <span class="result-time">{{ result.timestamp[:16] if result.timestamp else '' }}</span>
            <span class="expand-icon">▼</span>
          </div>
        </div>
        <div class="result-body" style="display:none">
          {{ ri(result) }}
        </div>
      </div>
      {% else %}
      <div class="empty-state">
        <div class="empty-ghost" aria-hidden="true">∿</div>
        <p class="text-dim">{% if is_live %}Scan in progress — results incoming...{% else %}No results yet.{% endif %}</p>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- Module-specific tabs -->
  {% for module, items in grouped_results.items() %}
  <div class="tab-pane" id="tab-{{ module }}">
    <div class="results-list">
      {% for result in items %}
      <div class="result-card {% if result.is_anomaly %}result-anomaly{% endif %}">
        <div class="result-header" onclick="toggleResult(this)">
          <div class="result-meta">
            <span class="result-type">{{ result.result_type }}</span>
            <span class="result-source">⚡ {{ result.source or '—' }}</span>
            {% for tag in (result.tags or [])[:4] %}
              <span class="result-tag">{{ tag }}</span>
            {% endfor %}
          </div>
          <div class="result-stats">
            <span class="conf-badge">CONF {{ "%.0f"|format((result.confidence or 0) * 100) }}%</span>
            {% if result.is_anomaly %}<span class="anomaly-badge-sm">⚠</span>{% endif %}
            <span class="expand-icon">▼</span>
          </div>
        </div>
        <div class="result-body" style="display:none">
          {{ ri(result) }}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endfor %}

  <!-- Anomalies tab -->
  <div class="tab-pane" id="tab-anomalies">
    <div class="results-list">
      {% for result in results if result.is_anomaly %}
      <div class="result-card result-anomaly">
        <div class="result-header" onclick="toggleResult(this)">
          <div class="result-meta">
            <span class="result-module">[{{ result.module }}]</span>
            <span class="result-type">{{ result.result_type }}</span>
            <span class="anomaly-badge-sm">⚠ ANOMALY</span>
          </div>
          <div class="result-stats">
            <span class="conf-badge">CONF {{ "%.0f"|format((result.confidence or 0) * 100) }}%</span>
            <span class="expand-icon">▼</span>
          </div>
        </div>
        <div class="result-body" style="display:none">
          {{ ri(result) }}
        </div>
      </div>
      {% else %}
      <div class="empty-state">
        <span class="neon-green">✓</span>
        <p>No anomalies detected in this scan.</p>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/terminal.js') }}"></script>
<script>
const SCAN_ID = "{{ scan.id }}";
const IS_LIVE = {{ 'true' if is_live else 'false' }};

// Tab switching
document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
    this.classList.add('active');
    const tab = this.dataset.tab;
    document.getElementById(`tab-${tab}`).classList.add('active');
  });
});

// Expand/collapse result cards
function toggleResult(header) {
  const body = header.nextElementSibling;
  const icon = header.querySelector('.expand-icon');
  const isOpen = body.style.display !== 'none';
  body.style.display = isOpen ? 'none' : 'block';
  icon.textContent = isOpen ? '▼' : '▲';
  header.closest('.result-card').classList.toggle('expanded', !isOpen);
}

// Live scan WebSocket connection
if (IS_LIVE) {
  // Wait for socket to be connected before joining the room.
  // socket is initialised at module level in app.js (before DOMContentLoaded),
  // so it always exists here — but may not yet be connected.
  if (socket && socket.connected) {
    initLiveFeed(SCAN_ID);
  } else {
    socket.once('connect', () => initLiveFeed(SCAN_ID));
  }

  // Polling fallback — keeps the progress bar accurate even if SocketIO events
  // are missed (slow connect, missed room join, etc.).
  const _pollInterval = setInterval(() => {
    fetch(`/api/v1/scans/${SCAN_ID}`)
      .then(r => r.json())
      .then(d => {
        if (d.status !== 'ok') return;
        const s = d.data;
        const fill  = document.getElementById('progress-fill');
        const label = document.getElementById('progress-pct');
        if (fill)  fill.style.width  = `${s.progress || 0}%`;
        if (label) label.textContent = `${s.progress || 0}%`;
        if (s.status !== 'running') {
          clearInterval(_pollInterval);
          setTimeout(() => location.reload(), 1000);
        }
      })
      .catch(() => {});
  }, 2000);
}
</script>
{% endblock %}