@extends('layouts.app')

@section('title', '檢視程式碼審查報告')

@push('styles')
  <style>
    /* ===== 表格外層：防止超出頁面 ===== */
    .ai-report { overflow-x: hidden; }
    .ai-report .table-wrapper {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 1.5rem;
    }

    /* ===== AI 報告表格 ===== */
    .ai-report table {
      width: 100%;
      max-width: 100%;
      border-collapse: collapse;
      margin-bottom: 1.5rem;
      font-size: 0.85rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
      border-radius: 8px;
      overflow: hidden;
      table-layout: fixed;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    .ai-report table thead th {
      background: linear-gradient(135deg, #3b4a6b 0%, #2c3e50 100%);
      color: #fff;
      font-weight: 600;
      padding: 10px 12px;
      border: 1px solid #34495e;
      text-align: left;
      font-size: 0.82rem;
      letter-spacing: 0.3px;
      word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: normal;
    }
    .ai-report table tbody td {
      padding: 9px 12px;
      border: 1px solid #ddd;
      vertical-align: top;
      line-height: 1.5;
      word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: normal;
    }
    .ai-report table tbody tr:nth-child(odd)  { background-color: #fff; }
    .ai-report table tbody tr:nth-child(even) { background-color: #f4f6f9; }
    .ai-report table tbody tr:hover           { background-color: #e8f0fe; }
    .ai-report table thead th:first-child,
    .ai-report table tbody td:first-child {
      min-width: 160px;
      word-break: break-word;
    }
    .ai-report table td strong {
      display: inline-block;
      background: #e8edf3; color: #2c3e50;
      padding: 2px 8px; border-radius: 4px;
      font-size: 0.82em; margin-bottom: 4px;
      font-family: 'Consolas', 'Fira Code', monospace;
    }
    .ai-report table code { word-break: break-all; white-space: normal; font-size: 0.8em; }

    /* ===== 標題階層 ===== */
    .ai-report h1 {
      font-size: 1.5rem; font-weight: 800; color: #1a1a2e;
      margin-top: 2rem; margin-bottom: 1rem;
      padding-bottom: 0.5rem; border-bottom: 3px solid #0d6efd;
    }
    .ai-report h2 {
      font-size: 1.25rem; font-weight: 700; color: #1a1a2e;
      border-left: 5px solid #0d6efd; padding-left: 14px;
      margin-top: 2.5rem; margin-bottom: 1rem;
      background: linear-gradient(90deg, #f0f4ff 0%, transparent 100%);
      padding-top: 8px; padding-bottom: 8px;
      border-radius: 0 6px 6px 0;
    }
    .ai-report h3 {
      font-size: 1.05rem; font-weight: 600; color: #2c3e50;
      margin-top: 1.8rem; margin-bottom: 0.75rem;
      padding-left: 10px; border-left: 3px solid #6c757d;
    }
    .ai-report h4 { font-size: 0.95rem; font-weight: 600; color: #495057; margin-top: 1.2rem; }

    /* ===== 內容排版 ===== */
    .ai-report p  { margin-bottom: 0.6rem; line-height: 1.7; }
    .ai-report ul, .ai-report ol { padding-left: 1.5rem; margin-bottom: 1rem; }
    .ai-report li { margin-bottom: 0.4rem; line-height: 1.6; }
    .ai-report li strong { color: #2c3e50; }
    .ai-report strong { color: #1a1a2e; }

    /* ===== 程式碼 ===== */
    .ai-report code {
      background: #e9ecef; padding: 2px 7px; border-radius: 4px;
      font-size: 0.84em; color: #c7254e;
      font-family: 'Fira Code', 'Consolas', monospace;
    }
    .ai-report pre {
      background: #1e1e2e; color: #cdd6f4;
      padding: 1rem 1.2rem; border-radius: 8px;
      overflow-x: auto; font-size: 0.83rem; line-height: 1.5;
      border: 1px solid #313244; margin: 1rem 0;
    }
    .ai-report pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

    /* ===== 引用 / 分隔線 ===== */
    .ai-report blockquote {
      border-left: 4px solid #ffc107; padding: 0.75rem 1rem;
      margin: 1rem 0; background: #fff8e1; color: #5d4e37;
      border-radius: 0 8px 8px 0; font-size: 0.9rem;
    }
    .ai-report hr {
      border: none; height: 2px;
      background: linear-gradient(90deg, #dee2e6, #adb5bd, #dee2e6);
      margin: 2.5rem 0; border-radius: 2px;
    }

    /* ===== 卡片色系對應 ===== */
    .border-info    .ai-report h2 { border-left-color: #0dcaf0; background: linear-gradient(90deg,#e8f8fd 0%,transparent 100%); }
    .border-primary .ai-report h2 { border-left-color: #0d6efd; background: linear-gradient(90deg,#f0f4ff 0%,transparent 100%); }
    .border-success .ai-report h2 { border-left-color: #198754; background: linear-gradient(90deg,#e8f5e9 0%,transparent 100%); }

    /* ===== 頁籤外框卡片 ===== */
    .report-tab-card {
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0,0,0,0.10);
      border: 1px solid #e0e4ea;
    }

    /* 頁籤列背景 */
    .report-tab-header {
      background: linear-gradient(135deg, #1e293b 0%, #2d3748 100%);
      padding: 14px 16px 0 16px;
      display: flex;
      gap: 6px;
      align-items: flex-end;
    }

    .report-tabs {
      border-bottom: none;
      gap: 6px;
      flex-wrap: nowrap;
    }
    .report-tabs .nav-item { margin-bottom: 0; }

    .report-tabs .nav-link {
      font-weight: 600;
      font-size: 0.87rem;
      border: none;
      border-radius: 10px 10px 0 0;
      padding: 10px 18px 12px;
      color: rgba(255,255,255,0.65);
      background: rgba(255,255,255,0.08);
      transition: background 0.18s, color 0.18s, transform 0.12s;
      letter-spacing: 0.2px;
      position: relative;
      white-space: nowrap;
    }
    .report-tabs .nav-link:hover {
      color: rgba(255,255,255,0.9);
      background: rgba(255,255,255,0.15);
      transform: translateY(-2px);
    }
    .report-tabs .nav-link.active {
      color: #fff;
      transform: translateY(0);
    }

    /* 各頁籤 active 配色 */
    #tab-spec-btn.active      { background: #6c757d; box-shadow: 0 -2px 8px rgba(108,117,125,0.4); }
    #tab-code-btn.active      { background: #0891b2; box-shadow: 0 -2px 8px rgba(8,145,178,0.4); }
    #tab-review-btn.active    { background: #2563eb; box-shadow: 0 -2px 8px rgba(37,99,235,0.4); }
    #tab-checklist-btn.active { background: #16a34a; box-shadow: 0 -2px 8px rgba(22,163,74,0.4); }

    /* active 底部蓋住邊框 */
    .report-tabs .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -1px; left: 0; right: 0;
      height: 3px;
      background: inherit;
    }

    .report-tabs .nav-link .badge {
      font-size: 0.63em;
      vertical-align: middle;
      background: rgba(255,255,255,0.25) !important;
      color: #fff !important;
      border: 1px solid rgba(255,255,255,0.35);
      font-weight: 600;
    }

    /* 內容區 */
    .tab-content-box {
      background: #fff;
      padding: 2rem 2.25rem;
    }

    @media (max-width: 768px) {
      .report-tab-header { padding: 10px 10px 0; gap: 3px; overflow-x: auto; }
      .report-tabs { flex-wrap: nowrap; }
      .tab-content-box { padding: 1.25rem 1rem; }
      .report-tabs .nav-link { padding: 8px 12px 10px; font-size: 0.8rem; }
    }

    /* GitLab 輸入 */
    #gitlab-section input { font-size: 0.9rem; }

    /* ===== 規格比對：目錄 + 內容 雙欄 ===== */
    .review-layout {
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
    }

    /* 左側目錄 */
    /* ===== 目錄容器 ===== */
    .review-toc {
      flex: 0 0 250px;
      min-width: 230px;
      position: sticky;
      top: 72px;
      max-height: calc(100vh - 100px);
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #c7d2fe #f8faff;
    }
    .review-toc::-webkit-scrollbar       { width: 4px; }
    .review-toc::-webkit-scrollbar-track { background: #f8faff; }
    .review-toc::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 4px; }

    /* 目錄卡片框 */
    .review-toc-inner {
      background: #fff;
      border: 1px solid #dde3f0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 16px rgba(30,58,138,0.07);
    }

    /* 目錄標題列 */
    .review-toc-title {
      background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
      color: #fff;
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      padding: 13px 16px;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .review-toc-title .toc-toggle-icon {
      margin-left: auto;
      font-size: 0.7rem;
      opacity: 0.8;
      transition: transform 0.2s;
    }

    /* 目錄 ol 容器 */
    ol#toc-nav {
      list-style: none;
      margin: 0;
      padding: 6px 0 10px;
    }

    /* 每個 li：天生 block，永遠各自一行 */
    ol#toc-nav li {
      border-top: 1px solid #f1f5f9;
    }
    ol#toc-nav li:first-child { border-top: none; }

    /* li 內的連結：block 撐滿整列 */
    ol#toc-nav li a {
      display: block;
      padding: 11px 14px 11px 16px;
      font-size: 0.84rem;
      font-weight: 500;
      color: #334155;
      text-decoration: none;
      border-left: 3px solid transparent;
      transition: background 0.15s, border-left-color 0.15s, color 0.15s;
      line-height: 1.6;
      white-space: normal;
      word-break: break-word;
    }

    /* 序號圓圈 */
    ol#toc-nav li a .toc-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #e0e7ff;
      color: #3730a3;
      font-size: 0.68rem;
      font-weight: 800;
      margin-right: 8px;
      vertical-align: middle;
      transition: background 0.15s, color 0.15s;
    }

    /* hover */
    ol#toc-nav li a:hover {
      background: #eff6ff;
      color: #1d4ed8;
      border-left-color: #93c5fd;
    }
    ol#toc-nav li a:hover .toc-num { background: #c7d2fe; color: #1e40af; }

    /* active */
    ol#toc-nav li a.toc-active {
      background: #dbeafe;
      color: #1d4ed8;
      font-weight: 700;
      border-left-color: #2563eb;
    }
    ol#toc-nav li a.toc-active .toc-num { background: #2563eb; color: #fff; }

    /* 右側內容 */
    .review-content { flex: 1; min-width: 0; }

    /* 手機：折疊 */
    @media (max-width: 900px) {
      .review-layout    { flex-direction: column; }
      .review-toc       { flex: none; width: 100%; position: static; max-height: none; }
      ol#toc-nav        { display: none !important; }
      .review-toc-inner { border-radius: 10px; }
      .review-toc-title { cursor: pointer; user-select: none; }
      .review-toc.toc-open #toc-nav       { display: block; }
      .review-toc.toc-open .toc-toggle-icon { transform: rotate(180deg); }
    }
  </style>
@endpush

@section('content')
  <div class="container py-4">

    <h1 class="mb-1">{{ $report->title }}</h1>
    <p class="text-muted mb-4">
      {{ $report->client?->name ?? '未分類' }} ／ {{ $report->project->name }}
      <span class="ms-2 text-secondary" style="font-size:0.85rem;">{{ $report->created_at->format('Y-m-d H:i') }}</span>
    </p>

    {{-- ===== 頁籤卡片 ===== --}}
    <div class="report-tab-card mb-4">
    <div class="report-tab-header">
    <ul class="nav report-tabs" id="reportTabs" role="tablist">

      {{-- Tab 1: 規格 --}}
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tab-spec-btn"
                data-bs-toggle="tab" data-bs-target="#tab-spec" type="button" role="tab">
          <i class="bi bi-file-text me-1"></i>功能規格
        </button>
      </li>

      {{-- Tab 2: 程式碼 --}}
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-code-btn"
                data-bs-toggle="tab" data-bs-target="#tab-code" type="button" role="tab">
          <i class="bi bi-code-slash me-1"></i>程式碼
          @if($report->code_scan_result)
            <span class="badge bg-info text-dark ms-1">已掃描</span>
          @elseif($report->code_content)
            <span class="badge bg-secondary ms-1">已上傳</span>
          @endif
        </button>
      </li>

      {{-- Tab 3: 規格比對結果 --}}
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-review-btn"
                data-bs-toggle="tab" data-bs-target="#tab-review" type="button" role="tab">
          <i class="bi bi-shield-check me-1"></i>規格比對結果
          @if($report->ai_code_review)
            <span class="badge bg-primary ms-1">完成</span>
          @endif
        </button>
      </li>

      {{-- Tab 4: 測試清單 --}}
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-checklist-btn"
                data-bs-toggle="tab" data-bs-target="#tab-checklist" type="button" role="tab">
          <i class="bi bi-list-check me-1"></i>測試清單
          @if($report->test_checklist)
            <span class="badge bg-success ms-1">已產生</span>
          @endif
        </button>
      </li>

    </ul>

    </div>{{-- /report-tab-header --}}

    <div class="tab-content-box">
      <div class="tab-content">

        {{-- ================================================================ --}}
        {{-- Tab 1: 功能規格                                                   --}}
        {{-- ================================================================ --}}
        <div class="tab-pane fade show active" id="tab-spec" role="tabpanel">
          @php
            $isPdf = !empty($report->file_path) && str_ends_with(strtolower($report->file_path), '.pdf');
          @endphp

          @if($isPdf || $report->content)
            <div class="d-flex justify-content-between align-items-start mb-3">
              <h5 class="mb-0"><i class="bi bi-file-text me-2 text-secondary"></i>功能規格內容</h5>
              <a href="{{ route('test-reports.edit', $report) }}" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-pencil me-1"></i>編輯
              </a>
            </div>

            {{-- PDF 內嵌預覽 --}}
            @if($isPdf)
              <div class="mb-3">
                <div class="d-flex align-items-center gap-2 mb-2">
                  <i class="bi bi-file-earmark-pdf text-danger fs-5"></i>
                  <span class="fw-semibold">上傳的規格 PDF</span>
                  <a href="{{ asset('storage/' . $report->file_path) }}" target="_blank" class="btn btn-sm btn-outline-danger ms-auto">
                    <i class="bi bi-download me-1"></i>下載 PDF
                  </a>
                </div>
                <iframe src="{{ asset('storage/' . $report->file_path) }}"
                  style="width:100%; height:600px; border:1px solid #dee2e6; border-radius:0.375rem;"
                  type="application/pdf">
                  <p>您的瀏覽器不支援內嵌 PDF，請
                    <a href="{{ asset('storage/' . $report->file_path) }}" target="_blank">點此下載</a>。
                  </p>
                </iframe>
              </div>
            @endif

            {{-- 萃取的文字內容 --}}
            @if($report->content)
              <div class="border rounded p-3 bg-light" style="white-space: pre-wrap; font-size: 0.95rem; line-height: 1.8;">{{ $report->content }}</div>
            @endif

          @else
            <div class="text-center py-5 text-muted">
              <i class="bi bi-file-earmark-text display-4 opacity-50"></i>
              <p class="mt-3">尚未填寫功能規格</p>
              <a href="{{ route('test-reports.edit', $report) }}" class="btn btn-outline-primary">
                <i class="bi bi-pencil me-1"></i>填寫規格
              </a>
            </div>
          @endif
        </div>

        {{-- ================================================================ --}}
        {{-- Tab 2: 程式碼（上傳 + Step 1 掃描）                               --}}
        {{-- ================================================================ --}}
        <div class="tab-pane fade" id="tab-code" role="tabpanel">

          {{-- 程式碼來源 --}}
          <div class="card shadow-sm mb-4 border-dark">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
              <h5 class="mb-0"><i class="bi bi-file-code me-2"></i>程式碼來源</h5>
              <div class="btn-group btn-group-sm" role="group">
                <input type="radio" class="btn-check" name="upload-mode" id="mode-file" autocomplete="off" checked>
                <label class="btn btn-outline-light" for="mode-file">
                  <i class="bi bi-upload me-1"></i>上傳檔案
                </label>
                <input type="radio" class="btn-check" name="upload-mode" id="mode-gitlab" autocomplete="off">
                <label class="btn btn-outline-light" for="mode-gitlab">
                  <i class="bi bi-git me-1"></i>GitLab / Git
                </label>
              </div>
            </div>

            @if(!empty($report->code_file_paths))
              <ul class="list-group list-group-flush">
                @foreach($report->code_file_paths as $cf)
                  <li class="list-group-item py-2">
                    @if(str_starts_with($cf, '[GitLab]') || str_starts_with($cf, '[Git]'))
                      <i class="bi bi-git me-1 text-warning"></i>{{ $cf }}
                    @else
                      <i class="bi bi-file-earmark-code me-1 text-success"></i>{{ basename($cf) }}
                    @endif
                  </li>
                @endforeach
              </ul>
              @if($report->code_content)
                <div class="d-none" id="code-block">
                  <div class="card-body pt-0">
                    <pre class="bg-dark text-light p-3 rounded overflow-auto" style="max-height:500px;font-size:0.8rem;"><code>{{ Str::limit($report->code_content, 50000) }}</code></pre>
                  </div>
                </div>
              @endif
            @endif

            <div class="card-body">
              @if(!empty($report->code_file_paths))
                <div class="d-flex justify-content-between align-items-center mb-3">
                  <span class="text-muted">
                    @if(count($report->code_file_paths) === 1 && (str_starts_with($report->code_file_paths[0], '[GitLab]') || str_starts_with($report->code_file_paths[0], '[Git]')))
                      已從 Git 倉庫匯入程式碼
                    @else
                      已上傳 {{ count($report->code_file_paths) }} 個檔案
                    @endif
                  </span>
                  @if($report->code_content)
                    <button class="btn btn-sm btn-outline-secondary" onclick="document.getElementById('code-block').classList.toggle('d-none')">
                      <i class="bi bi-code-slash me-1"></i>檢視原始碼
                    </button>
                  @endif
                </div>
                <p class="text-muted mb-3"><small>重新上傳或匯入將取代現有程式碼，並清除掃描與比對結果</small></p>
              @else
                <p class="text-muted mb-3">尚未上傳程式碼，請選擇來源後上傳</p>
              @endif

              {{-- 上傳檔案 --}}
              <div id="file-upload-section">
                <form id="upload-code-form" enctype="multipart/form-data">
                  @csrf
                  <div class="d-flex align-items-center gap-2">
                    <input type="file" name="code_files[]" id="code_files_upload" multiple class="form-control"
                      accept=".pdf,.php,.js,.ts,.py,.java,.vue,.css,.html,.blade.php,.zip,.jsx,.tsx,.go,.rb,.cs,.cpp,.c,.h,.swift,.kt,.rs,.sql,.sh,.yml,.yaml,.json,.xml">
                    <button type="submit" class="btn btn-dark flex-shrink-0" id="upload-code-btn">
                      <i class="bi bi-upload me-1"></i>上傳
                    </button>
                  </div>
                </form>
                <div id="upload-loading" style="display:none;" class="mt-2">
                  <div class="spinner-border spinner-border-sm" role="status"></div>
                  <span class="text-muted ms-1">正在上傳並讀取程式碼…</span>
                </div>
              </div>

              {{-- GitLab --}}
              <div id="gitlab-section" style="display:none;">
                <div class="row g-2">
                  <div class="col-12">
                    <label class="form-label fw-semibold mb-1">倉庫 URL</label>
                    <input type="text" id="gitlab-url" class="form-control"
                      placeholder="https://gitlab.com/yourgroup/yourrepo 或 http://your-gitlab/group/repo">
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-semibold mb-1">Access Token <small class="text-muted fw-normal">（私有倉庫需填）</small></label>
                    <input type="password" id="gitlab-token" class="form-control" placeholder="glpat-xxxxxxxxxxxxxxxxxxxx">
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-semibold mb-1">分支 / Tag <small class="text-muted fw-normal">（預設 main）</small></label>
                    <input type="text" id="gitlab-branch" class="form-control" placeholder="main">
                  </div>
                  <div class="col-12">
                    <button type="button" class="btn btn-warning" id="clone-gitlab-btn">
                      <i class="bi bi-cloud-download me-1"></i>下載並分析程式碼
                    </button>
                  </div>
                </div>
                <div id="gitlab-loading" style="display:none;" class="mt-2">
                  <div class="spinner-border spinner-border-sm text-warning" role="status"></div>
                  <span class="text-muted ms-1">正在從 Git 倉庫下載並讀取程式碼，請稍候…</span>
                </div>
              </div>
            </div>
          </div>

          {{-- Step 1: AI 初步掃描 --}}
          @if($report->code_content)
            @if($report->code_scan_result)
              @php
                $scanConverter = new \League\CommonMark\GithubFlavoredMarkdownConverter(['html_input'=>'escape','allow_unsafe_links'=>false]);
              @endphp
              <div class="card shadow-sm mb-0 border-info">
                <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
                  <h5 class="mb-0"><i class="bi bi-search me-2"></i>AI 程式碼掃描結果</h5>
                  <div>
                    <button class="btn btn-sm btn-outline-light scan-code-btn" data-id="{{ $report->id }}">
                      <i class="bi bi-arrow-clockwise me-1"></i>重新掃描
                    </button>
                    <span class="badge bg-white text-info ms-2">掃描完成</span>
                  </div>
                </div>
                <div id="scan-loading" style="display:none;" class="text-center py-3">
                  <div class="spinner-border text-info" role="status"></div>
                  <p class="mt-2 text-muted">正在重新掃描中…</p>
                </div>
                <div class="card-body ai-report">
                  {!! $scanConverter->convertToHtml($report->code_scan_result) !!}
                </div>
              </div>
            @else
              <div class="card shadow-sm mb-0 border-info">
                <div class="card-header bg-info text-white">
                  <h5 class="mb-0"><i class="bi bi-search me-2"></i>AI 程式碼掃描</h5>
                </div>
                <div class="card-body text-center py-4">
                  <p class="text-muted mb-3">點擊下方按鈕讓 AI 辨識程式碼中有哪些功能、資安問題與邏輯 Bug</p>
                  <div id="scan-loading" style="display:none;" class="mb-3">
                    <div class="spinner-border text-info" role="status"></div>
                    <p class="mt-2 text-muted">正在掃描程式碼，辨識功能模組中…</p>
                  </div>
                  <button class="btn btn-info btn-lg text-white scan-code-btn" data-id="{{ $report->id }}">
                    <i class="bi bi-search me-1"></i>掃描程式碼功能
                  </button>
                </div>
              </div>
            @endif
          @else
            <div class="alert alert-secondary mb-0">
              <i class="bi bi-info-circle me-1"></i>請先上傳程式碼，才能進行 AI 掃描
            </div>
          @endif

        </div>{{-- /tab-code --}}

        {{-- ================================================================ --}}
        {{-- Tab 3: 規格比對結果                                               --}}
        {{-- ================================================================ --}}
        <div class="tab-pane fade" id="tab-review" role="tabpanel">

          @if($report->ai_code_review)
            @php
              $reviewConverter = new \League\CommonMark\GithubFlavoredMarkdownConverter(['html_input'=>'escape','allow_unsafe_links'=>false]);
            @endphp

            {{-- 工具列 --}}
            <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
              <h5 class="mb-0"><i class="bi bi-shield-check me-2 text-primary"></i>AI 規格比對檢查報告</h5>
              <div class="d-flex gap-1 flex-wrap align-items-center">
                <button class="btn btn-sm btn-outline-primary generate-code-review-btn" data-id="{{ $report->id }}">
                  <i class="bi bi-arrow-clockwise me-1"></i>重新檢查
                </button>
                <a href="{{ route('test-reports.export-code-review', $report) }}" class="btn btn-sm btn-outline-danger">
                  <i class="bi bi-file-pdf me-1"></i>PDF
                </a>
                <a href="{{ route('test-reports.export-code-review-docx', $report) }}" class="btn btn-sm btn-outline-secondary">
                  <i class="bi bi-file-word me-1"></i>DOCX
                </a>
                <span class="badge bg-primary ms-1">檢查完成</span>
              </div>
            </div>

            <div id="code-review-loading" style="display:none;" class="text-center py-3">
              <div class="spinner-border text-primary" role="status"></div>
              <p class="mt-2 text-muted">正在重新檢查中…</p>
            </div>

            {{-- 目錄 + 內容 雙欄佈局 --}}
            <div class="review-layout">

              {{-- 左側：目錄 --}}
              <aside class="review-toc" id="review-toc">
                <div class="review-toc-inner">
                  <div class="review-toc-title">
                    <i class="bi bi-list-ul"></i>
                    <span>目錄</span>
                    <i class="bi bi-chevron-down toc-toggle-icon ms-auto"></i>
                  </div>
                  <ol id="toc-nav">
                    {{-- 由 JS 動態產生 --}}
                  </ol>
                </div>
              </aside>

              {{-- 右側：報告內容 --}}
              <div class="review-content ai-report" id="review-content">
                {!! $reviewConverter->convertToHtml($report->ai_code_review) !!}
              </div>

            </div>{{-- /review-layout --}}

          @elseif($report->code_scan_result && $report->content)
            <div class="text-center py-5">
              <i class="bi bi-shield-check display-4 text-primary opacity-50"></i>
              <p class="text-muted mt-3 mb-4">程式碼已掃描完成，點擊下方讓 AI 逐項比對規格與程式碼</p>
              <div id="code-review-loading" style="display:none;" class="mb-3">
                <div class="spinner-border text-primary" role="status"></div>
                <p class="mt-2 text-muted">正在逐項比對規格與程式碼…</p>
              </div>
              <button class="btn btn-primary btn-lg generate-code-review-btn" data-id="{{ $report->id }}">
                <i class="bi bi-shield-check me-1"></i>開始規格比對檢查
              </button>
            </div>

          @elseif(!$report->code_content)
            <div class="text-center py-5 text-muted">
              <i class="bi bi-code-slash display-4 opacity-50"></i>
              <p class="mt-3">請先在「程式碼」頁籤上傳程式碼並完成掃描</p>
              <button class="btn btn-outline-secondary"
                onclick="document.getElementById('tab-code-btn').click()">
                <i class="bi bi-arrow-left me-1"></i>前往上傳程式碼
              </button>
            </div>

          @elseif(!$report->code_scan_result)
            <div class="text-center py-5 text-muted">
              <i class="bi bi-search display-4 opacity-50"></i>
              <p class="mt-3">請先在「程式碼」頁籤完成 AI 掃描，再執行規格比對</p>
              <button class="btn btn-outline-secondary"
                onclick="document.getElementById('tab-code-btn').click()">
                <i class="bi bi-arrow-left me-1"></i>前往掃描程式碼
              </button>
            </div>

          @else
            <div class="text-center py-5 text-muted">
              <i class="bi bi-file-text display-4 opacity-50"></i>
              <p class="mt-3">請先填寫功能規格，才能進行比對</p>
              <button class="btn btn-outline-secondary"
                onclick="document.getElementById('tab-spec-btn').click()">
                <i class="bi bi-arrow-left me-1"></i>前往填寫規格
              </button>
            </div>
          @endif

        </div>{{-- /tab-review --}}

        {{-- ================================================================ --}}
        {{-- Tab 4: 測試清單                                                   --}}
        {{-- ================================================================ --}}
        <div class="tab-pane fade" id="tab-checklist" role="tabpanel">

          @if($report->test_checklist)
            @php
              $checklistConverter = new \League\CommonMark\GithubFlavoredMarkdownConverter(['html_input'=>'escape','allow_unsafe_links'=>false]);
            @endphp
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h5 class="mb-0"><i class="bi bi-list-check me-2 text-success"></i>測試清單</h5>
              <div>
                <button class="btn btn-sm btn-outline-success generate-test-checklist-btn" data-id="{{ $report->id }}">
                  <i class="bi bi-arrow-clockwise me-1"></i>重新產生
                </button>
                <span class="badge bg-success ms-1">已產生</span>
              </div>
            </div>
            <div id="checklist-loading" style="display:none;" class="text-center py-3">
              <div class="spinner-border text-success" role="status"></div>
              <p class="mt-2 text-muted">正在重新產生測試清單…</p>
            </div>
            <div class="ai-report">
              {!! $checklistConverter->convert($report->test_checklist) !!}
            </div>

          @elseif($report->content)
            <div class="text-center py-5">
              <i class="bi bi-list-check display-4 text-success opacity-50"></i>
              <p class="text-muted mt-3 mb-4">
                從功能規格{{ $report->code_scan_result ? '與程式碼掃描結果' : '' }}自動產生測試案例清單
              </p>
              <div id="checklist-loading" style="display:none;" class="mb-3">
                <div class="spinner-border text-success" role="status"></div>
                <p class="mt-2 text-muted">正在產生測試清單…</p>
              </div>
              <button class="btn btn-success btn-lg generate-test-checklist-btn" data-id="{{ $report->id }}">
                <i class="bi bi-list-check me-1"></i>產生測試清單
              </button>
            </div>

          @else
            <div class="text-center py-5 text-muted">
              <i class="bi bi-exclamation-circle display-4 opacity-50"></i>
              <p class="mt-3">請先填寫功能規格，才能產生測試清單</p>
              <button class="btn btn-outline-secondary"
                onclick="document.getElementById('tab-spec-btn').click()">
                <i class="bi bi-arrow-left me-1"></i>前往填寫規格
              </button>
            </div>
          @endif

        </div>{{-- /tab-checklist --}}

      </div>{{-- /tab-content --}}
    </div>{{-- /tab-content-box --}}
    </div>{{-- /report-tab-card --}}

    <a href="{{ route('test-reports.index') }}" class="btn btn-secondary">
      <i class="bi bi-arrow-left me-1"></i>返回列表
    </a>

  </div>
@endsection

@push('scripts')
  <script>
    // ===== 美化狀態標籤 =====
    document.querySelectorAll('.ai-report').forEach(function(el) {
      el.innerHTML = el.innerHTML
        .replace(/✅\s*(通過|符合|已設定|完整|正確|安全)/g, '<span class="badge bg-success" style="font-size:0.8em;padding:4px 8px;">✅ $1</span>')
        .replace(/⚠️\s*(部分符合|無法判定|部分|需注意)/g, '<span class="badge bg-warning text-dark" style="font-size:0.8em;padding:4px 8px;">⚠️ $1</span>')
        .replace(/❌\s*(未實作|不符合|未實現|缺失|危險)/g, '<span class="badge bg-danger" style="font-size:0.8em;padding:4px 8px;">❌ $1</span>')
        .replace(/<td>\s*✅\s*<\/td>/g, '<td class="text-center"><span class="badge bg-success" style="font-size:0.8em;">✅ 通過</span></td>')
        .replace(/<td>\s*⚠️\s*<\/td>/g, '<td class="text-center"><span class="badge bg-warning text-dark" style="font-size:0.8em;">⚠️ 注意</span></td>')
        .replace(/<td>\s*❌\s*<\/td>/g, '<td class="text-center"><span class="badge bg-danger" style="font-size:0.8em;">❌ 問題</span></td>')
        .replace(/🔴\s*高/g, '<span class="badge bg-danger" style="font-size:0.8em;">🔴 高</span>')
        .replace(/🟡\s*中/g, '<span class="badge bg-warning text-dark" style="font-size:0.8em;">🟡 中</span>')
        .replace(/🟢\s*低/g, '<span class="badge bg-success" style="font-size:0.8em;">🟢 低</span>');

      el.querySelectorAll('table').forEach(function(table) {
        table.classList.add('table', 'table-bordered');
        if (!table.parentElement.classList.contains('table-wrapper')) {
          var wrapper = document.createElement('div');
          wrapper.className = 'table-wrapper';
          wrapper.style.overflowX = 'auto';
          wrapper.style.maxWidth = '100%';
          table.parentNode.insertBefore(wrapper, table);
          wrapper.appendChild(table);
        }
      });
    });

    // ===== 程式碼來源切換 =====
    document.getElementById('mode-file').addEventListener('change', function() {
      document.getElementById('file-upload-section').style.display = '';
      document.getElementById('gitlab-section').style.display = 'none';
    });
    document.getElementById('mode-gitlab').addEventListener('change', function() {
      document.getElementById('file-upload-section').style.display = 'none';
      document.getElementById('gitlab-section').style.display = '';
    });

    // ===== 上傳程式碼檔案 =====
    $('#upload-code-form').on('submit', function(e) {
      e.preventDefault();
      const fileInput = document.getElementById('code_files_upload');
      if (!fileInput.files.length) { alert('請先選擇檔案'); return; }

      const formData = new FormData();
      formData.append('_token', '{{ csrf_token() }}');
      for (let i = 0; i < fileInput.files.length; i++) formData.append('code_files[]', fileInput.files[i]);

      $('#upload-loading').show();
      $('#upload-code-btn').prop('disabled', true).html('<i class="bi bi-hourglass-split me-1"></i>上傳中…');

      $.ajax({
        method: 'POST', url: `/test-reports/{{ $report->id }}/upload-code`,
        data: formData, processData: false, contentType: false,
        headers: { 'Accept': 'application/json' }, timeout: 60000,
        success: () => location.reload(),
        error: (xhr) => {
          alert('❌ ' + (xhr.responseJSON?.error || xhr.statusText));
          $('#upload-code-btn').prop('disabled', false).html('<i class="bi bi-upload me-1"></i>上傳');
          $('#upload-loading').hide();
        }
      });
    });

    // ===== GitLab 下載 =====
    $('#clone-gitlab-btn').on('click', function() {
      const url = $('#gitlab-url').val().trim();
      if (!url) { alert('請輸入倉庫 URL'); return; }

      $('#gitlab-loading').show();
      $(this).prop('disabled', true).html('<i class="bi bi-hourglass-split me-1"></i>下載中…');

      $.ajax({
        method: 'POST', url: `/test-reports/{{ $report->id }}/clone-from-git`,
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
        contentType: 'application/json',
        data: JSON.stringify({
          gitlab_url: url,
          access_token: $('#gitlab-token').val().trim(),
          branch: $('#gitlab-branch').val().trim() || 'main'
        }),
        timeout: 300000,
        success: () => location.reload(),
        error: (xhr) => {
          alert('❌ ' + (xhr.responseJSON?.error || xhr.statusText));
          $('#clone-gitlab-btn').prop('disabled', false).html('<i class="bi bi-cloud-download me-1"></i>下載並分析程式碼');
          $('#gitlab-loading').hide();
        }
      });
    });

    // ===== Step 1: 掃描 =====
    $(document).on('click', '.scan-code-btn', function(e) {
      e.preventDefault();
      const btn = $(this), id = btn.data('id');
      $('#scan-loading').show();
      btn.prop('disabled', true).html('<i class="bi bi-hourglass-split me-1"></i>掃描中…');

      $.ajax({
        method: 'POST', url: `/test-reports/${id}/generate-code-scan`,
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
        timeout: 600000,
        success: () => location.reload(),
        error: (xhr) => {
          alert('❌ ' + (xhr.responseJSON?.error || xhr.statusText));
          btn.prop('disabled', false).html('<i class="bi bi-search me-1"></i>掃描程式碼功能');
          $('#scan-loading').hide();
        }
      });
    });

    // ===== Step 2: 規格比對 =====
    $(document).on('click', '.generate-code-review-btn', function(e) {
      e.preventDefault();
      const btn = $(this), id = btn.data('id');
      $('#code-review-loading').show();
      btn.prop('disabled', true).html('<i class="bi bi-hourglass-split me-1"></i>檢查中…');

      $.ajax({
        method: 'POST', url: `/test-reports/${id}/generate-code-review`,
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
        timeout: 600000,
        success: () => location.reload(),
        error: (xhr) => {
          alert('❌ ' + (xhr.responseJSON?.error || xhr.statusText));
          btn.prop('disabled', false).html('<i class="bi bi-shield-check me-1"></i>開始規格比對檢查');
          $('#code-review-loading').hide();
        }
      });
    });

    // ===== Step 3: 測試清單 =====
    $(document).on('click', '.generate-test-checklist-btn', function(e) {
      e.preventDefault();
      const btn = $(this), id = btn.data('id');
      $('#checklist-loading').show();
      btn.prop('disabled', true).html('<i class="bi bi-hourglass-split me-1"></i>產生中…');

      $.ajax({
        method: 'POST', url: `/test-reports/${id}/generate-test-checklist`,
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
        timeout: 600000,
        success: () => location.reload(),
        error: (xhr) => {
          alert('❌ ' + (xhr.responseJSON?.error || xhr.statusText));
          btn.prop('disabled', false).html('<i class="bi bi-list-check me-1"></i>產生測試清單');
          $('#checklist-loading').hide();
        }
      });
    });
    // ===== 規格比對目錄（TOC）=====
    function buildToc() {
      const content = document.getElementById('review-content');
      const tocNav  = document.getElementById('toc-nav');
      if (!content || !tocNav || tocNav.children.length > 0) return;

      // 只抓 h2（大章節），不顯示 h3 細項
      const headings = Array.from(content.querySelectorAll('h2'));
      if (!headings.length) return;

      // 給標題加錨點，清理前綴文字
      headings.forEach(function(h, i) {
        if (!h.id) h.id = 'rh-' + i;
      });

      function cleanLabel(text) {
        return text
          .replace(/^[一二三四五六七八九十百\d]+[、.．]\s*/, '')
          .trim();
      }

      headings.forEach(function(h, i) {
        const li = document.createElement('li');

        const a = document.createElement('a');
        a.href           = '#' + h.id;
        a.dataset.target = h.id;
        a.innerHTML =
          '<span class="toc-num">' + (i + 1) + '</span>' +
          cleanLabel(h.textContent);
        a.addEventListener('click', tocSmoothScroll);

        li.appendChild(a);
        tocNav.appendChild(li);
      });

      // IntersectionObserver：高亮目前位置
      const links = tocNav.querySelectorAll('a[data-target]');

      const observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            links.forEach(l => l.classList.remove('toc-active'));
            const active = tocNav.querySelector('a[data-target="' + entry.target.id + '"]');
            if (active) active.classList.add('toc-active');
          }
        });
      }, { rootMargin: '-5% 0px -80% 0px', threshold: 0 });

      headings.forEach(h => observer.observe(h));
      if (links.length) links[0].classList.add('toc-active');
    }

    function tocSmoothScroll(e) {
      e.preventDefault();
      const t = document.getElementById(this.dataset.target);
      if (t) {
        const offset = 80; // navbar 高度補償
        const top = t.getBoundingClientRect().top + window.scrollY - offset;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    }

    // 手機：點標題列展開目錄
    const tocEl = document.getElementById('review-toc');
    if (tocEl) {
      tocEl.querySelector('.review-toc-title')?.addEventListener('click', function() {
        if (window.innerWidth <= 900) tocEl.classList.toggle('toc-open');
      });
    }

    // 切換到「規格比對結果」頁籤時建目錄
    document.getElementById('tab-review-btn')?.addEventListener('shown.bs.tab', buildToc);
    if (document.getElementById('tab-review')?.classList.contains('active')) buildToc();

    // ===== AI 引擎切換 =====
    document.querySelectorAll('input[name="ai-engine"]').forEach(function(radio) {
      radio.addEventListener('change', function() {
        const provider = this.id === 'ai-gemini' ? 'gemini' : 'claude';
        $.ajax({
          method: 'POST',
          url: '/test-reports/{{ $report->id }}/set-ai-provider',
          headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
          contentType: 'application/json',
          data: JSON.stringify({ provider: provider }),
          success: function() {
            const saved = document.getElementById('ai-provider-saved');
            saved.style.display = 'inline';
            setTimeout(() => { saved.style.display = 'none'; }, 2000);
          },
          error: function(xhr) {
            alert('切換失敗：' + (xhr.responseJSON?.message || xhr.statusText));
          }
        });
      });
    });

  </script>
@endpush