@extends('layouts.app')
@section('title', '壓力測試 — ' . $k6Result->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-speedometer2 me-2"></i>壓力測試</h4>
    <a href="{{ route('k6.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">{{ $k6Result->school_name }}</h5>
      <dl class="row mb-0 small">
        <dt class="col-sm-3 text-muted">測試網址</dt>
        <dd class="col-sm-9">{{ $k6Result->url }}</dd>

        <dt class="col-sm-3 text-muted">測試階段</dt>
        <dd class="col-sm-9">
          @foreach((is_array($k6Result->stages) ? $k6Result->stages : json_decode($k6Result->stages, true)) as $vus)
            <span class="badge bg-secondary me-1">{{ $vus }} VUs × 30s</span>
          @endforeach
        </dd>

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

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

  {{-- 執行區塊 --}}
  <div class="card shadow-sm">
    <div class="card-body text-center py-4">

      {{-- 待執行：顯示開始按鈕 --}}
      <div id="section-pending" class="{{ $k6Result->status !== 'pending' ? 'd-none' : '' }}">
        <p class="text-muted mb-3">
          共 {{ count($k6Result->stages) }} 個階段，
          預計執行 {{ count($k6Result->stages) * 30 }} 秒以上。
        </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="{{ $k6Result->status !== 'running' ? 'd-none' : '' }}">
        <div class="spinner-border text-warning mb-3" role="status" style="width:3rem;height:3rem;">
          <span class="visually-hidden">執行中</span>
        </div>
        <p class="fw-semibold mb-1">正在執行壓力測試…</p>
        <p class="text-muted small" id="run-hint">
          共 {{ count($k6Result->stages) }} 個階段，請稍候（約 {{ count($k6Result->stages) * 30 }} 秒）
        </p>
        <div class="progress mt-3" style="height:6px">
          <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning w-100"></div>
        </div>
      </div>

      {{-- 失敗（理論上不到這頁，備用） --}}
      <div id="section-failed" class="{{ $k6Result->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>
        <pre class="text-start bg-light p-2 rounded small">{{ $k6Result->error_log }}</pre>
        <a href="{{ route('k6.edit', $k6Result) }}" 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('k6.edit', $k6Result) }}" class="btn btn-outline-primary btn-sm">
      <i class="bi bi-pencil me-1"></i>編輯設定
    </a>
    <form method="POST" action="{{ route('k6.destroy', $k6Result) }}"
          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('k6.status', $k6Result) }}";
const startUrl  = "{{ route('k6.start',  $k6Result) }}";
const showUrl   = "{{ route('k6.show',   $k6Result) }}";
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);
}

// 如果頁面載入時已是 running 狀態，自動開始輪詢
@if($k6Result->status === 'running')
document.addEventListener('DOMContentLoaded', startPolling);
@endif
</script>
@endsection