@extends('layouts.app')
@section('title', '無障礙掃描結果')
@section('content')
<div class="container-fluid pb-5">

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

  {{-- 標題列 --}}
  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-3">
    <div>
      <h5 class="mb-1">
        <i class="bi bi-universal-access me-2 text-primary"></i>
        {{ $accessibilityScan->project?->name ?? parse_url($accessibilityScan->target_url, PHP_URL_HOST) }}
      </h5>
      <div class="text-muted small font-monospace">{{ $accessibilityScan->target_url }}</div>
    </div>
    <div class="d-flex gap-2 flex-wrap align-items-center">
      @if($accessibilityScan->status==='running')
        <button class="btn btn-sm btn-outline-secondary" onclick="window.location.reload()">
          <i class="bi bi-arrow-clockwise me-1"></i>重新整理
        </button>
      @endif
      @if($accessibilityScan->status==='done')
        <a href="{{ route('accessibility-scan.pdf', $accessibilityScan) }}"
           class="btn btn-sm btn-outline-danger" target="_blank">
          <i class="bi bi-file-earmark-pdf me-1"></i>匯出 PDF
        </a>
      @endif
      <span class="badge fs-6 bg-{{ $accessibilityScan->standard==='WCAG2AAA'?'warning':($accessibilityScan->standard==='WCAG2A'?'success':'primary') }}">
        WCAG {{ $accessibilityScan->standardLabel() }}
      </span>
      <span class="text-muted small">
        <i class="bi bi-tools me-1"></i>Pa11y + {{ $accessibilityScan->runnerLabel() }}
        &nbsp;·&nbsp;
        @if($accessibilityScan->max_pages > 1)
          <i class="bi bi-layers me-1"></i>多頁掃描（最多 {{ $accessibilityScan->max_pages }} 頁，實際掃描 {{ $accessibilityScan->pages_scanned ?? '—' }} 頁）
        @else
          <i class="bi bi-layers me-1"></i>單頁掃描
        @endif
      </span>
    </div>
  </div>

  {{-- 狀態 / 摘要卡片 --}}
  @if($accessibilityScan->status==='running' || $accessibilityScan->status==='pending')
  <div class="card shadow-sm mb-4" id="logCard">
    <div class="card-body py-3 text-center text-muted">
      <div class="spinner-border spinner-border-sm me-2 text-primary"></div> 掃描執行中，請稍候…
      <pre id="logOutput" class="text-start bg-dark text-success rounded p-2 mt-3"
           style="font-size:.75rem;max-height:200px;overflow-y:auto;"></pre>
    </div>
  </div>
  @elseif($accessibilityScan->status==='failed')
  <div class="alert alert-danger">
    <strong>掃描失敗：</strong>{{ $accessibilityScan->error_log }}
  </div>
  @else

  {{-- 摘要數字 --}}
  @php $bt = $summary['by_type'] ?? []; @endphp
  <div class="row g-3 mb-4">
    @if($accessibilityScan->runner === 'lighthouse' && isset($summary['lh_score']))
    @php
      $lhScore = $summary['lh_score'];
      $lhColor = $lhScore >= 90 ? 'success' : ($lhScore >= 50 ? 'warning' : 'danger');
    @endphp
    <div class="col-6 col-md-3">
      <div class="card text-center shadow-sm border-{{ $lhColor }}" style="border-top:3px solid;">
        <div class="card-body py-2">
          <div class="fw-bold fs-3 text-{{ $lhColor }}">{{ $lhScore }}</div>
          <div class="text-muted small">Lighthouse 分數</div>
          <div class="text-muted" style="font-size:.7rem;">/100</div>
        </div>
      </div>
    </div>
    @endif
    @foreach([
      ['label'=>'錯誤',  'key'=>'error',   'color'=>'danger',   'icon'=>'bi-x-circle-fill'],
      ['label'=>'警告',  'key'=>'warning', 'color'=>'warning',  'icon'=>'bi-exclamation-triangle-fill'],
      ['label'=>'注意',  'key'=>'notice',  'color'=>'secondary','icon'=>'bi-info-circle-fill'],
      ['label'=>'總計',  'key'=>'_total',  'color'=>'primary',  'icon'=>'bi-bar-chart-fill'],
    ] as $s)
    <div class="col-6 col-md-3">
      <div class="card text-center shadow-sm border-{{ $s['color'] }}" style="border-top:3px solid;">
        <div class="card-body py-2">
          <div class="fw-bold fs-3 text-{{ $s['color'] }}">
            {{ $s['key']==='_total' ? ($summary['total']??0) : ($bt[$s['key']]??0) }}
          </div>
          <div class="text-muted small">{{ $s['label'] }}</div>
        </div>
      </div>
    </div>
    @endforeach
  </div>

  {{-- 結果列表 --}}
  @if(count($findings)===0)
  <div class="alert alert-success">
    <i class="bi bi-check-circle-fill me-2"></i>恭喜！未發現無障礙問題。
  </div>
  @else

  {{-- 多頁：先顯示各頁摘要 --}}
  @if($accessibilityScan->max_pages > 1)
  @php
    $byPage = [];
    foreach ($findings as $f) {
      $byPage[$f['page_url'] ?? '—'][] = $f;
    }
  @endphp
  <div class="card shadow-sm mb-3">
    <div class="card-header py-2 fw-semibold">
      <i class="bi bi-file-earmark-text me-1 text-info"></i>各頁面摘要
    </div>
    <div class="table-responsive">
      <table class="table table-sm align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th>頁面網址</th>
            <th class="text-center text-danger">錯誤</th>
            <th class="text-center" style="color:#d97706;">警告</th>
            <th class="text-center text-secondary">注意</th>
            <th class="text-center">合計</th>
          </tr>
        </thead>
        <tbody>
          @foreach($byPage as $pageUrl => $pageFindings)
          @php
            $pe = count(array_filter($pageFindings, fn($f) => $f['type']==='error'));
            $pw = count(array_filter($pageFindings, fn($f) => $f['type']==='warning'));
            $pn = count(array_filter($pageFindings, fn($f) => $f['type']==='notice'));
          @endphp
          <tr>
            <td class="font-monospace" style="font-size:.78rem;">
              <a href="{{ $pageUrl }}" target="_blank" class="text-decoration-none">{{ $pageUrl }}</a>
            </td>
            <td class="text-center fw-bold text-danger">{{ $pe ?: '·' }}</td>
            <td class="text-center fw-bold" style="color:#d97706;">{{ $pw ?: '·' }}</td>
            <td class="text-center text-muted">{{ $pn ?: '·' }}</td>
            <td class="text-center text-muted">{{ count($pageFindings) }}</td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
  @endif

  {{-- 搜尋 / 篩選工具列 --}}
  <div class="card shadow-sm mb-3">
    <div class="card-body py-2 px-3">
      <div class="row g-2 align-items-center">
        <div class="col-md-5">
          <div class="input-group input-group-sm">
            <span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
            <input type="text" id="findingSearch" class="form-control border-start-0"
                   placeholder="搜尋問題說明、規則代碼、選擇器…">
            <button class="btn btn-outline-secondary" id="clearSearch"><i class="bi bi-x"></i></button>
          </div>
        </div>
        <div class="col-auto">
          <div class="btn-group btn-group-sm" role="group" id="typeFilter">
            <button type="button" class="btn btn-outline-secondary active" data-type="all">
              全部 <span class="badge bg-secondary ms-1" id="cnt-all">{{ count($findings) }}</span>
            </button>
            <button type="button" class="btn btn-outline-danger" data-type="error">
              錯誤 <span class="badge bg-danger ms-1" id="cnt-error">{{ $bt['error'] ?? 0 }}</span>
            </button>
            <button type="button" class="btn btn-outline-warning text-dark" data-type="warning">
              警告 <span class="badge bg-warning text-dark ms-1" id="cnt-warning">{{ $bt['warning'] ?? 0 }}</span>
            </button>
            <button type="button" class="btn btn-outline-secondary" data-type="notice">
              注意 <span class="badge bg-secondary ms-1" id="cnt-notice">{{ $bt['notice'] ?? 0 }}</span>
            </button>
          </div>
        </div>
        <div class="col-auto ms-auto d-flex align-items-center gap-2">
          <span class="text-muted small" id="findingCount"></span>
          <select id="perPage" class="form-select form-select-sm" style="width:90px;">
            <option value="10">10 筆</option>
            <option value="20" selected>20 筆</option>
            <option value="50">50 筆</option>
            <option value="100">100 筆</option>
            <option value="9999">全部</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  {{-- findings 資料（hidden，由 JS 渲染）--}}
  <div id="findingsData" style="display:none;">{{ json_encode($findings) }}</div>

  {{-- 結果卡片容器 --}}
  <div id="findingsList"></div>

  {{-- 分頁 --}}
  <div id="findingsPager" class="d-flex justify-content-between align-items-center mt-2 mb-4"></div>
  @endif
  @endif

