@extends('layouts.app')
@section('title', '專案工作中心')

@php
use Illuminate\Support\Facades\Auth;
$_u       = Auth::user();
$_isAdmin = $_u->role === 'admin';

// ── 專案
$canUseProjManagement  = $_isAdmin || $_u->hasModulePermission('ProjectController', 'projects.all');
$canUseProjMaintenance = $_isAdmin || $_u->hasModulePermission('ProjectController', 'projects.index');
$canUseManualGen       = $_isAdmin || $_u->hasModulePermission('ManualGeneratorController');

// ── 協作
$canUseWorkBoard  = $_isAdmin || $_u->hasModulePermission('WorkBoardController');
$canUseTimeRecord = $_isAdmin || $_u->hasModulePermission('TimeRecordController');

// ── 技術驗證
$canUseK6       = $_isAdmin || $_u->hasModulePermission('K6TestController');
$canUseVulnScan = $_isAdmin || $_u->hasModulePermission('VulnScanController');
$canUseCodeScan = $_isAdmin || $_u->hasModulePermission('CodeScanController');
$canUsePenTest  = $_isAdmin || $_u->hasModulePermission('PenTestController');
$canUseReport   = $_isAdmin || $_u->hasModulePermission('TestReportController');

$hasProject   = $canUseProjManagement || $canUseProjMaintenance || $canUseManualGen;
$hasCollab    = $canUseWorkBoard || $canUseTimeRecord;
$hasTechTest  = $canUseK6 || $canUseVulnScan || $canUseCodeScan || $canUsePenTest || $canUseReport;
$hasAnything  = $hasProject || $hasCollab || $hasTechTest;
@endphp

