@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('code-scan.index') }}" class="text-decoration-none text-muted small">
      <i class="bi bi-arrow-left me-1"></i>返回掃描清單
    </a>
    <div class="d-flex gap-2">
      @if($codeScan->status === 'done')
      <a href="{{ route('code-scan.pdf', $codeScan) }}" class="btn btn-sm btn-danger">
        <i class="bi bi-file-earmark-pdf me-1"></i>匯出 PDF
      </a>
<a href="{{ route('code-scan.create', ['scanner_type' => $codeScan->scanner_type]) }}"
         class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-arrow-repeat me-1"></i>重新掃描
      </a>
      @endif
      <form method="POST" action="{{ route('code-scan.destroy', $codeScan) }}"
            onsubmit="return confirm('確定刪除？')">
        @csrf @method('DELETE')
        <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-trash me-1"></i>刪除</button>
      </form>
    </div>
  </div>

  {{-- 基本資訊 --}}
  <div class="card shadow-sm mb-3">
    <div class="card-body py-2">
      <div class="row g-3 align-items-center">
        <div class="col-md-4">
          <div class="text-muted small">來源</div>
          <div class="fw-semibold font-monospace text-break">{{ $codeScan->source_ref }}</div>
          @if($codeScan->branch)
            <span class="badge bg-secondary mt-1" style="font-size:.65rem;">{{ $codeScan->branch }}</span>
          @endif
        </div>
        <div class="col-md-2">
          <div class="text-muted small">掃描工具</div>
          <span class="badge bg-{{ $codeScan->scannerColor() }}">{{ $codeScan->scannerLabel() }}</span>
          @if($codeScan->language)
            <div class="small text-muted mt-1">{{ $codeScan->language }}</div>
          @endif
        </div>
        <div class="col-md-2">
          <div class="text-muted small">狀態</div>
          @if($codeScan->status==='done')    <span class="badge bg-success">完成</span>
          @elseif($codeScan->status==='running') <span class="badge bg-warning text-dark"><span class="spinner-border spinner-border-sm me-1"></span>執行中</span>
          @elseif($codeScan->status==='failed')  <span class="badge bg-danger">失敗</span>
          @else <span class="badge bg-secondary">待執行</span>
          @endif
        </div>
        <div class="col-md-4">
          <div class="row g-1">
            <div class="col-6">
              <div class="text-muted" style="font-size:.7rem;">開始</div>
              <div class="small font-monospace">{{ $codeScan->started_at?->format('Y-m-d H:i:s') ?? '—' }}</div>
            </div>
            <div class="col-6">
              <div class="text-muted" style="font-size:.7rem;">結束</div>
              <div class="small font-monospace">{{ $codeScan->finished_at?->format('H:i:s') ?? '—' }}</div>
            </div>
            @if($codeScan->durationSeconds())
            <div class="col-12">
              @php $s=$codeScan->durationSeconds(); @endphp
              <span class="badge bg-secondary">{{ $s>=60?floor($s/60).'m '.($s%60).'s':$s.'s' }}</span>
            </div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- 即時進度 --}}
  @if(in_array($codeScan->status, ['pending','running']))
  <div class="card shadow-sm mb-3 border-primary" id="progress-card">
    <div class="card-header bg-primary text-white py-2 d-flex align-items-center gap-2">
      <div class="spinner-border spinner-border-sm"></div>
      <span class="fw-semibold">掃描進行中</span>
      <span class="ms-auto small opacity-75">每 5 秒更新</span>
    </div>
    <pre id="scan-log" class="bg-black text-success p-3 mb-0 small font-monospace"
         style="max-height:320px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;">等待輸出…</pre>
  </div>
  @endif

  @if($codeScan->status === 'failed' && $codeScan->error_log)
  <div class="alert alert-danger">
    <strong>錯誤訊息：</strong>
    <pre class="mb-0 mt-1 small">{{ $codeScan->error_log }}</pre>
  </div>
  @endif

  @if($codeScan->status === 'done')
  @php
    $bySev      = $summary['by_severity'] ?? [];
    $total      = $summary['total'] ?? 0;
    $byOwasp    = $summary['by_owasp'] ?? [];
    $fileCount  = $summary['file_count'] ?? null;
    $dirCount   = $summary['dir_count'] ?? null;
    $sevCounts  = [];
    foreach($findings as $f) { $s=$f['severity']??'info'; $sevCounts[$s]=($sevCounts[$s]??0)+1; }
  @endphp

  {{-- 統計 --}}
  <div class="row g-3 mb-3">
    @foreach(['critical'=>['danger','嚴重'],'high'=>['warning','高'],'medium'=>['info','中'],'low'=>['primary','低'],'info'=>['secondary','資訊']] as $sev=>[$col,$lbl])
    <div class="col-6 col-md-2">
      <div class="card text-center border-0 bg-{{ $col }} bg-opacity-{{ $sev==='info'?'10':'20' }}">
        <div class="card-body py-2">
          <div class="fs-3 fw-bold">{{ $bySev[$sev] ?? 0 }}</div>
          <div class="small">{{ $lbl }}</div>
        </div>
      </div>
    </div>
    @endforeach
    <div class="col-6 col-md-2">
      <div class="card text-center border-0 bg-light">
        <div class="card-body py-2">
          <div class="fs-3 fw-bold">{{ $total }}</div>
          <div class="small text-muted">總計</div>
        </div>
      </div>
    </div>
  </div>

  {{-- 原始碼範圍統計 --}}
  @if($fileCount !== null)
  <div class="d-flex gap-3 mb-3 text-muted small">
    <span><i class="bi bi-file-earmark-code me-1"></i>掃描檔案：<strong class="text-body">{{ number_format($fileCount) }}</strong></span>
    <span><i class="bi bi-folder me-1"></i>資料夾：<strong class="text-body">{{ number_format($dirCount ?? 0) }}</strong></span>
  </div>
  @endif

  {{-- OWASP 分佈 --}}
  @if(!empty($byOwasp))
  <div class="card shadow-sm mb-3">
    <div class="card-header py-2 fw-semibold"><i class="bi bi-diagram-3 me-1 text-danger"></i>OWASP Top 10</div>
    <div class="card-body py-2">
      <div class="row g-2">
        @foreach($owaspLabels as $oid => $olabel)
        @php $cnt = $byOwasp[$oid] ?? 0; @endphp
        <div class="col-md-6 col-lg-4">
          <div class="d-flex align-items-center gap-2 p-2 rounded border {{ $cnt>0?'border-warning bg-warning bg-opacity-10':'' }}">
            <span class="badge bg-secondary font-monospace" style="font-size:.7rem;">{{ $oid }}</span>
            <span class="small flex-grow-1">{{ $olabel }}</span>
            @if($cnt>0) <span class="badge bg-danger">{{ $cnt }}</span>
            @else <span class="text-muted small">-</span>
            @endif
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </div>
  @endif

  {{-- 發現清單 --}}
  <div class="card shadow-sm mb-4">
    <div class="card-header py-2">
      <div class="d-flex flex-wrap align-items-center gap-2">
        <div class="d-flex gap-1 flex-wrap" id="sevFilters">
          <button class="btn btn-sm btn-secondary active" data-sev="all">全部 <span class="badge bg-light text-dark ms-1">{{ $total }}</span></button>
          @foreach(['critical'=>['danger','嚴重'],'high'=>['warning','高'],'medium'=>['info','中'],'low'=>['primary','低'],'info'=>['secondary','資訊']] as $sev=>[$col,$lbl])
            @if(($sevCounts[$sev]??0)>0)
            <button class="btn btn-sm btn-outline-{{ $col }}" data-sev="{{ $sev }}">
              {{ $lbl }} <span class="badge bg-{{ $col }} ms-1">{{ $sevCounts[$sev] }}</span>
            </button>
            @endif
          @endforeach
        </div>
        <div class="ms-auto d-flex gap-2 align-items-center">
          <div class="input-group input-group-sm" style="width:220px;">
            <span class="input-group-text"><i class="bi bi-search"></i></span>
            <input type="text" id="findingSearch" class="form-control" placeholder="搜尋檔案、規則、說明…">
            <button class="btn btn-outline-secondary" id="clearSearch"><i class="bi bi-x"></i></button>
          </div>
          <select class="form-select form-select-sm" id="perPage" style="width:80px;">
            <option value="25" selected>25 筆</option>
            <option value="50">50 筆</option>
            <option value="100">100 筆</option>
            <option value="0">全部</option>
          </select>
        </div>
      </div>
    </div>

    <div class="card-body p-0">
      @if(empty($findings))
      <div class="text-center text-muted py-5">
        <i class="bi bi-shield-check fs-1 text-success"></i>
        <div class="mt-2">未發現任何問題，源碼安全狀態良好</div>
      </div>
      @else
      <div class="table-responsive">
        <table class="table table-sm table-hover align-middle mb-0" id="findingsTable">
          <thead class="table-light">
            <tr>
              <th style="width:90px">嚴重度</th>
              <th>問題描述</th>
              <th>檔案位置</th>
              <th style="width:130px">OWASP / CVE</th>
              <th style="width:40px"></th>
            </tr>
          </thead>
          <tbody>
          @foreach($findings as $i => $f)
          @php
            $sev = $f['severity'] ?? 'info';
            $sevColor = ['critical'=>'danger','high'=>'warning','medium'=>'info','low'=>'primary','info'=>'secondary'][$sev] ?? 'secondary';
            $issueType = strtolower($f['type'] ?? 'vulnerability');
            $typeLabel = ['vulnerability'=>'漏洞','bug'=>'程式錯誤','code_smell'=>'程式碼異味','security_hotspot'=>'安全熱點'][$issueType] ?? $issueType;
            $typeColor = ['vulnerability'=>'danger','bug'=>'warning','code_smell'=>'secondary','security_hotspot'=>'info'][$issueType] ?? 'secondary';
            $searchText = strtolower(($f['name']??'').' '.($f['file']??'').' '.($f['matched_at']??'').' '.($f['template_id']??'').' '.implode(' ',(array)($f['owasp']??[])).' '.implode(' ',(array)($f['cve_id']??[])));
          @endphp
          <tr class="finding-row" data-sev="{{ $sev }}" data-search="{{ $searchText }}"
              style="cursor:pointer" data-bs-toggle="collapse" data-bs-target="#detail-{{ $i }}">
            <td>
              <span class="badge bg-{{ $sevColor }} {{ in_array($sev,['high','medium'])?'text-dark':'' }}">{{ strtoupper($sev) }}</span>
              @if($codeScan->scanner_type === 'sonarqube')
              <br><span class="badge bg-{{ $typeColor }} bg-opacity-75 mt-1" style="font-size:.62rem;">{{ $typeLabel }}</span>
              @endif
            </td>
            <td>
              <div class="fw-semibold" style="font-size:.85rem;">{{ Str::limit($f['name'] ?? '—', 80) }}</div>
              @if(!empty($f['template_id']))
              <div class="text-muted font-monospace" style="font-size:.68rem;">{{ $f['template_id'] }}</div>
              @endif
            </td>
            <td>
              <div class="font-monospace text-primary" style="font-size:.78rem;">
                {{ $f['file'] ?? $f['matched_at'] ?? '—' }}
                @if(!empty($f['line'])) <span class="text-muted">:{{ $f['line'] }}</span> @endif
              </div>
              @if(!empty($f['code']))
              <code class="bg-light px-1 rounded d-block mt-1 text-truncate" style="font-size:.7rem; max-width:300px;">{{ $f['code'] }}</code>
              @endif
            </td>
            <td>
              @foreach((array)($f['owasp']??[]) as $oid)
                <span class="badge bg-secondary me-1 mb-1" style="font-size:.68rem;">{{ $oid }}</span>
              @endforeach
              @foreach((array)($f['cve_id']??[]) as $cid)
                <span class="badge bg-danger bg-opacity-75 mb-1" style="font-size:.68rem;">{{ $cid }}</span>
              @endforeach
            </td>
            <td class="text-muted"><i class="bi bi-chevron-down"></i></td>
          </tr>
          <tr class="detail-row">
            <td colspan="5" class="p-0">
              <div class="collapse" id="detail-{{ $i }}">
                <div class="bg-white border-top p-3" style="border-left:4px solid var(--bs-{{ $sevColor }});">
                  <div class="row g-3">

                    {{-- 欄1：檔案位置 + 程式碼片段 --}}
                    <div class="col-md-2">
                      <div class="fw-semibold text-muted mb-1 small"><i class="bi bi-geo-alt-fill text-danger me-1"></i>檔案位置</div>
                      <code class="text-primary d-block text-break" style="font-size:.78rem;">{{ $f['file'] ?? $f['matched_at'] ?? '—' }}</code>
                      @if(!empty($f['line']))
                        <span class="badge bg-secondary mt-1" style="font-size:.65rem;">第 {{ $f['line'] }} 行</span>
                      @endif

                      {{-- 程式碼片段 --}}
                      @if(!empty($f['code']))
                      <div class="mt-2">
                        <div class="fw-semibold text-muted mb-1 small"><i class="bi bi-code-slash text-primary me-1"></i>程式碼片段</div>
                        <pre class="bg-dark text-success p-2 rounded mb-0" style="font-size:.7rem; max-height:140px; overflow:auto; white-space:pre-wrap;">{{ $f['code'] }}</pre>
                      </div>
                      @elseif($codeScan->scanner_type === 'sonarqube' && !empty($f['file']) && !empty($f['line']))
                      <div class="mt-2">
                        <div class="fw-semibold text-muted mb-1 small"><i class="bi bi-code-slash text-primary me-1"></i>程式碼片段</div>
                        <div class="sonar-code-box" data-component="{{ $f['file'] }}" data-line="{{ $f['line'] }}" data-scan="{{ $codeScan->id }}">
                          <button class="btn btn-outline-secondary btn-sm w-100 load-code-btn" style="font-size:.75rem;">
                            <i class="bi bi-eye me-1"></i>載入程式碼（第 {{ $f['line'] }} 行）
                          </button>
                          <pre class="bg-dark text-success p-2 rounded mb-0 d-none" style="font-size:.7rem; max-height:140px; overflow:auto; white-space:pre-wrap;"></pre>
                        </div>
                      </div>
                      @endif
                    </div>

                    {{-- 欄2：問題說明 --}}
                    <div class="col-md-2">
                      <div class="fw-semibold text-muted mb-1 small"><i class="bi bi-info-circle text-info me-1"></i>問題說明</div>
                      <p class="text-muted mb-0" style="font-size:.82rem; line-height:1.6;">{{ $f['description'] ?: $f['name'] }}</p>
                    </div>

                    {{-- 欄3：解決方式 --}}
                    <div class="col-md-6">
                      <div class="fw-semibold text-success small mb-1"><i class="bi bi-tools me-1"></i>解決方式</div>
                      @php $ruleKey = $f['extra']['rule'] ?? ''; $ruleDetail = $sonarRules[$ruleKey] ?? null; @endphp
                      @if(!empty($f['remediation']))
                        <div class="p-2 bg-success bg-opacity-10 rounded border border-success border-opacity-25" style="font-size:.82rem; line-height:1.6; white-space:pre-wrap;">{{ $f['remediation'] }}</div>
                      @elseif($ruleDetail)
                        {{-- SonarQube 官方建議：直接顯示中文說明 --}}
                        @foreach($ruleDetail['sections'] as $sec)
                          @if(in_array($sec['label'], ['問題根因','修復方式']))
                            <div class="mb-1">
                              <span class="fw-semibold text-muted" style="font-size:.75rem;">{{ $sec['label'] }}</span><br>
                              @if(!empty($sec['zh']))
                                <span style="font-size:.82rem; line-height:1.6; color:#198754;">{{ $sec['zh'] }}</span>
                              @endif
                            </div>
                          @endif
                        @endforeach
                        @if($ruleDetail['effort'])
                          <div class="text-muted mt-1" style="font-size:.75rem;"><i class="bi bi-clock me-1"></i>修復耗時 {{ $ruleDetail['effort'] }}</div>
                        @endif
                      @elseif(!empty($f['extra']['fix']))
                        <div class="p-2 bg-success bg-opacity-10 rounded border border-success border-opacity-25" style="font-size:.82rem; line-height:1.6;">{{ $f['extra']['fix'] }}</div>
                      @else
                        <div class="text-muted" style="font-size:.8rem; font-style:italic;">尚無建議</div>
                      @endif
                    </div>

                    {{-- 欄4：參考資料 + 分類 --}}
                    <div class="col-md-2">
                      @php
                        // SonarQube：優先用 rule 的外部參考連結，過濾掉 localhost
                        $displayRefs = [];
                        if ($codeScan->scanner_type === 'sonarqube' && !empty($ruleDetail['references'])) {
                            $displayRefs = $ruleDetail['references'];
                        } else {
                            foreach ((array)($f['reference'] ?? []) as $ref) {
                                if (!str_contains($ref, 'localhost')) {
                                    $displayRefs[] = ['url' => $ref, 'label' => $ref];
                                }
                            }
                        }
                      @endphp
                      @if(!empty($displayRefs))
                      <div class="fw-semibold text-muted mb-1 small"><i class="bi bi-link-45deg me-1"></i>參考資料</div>
                      @foreach(array_slice($displayRefs, 0, 5) as $ref)
                        @php $refUrl = is_array($ref) ? $ref['url'] : $ref; $refLabel = is_array($ref) ? $ref['label'] : $ref; @endphp
                        <a href="{{ $refUrl }}" target="_blank" rel="noopener" class="d-block text-truncate text-primary mb-1" style="font-size:.75rem;" title="{{ $refUrl }}">{{ $refLabel }}</a>
                      @endforeach
                      @endif
                      @if(!empty($f['owasp']))
                      <div class="fw-semibold text-muted mt-2 mb-1 small"><i class="bi bi-shield-exclamation me-1"></i>OWASP</div>
                      @foreach((array)$f['owasp'] as $oid)
                        <span class="badge bg-warning text-dark me-1 mb-1">{{ $oid }}</span>
                      @endforeach
                      @endif
                      @if(!empty($f['extra']['cwe']))
                      <div class="mt-1 fw-semibold text-muted mb-1 small">CWE</div>
                      @foreach((array)$f['extra']['cwe'] as $c)
                        <span class="badge bg-secondary me-1">{{ $c }}</span>
                      @endforeach
                      @endif
                      <div class="mt-2 text-muted" style="font-size:.72rem;">
                        @if(!empty($f['extra']['cvss_score'])) <strong>CVSS：</strong>{{ $f['extra']['cvss_score'] }}<br> @endif
                        @if(!empty($f['extra']['package']))    <strong>套件：</strong>{{ $f['extra']['package'] }}@{{ $f['extra']['installed_ver']??'' }}@if(!empty($f['extra']['fixed_ver'])) → {{ $f['extra']['fixed_ver'] }}@endif<br> @endif
                        @if(!empty($f['extra']['rule_id']))    <strong>Rule：</strong>{{ $f['extra']['rule_id'] }}<br> @endif
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </td>
          </tr>
          @endforeach
          </tbody>
        </table>
      </div>

      <div class="d-flex align-items-center justify-content-between px-3 py-2 border-top bg-light" id="paginationBar">
        <div class="text-muted small" id="pageInfo">—</div>
        <nav><ul class="pagination pagination-sm mb-0" id="pagCtrl"></ul></nav>
      </div>
      @endif
    </div>
  </div>
  @endif

