@extends('layouts.app')

@section('title', '掃描引擎資訊')

@section('content')
<div class="container-fluid">

  <div class="mb-3 d-flex justify-content-between align-items-center">
    <a href="{{ route('vuln-scan.index') }}" class="text-decoration-none text-muted small">
      <i class="bi bi-arrow-left me-1"></i>返回掃描清單
    </a>
  </div>

  {{-- 引擎版本資訊 --}}
  <div class="row g-3 mb-3">
    <div class="col-md-4">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <div class="d-flex align-items-center gap-3">
            <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center"
                 style="width:48px;height:48px;flex-shrink:0">
              <i class="bi bi-cpu-fill text-white fs-5"></i>
            </div>
            <div>
              <div class="text-muted small">掃描引擎</div>
              <div class="fw-bold">Nuclei <span class="font-monospace text-danger">{{ $info['engine_version'] }}</span></div>
              <div class="text-muted" style="font-size:.75rem;">by ProjectDiscovery</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <div class="d-flex align-items-center gap-3">
            <div class="bg-success rounded-circle d-flex align-items-center justify-content-center"
                 style="width:48px;height:48px;flex-shrink:0">
              <i class="bi bi-collection-fill text-white fs-5"></i>
            </div>
            <div>
              <div class="text-muted small">模板資料庫</div>
              <div class="fw-bold"><span class="font-monospace text-success">{{ number_format($info['template_total']) }}</span> 個模板</div>
              <div class="text-muted" style="font-size:.75rem;">
                更新時間：{{ $info['template_installed'] ?? '—' }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <div class="d-flex align-items-center gap-3">
            <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center"
                 style="width:48px;height:48px;flex-shrink:0">
              <i class="bi bi-shield-lock-fill fs-5"></i>
            </div>
            <div>
              <div class="text-muted small">安全漏洞庫</div>
              <div class="fw-bold">
                @php $cveCount = $info['categories']['http/cves']['count'] ?? 0; @endphp
                <span class="font-monospace text-warning">{{ number_format($cveCount) }}</span> 個 CVE
              </div>
              <div class="text-muted" style="font-size:.75rem;">OWASP Top 10 完整涵蓋</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- 分類統計 --}}
  <div class="card shadow-sm mb-3">
    <div class="card-header py-2 fw-semibold">
      <i class="bi bi-bar-chart-fill me-1 text-danger"></i>模板分類統計
    </div>
    <div class="card-body py-2">
      <div class="row g-2">
        @foreach($info['categories'] as $cat => $meta)
        <div class="col-6 col-md-4 col-lg-3">
          <a href="#" class="text-decoration-none category-filter-btn" data-category="{{ $cat }}">
            <div class="border rounded p-2 d-flex align-items-center gap-2 h-100 hover-shadow">
              <i class="bi {{ $meta['icon'] }} text-{{ $meta['color'] }} fs-5"></i>
              <div>
                <div class="fw-semibold small">{{ $meta['label'] }}</div>
                <div class="font-monospace text-muted" style="font-size:.72rem;">{{ number_format($meta['count']) }} 個模板</div>
              </div>
            </div>
          </a>
        </div>
        @endforeach
      </div>
    </div>
  </div>

  {{-- 模板瀏覽器 --}}
  <div class="card shadow-sm">
    <div class="card-header py-2 d-flex align-items-center gap-2 flex-wrap">
      <span class="fw-semibold"><i class="bi bi-search me-1 text-danger"></i>模板瀏覽器</span>
      <input type="text" id="tplSearch" class="form-control form-control-sm" style="max-width:220px" placeholder="搜尋名稱 / ID / 標籤…">
      <select id="tplCategory" class="form-select form-select-sm" style="max-width:180px">
        <option value="">全部分類</option>
        @foreach($info['categories'] as $cat => $meta)
          <option value="{{ $cat }}">{{ $meta['label'] }}</option>
        @endforeach
      </select>
      <select id="tplSeverity" class="form-select form-select-sm" style="max-width:130px">
        <option value="">全部嚴重度</option>
        <option value="critical">Critical</option>
        <option value="high">High</option>
        <option value="medium">Medium</option>
        <option value="low">Low</option>
        <option value="info">Info</option>
      </select>
      <span class="ms-auto text-muted small" id="tplCount"></span>
    </div>
    <div class="card-body p-0">
      <div id="tplLoading" class="text-center py-5 text-muted d-none">
        <div class="spinner-border spinner-border-sm me-2"></div>載入中…
      </div>
      <div id="tplEmpty" class="text-center py-5 text-muted d-none">
        <i class="bi bi-search fs-2 d-block mb-2"></i>無符合條件的模板
      </div>
      <div class="table-responsive">
        <table class="table table-sm table-hover align-middle mb-0" id="tplTable">
          <thead class="table-light">
            <tr>
              <th style="width:90px">嚴重度</th>
              <th>模板名稱</th>
              <th>Template ID</th>
              <th>分類</th>
              <th style="width:120px">OWASP / CVE</th>
            </tr>
          </thead>
          <tbody id="tplBody">
            <tr><td colspan="5" class="text-center text-muted py-4">
              <div class="spinner-border spinner-border-sm me-2"></div>載入模板列表…
            </td></tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="card-footer d-flex align-items-center gap-2" id="tplPager" style="display:none!important">
      <button class="btn btn-sm btn-outline-secondary" id="tplPrev" disabled>
        <i class="bi bi-chevron-left"></i>
      </button>
      <span class="small text-muted" id="tplPageInfo"></span>
      <button class="btn btn-sm btn-outline-secondary" id="tplNext">
        <i class="bi bi-chevron-right"></i>
      </button>
    </div>
  </div>

