@extends('layouts.app')
@section('title', 'Locust 測試 — ' . $locustResult->school_name)

@section('content')
<div class="container py-4" style="max-width:640px">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0"><i class="bi bi-bug-fill me-2 text-success"></i>Locust 壓力測試</h4>
    <a href="{{ route('locust.index') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>返回清單
    </a>
  </div>

  @if(session('info'))
  <div class="alert alert-info py-2">{{ session('info') }}</div>
  @endif

  <div class="card shadow-sm mb-3">
    <div class="card-body">
      <h5 class="card-title fw-bold mb-3">{{ $locustResult->school_name }}</h5>
      <dl class="row mb-0 small">
        <dt class="col-sm-3 text-muted">測試網址</dt>
        <dd class="col-sm-9">{{ $locustResult->url }}{{ $locustResult->target_path !== '/' ? $locustResult->target_path : '' }}</dd>

        <dt class="col-sm-3 text-muted">虛擬用戶</dt>
        <dd class="col-sm-9">
          <span class="badge bg-success me-1">{{ $locustResult->users }} users</span>
          <span class="text-muted">生成速率 {{ $locustResult->spawn_rate }} users/s</span>
        </dd>

        <dt class="col-sm-3 text-muted">時長</dt>
        <dd class="col-sm-9">{{ $locustResult->duration }}</dd>

        @if($locustResult->login_path)
        <dt class="col-sm-3 text-muted">登入路徑</dt>
        <dd class="col-sm-9">{{ $locustResult->login_path }}</dd>
        @endif

        <dt class="col-sm-3 text-muted">狀態</dt>
        <dd class="col-sm-9">
          <span id="status-badge" class="badge
            {{ $locustResult->status === 'pending'   ? 'bg-secondary' : '' }}
            {{ $locustResult->status === 'running'   ? 'bg-warning text-dark' : '' }}
            {{ $locustResult->status === 'completed' ? 'bg-success' : '' }}
            {{ $locustResult->status === 'failed'    ? 'bg-danger' : '' }}">
            {{ ['pending'=>'待執行','running'=>'執行中','completed'=>'已完成','failed'=>'失敗'][$locustResult->status] ?? $locustResult->status }}
          </span>
        </dd>
      </dl>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-body text-center py-4">

      <div id="section-pending" class="{{ $locustResult->status !== 'pending' ? 'd-none' : '' }}">
        @php
          $durationSec = (int) filter_var($locustResult->duration, FILTER_SANITIZE_NUMBER_INT);
          if (str_contains($locustResult->duration, 'm')) {
              $parts = explode('m', $locustResult->duration);
              $durationSec = ((int)$parts[0]) * 60 + (int)($parts[1] ?? 0);
          }
        @endphp
        <p class="text-muted mb-3">
          {{ $locustResult->users }} 虛擬用戶，預計執行 {{ $locustResult->duration }}。
        </p>
        <button id="btn-start" class="btn btn-success btn-lg px-5" onclick="startTest()">
          <i class="bi bi-play-fill me-2"></i>開始執行
        </button>
      </div>

      <div id="section-running" class="{{ $locustResult->status !== 'running' ? 'd-none' : '' }}">
        <div class="spinner-border text-success mb-3" role="status" style="width:3rem;height:3rem;">
          <span class="visually-hidden">執行中</span>
        </div>
        <p class="fw-semibold mb-1">正在執行 Locust 壓力測試…</p>
        <p class="text-muted small">{{ $locustResult->users }} users × {{ $locustResult->duration }}，請稍候</p>
        <div class="progress mt-3" style="height:6px">
          <div class="progress-bar progress-bar-striped progress-bar-animated bg-success w-100"></div>
        </div>
      </div>

      <div id="section-failed" class="{{ $locustResult->status !== 'failed' ? 'd-none' : '' }}">
        <i class="bi bi-exclamation-triangle-fill text-danger fs-1 mb-2 d-block"></i>
        <p class="text-danger fw-semibold">測試執行失敗</p>
        @if($locustResult->error_log)
        <pre class="text-start bg-light p-2 rounded small overflow-auto" style="max-height:200px">{{ $locustResult->error_log }}</pre>
        @endif
        <a href="{{ route('locust.edit', $locustResult) }}" class="btn btn-outline-primary me-2">
          <i class="bi bi-pencil me-1"></i>編輯後重試
        </a>
      </div>

    </div>
  </div>

  <div class="d-flex gap-2 mt-3">
    <a href="{{ route('locust.edit', $locustResult) }}" class="btn btn-outline-primary btn-sm">
      <i class="bi bi-pencil me-1"></i>編輯設定
    </a>
    <form method="POST" action="{{ route('locust.destroy', $locustResult) }}"
          onsubmit="return confirm('確定刪除此測試記錄？')">
      @csrf @method('DELETE')
      <button class="btn btn-outline-danger btn-sm">
        <i class="bi bi-trash me-1"></i>刪除
      </button>
    </form>
  </div>
</div>

<script>
const statusUrl = "{{ route('locust.status', $locustResult) }}";
const startUrl  = "{{ route('locust.start',  $locustResult) }}";
const showUrl   = "{{ route('locust.show',   $locustResult) }}";
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

let polling = null;

function startTest() {
  document.getElementById('btn-start').disabled = true;
  document.getElementById('btn-start').innerHTML =
    '<span class="spinner-border spinner-border-sm me-2"></span>啟動中…';

  fetch(startUrl, {
    method: 'POST',
    headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
  })
  .then(r => r.json())
  .then(data => {
    if (data.status === 'running') {
      showRunning();
      startPolling();
    }
  })
  .catch(() => {
    document.getElementById('btn-start').disabled = false;
    document.getElementById('btn-start').innerHTML =
      '<i class="bi bi-play-fill me-2"></i>開始執行';
    alert('啟動失敗，請稍後再試。');
  });
}

function showRunning() {
  document.getElementById('section-pending').classList.add('d-none');
  document.getElementById('section-running').classList.remove('d-none');
  document.getElementById('status-badge').className = 'badge bg-warning text-dark';
  document.getElementById('status-badge').textContent = '執行中';
}

function startPolling() {
  polling = setInterval(() => {
    fetch(statusUrl, { headers: { 'Accept': 'application/json' } })
      .then(r => r.json())
      .then(data => {
        if (data.status === 'completed') {
          clearInterval(polling);
          window.location.href = showUrl;
        } else if (data.status === 'failed') {
          clearInterval(polling);
          window.location.reload();
        }
      });
  }, 3000);
}

@if($locustResult->status === 'running')
document.addEventListener('DOMContentLoaded', startPolling);
@endif
</script>
@endsection