{% extends "base.html" %}
{% block title %}{{ session.serial }} - Imaging Session{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <div>
    <h2 class="mb-0">{{ session.serial }}
      {% if session.hostname_target %}<small class="text-muted">{{ session.hostname_target }}</small>{% endif %}
    </h2>
    <small class="text-muted">
      {% if session.pctype %}<span class="badge bg-info text-dark">{{ session.pctype }}</span>{% endif %}
      {% if session.machinenumber %}<span class="badge bg-secondary">#{{ session.machinenumber }}</span>{% endif %}
      <span class="badge bg-{{ 'success' if session.status == 'succeeded' else ('danger' if session.status == 'failed' else 'primary') }}">{{ session.status or 'in_progress' }}</span>
    </small>
  </div>
  <div>
    <a href="{{ url_for('imaging_dashboard') }}" class="btn btn-outline-secondary btn-sm">
      &laquo; Back to dashboard
    </a>
    <button type="button" class="btn btn-outline-primary btn-sm copy-summary-btn">
      Copy support summary
    </button>
  </div>
</div>

<div class="row">
  <div class="col-lg-5">

    <div class="card mb-3">
      <div class="card-header">Session metadata</div>
      <div class="card-body">
        <dl class="row mb-0 small">
          <dt class="col-4">Serial</dt><dd class="col-8"><code>{{ session.serial }}</code></dd>
          <dt class="col-4">Hostname</dt><dd class="col-8"><code>{{ session.hostname_target or '-' }}</code></dd>
          <dt class="col-4">MAC</dt><dd class="col-8"><code>{{ session.mac or '-' }}</code></dd>
          <dt class="col-4">PC type</dt><dd class="col-8">{{ session.pctype or '-' }}</dd>
          <dt class="col-4">Machine #</dt><dd class="col-8">{{ session.machinenumber or '-' }}</dd>
          <dt class="col-4">Intune ID</dt><dd class="col-8">
            {% if session.intune_device_id %}
              <code style="word-break: break-all;">{{ session.intune_device_id }}</code>
            {% else %}-{% endif %}
          </dd>
          <dt class="col-4">Started</dt><dd class="col-8"><code>{{ session.started_at or '-' }}</code></dd>
          <dt class="col-4">Last update</dt><dd class="col-8"><code>{{ session.last_updated or '-' }}</code></dd>
          <dt class="col-4">Stage</dt><dd class="col-8">
            {{ session.stage_index or 0 }}/{{ session.stage_total or '?' }}
            {% if session.current_stage %} - <code class="small">{{ session.current_stage }}</code>{% endif %}
          </dd>
          {% if session.previous_run_at %}
          <dt class="col-4">Prior run</dt><dd class="col-8"><code>{{ session.previous_run_at }}</code></dd>
          {% endif %}
          {% if session.error %}
          <dt class="col-4 text-danger">Error</dt>
          <dd class="col-8 text-danger">{{ session.error }}</dd>
          {% endif %}
        </dl>
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-header">Stage timeline</div>
      <div class="card-body p-0">
        {% if session.stage_history %}
        <table class="table table-sm mb-0">
          <thead class="table-light">
            <tr><th>Time</th><th>Stage</th><th>Status</th><th>Detail</th></tr>
          </thead>
          <tbody>
            {% for h in session.stage_history %}
            <tr>
              <td class="small"><code>{{ h.ts }}</code></td>
              <td><span class="badge bg-secondary">{{ h.stage_index }}</span></td>
              <td>
                <span class="badge bg-{{ 'success' if h.status == 'succeeded' else ('danger' if h.status == 'failed' else 'primary') }}">
                  {{ h.status }}
                </span>
              </td>
              <td class="small"><code>{{ h.current_stage or '' }}</code></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        <div class="p-3 text-muted small">
          No stage transitions recorded yet. The client only logs a row when
          stage_index advances or status flips to succeeded/failed.
        </div>
        {% endif %}
      </div>
    </div>

  </div>

  <div class="col-lg-7">

    <div class="card mb-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span>Full log
          {% if full_log_truncated %}
          <span class="badge bg-warning text-dark ms-2">truncated (last 1 MB)</span>
          {% endif %}
        </span>
        <button type="button" class="btn btn-sm btn-outline-secondary copy-log-btn">Copy</button>
      </div>
      <div class="card-body p-0">
        {% if full_log %}
        <pre id="full-log" class="bg-light p-2 mb-0 small" style="max-height: 36rem; overflow-y: auto; white-space: pre-wrap;">{{ full_log }}</pre>
        {% else %}
        <div class="p-3 text-muted small">
          No log content. The client has not pushed any <code>log_lines</code>
          entries yet, or the sidecar file was cleared.
        </div>
        {% endif %}
      </div>
    </div>

    {% if session.log_tail %}
    <div class="card mb-3">
      <div class="card-header">Recent tail ({{ session.log_tail | length }} line{{ 's' if session.log_tail | length != 1 }})</div>
      <div class="card-body p-0">
        <pre class="bg-light p-2 mb-0 small" style="max-height: 12rem; overflow-y: auto;">{% for line in session.log_tail %}{{ line }}
{% endfor %}</pre>
      </div>
    </div>
    {% endif %}

  </div>
</div>

{% endblock %}

{% block extra_scripts %}
<script>
function copyText(text) {
    if (navigator.clipboard && window.isSecureContext) {
        return navigator.clipboard.writeText(text);
    }
    return new Promise(function(resolve, reject) {
        var ta = document.createElement('textarea');
        ta.value = text;
        ta.style.position = 'fixed'; ta.style.left = '-9999px';
        document.body.appendChild(ta);
        ta.focus(); ta.select();
        try {
            var ok = document.execCommand('copy');
            document.body.removeChild(ta);
            if (ok) resolve(); else reject(new Error('execCommand returned false'));
        } catch (err) {
            document.body.removeChild(ta);
            reject(err);
        }
    });
}

document.addEventListener('click', function(e) {
    if (e.target.classList.contains('copy-log-btn')) {
        var pre = document.getElementById('full-log');
        if (pre) {
            copyText(pre.textContent).then(function() {
                e.target.textContent = 'copied!';
                setTimeout(function() { e.target.textContent = 'Copy'; }, 1200);
            });
        }
    } else if (e.target.classList.contains('copy-summary-btn')) {
        var lines = [];
        document.querySelectorAll('dl dt').forEach(function(dt) {
            var dd = dt.nextElementSibling;
            if (dd) {
                lines.push(dt.textContent.trim() + ': ' + dd.textContent.trim().replace(/\s+/g, ' '));
            }
        });
        var rows = document.querySelectorAll('table tbody tr');
        if (rows.length) {
            lines.push('');
            lines.push('Stage timeline:');
            rows.forEach(function(tr) {
                var cells = tr.querySelectorAll('td');
                if (cells.length === 4) {
                    lines.push(' - ' + cells[0].textContent.trim() + '  stage ' + cells[1].textContent.trim()
                        + '  ' + cells[2].textContent.trim() + '  ' + cells[3].textContent.trim());
                }
            });
        }
        copyText(lines.join('\n')).then(function() {
            e.target.textContent = 'copied!';
            setTimeout(function() { e.target.textContent = 'Copy support summary'; }, 1200);
        });
    }
});
</script>
{% endblock %}