@extends('layouts.app')
@section('title', '源碼掃描')
@section('content')
<div class="container-fluid pb-5">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-code-slash me-2 text-primary"></i>源碼掃描</h4>
  </div>

  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show py-2">
      {{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  @endif

  {{-- 工具選擇卡片 --}}
  @php
    $scanners = [
      'semgrep'   => ['label'=>'Semgrep',   'color'=>'primary', 'icon'=>'bi-code-slash',     'sub'=>'Semgrep Inc.',   'desc'=>'SAST 靜態分析，偵測注入、XSS、機密洩漏，支援 30+ 語言', 'tags'=>['SAST','OWASP','多語言'], 'badge'=>'Docker',   'badge_c'=>'primary'],
      'trivy'     => ['label'=>'Trivy',     'color'=>'info',    'icon'=>'bi-boxes',           'sub'=>'Aqua Security', 'desc'=>'依賴套件 CVE 掃描，支援 composer / npm / pip / go.mod', 'tags'=>['SCA','CVE','依賴套件'],  'badge'=>'Docker',   'badge_c'=>'info'],
      'sonarqube' => ['label'=>'SonarQube', 'color'=>'warning', 'icon'=>'bi-bar-chart-line',  'sub'=>'SonarSource',   'desc'=>'業界標準程式碼品質＋安全分析，需安裝 SonarQube Server',  'tags'=>['SAST','品質','合規'],    'badge'=>\App\Services\SonarService::isConfigured()?'已設定':'需設定','badge_c'=>\App\Services\SonarService::isConfigured()?'success':'secondary'],
    ];
  @endphp

  <div class="row g-3 mb-4">
    @foreach($scanners as $key => $s)
    @php $cnt = $counts[$key] ?? null; $active = $scanner === $key; @endphp
    <div class="col-md-4">
      <div class="card h-100 shadow-sm" style="border-top:5px solid var(--bs-{{ $s['color'] }});">
        <div class="card-body pb-2">
          <div class="d-flex align-items-start justify-content-between mb-2">
            <div>
              <div class="d-flex align-items-center gap-2">
                <i class="bi {{ $s['icon'] }} text-{{ $s['color'] }} fs-5"></i>
                <span class="fw-bold">{{ $s['label'] }}</span>
                <span class="badge bg-{{ $s['badge_c'] }}" style="font-size:.6rem;">{{ $s['badge'] }}</span>
              </div>
              <div class="text-muted small mt-1" style="font-size:.72rem;">{{ $s['sub'] }}</div>
            </div>
            <div class="text-end">
              <div class="fw-bold fs-5 text-{{ $s['color'] }}">{{ $cnt['total'] ?? 0 }}</div>
              <div class="text-muted" style="font-size:.65rem;">次掃描</div>
            </div>
          </div>
          <p class="text-muted small mb-2" style="font-size:.78rem;">{{ $s['desc'] }}</p>
          <div class="mb-2">
            @foreach($s['tags'] as $tag)
              <span class="badge text-bg-light border me-1" style="font-size:.62rem;">{{ $tag }}</span>
            @endforeach
          </div>
        </div>
        <div class="card-footer bg-transparent pt-0 pb-2 px-3">
          <div class="d-flex gap-2">
            <a href="{{ route('code-scan.create', ['scanner_type' => $key]) }}"
               class="btn btn-{{ $s['color'] }} btn-sm flex-grow-1">
              <i class="bi bi-plus-lg me-1"></i>新增掃描
            </a>
            <a href="{{ route('code-scan.index', ['scanner' => $key]) }}"
               class="btn btn-outline-{{ $s['color'] }} btn-sm {{ $active ? 'active' : '' }}">
              <i class="bi bi-list-ul me-1"></i>{{ $cnt['done'] ?? 0 }} 筆
            </a>
          </div>
        </div>
      </div>
    </div>
    @endforeach
  </div>

  {{-- 掃描記錄列表 --}}
  <div class="card shadow-sm">
    <div class="card-header py-2">
      <div class="d-flex flex-wrap align-items-center gap-2">

        {{-- 標題 + 篩選標籤 --}}
        <span class="fw-semibold me-1">
          @if($scanner)
            <span class="badge bg-{{ $scanners[$scanner]['color'] ?? 'secondary' }} me-1">{{ $scanners[$scanner]['label'] ?? $scanner }}</span>
          @else
            <i class="bi bi-clock-history me-1"></i>
          @endif
          掃描記錄
        </span>

        {{-- 搜尋框 --}}
        <form method="GET" action="{{ route('code-scan.index') }}" class="d-flex gap-2 align-items-center ms-auto flex-wrap" id="searchForm">
          @if($scanner)
            <input type="hidden" name="scanner" value="{{ $scanner }}">
          @endif

          <div class="input-group input-group-sm" style="width:220px;">
            <span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
            <input type="text" name="q" class="form-control border-start-0"
                   placeholder="搜尋來源、專案、語言…"
                   value="{{ $search }}" id="searchInput">
            @if($search)
              <a href="{{ route('code-scan.index', array_filter(['scanner'=>$scanner])) }}"
                 class="btn btn-outline-secondary"><i class="bi bi-x"></i></a>
            @endif
          </div>

          <button type="submit" class="btn btn-sm btn-primary px-3">搜尋</button>

          @if($scanner)
            <a href="{{ route('code-scan.index', array_filter(['q'=>$search])) }}"
               class="btn btn-outline-secondary btn-sm">
              <i class="bi bi-x me-1"></i>清除篩選
            </a>
          @endif
        </form>

      </div>
    </div>

    <div class="card-body p-0">
      <div class="table-responsive">
        <table id="codeScanTable" class="table table-sm table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>來源</th>
              <th>工具</th>
              <th>語言</th>
              <th>共享</th>
              <th>狀態</th>
              <th class="text-center" title="Critical" style="color:#dc3545;">C</th>
              <th class="text-center" title="High"     style="color:#ea580c;">H</th>
              <th class="text-center" title="Medium"   style="color:#d97706;">M</th>
              <th class="text-center" title="Low"      style="color:#16a34a;">L</th>
              @if($isAdmin) <th>建立者</th> @endif
              <th>時間</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            @forelse($scans as $scan)
            @php $bySev = $scan->summary['by_severity'] ?? []; @endphp
            <tr>
              <td>
                @php
                  $displayName = $scan->project?->name
                      ?? $scan->source_name
                      ?? ($scan->source_type === 'upload' ? '上傳檔案' : null)
                      ?? basename(parse_url($scan->source_ref ?? '', PHP_URL_PATH) ?: '—');
                @endphp
                <a href="{{ route('code-scan.show', $scan) }}" class="text-decoration-none fw-semibold">
                  {{ $displayName }}
                </a>
                @if($scan->source_type === 'upload')
                  <div class="text-muted small" style="font-size:.68rem;">
                    <i class="bi bi-file-earmark-zip me-1"></i>上傳檔案
                  </div>
                @else
                  <div class="text-muted font-monospace" style="font-size:.68rem;">
                    {{ Str::limit(parse_url($scan->source_ref ?? '', PHP_URL_PATH) ?: ($scan->source_ref ?? ''), 55) }}
                  </div>
                @endif
                @if($scan->branch && $scan->branch !== 'main')
                  <span class="badge bg-secondary bg-opacity-50" style="font-size:.6rem;">{{ $scan->branch }}</span>
                @endif
              </td>
              <td><span class="badge bg-{{ $scan->scannerColor() }}">{{ $scan->scannerLabel() }}</span></td>
              <td><span class="text-muted small">{{ $scan->language ?? '—' }}</span></td>
              <td class="text-center">
                @php $st = $scan->share_type ?? 'private'; @endphp
                @php $canManage = $isAdmin || $scan->created_by === auth()->id(); @endphp
                @if($canManage)
                <button class="btn btn-link p-0 border-0 share-setting-btn"
                        data-id="{{ $scan->id }}"
                        data-share-type="{{ $st }}"
                        data-url="{{ route('code-scan.toggle-share', $scan) }}"
                        data-search-url="{{ route('code-scan.share-user-search') }}"
                        data-shared-users-url="{{ route('code-scan.shared-users', $scan) }}"
                        title="設定分享（點擊修改）"
                        style="font-size:1rem; line-height:1;">
                  @if($st === 'public')
                    <i class="bi bi-people-fill text-success"></i>
                  @elseif($st === 'restricted')
                    <i class="bi bi-person-check-fill text-warning"></i>
                  @else
                    <i class="bi bi-lock text-muted"></i>
                  @endif
                </button>
                @else
                {{-- 非建立者：僅顯示狀態，無法修改 --}}
                <span style="font-size:1rem;">
                  @if($st === 'public')
                    <i class="bi bi-people-fill text-success" title="全部公開"></i>
                  @elseif($st === 'restricted')
                    <i class="bi bi-person-check-fill text-warning" title="指定對象"></i>
                  @else
                    <i class="bi bi-lock text-muted" title="私人"></i>
                  @endif
                </span>
                @endif
              </td>
              <td>
                @if($scan->status==='done')
                  <span class="badge bg-success">完成</span>
                @elseif($scan->status==='running')
                  <span class="badge bg-warning text-dark">
                    <span class="spinner-border spinner-border-sm me-1" style="width:.6rem;height:.6rem;"></span>執行中
                  </span>
                @elseif($scan->status==='failed')
                  <span class="badge bg-danger">失敗</span>
                @else
                  <span class="badge bg-secondary">待執行</span>
                @endif
              </td>
              <td class="text-center fw-bold" style="color:#dc3545;">{{ ($bySev['critical']??0) ?: '·' }}</td>
              <td class="text-center fw-bold" style="color:#ea580c;">{{ ($bySev['high']??0) ?: '·' }}</td>
              <td class="text-center fw-bold" style="color:#d97706;">{{ ($bySev['medium']??0) ?: '·' }}</td>
              <td class="text-center fw-bold" style="color:#16a34a;">{{ ($bySev['low']??0) ?: '·' }}</td>
              @if($isAdmin)
              <td class="text-muted small">
                <i class="bi bi-person me-1"></i>{{ $scan->creator?->name ?? '—' }}
              </td>
              @endif
              <td class="text-muted small text-nowrap">{{ $scan->created_at->format('m-d H:i') }}</td>
              <td>
                <div class="d-flex gap-1">
                  <a href="{{ route('code-scan.show', $scan) }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-eye"></i>
                  </a>
                  @if($scan->status === 'done')
                  <button class="btn btn-sm btn-outline-primary send-report-btn"
                          data-id="{{ $scan->id }}"
                          data-url="{{ route('code-scan.send-email', $scan) }}"
                          data-name="{{ $scan->project?->name ?? basename(parse_url($scan->source_ref ?? '', PHP_URL_PATH) ?: $scan->id) }}"
                          title="寄送報告">
                    <i class="bi bi-envelope"></i>
                  </button>
                  @endif
                  <form method="POST" action="{{ route('code-scan.destroy', $scan) }}"
                        onsubmit="return confirm('確定刪除？')">
                    @csrf @method('DELETE')
                    <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                  </form>
                </div>
              </td>
            </tr>
            @empty
            <tr>
              <td colspan="10" class="text-center text-muted py-5">
                @if($search)
                  <i class="bi bi-search fs-3 d-block mb-2 opacity-25"></i>
                  找不到「{{ $search }}」的掃描記錄
                @else
                  <i class="bi bi-code-slash fs-3 d-block mb-2 opacity-25"></i>
                  尚無掃描記錄，請點選上方工具卡片開始掃描
                @endif
              </td>
            </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>

  </div>

</div>

{{-- 分享設定 Modal --}}
<div class="modal fade" id="shareSettingModal" tabindex="-1" aria-labelledby="shareSettingModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:460px;">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title fw-bold" id="shareSettingModalLabel"><i class="bi bi-share me-2"></i>分享設定</h6>
        <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body pb-2">
        {{-- 三種類型選擇 --}}
        <div class="d-flex flex-column gap-2 mb-3">
          <label class="share-type-card d-flex align-items-center gap-3 p-3 rounded border" style="cursor:pointer;" data-type="private">
            <input type="radio" name="shareType" value="private" class="form-check-input mt-0">
            <div>
              <div class="fw-semibold"><i class="bi bi-lock me-1 text-secondary"></i>私人</div>
              <div class="text-muted small">只有自己可以看</div>
            </div>
          </label>
          <label class="share-type-card d-flex align-items-center gap-3 p-3 rounded border" style="cursor:pointer;" data-type="public">
            <input type="radio" name="shareType" value="public" class="form-check-input mt-0">
            <div>
              <div class="fw-semibold"><i class="bi bi-people-fill me-1 text-success"></i>全部公開</div>
              <div class="text-muted small">所有帳號都可以看</div>
            </div>
          </label>
          <label class="share-type-card d-flex align-items-center gap-3 p-3 rounded border" style="cursor:pointer;" data-type="restricted">
            <input type="radio" name="shareType" value="restricted" class="form-check-input mt-0">
            <div>
              <div class="fw-semibold"><i class="bi bi-person-check-fill me-1 text-warning"></i>指定帳號</div>
              <div class="text-muted small">只有選定的帳號可以看</div>
            </div>
          </label>
        </div>

        {{-- 指定帳號區塊 --}}
        <div id="restrictedBlock" style="display:none;">
          <hr class="my-2">
          <div class="fw-semibold small mb-2"><i class="bi bi-search me-1"></i>搜尋帳號</div>
          <input type="text" id="userSearchInput" class="form-control form-control-sm mb-2" placeholder="輸入姓名或 Email...">
          <div id="userSearchResults" class="list-group mb-2" style="max-height:150px; overflow-y:auto;"></div>
          <div class="fw-semibold small mb-1">已選擇的帳號：</div>
          <div id="selectedUsersList" class="d-flex flex-wrap gap-1"></div>
          <input type="hidden" id="selectedUserIds" value="">
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary btn-sm" id="saveShareBtn"><i class="bi bi-check-lg me-1"></i>儲存</button>
      </div>
    </div>
  </div>
</div>

{{-- 寄送報告 Modal --}}
@include('partials.send-report-modal')

@push('scripts')
<script src="/vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="/vendor/datatables/js/dataTables.bootstrap5.min.js"></script>
<link rel="stylesheet" href="/vendor/datatables/css/dataTables.bootstrap5.min.css">
<script>
$(document).ready(function () {
  $('#codeScanTable').DataTable({
    order: [[{{ $isAdmin ? 10 : 9 }}, 'desc']],
    pageLength: 20,
    lengthMenu: [10, 20, 50, 100],
    language: { url: '/vendor/datatables/i18n/zh-HANT.json' },
    columnDefs: [{ orderable: false, targets: -1 }],
  });
});
</script>
<script>
// 寄送報告
document.addEventListener('click', function(e) {
  var btn = e.target.closest('.send-report-btn');
  if (!btn) return;
  document.getElementById('sendReportForm').action = btn.dataset.url;
  document.getElementById('sendReportName').textContent = btn.dataset.name;
  document.querySelector('#sendReportForm input[name="recipients"]').value = '';
  document.querySelector('#sendReportForm textarea[name="note"]').value = '';
  new bootstrap.Modal(document.getElementById('sendReportModal')).show();
});

document.getElementById('sendReportForm').addEventListener('submit', function() {
  var btn = document.getElementById('sendReportSubmitBtn');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>寄送中…';
});

var _shareBtn = null;
var _searchUrl = '';
var _userSearchTimer = null;
var _selectedUsers = {};

// 點擊分享設定按鈕
document.addEventListener('click', function(e) {
  var btn = e.target.closest('.share-setting-btn');
  if (!btn) return;
  _shareBtn = btn;
  _searchUrl = btn.dataset.searchUrl;
  _selectedUsers = {};

  // 設定當前類型
  var currentType = btn.dataset.shareType || 'private';
  document.querySelectorAll('input[name="shareType"]').forEach(function(r) {
    r.checked = r.value === currentType;
  });
  updateShareTypeUI(currentType);
  document.getElementById('userSearchInput').value = '';
  document.getElementById('userSearchResults').innerHTML = '';
  document.getElementById('selectedUsersList').innerHTML = '<span class="text-muted small">載入中…</span>';
  document.getElementById('selectedUserIds').value = '';

  // 若為指定帳號，先載入已選使用者
  if (currentType === 'restricted' && btn.dataset.sharedUsersUrl) {
    fetch(btn.dataset.sharedUsersUrl, { headers: { 'Accept': 'application/json' } })
      .then(r => r.json())
      .then(function(users) {
        users.forEach(function(u) {
          _selectedUsers[u.id] = { id: u.id, name: u.name, email: u.email };
        });
        renderSelectedUsers();
      });
  } else {
    document.getElementById('selectedUsersList').innerHTML = '';
  }

  new bootstrap.Modal(document.getElementById('shareSettingModal')).show();
});

// 切換類型
document.querySelectorAll('input[name="shareType"]').forEach(function(r) {
  r.addEventListener('change', function() { updateShareTypeUI(this.value); });
});

function updateShareTypeUI(type) {
  document.getElementById('restrictedBlock').style.display = type === 'restricted' ? '' : 'none';
  document.querySelectorAll('.share-type-card').forEach(function(card) {
    card.classList.toggle('border-primary', card.dataset.type === type);
    card.classList.toggle('bg-primary', card.dataset.type === type);
    card.classList.toggle('bg-opacity-10', card.dataset.type === type);
  });
}

// 搜尋帳號
document.getElementById('userSearchInput').addEventListener('input', function() {
  clearTimeout(_userSearchTimer);
  var q = this.value.trim();
  if (q.length < 1) { document.getElementById('userSearchResults').innerHTML = ''; return; }
  _userSearchTimer = setTimeout(function() {
    fetch(_searchUrl + '?q=' + encodeURIComponent(q), { headers: { 'Accept': 'application/json' } })
    .then(r => r.json())
    .then(function(users) {
      var html = '';
      users.forEach(function(u) {
        if (_selectedUsers[u.id]) return;
        html += '<button type="button" class="list-group-item list-group-item-action py-1 px-2 user-search-item" data-id="'+u.id+'" data-name="'+u.name+'" data-email="'+u.email+'" style="font-size:.82rem;">'
              + '<i class="bi bi-person me-1"></i>' + u.name + ' <span class="text-muted">(' + u.email + ')</span></button>';
      });
      document.getElementById('userSearchResults').innerHTML = html || '<div class="text-muted small p-2">找不到符合的帳號</div>';
    });
  }, 300);
});

// 選取帳號
document.getElementById('userSearchResults').addEventListener('click', function(e) {
  var item = e.target.closest('.user-search-item');
  if (!item) return;
  var id = item.dataset.id, name = item.dataset.name, email = item.dataset.email;
  _selectedUsers[id] = { id: id, name: name, email: email };
  renderSelectedUsers();
  document.getElementById('userSearchResults').innerHTML = '';
  document.getElementById('userSearchInput').value = '';
});

function renderSelectedUsers() {
  var html = '';
  Object.values(_selectedUsers).forEach(function(u) {
    html += '<span class="badge bg-secondary d-flex align-items-center gap-1" style="font-size:.78rem;">'
          + u.name + '<button type="button" class="btn-close btn-close-white ms-1 remove-user-btn" data-id="'+u.id+'" style="font-size:.5rem;"></button></span>';
  });
  document.getElementById('selectedUsersList').innerHTML = html;
  document.getElementById('selectedUserIds').value = Object.keys(_selectedUsers).join(',');
}

document.getElementById('selectedUsersList').addEventListener('click', function(e) {
  var btn = e.target.closest('.remove-user-btn');
  if (!btn) return;
  delete _selectedUsers[btn.dataset.id];
  renderSelectedUsers();
});

// 儲存
document.getElementById('saveShareBtn').addEventListener('click', function() {
  if (!_shareBtn) return;
  var type = document.querySelector('input[name="shareType"]:checked')?.value || 'private';
  var userIds = type === 'restricted'
    ? document.getElementById('selectedUserIds').value.split(',').filter(Boolean)
    : [];

  var saveBtn = this;
  saveBtn.disabled = true;
  saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>';

  fetch(_shareBtn.dataset.url, {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
    },
    body: JSON.stringify({ share_type: type, user_ids: userIds }),
  })
  .then(r => r.json())
  .then(function(data) {
    saveBtn.disabled = false;
    saveBtn.innerHTML = '<i class="bi bi-check-lg me-1"></i>儲存';
    // 更新按鈕圖示
    _shareBtn.dataset.shareType = data.share_type;
    var icon = { private: '<i class="bi bi-lock text-muted"></i>', public: '<i class="bi bi-people-fill text-success"></i>', restricted: '<i class="bi bi-person-check-fill text-warning"></i>' };
    _shareBtn.innerHTML = icon[data.share_type] || icon.private;
    bootstrap.Modal.getInstance(document.getElementById('shareSettingModal')).hide();
  })
  .catch(function() { saveBtn.disabled = false; saveBtn.innerHTML = '<i class="bi bi-check-lg me-1"></i>儲存'; });
});
</script>
@endpush

@endsection