@extends('layouts.app')
@section('title', 'GCB 政府組態基準')

@push('head')
  <style>
    .gcb-pills .nav-link {
      border-radius: 50px; padding: 7px 20px; font-size: 0.9rem;
      color: #555; border: 1px solid #dee2e6; margin-right: 6px; margin-bottom: 6px; transition: all 0.2s;
    }
    .gcb-pills .nav-link:hover { background: #f0f0f0; color: #333; }
    .gcb-pills .nav-link.active {
      background: linear-gradient(135deg, #198754, #157347);
      border-color: transparent; color: #fff; font-weight: 600;
      box-shadow: 0 3px 10px rgba(25,135,84,0.25);
    }
    .gcb-pills .nav-link .badge { font-size: 0.72rem; }
    .gcb-pills .nav-link.active .badge { background: rgba(255,255,255,0.3) !important; color: #fff !important; }

    .gcb-cat-badge { font-size: 0.72rem; border-radius: 6px; padding: 2px 6px; background: #e8f5e9; color: #2e7d32; display: inline-block; line-height: 1.4; word-break: keep-all; }
    .gcb-val-badge { font-size: 0.72rem; border-radius: 6px; padding: 2px 6px; display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
    .gcb-val-enable { background: #d4edda; color: #155724; }
    .gcb-val-disable { background: #f8d7da; color: #842029; }
    .gcb-val-other { background: #cfe2ff; color: #084298; }
    .gcb-val-ref { background: #f0f0f0; color: #6c757d; font-style: italic; }

    .gcb-item-row { cursor: pointer; }
    .gcb-item-row:hover { background: #f8f9fa; }

    .desc-col { font-size: 0.84rem; color: #666; max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .download-card { border: 2px dashed #198754; border-radius: 12px; transition: all 0.2s; }
    .download-card:hover { border-color: #0d6efd; background: #f8f9fa; }

    .report-card { border-left: 4px solid #0d6efd; }
    .compliance-bar { height: 8px; border-radius: 4px; background: #e9ecef; overflow: hidden; }
    .compliance-fill { height: 100%; border-radius: 4px; transition: width 0.5s; }

    .dark .gcb-pills .nav-link { color: #ccc; border-color: #444; }
    .dark .gcb-pills .nav-link:hover { background: #2c3035; color: #fff; }
    .dark .gcb-pills .nav-link.active { background: linear-gradient(135deg, #198754, #157347); }
    .dark .gcb-item-row:hover { background: #2a2a2a; }
    .dark .desc-col { color: #aaa; }
    .dark .gcb-cat-badge { background: #1a3a1a; color: #6ede8a; }
    .dark .download-card { border-color: #2e7d32; }
    .dark .download-card:hover { border-color: #6ea8fe; background: #1e1e1e; }

    #gcbModal .section-title { font-weight: 600; font-size: 0.9rem; color: #198754; border-left: 3px solid #198754; padding-left: 10px; margin-bottom: 8px; }
    .dark #gcbModal .modal-content { background: #1e1e1e; color: #f0f0f0; }
    .dark #gcbModal .section-title { color: #6ede8a; border-color: #6ede8a; }
    .dark #gcbModal .table th { background: #2a2a2a !important; }
  </style>
@endpush

@section('content')
  <div class="container py-3">
    {{-- 標題 --}}
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h4 class="mb-0"><i class="bi bi-clipboard-check text-success me-2"></i>GCB 政府組態基準</h4>
      <div>
        <a href="https://www.nics.nat.gov.tw/core_business/cybersecurity_defense/GCB/" target="_blank" class="btn btn-outline-secondary btn-sm">
          <i class="bi bi-box-arrow-up-right me-1"></i>NICS 官方網站
        </a>
      </div>
    </div>

    @include('partials.alert')

    {{-- ===== 下載區 ===== --}}
    <div class="row g-3 mb-4">
      <div class="col-md-4">
        <div class="card download-card h-100 text-center p-3">
          <div class="card-body">
            <i class="bi bi-ubuntu text-warning" style="font-size:2rem"></i>
            <h6 class="mt-2">Ubuntu 22.04 GCB</h6>
            <p class="small text-muted mb-2">TWGCB-01-014 v1.2 ・ {{ count($ubuntuItems) }} 項檢測</p>
            <a href="{{ route('gcb.download', 'ubuntu') }}" class="btn btn-success btn-sm">
              <i class="bi bi-file-earmark-zip me-1"></i>下載檢測工具 (ZIP)
            </a>
            <div class="small text-muted mt-1">含腳本 + 檢測定義檔</div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card download-card h-100 text-center p-3">
          <div class="card-body">
            <i class="bi bi-server text-danger" style="font-size:2rem"></i>
            <h6 class="mt-2">Apache 2.4 GCB</h6>
            <p class="small text-muted mb-2">TWGCB-04-007 v1.2 ・ {{ count($apacheItems) }} 項檢測</p>
            <a href="{{ route('gcb.download', 'apache') }}" class="btn btn-danger btn-sm">
              <i class="bi bi-file-earmark-zip me-1"></i>下載檢測工具 (ZIP)
            </a>
            <div class="small text-muted mt-1">含腳本 + 檢測定義檔</div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card download-card h-100 text-center p-3">
          <div class="card-body">
            <i class="bi bi-cloud-arrow-up text-primary" style="font-size:2rem"></i>
            <h6 class="mt-2">上傳檢測報告</h6>
            <p class="small text-muted mb-2">上傳至檢測案例檢視結果</p>
            <form action="{{ route('gcb.upload-report') }}" method="POST" enctype="multipart/form-data">
              @csrf
              <label class="small text-muted d-block mb-1 text-start" for="uploadProfileId">
                <i class="bi bi-1-circle-fill text-primary me-1"></i>先選受檢主機案例（同主機下次上傳會自動記住）
              </label>
              <select name="profile_id" id="uploadProfileId" class="form-select form-select-sm mb-2 border-primary">
                <option value="">不綁定主機</option>
                @foreach ($profiles as $pf)
                  <option value="{{ $pf->id }}">{{ $pf->name }} ({{ $pf->type === 'ubuntu' ? 'Ubuntu' : 'Apache' }})</option>
                @endforeach
              </select>
              <label class="small text-muted d-block mb-1 text-start">
                <i class="bi bi-2-circle-fill text-primary me-1"></i>再選擇報表檔案
              </label>
              <label class="btn btn-primary btn-sm">
                <i class="bi bi-upload me-1"></i>選擇 JSON 報表
                <input type="file" name="report" accept=".json" class="d-none"
                       onchange="this.form.submit()">
              </label>
            </form>
          </div>
        </div>
      </div>
    </div>

    {{-- ===== 受檢主機 ===== --}}
    <div class="card shadow-sm mb-4">
      <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <h6 class="mb-0"><i class="bi bi-pc-display text-success me-2"></i>受檢主機</h6>
        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#newProfileModal">
          <i class="bi bi-plus-lg me-1"></i>新增主機
        </button>
      </div>
      @if ($profiles->count() > 0)
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover table-sm align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th>主機名稱</th>
                  <th style="width:90px">GCB 類型</th>
                  <th style="width:100px">排除項目</th>
                  <th>說明 / IP</th>
                  <th style="width:100px">建立者</th>
                  <th style="width:240px">操作</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($profiles as $pf)
                  <tr>
                    <td class="fw-semibold"><i class="bi bi-pc-display me-1 text-muted"></i>{{ $pf->name }}</td>
                    <td><span class="badge bg-{{ $pf->type === 'ubuntu' ? 'warning' : 'danger' }}">{{ $pf->type === 'ubuntu' ? 'Ubuntu' : 'Apache' }}</span></td>
                    <td><span class="badge bg-secondary">{{ $pf->exclusions->count() }} 項排除</span></td>
                    <td class="small text-muted">{{ Str::limit($pf->description, 40) }}</td>
                    <td class="small">{{ $pf->creator->name ?? '-' }}</td>
                    <td>
                      <a href="{{ route('gcb.profile.edit', $pf) }}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-sliders"></i> 排除設定
                      </a>
                      <a href="{{ route('gcb.profile.export-exclusions', $pf) }}" class="btn btn-outline-secondary btn-sm" title="匯出排除清單給 Python 腳本使用">
                        <i class="bi bi-download"></i>
                      </a>
                      <form action="{{ route('gcb.profile.delete', $pf) }}" method="POST" class="d-inline" onsubmit="return confirm('確定刪除此主機？')">
                        @csrf @method('DELETE')
                        <button class="btn btn-outline-danger btn-sm"><i class="bi bi-trash"></i></button>
                      </form>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      @else
        <div class="card-body text-center text-muted py-3">
          <small>尚無受檢主機。新增主機後可設定 GCB 排除項目，再執行檢測腳本並上傳報表。</small>
        </div>
      @endif
    </div>

    {{-- 新增主機 Modal --}}
    <div class="modal fade" id="newProfileModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <form action="{{ route('gcb.profile.store') }}" method="POST">
            @csrf
            <div class="modal-header">
              <h5 class="modal-title"><i class="bi bi-pc-display text-success me-2"></i>新增受檢主機</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <div class="mb-3">
                <label class="form-label" for="name">主機名稱 <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" placeholder="如：Web-Server-01、DB-Server-02" required id="name">
              </div>
              <div class="mb-3">
                <label class="form-label" for="type">GCB 檢測類型 <span class="text-danger">*</span></label>
                <select name="type" class="form-select" required id="type">
                  <option value="ubuntu">Ubuntu 22.04 LTS (TWGCB-01-014) - {{ count($ubuntuItems) }} 項</option>
                  <option value="apache">Apache HTTP Server 2.4 (TWGCB-04-007) - {{ count($apacheItems) }} 項</option>
                </select>
              </div>
              <div class="mb-3">
                <label class="form-label" for="description">說明 / IP 位址</label>
                <textarea name="description" class="form-control" rows="2" placeholder="如：192.168.1.10，正式環境 Web 伺服器" id="description"></textarea>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
              <button type="submit" class="btn btn-success btn-sm"><i class="bi bi-plus-lg me-1"></i>新增主機</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    {{-- ===== 已上傳報表 ===== --}}
    @if ($reports->count() > 0)
      <div class="card shadow-sm mb-4">
        <div class="card-header bg-white">
          <h6 class="mb-0"><i class="bi bi-file-earmark-bar-graph text-primary me-2"></i>檢測報告</h6>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover table-sm align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th>報告類型</th>
                  <th>受檢主機</th>
                  <th>主機名稱</th>
                  <th>檢測時間</th>
                  <th>合規率</th>
                  <th style="width:80px">通過</th>
                  <th style="width:80px">不通過</th>
                  <th style="width:150px">操作</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($reports as $rpt)
                  @php
                    $s = $rpt->profile ? $rpt->filteredSummary() : ($rpt->summary ?? []);
                    $rate = $s['compliance_rate'] ?? 0;
                    $barColor = $rate >= 80 ? '#198754' : ($rate >= 60 ? '#fd7e14' : '#dc3545');
                  @endphp
                  <tr>
                    <td>
                      <span class="badge bg-{{ $rpt->type === 'ubuntu' ? 'warning' : 'danger' }}">
                        {{ $rpt->type === 'ubuntu' ? 'Ubuntu' : 'Apache' }}
                      </span>
                    </td>
                    <td class="small">
                      <form action="{{ route('gcb.report.rebind', $rpt) }}" method="POST" class="d-inline">
                        @csrf @method('PUT')
                        <select name="profile_id" class="form-select form-select-sm" onchange="this.form.submit()" style="min-width:120px" title="重新綁定受檢主機">
                          <option value="">不綁定主機</option>
                          @foreach ($profiles as $pf)
                            <option value="{{ $pf->id }}" {{ $rpt->profile_id == $pf->id ? 'selected' : '' }}>{{ $pf->name }}</option>
                          @endforeach
                        </select>
                      </form>
                    </td>
                    <td class="fw-semibold">{{ $rpt->hostname }}</td>
                    <td class="small text-muted">{{ $rpt->scan_time?->format('Y-m-d H:i') }}</td>
                    <td>
                      <div class="d-flex align-items-center gap-2">
                        <div class="compliance-bar flex-grow-1">
                          <div class="compliance-fill" style="width:{{ $rate }}%; background:{{ $barColor }}"></div>
                        </div>
                        <span class="small fw-bold" style="color:{{ $barColor }}">{{ $rate }}%</span>
                      </div>
                    </td>
                    <td><span class="text-success fw-bold">{{ $s['pass'] ?? 0 }}</span></td>
                    <td><span class="text-danger fw-bold">{{ $s['fail'] ?? 0 }}</span></td>
                    <td>
                      <a href="{{ route('gcb.report', $rpt) }}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-eye"></i> 檢視
                      </a>
                      <form action="{{ route('gcb.report.delete', $rpt) }}" method="POST" class="d-inline"
                            onsubmit="return confirm('確定刪除？')">
                        @csrf @method('DELETE')
                        <button class="btn btn-outline-danger btn-sm"><i class="bi bi-trash"></i></button>
                      </form>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    @endif

    {{-- ===== GCB 項目列表 ===== --}}
    <div class="card shadow-sm">
      <div class="card-header bg-white border-bottom-0 pb-0">
        <ul class="nav gcb-pills flex-wrap" id="gcbTabs" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#pane-ubuntu" type="button" role="tab">
              <i class="bi bi-ubuntu me-1"></i>Ubuntu 22.04
              <span class="badge bg-warning ms-1">{{ count($ubuntuItems) }}</span>
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pane-apache" type="button" role="tab">
              <i class="bi bi-server me-1"></i>Apache 2.4
              <span class="badge bg-danger ms-1">{{ count($apacheItems) }}</span>
            </button>
          </li>
        </ul>
      </div>

      <div class="card-body p-0">
        {{-- 搜尋 --}}
        <div class="px-3 pt-3 pb-2">
          <input type="text" class="form-control form-control-sm" id="gcbSearch" placeholder="搜尋項目 (ID、名稱、類別...)">
        </div>

        <div class="tab-content">
          {{-- Ubuntu --}}
          <div class="tab-pane fade show active" id="pane-ubuntu" role="tabpanel">
            @include('gcb._item_table', ['items' => $ubuntuItems, 'prefix' => 'ubuntu'])
          </div>

          {{-- Apache --}}
          <div class="tab-pane fade" id="pane-apache" role="tabpanel">
            @include('gcb._item_table', ['items' => $apacheItems, 'prefix' => 'apache'])
          </div>
        </div>
      </div>

      <div class="card-footer text-muted small text-end">
        資料來源：<a href="https://www.nics.nat.gov.tw/core_business/cybersecurity_defense/GCB/" target="_blank">行政院國家資通安全會報技術服務中心</a>
      </div>
    </div>
  </div>

  {{-- ===== GCB Item Detail Modal ===== --}}
  <div class="modal fade" id="gcbModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="bi bi-clipboard-check text-success me-2"></i>
            <span id="gcbModalId"></span>
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="table-responsive"><table class="table table-sm table-bordered mb-3">
            <tr><th style="width:120px">TWGCB-ID</th><td id="gcbModalFullId"></td></tr>
            <tr><th>類別</th><td id="gcbModalCategory"></td></tr>
            <tr><th>原則設定名稱</th><td id="gcbModalName" class="fw-semibold"></td></tr>
            <tr><th>GCB 設定值</th><td id="gcbModalValue"></td></tr>
          </table></div>

          <div class="mb-3">
            <div class="section-title"><i class="bi bi-info-circle me-1"></i>說明</div>
            <div id="gcbModalDesc" style="font-size:0.88rem; line-height:1.7; white-space:pre-line"></div>
          </div>

          <div class="mb-3">
            <div class="section-title"><i class="bi bi-tools me-1"></i>設定方法</div>
            <div id="gcbModalRemediation" style="font-size:0.85rem; line-height:1.7; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:14px; white-space:pre-line; font-family:monospace"></div>
          </div>

          <div class="mb-3" id="gcbModalFixSection" style="display:none">
            <div class="section-title" style="color:#fd7e14; border-color:#fd7e14"><i class="bi bi-wrench me-1"></i>修復指令</div>
            <div id="gcbModalFix" style="font-size:0.83rem; line-height:1.7; background:#fff3cd; border:1px solid #ffc107; border-radius:8px; padding:14px; white-space:pre-line; font-family:monospace; color:#664d03"></div>
          </div>

          <div>
            <div class="section-title"><i class="bi bi-terminal me-1"></i>驗證指令</div>
            <div id="gcbModalCheck" style="font-size:0.83rem; background:#1e1e1e; color:#4ade80; border-radius:8px; padding:14px; white-space:pre-wrap; font-family:'Courier New',monospace; overflow-x:auto"></div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">關閉</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    var gcbData = {
      ubuntu: @json($ubuntuItems),
      apache: @json($apacheItems)
    };
  </script>
@endsection

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 點擊項目開啟 modal
      document.querySelectorAll('.gcb-item-row').forEach(function(tr) {
        tr.addEventListener('click', function() {
          var type = tr.dataset.type;
          var idx = parseInt(tr.dataset.idx);
          var item = gcbData[type][idx];
          if (!item) return;

          document.getElementById('gcbModalId').textContent = item.name;
          document.getElementById('gcbModalFullId').textContent = item.id;
          document.getElementById('gcbModalCategory').textContent = item.category;
          document.getElementById('gcbModalName').textContent = item.name;

          var val = item.expected || '-';
          var valClass = (val === '停用') ? 'gcb-val-disable' : (val === '啟用' ? 'gcb-val-enable' : 'gcb-val-other');
          document.getElementById('gcbModalValue').innerHTML = '<span class="gcb-val-badge ' + valClass + '">' + val + '</span>';

          document.getElementById('gcbModalDesc').textContent = item.description || '-';
          document.getElementById('gcbModalRemediation').textContent = item.method || '-';

          var fixSection = document.getElementById('gcbModalFixSection');
          if (item.remediation && item.remediation !== item.method && !item.remediation.includes('請參閱')) {
            document.getElementById('gcbModalFix').textContent = item.remediation;
            fixSection.style.display = 'block';
          } else {
            fixSection.style.display = 'none';
          }

          document.getElementById('gcbModalCheck').textContent = item.check_cmd || '# 無自動化驗證指令';

          var modal = new bootstrap.Modal(document.getElementById('gcbModal'));
          modal.show();
        });
      });

      // 搜尋
      document.getElementById('gcbSearch').addEventListener('input', function() {
        var q = this.value.toLowerCase();
        document.querySelectorAll('.gcb-item-row').forEach(function(tr) {
          var text = tr.textContent.toLowerCase();
          tr.style.display = text.includes(q) ? '' : 'none';
        });
      });
    });
  </script>
@endpush