</div>
<div style="height:40px;"></div>
@endsection

@push('scripts')
<script>
@if(in_array($codeScan->status, ['pending','running']))
(function(){
  const logEl = document.getElementById('scan-log');
  let seen = 0;
  function poll() {
    fetch('{{ route('code-scan.log', $codeScan) }}')
      .then(r=>r.json()).then(d=>{
        if(d.lines?.length) {
          const txt = d.lines.join('\n');
          logEl.textContent = txt;
          logEl.scrollTop = logEl.scrollHeight;
          seen = d.total;
        }
        if(d.done) location.reload();
        else setTimeout(poll, 5000);
      }).catch(()=>setTimeout(poll,8000));
  }
  poll();
})();
@endif

// 篩選 + 分頁（與弱點掃描相同邏輯）
(function(){
  const allRows = Array.from(document.querySelectorAll('#findingsTable .finding-row'));
  if(!allRows.length) return;
  let curSev='all', curQ='', perPage=25, curPage=1;

  function getVisible(){
    return allRows.filter(r=>{
      return (curSev==='all'||r.dataset.sev===curSev)&&(!curQ||(r.dataset.search||'').includes(curQ));
    });
  }
  function render(){
    const vis=getVisible(); const total=vis.length;
    const pp=perPage===0?total:perPage; const pages=pp>0?Math.ceil(total/pp):1;
    curPage=Math.min(curPage,pages||1);
    const start=(curPage-1)*pp; const end=pp===0?total:start+pp;
    allRows.forEach(r=>{r.style.display='none';const d=r.nextElementSibling;if(d)d.style.display='none';});
    vis.slice(start,end).forEach(r=>{r.style.display='';const d=r.nextElementSibling;if(d)d.style.display='';});
    const info=document.getElementById('pageInfo');
    if(info) info.textContent=total>0?`第${start+1}–${Math.min(end,total)}筆，共${total}筆（總${allRows.length}筆）`:'無符合結果';
    const ctrl=document.getElementById('pagCtrl'); if(!ctrl) return;
    ctrl.innerHTML=''; if(pages<=1) return;
    function mkLi(lbl,pg,dis,act){
      const li=document.createElement('li'); li.className='page-item'+(dis?' disabled':'')+(act?' active':'');
      const a=document.createElement('a'); a.className='page-link'; a.href='#'; a.innerHTML=lbl;
      if(!dis) a.addEventListener('click',e=>{e.preventDefault();curPage=pg;render();window.scrollTo(0,0);});
      li.appendChild(a); return li;
    }
    ctrl.appendChild(mkLi('&laquo;',curPage-1,curPage===1));
    let ps=Math.max(1,curPage-3),pe=Math.min(pages,ps+6); ps=Math.max(1,pe-6);
    if(ps>1){ctrl.appendChild(mkLi('1',1,false,curPage===1));if(ps>2)ctrl.appendChild(mkLi('…',null,true));}
    for(let p=ps;p<=pe;p++) ctrl.appendChild(mkLi(p,p,false,p===curPage));
    if(pe<pages){if(pe<pages-1)ctrl.appendChild(mkLi('…',null,true));ctrl.appendChild(mkLi(pages,pages,false,curPage===pages));}
    ctrl.appendChild(mkLi('&raquo;',curPage+1,curPage===pages));
  }
  document.querySelectorAll('#sevFilters button').forEach(b=>b.addEventListener('click',function(){
    document.querySelectorAll('#sevFilters button').forEach(x=>x.classList.remove('active'));
    this.classList.add('active'); curSev=this.dataset.sev; curPage=1; render();
  }));
  const se=document.getElementById('findingSearch');
  if(se) se.addEventListener('input',function(){curQ=this.value.toLowerCase().trim();curPage=1;render();});
  const ce=document.getElementById('clearSearch');
  if(ce) ce.addEventListener('click',()=>{if(se){se.value='';curQ='';curPage=1;render();}});
  const pp=document.getElementById('perPage');
  if(pp) pp.addEventListener('change',function(){perPage=parseInt(this.value)||0;curPage=1;render();});
  render();
})();