</div>
@endsection

@push('scripts')
<script>
(function () {
  let currentPage = 1;
  let lastPage    = 1;
  let debounceTimer;

  const tbody    = document.getElementById('tplBody');
  const loading  = document.getElementById('tplLoading');
  const empty    = document.getElementById('tplEmpty');
  const pager    = document.getElementById('tplPager');
  const countEl  = document.getElementById('tplCount');
  const pageInfo = document.getElementById('tplPageInfo');
  const prevBtn  = document.getElementById('tplPrev');
  const nextBtn  = document.getElementById('tplNext');

  const sevColor = {
    critical: 'danger', high: 'warning', medium: 'info', low: 'primary', info: 'secondary'
  };
  const sevText = { high: 'dark', medium: 'dark' };

  @php
    $catLabels = [];
    foreach($info['categories'] as $cat => $meta) {
        $catLabels[$cat] = $meta['label'];
    }
  @endphp
  const catLabels = @json($catLabels);

  function load(page = 1) {
    currentPage = page;
    const search   = document.getElementById('tplSearch').value;
    const category = document.getElementById('tplCategory').value;
    const severity = document.getElementById('tplSeverity').value;

    const params = new URLSearchParams({ page, search, category, severity });
    const url = '{{ route('vuln-scan.engine.templates') }}?' + params;

    tbody.innerHTML = '';
    loading.classList.remove('d-none');
    empty.classList.add('d-none');
    pager.style.removeProperty('display');
    pager.style.display = 'none';

    fetch(url, { headers: { 'Accept': 'application/json' } })
      .then(r => r.json())
      .then(data => {
        loading.classList.add('d-none');
        lastPage = data.last_page;

        countEl.textContent = `共 ${data.total.toLocaleString()} 個模板`;
        pageInfo.textContent = `第 ${data.page} / ${data.last_page} 頁`;
        prevBtn.disabled = data.page <= 1;
        nextBtn.disabled = data.page >= data.last_page;
        pager.style.removeProperty('display');

        if (data.items.length === 0) {
          empty.classList.remove('d-none');
          return;
        }

        const rows = data.items.map(t => {
          const sc = sevColor[t.severity] || 'secondary';
          const st = sevText[t.severity] || 'white';

          const owaspBadges = (t.owasp || []).map(o =>
            `<span class="badge bg-dark bg-opacity-75 me-1" style="font-size:.65rem;">${o}</span>`
          ).join('');
          const cveBadges = (t.cve_id || []).slice(0, 2).map(c =>
            `<span class="badge bg-danger bg-opacity-75 me-1" style="font-size:.65rem;">${c}</span>`
          ).join('');

          const catLabel = Object.entries(catLabels).find(([k]) => (t.category || '').startsWith(k))?.[1] || t.category;

          return `<tr>
            <td><span class="badge bg-${sc} text-${st}">${t.severity?.toUpperCase()}</span></td>
            <td>
              <div class="fw-semibold small">${escHtml(t.name)}</div>
              ${t.description ? `<div class="text-muted" style="font-size:.72rem;">${escHtml(t.description.slice(0, 80))}${t.description.length > 80 ? '…' : ''}</div>` : ''}
            </td>
            <td class="font-monospace" style="font-size:.75rem;">${escHtml(t.template_id)}</td>
            <td><span class="badge bg-secondary">${escHtml(catLabel)}</span></td>
            <td>${owaspBadges}${cveBadges}</td>
          </tr>`;
        });

        tbody.innerHTML = rows.join('');
      })
      .catch(() => {
        loading.classList.add('d-none');
        tbody.innerHTML = '<tr><td colspan="5" class="text-center text-danger py-3">載入失敗，請重試</td></tr>';
      });
  }

  function escHtml(s) {
    return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  function debounce(fn, ms = 400) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(fn, ms);
  }

  document.getElementById('tplSearch').addEventListener('input',   () => debounce(() => load(1)));
  document.getElementById('tplCategory').addEventListener('change', () => load(1));
  document.getElementById('tplSeverity').addEventListener('change', () => load(1));
  prevBtn.addEventListener('click', () => { if (currentPage > 1) load(currentPage - 1); });
  nextBtn.addEventListener('click', () => { if (currentPage < lastPage) load(currentPage + 1); });

  // 分類卡片快捷
  document.querySelectorAll('.category-filter-btn').forEach(btn => {
    btn.addEventListener('click', e => {
      e.preventDefault();
      const cat = btn.dataset.category;
      document.getElementById('tplCategory').value = cat;
      load(1);
      document.getElementById('tplTable').scrollIntoView({ behavior: 'smooth' });
    });
  });

  // 初始載入
  load(1);
})();
</script>
@endpush