@if(!$host->sbom_data)
  <p class="text-muted mb-0"><i class="bi bi-info-circle me-1"></i>尚未收集 SBOM 資料，Agent 將於每天首次執行時自動收集。</p>
@else
  @php
    $sbom     = $host->sbom_data;
    $aptPkgs  = collect($sbom['apt']      ?? [])->map(fn($p) => array_merge($p, ['type'=>'apt']));
    $pipPkgs  = collect($sbom['pip']      ?? [])->map(fn($p) => array_merge($p, ['type'=>'pip']));
    $npmPkgs  = collect($sbom['npm']      ?? [])->map(fn($p) => array_merge($p, ['type'=>'npm']));
    $compPkgs = collect($sbom['composer'] ?? [])->map(fn($p) => array_merge($p, ['type'=>'composer']));
    $all = $aptPkgs->merge($pipPkgs)->merge($npmPkgs)->merge($compPkgs);
    $typeCounts = [
      'apt'      => $aptPkgs->count(),
      'pip'      => $pipPkgs->count(),
      'npm'      => $npmPkgs->count(),
      'composer' => $compPkgs->count(),
    ];
    $typeColors = ['apt'=>'primary','pip'=>'warning','npm'=>'success','composer'=>'info'];
  @endphp

  <div class="d-flex flex-wrap gap-2 mb-3">
    @foreach($typeCounts as $t => $cnt)
      @if($cnt > 0)
        <span class="badge bg-{{ $typeColors[$t] }} bg-opacity-75" style="font-size:.85rem; cursor:pointer"
              onclick="document.getElementById('qSbomType').value='{{ $t }}'; qSbomFilter()">
          {{ strtoupper($t) }} {{ $cnt }}
        </span>
      @endif
    @endforeach
    <span class="badge bg-secondary bg-opacity-75" style="font-size:.85rem; cursor:pointer"
          onclick="document.getElementById('qSbomType').value=''; qSbomFilter()">
      全部 {{ $all->count() }}
    </span>
  </div>

  <div class="d-flex gap-2 mb-2 flex-wrap align-items-center">
    <input type="text" id="qSbomSearch" class="form-control form-control-sm" placeholder="搜尋名稱 / 授權…" style="max-width:220px" oninput="qSbomFilter()">
    <select id="qSbomType" class="form-select form-select-sm" style="max-width:130px" onchange="qSbomFilter()">
      <option value="">所有類型</option>
      <option value="apt">APT</option>
      <option value="pip">pip</option>
      <option value="npm">npm</option>
      <option value="composer">Composer</option>
    </select>
    <button id="qSbomTranslateBtn" class="btn btn-sm btn-outline-secondary"
      data-url="{{ route('hosts.sbom-translate-desc', $host) }}"
      title="翻譯套件描述為中文">
      <i class="bi bi-translate me-1"></i>翻譯描述
    </button>
    <span id="qSbomCount" class="text-muted small align-self-center"></span>
  </div>

  <div style="max-height:55vh; overflow-y:auto;">
    <div class="table-responsive"><table class="table table-sm table-hover small mb-0" id="qSbomTable">
      <thead class="table-light sticky-top">
        <tr>
          <th>名稱</th><th>版本</th><th>類型</th><th>授權</th><th>描述</th>
        </tr>
      </thead>
      <tbody>
        @foreach($all as $pkg)
          @php
            $t = $pkg['type'];
            $lic = $pkg['license'] ?? '';
            $desc = $pkg['description'] ?? '';
            $descZh = $pkg['description_zh'] ?? '';
            $licColor = match(true) {
              str_contains(strtolower($lic), 'mit')    => 'success',
              str_contains(strtolower($lic), 'apache') => 'primary',
              str_contains(strtolower($lic), 'gpl')    => 'warning',
              str_contains(strtolower($lic), 'bsd')    => 'info',
              $lic === '' || $lic === 'unknown'         => 'secondary',
              default                                   => 'dark',
            };
          @endphp
          <tr class="qs-row" data-type="{{ $t }}" data-name="{{ strtolower($pkg['name'] ?? '') }}" data-lic="{{ strtolower($lic) }}">
            <td>{{ $pkg['name'] ?? '' }}</td>
            <td class="text-muted">{{ $pkg['version'] ?? '' }}</td>
            <td><span class="badge bg-{{ $typeColors[$t] }} bg-opacity-75" style="font-size:.7rem">{{ strtoupper($t) }}</span></td>
            <td>@if($lic)<span class="badge bg-{{ $licColor }} bg-opacity-75" style="font-size:.7rem">{{ $lic }}</span>@endif</td>
            <td style="max-width:260px">
              @if($descZh)
                <span title="{{ $descZh }}">{{ Str::limit($descZh, 50) }}</span>
                @if($desc)<div class="text-muted" style="font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ $desc }}">{{ $desc }}</div>@endif
              @elseif($desc)
                <span class="text-muted" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block" title="{{ $desc }}">{{ $desc }}</span>
              @endif
            </td>
          </tr>
        @endforeach
      </tbody>
    </table></div>
  </div>

  <script>
  function qSbomFilter() {
    const q = (document.getElementById('qSbomSearch')?.value || '').toLowerCase();
    const t = (document.getElementById('qSbomType')?.value || '');
    let vis = 0;
    document.querySelectorAll('#qSbomTable .qs-row').forEach(r => {
      const show = (!t || r.dataset.type === t)
                && (!q || r.dataset.name.includes(q) || r.dataset.lic.includes(q));
      r.style.display = show ? '' : 'none';
      if (show) vis++;
    });
    const el = document.getElementById('qSbomCount');
    if (el) el.textContent = '顯示 ' + vis + ' 筆';
  }
  qSbomFilter();

  (function() {
    const btn = document.getElementById('qSbomTranslateBtn');
    if (!btn) return;
    btn.addEventListener('click', function() {
      if (!confirm('將所有尚未翻譯的套件描述翻譯為繁體中文？\n（依數量多寡可能需要數分鐘，請耐心等待）')) return;
      btn.disabled = true;
      btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>翻譯中…';
      fetch(btn.dataset.url, {
        method: 'POST',
        headers: {
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
          'Accept': 'application/json',
        },
      }).then(r => r.json()).then(data => {
        if (data.ok) {
          btn.innerHTML = '<i class="bi bi-check2 me-1"></i>完成（' + data.translated + ' 筆）';
          btn.classList.replace('btn-outline-secondary', 'btn-outline-success');
          setTimeout(() => location.reload(), 1000);
        } else {
          alert(data.error || '翻譯失敗');
          btn.disabled = false;
          btn.innerHTML = '<i class="bi bi-translate me-1"></i>翻譯描述';
        }
      }).catch(() => {
        alert('請求失敗，請重試');
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-translate me-1"></i>翻譯描述';
      });
    });
  })();
  </script>
@endif