// SonarQube 程式碼片段：自動載入
function loadCodeBox(box) {
  var btn = box.querySelector('.load-code-btn');
  var pre = box.querySelector('pre');
  if (!btn || !pre) return;
  if (btn.dataset.loaded === '1') return;
  btn.dataset.loaded = '1';
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>載入中…';

  var component = box.dataset.component;
  var line      = box.dataset.line;
  var scanId    = box.dataset.scan;

  fetch('/code-scan/' + scanId + '/source?component=' + encodeURIComponent(component) + '&line=' + line, {
    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
  })
  .then(r => r.json())
  .then(data => {
    if (data.error) { btn.innerHTML = '<i class="bi bi-x-circle me-1"></i>' + data.error; btn.dataset.loaded = '0'; return; }
    pre.innerHTML = data.lines.map(function(l) {
      var lineNum = String(l.line).padStart(4, ' ');
      var code = l.code.replace(/<[^>]+>/g, '');
      if (l.isHighlight) {
        return '<mark style="background:#ff0;color:#000;display:block;">▶ ' + lineNum + '  ' + code + '</mark>';
      }
      return '  ' + lineNum + '  ' + code;
    }).join('\n');
    pre.classList.remove('d-none');
    btn.classList.add('d-none');
  })
  .catch(function() {
    btn.disabled = false;
    btn.dataset.loaded = '0';
    btn.innerHTML = '<i class="bi bi-eye me-1"></i>載入失敗，點此重試';
  });
}

// 點按鈕手動重試
document.addEventListener('click', function(e) {
  var btn = e.target.closest('.load-code-btn');
  if (btn) loadCodeBox(btn.closest('.sonar-code-box'));
});

// finding 展開時自動載入程式碼片段
document.addEventListener('show.bs.collapse', function(e) {
  var box = e.target.querySelector('.sonar-code-box');
  if (box) loadCodeBox(box);
});
</script>

@endpush