@push('styles')
<style>
.sc-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 32px 80px;
}
.sc-page-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: -.02em;
}
.sc-page-sub { font-size: .9rem; color: #94a3b8; margin-bottom: 40px; }
.sc-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
}
.sc-section {
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.sc-sec-head {
  padding: 22px 24px 20px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sc-sec-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.sc-sec-title { font-size: 1.05rem; font-weight: 800; color: #0f172a; letter-spacing: -.01em; margin-bottom: 3px; }
.sc-sec-sub { font-size: .78rem; color: #94a3b8; line-height: 1.4; }
.sc-list { display: flex; flex-direction: column; padding: 16px; gap: 10px; }
.sc-item {
  background: #f8fafc;
  border: 1px solid #e8edf2;
  border-radius: 14px;
  padding: 18px 18px 16px;
  transition: background .12s, box-shadow .14s, border-color .12s;
}
.sc-item:hover { background: #f0f5ff; border-color: #c7d7f8; box-shadow: 0 4px 16px rgba(59,130,246,.1); }
.sc-item-top { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 14px; }
.sc-item-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.sc-item-title { font-size: .9rem; font-weight: 700; color: #1e293b; margin-bottom: 4px; line-height: 1.3; }
.sc-item-desc  { font-size: .78rem; color: #64748b; line-height: 1.5; }
.sc-item-btns  { display: flex; gap: 8px; }
.sc-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: .8rem; font-weight: 700;
  border: none; cursor: pointer;
  text-decoration: none;
  transition: opacity .12s, transform .1s;
}
.sc-btn:hover { opacity: .88; transform: translateY(-1px); }
@media (prefers-color-scheme: dark) {
  .sc-page-title { color: #f1f5f9; }
  .sc-section { background: #1e2330; border-color: #2e3340; }
  .sc-sec-head { border-bottom-color: #2e3340; }
  .sc-item { background: #252b3b; border-color: #2e3a4a; }
  .sc-item:hover { background: #1e2a45; border-color: #3b5998; }
  .sc-item-title { color: #e2e8f0; }
  .sc-item-desc  { color: #94a3b8; }
}
@media (max-width: 900px) { .sc-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .sc-cols { grid-template-columns: 1fr; } .sc-page { padding: 24px 16px 60px; } }
</style>
@endpush

@section('content')
<div class="sc-page">

  <div>
    <h1 class="sc-page-title"><i class="bi bi-kanban me-2" style="color:#3b82f6;"></i>專案工作中心</h1>
    <p class="sc-page-sub">選擇下方工具快速進入各專案相關功能</p>
  </div>

  @if (!$hasAnything)
  <div class="text-center py-5 text-muted">
    <i class="bi bi-lock" style="font-size:2.5rem;display:block;margin-bottom:12px;"></i>
    您目前沒有任何可用的專案工作功能，如有需要請聯繫系統管理者開通權限。
  </div>
  @else
  <div class="sc-cols">

    {{-- ══ 專案管理 ══ --}}
    @if ($hasProject)
    <div class="sc-section">
      <div class="sc-sec-head">
        <div class="sc-sec-icon" style="background:#dbeafe;color:#1d4ed8;"><i class="bi bi-folder2-open"></i></div>
        <div>
          <div class="sc-sec-title">專案管理</div>
          <div class="sc-sec-sub">建立、追蹤與維護各類型專案，管理議題、工時與版本</div>
        </div>
      </div>
      <div class="sc-list">

        @if ($canUseProjManagement)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#dbeafe;color:#1d4ed8;"><i class="bi bi-folder2-open"></i></div>
            <div>
              <div class="sc-item-title">專案管理</div>
              <div class="sc-item-desc">全覽所有專案清單，管理議題、版本、工時、Wiki 及文件</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('projects.list') }}" class="sc-btn" style="background:#1d4ed8;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

        @if ($canUseManualGen)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#fef3c7;color:#854d0e;"><i class="bi bi-journal-text"></i></div>
            <div>
              <div class="sc-item-title">手冊產生器</div>
              <div class="sc-item-desc">從專案資料自動產生交付用的系統操作手冊文件</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('manual-generators.index') }}" class="sc-btn" style="background:#854d0e;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

      </div>
    </div>
    @endif

    {{-- ══ 協作工具 ══ --}}
    @if ($hasCollab)
    <div class="sc-section">
      <div class="sc-sec-head">
        <div class="sc-sec-icon" style="background:#f0fdf4;color:#15803d;"><i class="bi bi-grid-3x3-gap"></i></div>
        <div>
          <div class="sc-sec-title">協作工具</div>
          <div class="sc-sec-sub">看板任務與工時記錄，跨部門協作追蹤</div>
        </div>
      </div>
      <div class="sc-list">

        @if ($canUseWorkBoard)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#f0fdf4;color:#15803d;"><i class="bi bi-kanban"></i></div>
            <div>
              <div class="sc-item-title">工作看板</div>
              <div class="sc-item-desc">以卡片看板方式管理任務進度，支援自訂欄位與成員分配</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('boards.index') }}" class="sc-btn" style="background:#15803d;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

        @if ($canUseTimeRecord)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#ede9fe;color:#6d28d9;"><i class="bi bi-clock-history"></i></div>
            <div>
              <div class="sc-item-title">工時記錄</div>
              <div class="sc-item-desc">記錄每日工時、查看個人與團隊工時分佈，支援 API Token 匯入</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('time-records.index') }}" class="sc-btn" style="background:#6d28d9;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

      </div>
    </div>
    @endif

    {{-- ══ 技術驗證 ══ --}}
    @if ($hasTechTest)
    <div class="sc-section">
      <div class="sc-sec-head">
        <div class="sc-sec-icon" style="background:#fee2e2;color:#b91c1c;"><i class="bi bi-shield-check"></i></div>
        <div>
          <div class="sc-sec-title">技術驗證</div>
          <div class="sc-sec-sub">壓力測試、資安掃描與程式碼審查報告</div>
        </div>
      </div>
      <div class="sc-list">

        @if ($canUseK6)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#fef3c7;color:#b45309;"><i class="bi bi-speedometer2"></i></div>
            <div>
              <div class="sc-item-title">壓力測試</div>
              <div class="sc-item-desc">以 K6 執行 API 壓力測試，分析回應時間與吞吐量</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('k6.index') }}" class="sc-btn" style="background:#b45309;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

        @if ($canUseVulnScan)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#fee2e2;color:#b91c1c;"><i class="bi bi-crosshair"></i></div>
            <div>
              <div class="sc-item-title">弱點掃描</div>
              <div class="sc-item-desc">對目標系統執行自動化弱點掃描，產出 CVE 對應報告</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('vuln-scan.index') }}" class="sc-btn" style="background:#b91c1c;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

        @if ($canUseCodeScan)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#e0f2fe;color:#0369a1;"><i class="bi bi-code-slash"></i></div>
            <div>
              <div class="sc-item-title">源碼掃描</div>
              <div class="sc-item-desc">靜態分析源碼找出潛在漏洞、不安全依賴與程式碼品質問題</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('code-scan.index') }}" class="sc-btn" style="background:#0369a1;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

        @if ($canUsePenTest)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#1e1e2e;color:#f38ba8;"><i class="bi bi-terminal-fill"></i></div>
            <div>
              <div class="sc-item-title">滲透測試</div>
              <div class="sc-item-desc">記錄與追蹤手動滲透測試的發現，產出結構化測試報告</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('pen-test.index') }}" class="sc-btn" style="background:#7c3aed;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#f0fdf4;color:#166534;"><i class="bi bi-universal-access"></i></div>
            <div>
              <div class="sc-item-title">無障礙掃描</div>
              <div class="sc-item-desc">依 WCAG 標準自動掃描網頁無障礙合規狀況，輸出問題清單</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('accessibility-scan.index') }}" class="sc-btn" style="background:#166534;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

        @if ($canUseReport)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#f8fafc;color:#475569;"><i class="bi bi-file-earmark-text"></i></div>
            <div>
              <div class="sc-item-title">程式碼審查報告</div>
              <div class="sc-item-desc">整合 AI 產生程式碼審查、測試清單與說明文件，支援 PDF 匯出</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('test-reports.index') }}" class="sc-btn" style="background:#475569;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

      </div>
    </div>
    @endif

  </div>{{-- /sc-cols --}}
  @endif
</div>
@endsection