@extends('layouts.app')

@section('content')
<div class="container">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1>壓力測試報告</h1>
    <div>
      <a href="{{ route('k6.export-pdf', $test) }}" class="btn btn-danger me-2">
        <i class="bi bi-file-earmark-pdf"></i> 匯出 PDF
      </a>
      <a href="{{ route('k6.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> 返回列表
      </a>
    </div>
  </div>

  {{-- ===== 測試說明 ===== --}}
  <div class="card mb-4">
    <div class="card-header bg-success text-white">
      <i class="bi bi-info-circle"></i> 測試說明
    </div>
    <div class="card-body" style="line-height:1.8">
      本報告為網站壓力測試結果，旨在評估目標網站在不同負載條件下的效能表現與穩定性。<br>
      <strong class="text-primary">測試工具：</strong>K6（Grafana Labs 開源負載測試工具），透過模擬多個虛擬使用者（VUs）同時對目標網站發送 HTTP 請求。<br>
      <strong class="text-primary">測試方式：</strong>每組 VUs 測試持續 30 秒，依序執行不同人數階段。<br>
      <strong class="text-primary">主要指標：</strong>
      平均回應時間（avg）、中位數（med）、P90/P95、最大回應時間（max）、每秒請求數（RPS）、失敗率、檢查通過率。
    </div>
  </div>

  {{-- ===== 測試對象 ===== --}}
  <div class="card mb-4">
    <div class="card-header bg-primary text-white">
      <i class="bi bi-server"></i> 測試對象
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-6">
          <div class="table-responsive"><table class="table table-borderless mb-0">
            <tr>
              <th style="width:130px" class="text-muted">學校名稱</th>
              <td class="fw-bold">{{ $test->school_name }}</td>
            </tr>
            <tr>
              <th class="text-muted">測試網址</th>
              <td><a href="{{ $test->url }}" target="_blank" rel="noopener">{{ $test->url }}</a></td>
            </tr>
            @if ($test->login_path)
            <tr>
              <th class="text-muted">登入路徑</th>
              <td><code>{{ $test->login_path }}</code></td>
            </tr>
            @endif
          </table></div>
        </div>
        <div class="col-md-6">
          <div class="table-responsive"><table class="table table-borderless mb-0">
            <tr>
              <th style="width:130px" class="text-muted">測試人數 (VUs)</th>
              <td>
                @foreach ($stages as $vus)
                  <span class="badge bg-success text-white me-1">{{ $vus }} VUs</span>
                @endforeach
              </td>
            </tr>
            <tr>
              <th class="text-muted">每階段時長</th>
              <td>30 秒</td>
            </tr>
            <tr>
              <th class="text-muted">測試時間</th>
              <td>{{ \Carbon\Carbon::parse($test->test_time)->format('Y-m-d H:i:s') }}</td>
            </tr>
            @if ($test->email)
            <tr>
              <th class="text-muted">測試帳號</th>
              <td>{{ $test->email }}</td>
            </tr>
            @endif
            <tr>
              <th class="text-muted">測試工具</th>
              <td>K6 (Grafana Labs)</td>
            </tr>
          </table></div>
        </div>
      </div>
    </div>
  </div>

  @php
    $validResults = collect($stageResults)->filter(fn($s) => isset($s['http_reqs']));
  @endphp

  @if ($validResults->count() > 0)
  {{-- ===== 測試結果總覽 ===== --}}
  <div class="card mb-4">
    <div class="card-header bg-success text-white">
      <i class="bi bi-table"></i> 測試結果總覽
    </div>
    <div class="card-body table-responsive">
      <table class="table table-striped table-hover align-middle text-center mb-0">
        <thead class="table-primary">
          <tr>
            <th>VUs (人數)</th>
            <th>HTTP 請求數</th>
            <th>每秒請求 (RPS)</th>
            <th>平均回應 (ms)</th>
            <th>中位數 (ms)</th>
            <th>P90 (ms)</th>
            <th>P95 (ms)</th>
            <th>最大回應 (ms)</th>
            <th>失敗率</th>
            <th>檢查通過率</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($validResults as $sr)
          <tr>
            <td><strong>{{ $sr['vus'] }}</strong></td>
            <td>{{ number_format($sr['http_reqs']) }}</td>
            <td>{{ $sr['http_reqs_rate'] }}</td>
            <td>{{ $sr['avg_duration'] }}</td>
            <td>{{ $sr['med_duration'] }}</td>
            <td>{{ $sr['p90_duration'] }}</td>
            <td>{{ $sr['p95_duration'] }}</td>
            <td>{{ $sr['max_duration'] }}</td>
            <td>
              @if ($sr['fail_rate'] == 0)
                <span class="badge bg-success">0%</span>
              @elseif ($sr['fail_rate'] < 0.05)
                <span class="badge bg-warning text-dark">{{ round($sr['fail_rate'] * 100, 2) }}%</span>
              @else
                <span class="badge bg-danger">{{ round($sr['fail_rate'] * 100, 2) }}%</span>
              @endif
            </td>
            <td>
              @if ($sr['check_pass_rate'] >= 90)
                <span class="badge bg-success">{{ $sr['check_pass_rate'] }}%</span>
              @elseif ($sr['check_pass_rate'] >= 60)
                <span class="badge bg-warning text-dark">{{ $sr['check_pass_rate'] }}%</span>
              @else
                <span class="badge bg-danger">{{ $sr['check_pass_rate'] }}%</span>
              @endif
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

  {{-- ===== 圖表總覽 ===== --}}
  <div class="row mb-4">
    <div class="col-md-6 mb-3">
      <div class="card h-100">
        <div class="card-header"><i class="bi bi-speedometer2"></i> 回應時間比較 (ms)</div>
        <div class="card-body"><canvas id="chartResponseTime"></canvas></div>
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <div class="card h-100">
        <div class="card-header"><i class="bi bi-lightning"></i> 每秒請求數 (RPS)</div>
        <div class="card-body"><canvas id="chartRps"></canvas></div>
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <div class="card h-100">
        <div class="card-header"><i class="bi bi-exclamation-triangle"></i> 請求失敗率 (%)</div>
        <div class="card-body"><canvas id="chartFailRate"></canvas></div>
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <div class="card h-100">
        <div class="card-header"><i class="bi bi-check-circle"></i> 檢查通過率 (%)</div>
        <div class="card-body"><canvas id="chartCheckPass"></canvas></div>
      </div>
    </div>
  </div>

  {{-- ===== 曲線圖：不同 VUs 趨勢比較 ===== --}}
  <div class="row mb-4">
    <div class="col-md-6 mb-3">
      <div class="card h-100">
        <div class="card-header"><i class="bi bi-graph-up"></i> 回應時間趨勢 (ms)</div>
        <div class="card-body"><canvas id="chartLineDuration"></canvas></div>
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <div class="card h-100">
        <div class="card-header"><i class="bi bi-graph-up-arrow"></i> 綜合效能趨勢</div>
        <div class="card-body"><canvas id="chartLinePerf"></canvas></div>
      </div>
    </div>
  </div>

  {{-- ===== 各階段詳細結果 ===== --}}
  @foreach ($validResults as $idx => $sr)
  <div class="card mb-4">
    <div class="card-header bg-secondary text-white">
      <i class="bi bi-bar-chart-line"></i> {{ $sr['vus'] }} VUs 階段詳細結果
    </div>
    <div class="card-body">
      <div class="row mb-3">
        <div class="col-md-6">
          <div class="table-responsive"><table class="table table-sm table-borderless mb-0">
            <tr><th class="text-muted" style="width:140px">虛擬使用者數</th><td>{{ $sr['vus'] }} 人</td></tr>
            <tr><th class="text-muted">HTTP 請求總數</th><td>{{ number_format($sr['http_reqs']) }} 次（{{ $sr['http_reqs_rate'] }} req/s）</td></tr>
            <tr><th class="text-muted">迭代次數</th><td>{{ number_format($sr['iterations']) }} 次</td></tr>
          </table></div>
        </div>
        <div class="col-md-6">
          <div class="table-responsive"><table class="table table-sm table-borderless mb-0">
            <tr><th class="text-muted" style="width:140px">接收資料量</th><td>{{ $sr['data_received'] }} KB</td></tr>
            <tr><th class="text-muted">發送資料量</th><td>{{ $sr['data_sent'] }} KB</td></tr>
          </table></div>
        </div>
      </div>

      {{-- 回應時間分布圖 --}}
      <div class="row mb-3">
        <div class="col-md-8">
          <canvas id="chartStage{{ $sr['vus'] }}"></canvas>
        </div>
        <div class="col-md-4">
          <div class="table-responsive"><table class="table table-sm table-striped text-center mb-0">
            <thead class="table-dark">
              <tr><th>指標</th><th>數值 (ms)</th></tr>
            </thead>
            <tbody>
              <tr><td>最小值</td><td>{{ $sr['min_duration'] }}</td></tr>
              <tr><td>平均值</td><td>{{ $sr['avg_duration'] }}</td></tr>
              <tr><td>中位數</td><td>{{ $sr['med_duration'] }}</td></tr>
              <tr><td>P90</td><td>{{ $sr['p90_duration'] }}</td></tr>
              <tr><td>P95</td><td>{{ $sr['p95_duration'] }}</td></tr>
              <tr><td>最大值</td><td>{{ $sr['max_duration'] }}</td></tr>
            </tbody>
          </table></div>
        </div>
      </div>

      @if (!empty($sr['checks']))
      @php
      $checkDesc = [
        'HTTP 回應成功 (2xx)'   => 'HTTP 狀態碼 200–299，表示請求被伺服器正常處理',
        '伺服器無錯誤 (非 5xx)' => 'HTTP 狀態碼小於 500，表示伺服器端未發生錯誤',
        'status 2xx'            => 'HTTP 狀態碼 200–299，表示請求被伺服器正常處理',
        'status not 5xx'        => 'HTTP 狀態碼小於 500，表示伺服器端未發生錯誤',
      ];
      @endphp
      <h6 class="fw-bold mt-3"><i class="bi bi-list-check"></i> 檢查項目</h6>
      <div class="table-responsive"><table class="table table-sm table-hover">
        <thead class="table-secondary">
          <tr>
            <th>檢查名稱</th>
            <th>說明</th>
            <th class="text-center" style="width:90px">通過</th>
            <th class="text-center" style="width:90px">失敗</th>
            <th class="text-center" style="width:80px">結果</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($sr['checks'] as $checkName => $check)
          @php $name = $check['name'] ?? $checkName; @endphp
          <tr>
            <td class="fw-semibold">{{ $name }}</td>
            <td class="text-muted small">{{ $checkDesc[$name] ?? '—' }}</td>
            <td class="text-center text-success">{{ number_format($check['passes'] ?? 0) }}</td>
            <td class="text-center {{ ($check['fails'] ?? 0) > 0 ? 'text-danger fw-bold' : 'text-muted' }}">{{ number_format($check['fails'] ?? 0) }}</td>
            <td class="text-center">
              @if (($check['fails'] ?? 0) == 0)
                <span class="badge bg-success">PASS</span>
              @else
                <span class="badge bg-danger">FAIL</span>
              @endif
            </td>
          </tr>
          @endforeach
        </tbody>
      </table></div>
      @endif

    </div>
  </div>
  @endforeach

  @else
    <div class="alert alert-warning">無法讀取測試結果 JSON 檔案。</div>
  @endif