</div>
@endsection

@push('scripts')
@if($accessibilityScan->status === 'done')
<script>
(function() {
  // 修改建議對照表（新舊資料皆適用）
  var REMEDIATION = {
    '1_1_1':  '為所有非文字內容（圖片、圖示）加上 alt 屬性。裝飾性圖片請使用 alt=""。',
    '1_3_1':  '使用語意化 HTML 標籤（h1~h6、table、label），避免僅靠視覺呈現資訊結構。',
    'H49':    '移除已廢棄的 HTML 標籤（<font>、<b>、<i>、<center>、align），改用 CSS 控制外觀。',
    '1_4_3':  '確保文字與背景的對比度至少 4.5:1（AA 等級），使用 WebAIM Contrast Checker 調整色彩。',
    '1_4_6':  'AAA 等級要求對比度達 7:1，請調整文字或背景顏色符合規範。',
    '2_4_1':  '在頁面頂部加入「跳至主要內容」連結（Skip Navigation），方便鍵盤使用者略過重複導覽。',
    '2_4_4':  '確保連結文字能單獨說明目的，避免「點此」、「更多」等模糊文字；可用 aria-label 補充。',
    '3_1_1':  '在 <html> 標籤加上 lang 屬性指定語言，例如 lang="zh-TW"。',
    '4_1_1':  '修正 HTML 語法：移除重複 id（同頁每個 id 必須唯一）、確保標籤正確巢狀與關閉。',
    'F77':    '修正重複的 id 屬性，每個 id 在同一頁面只能出現一次。',
    '4_1_2':  '為所有互動元素加上可存取的名稱：使用 <label>、aria-label 或 aria-labelledby。',
    'H91':    '按鈕、連結等互動元素必須有可存取的名稱，請加上 aria-label 或確保有可見文字內容。',
    'H42':    '標題標籤（h1~h6）內不應為空，請確保含有文字內容。',
    'color-contrast':      '調整文字與背景的顏色對比度，使用 WebAIM Contrast Checker 確認達到 4.5:1 以上。',
    'image-alt':           '為所有 <img> 加上有意義的 alt 屬性；裝飾性圖片請使用 alt=""。',
    'label':               '為表單控制元件加上明確的 <label> 標籤或 aria-label，確保螢幕閱讀器可讀取。',
    'button-name':         '為按鈕加上可見文字或 aria-label，讓螢幕閱讀器能識別其功能。',
    'link-name':           '為連結加上有意義的文字或 aria-label，避免僅有圖示而無文字說明。',
    'duplicate-id-active': '修正重複的 id 屬性，確保頁面中每個 id 唯一。',
    'aria-required-attr':  '依據 ARIA 角色補上必要屬性，例如 role="checkbox" 需要 aria-checked。',
    'document-title':      '為 <head> 加上有意義的 <title> 標籤，說明頁面內容。',
    'html-has-lang':       '在 <html> 標籤加上 lang 屬性，例如 lang="zh-TW"。',
    'landmark-one-main':   '確保頁面有且僅有一個 <main> 標籤作為主要內容區。',
    'heading-order':       '確保標題層次合理（h1 → h2 → h3），不可跳過層級。',
    'list':                '確保 <ul>/<ol> 的直接子元素為 <li>，避免在清單內直接放置其他元素。',
    'frame-title':         '為所有 <iframe> 加上 title 屬性說明其內容。',
    'tabindex':            '避免使用大於 0 的 tabindex 值，以免破壞鍵盤導覽順序。',
  };

  function getRemediation(f) {
    if (f.remediation) return f.remediation;
    var code = (f.code || '').toLowerCase();
    for (var key in REMEDIATION) {
      if (code.includes(key.toLowerCase())) return REMEDIATION[key];
    }
    return '請參閱 WCAG 2.x 相關成功標準（https://www.w3.org/TR/WCAG21/）查詢修正方式。';
  }

  var allFindings = JSON.parse(document.getElementById('findingsData').textContent || '[]');
  var filtered    = allFindings.slice();
  var currentPage = 1;
  var perPage     = 20;
  var activeType  = 'all';
  var searchQ     = '';
  var multiPage   = {{ $accessibilityScan->max_pages > 1 ? 'true' : 'false' }};

  var typeColor  = { error:'danger', warning:'warning', notice:'secondary' };
  var typeLabel  = { error:'錯誤', warning:'警告', notice:'注意' };

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

  function renderCard(f, idx) {
    var tc    = typeColor[f.type]  || 'secondary';
    var tl    = typeLabel[f.type]  || f.type;
    var guide = f.guideline || '—';
    var id    = 'fi-' + idx;
    var page  = (multiPage && f.page_url)
      ? '<div class="mb-1"><span class="text-muted small">來源頁面：</span><a href="'+esc(f.page_url)+'" target="_blank" class="font-monospace" style="font-size:.75rem;">'+esc(f.page_url)+'</a></div>' : '';
    var selector = f.selector
      ? '<div class="mb-1"><span class="text-muted small">選擇器：</span><code style="font-size:.75rem;">'+esc(f.selector)+'</code></div>' : '';
    var context = f.context
      ? '<div class="mb-1"><span class="text-muted small">HTML 片段：</span><pre class="bg-light rounded p-2 mt-1 mb-0" style="font-size:.75rem;white-space:pre-wrap;word-break:break-all;">'+esc(f.context)+'</pre></div>' : '';
    var rem = getRemediation(f);
    var remediation = '<div class="mt-2 p-2 rounded border-start border-4 border-primary" style="background:#f0f9ff;font-size:.82rem;color:#0369a1;">'+
      '<i class="bi bi-lightbulb-fill me-1"></i><strong>修改建議：</strong>'+esc(rem)+'</div>';

    return '<div class="card shadow-sm mb-2 finding-card">'+
      '<div class="card-header py-2 d-flex align-items-start gap-2" style="cursor:pointer;" onclick="toggleDetail(\''+id+'\')">'+
        '<span class="badge bg-'+tc+' flex-shrink-0">'+tl+'</span>'+
        '<span class="text-muted flex-shrink-0" style="font-size:.72rem;padding-top:2px;">'+esc(guide)+'</span>'+
        '<span class="flex-grow-1" style="font-size:.85rem;">'+esc(f.message)+'</span>'+
        '<i class="bi bi-chevron-down text-muted flex-shrink-0" id="ico-'+id+'"></i>'+
      '</div>'+
      '<div id="'+id+'" class="card-body py-2" style="display:none;">'+
        page+
        '<div class="mb-1"><span class="text-muted small">規則代碼：</span><code style="font-size:.75rem;">'+esc(f.code)+'</code></div>'+
        selector + context + remediation +
      '</div>'+
    '</div>';
  }

  window.toggleDetail = function(id) {
    var el  = document.getElementById(id);
    var ico = document.getElementById('ico-'+id);
    var vis = el.style.display !== 'none';
    el.style.display  = vis ? 'none' : '';
    if (ico) ico.className = 'bi bi-chevron-' + (vis ? 'down' : 'up') + ' text-muted flex-shrink-0';
  };

  function applyFilter() {
    filtered = allFindings.filter(function(f) {
      if (activeType !== 'all' && f.type !== activeType) return false;
      if (searchQ) {
        var hay = ((f.message||'') + ' ' + (f.code||'') + ' ' + (f.selector||'') + ' ' + (f.page_url||'')).toLowerCase();
        if (!hay.includes(searchQ)) return false;
      }
      return true;
    });
    currentPage = 1;
    render();
  }

  function render() {
    var total  = filtered.length;
    var pages  = Math.max(1, Math.ceil(total / perPage));
    if (currentPage > pages) currentPage = pages;
    var start  = (currentPage - 1) * perPage;
    var slice  = filtered.slice(start, start + perPage);

    var html = '';
    if (slice.length === 0) {
      html = '<div class="text-center text-muted py-5"><i class="bi bi-search fs-3 d-block mb-2 opacity-25"></i>沒有符合的結果</div>';
    } else {
      slice.forEach(function(f, i) { html += renderCard(f, start + i); });
    }
    document.getElementById('findingsList').innerHTML = html;

    // 計數
    document.getElementById('findingCount').textContent = '顯示 '+(total>0?start+1:0)+'–'+Math.min(start+perPage,total)+' / 共 '+total+' 筆';

    // 分頁
    var pagerHtml = '';
    if (pages > 1) {
      pagerHtml += '<span class="text-muted small">第 '+currentPage+' / '+pages+' 頁</span>';
      pagerHtml += '<div class="d-flex gap-1">';
      pagerHtml += '<button class="btn btn-sm btn-outline-secondary" onclick="goPage('+(currentPage-1)+')" '+(currentPage<=1?'disabled':'')+'>&#8249;</button>';
      var from = Math.max(1, currentPage-2), to = Math.min(pages, currentPage+2);
      for (var p = from; p <= to; p++) {
        pagerHtml += '<button class="btn btn-sm '+(p===currentPage?'btn-primary':'btn-outline-secondary')+'" onclick="goPage('+p+')">'+p+'</button>';
      }
      pagerHtml += '<button class="btn btn-sm btn-outline-secondary" onclick="goPage('+(currentPage+1)+')" '+(currentPage>=pages?'disabled':'')+'>&#8250;</button>';
      pagerHtml += '</div>';
    }
    document.getElementById('findingsPager').innerHTML = pagerHtml;
  }

  window.goPage = function(p) {
    var pages = Math.max(1, Math.ceil(filtered.length / perPage));
    currentPage = Math.max(1, Math.min(pages, p));
    render();
    document.getElementById('findingsList').scrollIntoView({ behavior:'smooth', block:'start' });
  };

  // 搜尋
  var searchTimer;
  document.getElementById('findingSearch').addEventListener('input', function() {
    clearTimeout(searchTimer);
    var v = this.value;
    searchTimer = setTimeout(function() { searchQ = v.trim().toLowerCase(); applyFilter(); }, 250);
  });
  document.getElementById('clearSearch').addEventListener('click', function() {
    document.getElementById('findingSearch').value = '';
    searchQ = '';
    applyFilter();
  });

  // 型別篩選
  document.getElementById('typeFilter').addEventListener('click', function(e) {
    var btn = e.target.closest('[data-type]');
    if (!btn) return;
    activeType = btn.dataset.type;
    document.querySelectorAll('#typeFilter button').forEach(function(b) {
      b.classList.toggle('active', b === btn);
    });
    applyFilter();
  });

  // 每頁筆數
  document.getElementById('perPage').addEventListener('change', function() {
    perPage = parseInt(this.value) || 20;
    currentPage = 1;
    render();
  });

  applyFilter();
})();
</script>
@endif

@if(in_array($accessibilityScan->status, ['running','pending']))
<script>
(function poll() {
  setTimeout(function() {
    fetch('{{ route("accessibility-scan.log", $accessibilityScan) }}')
      .then(r => r.json())
      .then(function(d) {
        var pre = document.getElementById('logOutput');
        if (pre) pre.textContent = d.log;
        if (d.status === 'done' || d.status === 'failed') {
          window.location.reload();
        } else {
          poll();
        }
      }).catch(poll);
  }, 3000);
})();
</script>
@endif
@endpush