{% extends "base.html" %}
{% block title %}{{ scan.target }} — Results{% endblock %}

{% block content %}
<div class="page-header">
  <div class="page-title-block">
    <div class="breadcrumb">
      <a href="{{ url_for('scans.list_scans') }}" class="bc-link">GHOST RUNS</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">
    {% 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 %}
      <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('Purge this ghost run from the grid?')">
      <button class="btn btn-ghost">✕ PURGE</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">SHADOW 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 SIGNAL FEED</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">[OWLSCAN]</span>
      <span class="term-msg">Ghost run active. Receiving signal...</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">
          <pre class="result-data">{{ result.data|tojson(indent=2) }}</pre>
        </div>
      </div>
      {% else %}
      <div class="empty-state">
        <div class="empty-owl">🦉</div>
        <p class="text-dim">{% if is_live %}Mission in progress — signals incoming...{% else %}No results captured.{% 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">
          <pre class="result-data">{{ result.data|tojson(indent=2) }}</pre>
        </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">
          <pre class="result-data">{{ result.data|tojson(indent=2) }}</pre>
        </div>
      </div>
      {% else %}
      <div class="empty-state">
        <span class="neon-green">✓</span>
        <p>No anomalies detected in this ghost run.</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) {
  initLiveFeed(SCAN_ID);
}
</script>
{% endblock %}