</div>
@endsection

@if (collect($stageResults)->filter(fn($s) => isset($s['http_reqs']))->count() > 0)
@push('scripts')
<script src="/vendor/chartjs/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const stageData = @json($validResults->values());
  const labels = stageData.map(s => s.vus + ' VUs');

  // 回應時間比較
  new Chart(document.getElementById('chartResponseTime'), {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [
        { label: 'Avg', data: stageData.map(s => s.avg_duration), backgroundColor: '#0d6efd' },
        { label: 'P90', data: stageData.map(s => s.p90_duration), backgroundColor: '#ffc107' },
        { label: 'P95', data: stageData.map(s => s.p95_duration), backgroundColor: '#fd7e14' },
        { label: 'Max', data: stageData.map(s => s.max_duration), backgroundColor: '#dc3545' },
      ]
    },
    options: {
      responsive: true,
      plugins: { legend: { position: 'top' } },
      scales: { y: { beginAtZero: true, title: { display: true, text: 'ms' } } }
    }
  });

  // 每秒請求數
  new Chart(document.getElementById('chartRps'), {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{ label: 'RPS', data: stageData.map(s => s.http_reqs_rate), backgroundColor: '#198754' }]
    },
    options: {
      responsive: true,
      plugins: { legend: { display: false } },
      scales: { y: { beginAtZero: true, title: { display: true, text: 'req/s' } } }
    }
  });

  // 請求失敗率
  new Chart(document.getElementById('chartFailRate'), {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: '失敗率',
        data: stageData.map(s => +(s.fail_rate * 100).toFixed(2)),
        backgroundColor: stageData.map(s => s.fail_rate === 0 ? '#198754' : (s.fail_rate < 0.05 ? '#ffc107' : '#dc3545'))
      }]
    },
    options: {
      responsive: true,
      plugins: { legend: { display: false } },
      scales: { y: { beginAtZero: true, title: { display: true, text: '%' } } }
    }
  });

  // 檢查通過率
  new Chart(document.getElementById('chartCheckPass'), {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: '通過率',
        data: stageData.map(s => s.check_pass_rate),
        backgroundColor: stageData.map(s => s.check_pass_rate >= 90 ? '#198754' : (s.check_pass_rate >= 60 ? '#ffc107' : '#dc3545'))
      }]
    },
    options: {
      responsive: true,
      plugins: { legend: { display: false } },
      scales: { y: { beginAtZero: true, max: 100, title: { display: true, text: '%' } } }
    }
  });

  // 回應時間趨勢曲線圖
  new Chart(document.getElementById('chartLineDuration'), {
    type: 'line',
    data: {
      labels: labels,
      datasets: [
        { label: 'Avg',  data: stageData.map(s => s.avg_duration), borderColor: '#0d6efd', backgroundColor: 'rgba(13,110,253,0.1)', fill: true, tension: 0.3, pointRadius: 5, pointHoverRadius: 7 },
        { label: 'Med',  data: stageData.map(s => s.med_duration), borderColor: '#6f42c1', backgroundColor: 'transparent', borderDash: [5,5], tension: 0.3, pointRadius: 4 },
        { label: 'P90',  data: stageData.map(s => s.p90_duration), borderColor: '#ffc107', backgroundColor: 'rgba(255,193,7,0.1)', fill: true, tension: 0.3, pointRadius: 5 },
        { label: 'P95',  data: stageData.map(s => s.p95_duration), borderColor: '#fd7e14', backgroundColor: 'transparent', tension: 0.3, pointRadius: 4 },
        { label: 'Max',  data: stageData.map(s => s.max_duration), borderColor: '#dc3545', backgroundColor: 'rgba(220,53,69,0.05)', fill: true, borderDash: [3,3], tension: 0.3, pointRadius: 4 },
      ]
    },
    options: {
      responsive: true,
      interaction: { mode: 'index', intersect: false },
      plugins: { legend: { position: 'top' }, tooltip: { callbacks: { label: ctx => ctx.dataset.label + ': ' + ctx.parsed.y + ' ms' } } },
      scales: { y: { beginAtZero: true, title: { display: true, text: 'ms' } } }
    }
  });

  // 綜合效能趨勢曲線圖 (RPS + 失敗率 + 通過率，雙 Y 軸)
  new Chart(document.getElementById('chartLinePerf'), {
    type: 'line',
    data: {
      labels: labels,
      datasets: [
        { label: 'RPS (req/s)', data: stageData.map(s => s.http_reqs_rate), borderColor: '#198754', backgroundColor: 'rgba(25,135,84,0.1)', fill: true, tension: 0.3, pointRadius: 5, yAxisID: 'y' },
        { label: '失敗率 (%)', data: stageData.map(s => +(s.fail_rate * 100).toFixed(2)), borderColor: '#dc3545', backgroundColor: 'transparent', tension: 0.3, pointRadius: 5, pointStyle: 'triangle', yAxisID: 'y1' },
        { label: '檢查通過率 (%)', data: stageData.map(s => s.check_pass_rate), borderColor: '#0d6efd', backgroundColor: 'transparent', borderDash: [5,5], tension: 0.3, pointRadius: 5, pointStyle: 'rectRot', yAxisID: 'y1' },
      ]
    },
    options: {
      responsive: true,
      interaction: { mode: 'index', intersect: false },
      plugins: { legend: { position: 'top' } },
      scales: {
        y:  { type: 'linear', position: 'left', beginAtZero: true, title: { display: true, text: 'req/s' } },
        y1: { type: 'linear', position: 'right', beginAtZero: true, max: 100, title: { display: true, text: '%' }, grid: { drawOnChartArea: false } }
      }
    }
  });

  // 各階段回應時間分布 (水平長條圖)
  stageData.forEach(function (s) {
    const el = document.getElementById('chartStage' + s.vus);
    if (!el) return;
    new Chart(el, {
      type: 'bar',
      data: {
        labels: ['Min', 'Avg', 'Med', 'P90', 'P95', 'Max'],
        datasets: [{
          label: 'ms',
          data: [s.min_duration, s.avg_duration, s.med_duration, s.p90_duration, s.p95_duration, s.max_duration],
          backgroundColor: ['#198754', '#0d6efd', '#6f42c1', '#ffc107', '#fd7e14', '#dc3545']
        }]
      },
      options: {
        indexAxis: 'y',
        responsive: true,
        plugins: {
          legend: { display: false },
          title: { display: true, text: s.vus + ' VUs — 回應時間分布 (ms)' }
        },
        scales: { x: { beginAtZero: true, title: { display: true, text: 'ms' } } }
      }
    });
  });
});
</script>
@endpush
@endif