@extends('layouts.app')
@section('title', 'PDF 工具')

@push('styles')
<link rel="stylesheet" href="/css/pdf-tool.css?v={{ filemtime(public_path('css/pdf-tool.css')) }}">
<style>
.pdx-wrap { max-width: 1320px; margin: 0 auto; padding: 28px 24px 80px; }
.pdx-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.pdx-title { font-size:1.5rem; font-weight:800; color:#0f172a; letter-spacing:-.02em; margin:0; }
.pdx-tier { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:.78rem; font-weight:700; color:#fff; }
.pdx-tier.reader { background:#64748b; } .pdx-tier.standard { background:#2563eb; } .pdx-tier.pro { background:#7c3aed; }
.pdx-card { background:#fff; border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.pdx-card .pdx-card-head { padding:14px 18px; border-bottom:1px solid #f1f5f9; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pdx-card .pdx-card-body { padding:16px 18px; }
.pdx-drop { border:2px dashed #cbd5e1; border-radius:14px; padding:28px 16px; text-align:center; color:#64748b; cursor:pointer; transition:.15s; background:#f8fafc; }
.pdx-drop:hover, .pdx-drop.over { border-color:#2563eb; background:#eff6ff; color:#1d4ed8; }
.pdx-drop i { font-size:2rem; display:block; margin-bottom:6px; }
.pdx-tools { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.pdx-tool { border:1px solid #e2e8f0; border-radius:12px; padding:12px 10px; text-align:center; background:#fff; cursor:pointer; transition:.12s; position:relative; }
.pdx-tool:hover { border-color:#93c5fd; background:#f0f7ff; transform:translateY(-1px); }
.pdx-tool i { font-size:1.4rem; display:block; margin-bottom:4px; }
.pdx-tool .t { font-size:.8rem; font-weight:700; color:#1e293b; }
.pdx-tool .d { font-size:.68rem; color:#64748b; margin-top:2px; line-height:1.3; }
.pdx-tool.locked { opacity:.55; cursor:not-allowed; }
.pdx-tool .lock { position:absolute; top:6px; right:8px; font-size:.65rem; color:#fff; background:#94a3b8; border-radius:999px; padding:1px 6px; }
.pdx-tool .lock.pro { background:#7c3aed; } .pdx-tool .lock.standard { background:#2563eb; }
.pdx-feat { font-size:.78rem; color:#475569; }
.pdx-feat li { margin-bottom:2px; }
.pdx-job { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed #e2e8f0; font-size:.82rem; }
.pdx-job:last-child { border-bottom:none; }
.pdx-stat { font-size:.78rem; color:#64748b; }
.pdx-stat b { color:#0f172a; font-size:1rem; margin-right:3px; }
.table-docs td { vertical-align:middle; font-size:.86rem; }
.table-docs .title a { font-weight:600; color:#1e293b; text-decoration:none; }
.table-docs .title a:hover { color:#1d4ed8; }
.table-docs .meta { font-size:.72rem; color:#94a3b8; }
@media (prefers-color-scheme: dark) {
  .pdx-title { color:#f1f5f9; }
  .pdx-card { background:#1e2330; border-color:#2e3340; }
  .pdx-card .pdx-card-head { border-bottom-color:#2e3340; }
  .pdx-drop { background:#252b3b; border-color:#3b4252; color:#94a3b8; }
  .pdx-tool { background:#252b3b; border-color:#2e3a4a; } .pdx-tool .t { color:#e2e8f0; }
  .pdx-stat b { color:#f1f5f9; }
  .table-docs .title a { color:#e2e8f0; }
}
</style>
@endpush

@section('content')
@php
  use App\Services\PdfTool\PdfToolAccess;
  $rank = PdfToolAccess::RANK[$tier] ?? 1;
  $maxMb = (int) config('pdftool.max_upload_mb', 80);
@endphp
<div class="pdx-wrap">

  <div class="pdx-head">
    <div class="d-flex align-items-center gap-3 flex-wrap">
      <h1 class="pdx-title"><i class="bi bi-file-earmark-pdf me-2 text-danger"></i>PDF 工具</h1>
      <span class="pdx-tier {{ $tier }}"><i class="bi bi-award"></i>{{ PdfToolAccess::label($tier) }}</span>
      <span class="pdx-stat"><b>{{ $stats['docs'] }}</b>份文件 · <b>{{ $stats['pages'] }}</b>頁 · <b>{{ $stats['size'] >= 1048576 ? round($stats['size']/1048576,1).' MB' : round($stats['size']/1024).' KB' }}</b></span>
    </div>
    <div class="d-flex gap-2">
      @if($rank >= 3)
        <a href="{{ route('pdf-tool.sign.index') }}" class="btn btn-outline-primary btn-sm">
          <i class="bi bi-pen me-1"></i>簽署管理
          @if($pendingSign) <span class="badge bg-warning text-dark ms-1">{{ $pendingSign }}</span> @endif
        </a>
      @endif
      <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#pdxFeatures"><i class="bi bi-info-circle me-1"></i>功能等級說明</button>
    </div>
  </div>

  @if(session('success'))<div class="alert alert-success py-2">{{ session('success') }}</div>@endif
  @if(session('error'))<div class="alert alert-danger py-2">{{ session('error') }}</div>@endif

  <div class="collapse mb-3" id="pdxFeatures">
    <div class="pdx-card"><div class="pdx-card-body">
      <div class="row g-3">
        @foreach(PdfToolAccess::FEATURES as $t => $list)
          <div class="col-md-4">
            <div class="d-flex align-items-center gap-2 mb-2">
              <span class="pdx-tier {{ $t }}">{{ PdfToolAccess::label($t) }}</span>
              @if($t === $tier)<span class="badge bg-success">您的等級</span>@endif
            </div>
            <ul class="pdx-feat ps-3 mb-0">
              @foreach($list as $f)<li>{{ $f }}</li>@endforeach
            </ul>
          </div>
        @endforeach
      </div>
      <div class="text-muted mt-2" style="font-size:.72rem;">等級由系統管理者於「權限管理 → PDF 工具 (Reader / Standard / Pro)」指派，較高等級包含較低等級的全部功能。</div>
    </div></div>
  </div>

  <div class="row g-3">
    <div class="col-lg-8">
      <div class="pdx-card mb-3">
        <div class="pdx-card-head">
          <span><i class="bi bi-cloud-arrow-up me-2 text-primary"></i>上傳 / 轉換為 PDF</span>
          <span class="text-muted fw-normal" style="font-size:.72rem;">單檔上限 {{ $maxMb }} MB，一次最多 20 個檔案</span>
        </div>
        <div class="pdx-card-body">
          <div class="pdx-drop" id="pdxDrop">
            <i class="bi bi-file-earmark-arrow-up"></i>
            <div><b>拖曳檔案到此處</b> 或點擊選擇</div>
            <div class="mt-1" style="font-size:.74rem;">PDF 直接開啟{{ $rank >= 2 ? '；Word / Excel / PowerPoint / 圖片 / HTML 會自動轉為 PDF' : '（Standard 以上可上傳 Office / 圖片 / HTML 自動轉為 PDF）' }}</div>
            <input type="file" id="pdxFiles" multiple class="d-none" accept="{{ $rank >= 2 ? '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.odt,.ods,.odp,.rtf,.txt,.csv,.md,.jpg,.jpeg,.png,.gif,.bmp,.tif,.tiff,.webp,.html,.htm' : '.pdf' }}">
          </div>
          <div class="d-flex flex-wrap align-items-center gap-3 mt-3">
            <div class="d-flex align-items-center gap-2">
              <label class="form-label mb-0 small text-muted">所屬專案</label>
              <select class="form-select form-select-sm" id="pdxProject" style="width:220px;">
                <option value="">（不指定）</option>
                @foreach($projects as $p)<option value="{{ $p->id }}">{{ $p->name }}</option>@endforeach
              </select>
            </div>
            @if($rank >= 2)
            <div class="form-check form-check-inline mb-0">
              <input class="form-check-input" type="checkbox" id="pdxCombine"><label class="form-check-label small" for="pdxCombine">多張圖片合併成一個 PDF</label>
            </div>
            <div class="d-flex align-items-center gap-2">
              <label class="small text-muted mb-0">圖片頁面</label>
              <select class="form-select form-select-sm" id="pdxImagePage" style="width:130px;"><option value="A4">置中於 A4</option><option value="fit">依圖片大小</option></select>
            </div>
            @endif
          </div>
          <div id="pdxUploadResult" class="mt-2"></div>
        </div>
      </div>

      <div class="pdx-card mb-3">
        <div class="pdx-card-head"><span><i class="bi bi-tools me-2 text-warning"></i>快速工具</span></div>
        <div class="pdx-card-body">
          <div class="pdx-tools">
            <div class="pdx-tool {{ $rank >= 2 ? '' : 'locked' }}" data-tool="merge" data-min="2">
              @if($rank < 2)<span class="lock standard">Standard</span>@endif
              <i class="bi bi-intersect text-primary"></i><div class="t">合併 PDF</div><div class="d">勾選下方文件後合併</div>
            </div>
            <div class="pdx-tool {{ $rank >= 2 ? '' : 'locked' }}" data-tool="url" data-min="2">
              @if($rank < 2)<span class="lock standard">Standard</span>@endif
              <i class="bi bi-globe2 text-success"></i><div class="t">網頁轉 PDF</div><div class="d">輸入網址轉成 PDF</div>
            </div>
            <div class="pdx-tool {{ $rank >= 2 ? '' : 'locked' }}" data-tool="office" data-min="2">
              @if($rank < 2)<span class="lock standard">Standard</span>@endif
              <i class="bi bi-file-earmark-word text-primary"></i><div class="t">Office / 圖片轉 PDF</div><div class="d">上傳後自動轉換</div>
            </div>
            <div class="pdx-tool {{ $rank >= 3 ? '' : 'locked' }} {{ $caps['ocr'] ? '' : 'locked' }}" data-tool="scan" data-min="3">
              @if($rank < 3)<span class="lock pro">Pro</span>@endif
              <i class="bi bi-camera text-danger"></i><div class="t">掃描建檔</div><div class="d">相片自動校正、OCR 轉 PDF</div>
            </div>
            <div class="pdx-tool" data-tool="open">
              <i class="bi bi-folder2-open text-secondary"></i><div class="t">開啟文件</div><div class="d">閱讀、註記、編輯、轉檔…</div>
            </div>
            @if($rank >= 3)
            <a class="pdx-tool text-decoration-none" href="{{ route('pdf-tool.sign.index') }}">
              <i class="bi bi-pen text-purple" style="color:#7c3aed;"></i><div class="t">電子簽署</div><div class="d">寄送簽署連結與追蹤</div>
            </a>
            @endif
          </div>
          <div id="pdxUrlBox" class="mt-3 d-none">
            <div class="input-group input-group-sm">
              <span class="input-group-text">網址</span>
              <input type="url" class="form-control" id="pdxUrl" placeholder="https://example.com/page">
              <button class="btn btn-success" id="pdxUrlGo"><i class="bi bi-arrow-right-circle me-1"></i>轉換</button>
            </div>
            <div class="form-text">只支援公開的 http / https 網址，內部網路位址會被拒絕。</div>
          </div>
        </div>
      </div>

      <div class="pdx-card">
        <div class="pdx-card-head">
          <span><i class="bi bi-files me-2 text-secondary"></i>我的文件</span>
          <form class="d-flex gap-2" method="get">
            @if($isAdmin)
              <div class="form-check form-check-inline mb-0 small"><input class="form-check-input" type="checkbox" name="all" value="1" id="pdxAll" {{ $all ? 'checked' : '' }} onchange="this.form.submit()"><label class="form-check-label" for="pdxAll">所有人</label></div>
            @endif
            <input type="search" name="q" value="{{ $search }}" class="form-control form-control-sm" placeholder="搜尋文件名稱" style="width:200px;">
            <button class="btn btn-sm btn-outline-secondary"><i class="bi bi-search"></i></button>
          </form>
        </div>
        <div class="table-responsive">
          <table class="table table-hover table-docs mb-0">
            <thead class="table-light">
              <tr>
                <th style="width:34px;"><input type="checkbox" id="pdxCheckAll" class="form-check-input"></th>
                <th>文件</th><th>頁數</th><th>大小</th><th>來源</th><th>專案</th><th>建立時間</th><th style="width:120px;"></th>
              </tr>
            </thead>
            <tbody id="pdxDocRows">
              @forelse($docs as $d)
              <tr data-id="{{ $d->id }}">
                <td><input type="checkbox" class="form-check-input pdx-sel" value="{{ $d->id }}" {{ ($d->meta['locked'] ?? false) ? 'disabled' : '' }}></td>
                <td class="title">
                  <a href="{{ route('pdf-tool.show', $d) }}"><i class="bi bi-file-earmark-pdf text-danger me-1"></i>{{ $d->title }}</a>
                  @if($d->is_encrypted)<i class="bi bi-lock-fill text-warning ms-1" title="已加密"></i>@endif
                  @if($d->has_form)<i class="bi bi-ui-checks text-primary ms-1" title="含表單"></i>@endif
                  @if($d->meta['has_signature'] ?? false)<i class="bi bi-patch-check-fill text-success ms-1" title="含數位簽章"></i>@endif
                  <div class="meta">{{ $d->original_name }}{{ $all && $d->owner ? ' · ' . $d->owner->name : '' }}</div>
                </td>
                <td>{{ $d->pages }}</td>
                <td>{{ $d->sizeLabel() }}</td>
                <td><span class="badge bg-light text-dark border">{{ $d->sourceLabel() }}</span></td>
                <td class="small">{{ $d->project?->name ?? '—' }}</td>
                <td class="small text-muted">{{ $d->created_at->format('Y-m-d H:i') }}</td>
                <td class="text-end text-nowrap">
                  <a href="{{ route('pdf-tool.show', $d) }}" class="btn btn-sm btn-primary py-0" title="開啟"><i class="bi bi-box-arrow-in-right"></i></a>
                  <a href="{{ route('pdf-tool.download', $d) }}" class="btn btn-sm btn-outline-secondary py-0" title="下載"><i class="bi bi-download"></i></a>
                  <button class="btn btn-sm btn-outline-danger py-0 pdx-del" data-url="{{ route('pdf-tool.destroy', $d) }}" title="刪除"><i class="bi bi-trash"></i></button>
                </td>
              </tr>
              @empty
              <tr><td colspan="8" class="text-center text-muted py-4">尚無文件，請先上傳 PDF</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
        <div class="d-flex justify-content-between align-items-center p-2">
          <div>
            <button class="btn btn-sm btn-outline-primary d-none" id="pdxMergeBtn"><i class="bi bi-intersect me-1"></i>合併所選 (<span id="pdxSelCount">0</span>)</button>
          </div>
          <div>{{ $docs->links() }}</div>
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="pdx-card mb-3">
        <div class="pdx-card-head"><span><i class="bi bi-hourglass-split me-2 text-info"></i>背景工作</span><button class="btn btn-sm btn-link p-0" id="pdxJobRefresh"><i class="bi bi-arrow-clockwise"></i></button></div>
        <div class="pdx-card-body" id="pdxJobs">
          @forelse($jobs as $j)
            <div class="pdx-job" data-id="{{ $j->id }}" data-status="{{ $j->status }}">
              <span class="badge {{ $j->status === 'done' ? 'bg-success' : ($j->status === 'failed' ? 'bg-danger' : 'bg-warning text-dark') }}">{{ ['pending'=>'等待中','running'=>'處理中','done'=>'完成','failed'=>'失敗'][$j->status] }}</span>
              <div class="flex-grow-1">
                <div>{{ $j->typeLabel() }} <span class="text-muted">#{{ $j->id }}</span></div>
                <div class="text-muted" style="font-size:.7rem;">{{ $j->created_at->format('m-d H:i') }} {{ $j->error ? '· '.\Illuminate\Support\Str::limit($j->error, 60) : '' }}</div>
              </div>
              @if($j->status === 'done' && $j->result_document_id)
                <a class="btn btn-sm btn-outline-primary py-0" href="{{ route('pdf-tool.show', $j->result_document_id) }}">開啟</a>
              @elseif($j->status === 'done' && $j->output_path)
                <a class="btn btn-sm btn-outline-success py-0" href="{{ route('pdf-tool.jobs.download', $j) }}"><i class="bi bi-download"></i></a>
              @endif
            </div>
          @empty
            <div class="text-muted small">目前沒有背景工作</div>
          @endforelse
        </div>
      </div>

      <div class="pdx-card">
        <div class="pdx-card-head"><span><i class="bi bi-lightbulb me-2 text-warning"></i>使用提示</span></div>
        <div class="pdx-card-body small text-muted">
          <ul class="ps-3 mb-0">
            <li>每次操作都會產生新版本文件，原始檔案保留不變。</li>
            <li>開啟文件後可切換「註記 / 編輯 / 頁面 / 表單 / 保護 / 轉檔 / OCR / 密文 / 簽名」工具。</li>
            <li>密文（塗黑）會將該頁點陣化，文字會被永久移除且無法復原。</li>
            <li>數位簽章以組織憑證簽署，可在 Acrobat 等閱讀器中驗證完整性。</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

{{-- 掃描建檔 --}}
<div class="modal fade" id="pdxScanModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h6 class="modal-title"><i class="bi bi-camera me-2 text-danger"></i>掃描建檔</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">
        <div class="mb-2">
          <label class="form-label small">相片 / 影像（可多選，手機可直接拍照）</label>
          <input type="file" class="form-control form-control-sm" id="pdxScanFiles" multiple accept="image/*" capture="environment">
        </div>
        <div class="row g-2">
          <div class="col-6"><label class="form-label small">影像增強</label>
            <select class="form-select form-select-sm" id="pdxScanEnhance"><option value="auto">自動（彩色）</option><option value="gray">灰階</option><option value="bw">黑白文件</option><option value="none">不處理</option></select></div>
          <div class="col-6"><label class="form-label small">頁面</label>
            <select class="form-select form-select-sm" id="pdxScanPage"><option value="A4">置中於 A4</option><option value="fit">依影像大小</option></select></div>
        </div>
        <div class="d-flex flex-wrap gap-3 mt-2">
          <div class="form-check"><input class="form-check-input" type="checkbox" id="pdxScanDeskew" checked><label class="form-check-label small" for="pdxScanDeskew">自動校正歪斜</label></div>
          <div class="form-check"><input class="form-check-input" type="checkbox" id="pdxScanTrim" checked><label class="form-check-label small" for="pdxScanTrim">裁切邊緣</label></div>
          <div class="form-check"><input class="form-check-input" type="checkbox" id="pdxScanOcr" checked {{ $caps['ocr'] ? '' : 'disabled' }}><label class="form-check-label small" for="pdxScanOcr">OCR 文字辨識（可搜尋）</label></div>
        </div>
        <div class="mt-2"><label class="form-label small">文件名稱</label><input type="text" class="form-control form-control-sm" id="pdxScanTitle" placeholder="例如：發票 2026-10"></div>
      </div>
      <div class="modal-footer"><button class="btn btn-danger btn-sm" id="pdxScanGo"><i class="bi bi-upload me-1"></i>開始處理</button></div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
@php
$cfg = [
  'rank'    => $rank,
  'routes'  => [
    'upload' => route('pdf-tool.upload'),
    'merge'  => route('pdf-tool.merge'),
    'url'    => route('pdf-tool.url'),
    'scan'   => route('pdf-tool.scan'),
    'jobs'   => route('pdf-tool.jobs.index'),
    'jobStatus' => route('pdf-tool.jobs.status', ['job' => '__ID__']),
    'index'  => route('pdf-tool.index'),
  ],
];
@endphp
<script type="application/json" id="pdx-config">{!! json_encode($cfg, JSON_HEX_TAG | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>
<script type="module">
import { api, toast, pollJob } from '/js/pdf-tool-viewer.mjs?v={{ filemtime(public_path('js/pdf-tool-viewer.mjs')) }}';
const CFG = JSON.parse(document.getElementById('pdx-config').textContent);
const $ = (s, r = document) => r.querySelector(s);
const $$ = (s, r = document) => Array.from(r.querySelectorAll(s));

// ── 上傳
const drop = $('#pdxDrop'), fileInput = $('#pdxFiles');
drop.addEventListener('click', () => fileInput.click());
['dragenter', 'dragover'].forEach(ev => drop.addEventListener(ev, e => { e.preventDefault(); drop.classList.add('over'); }));
['dragleave', 'drop'].forEach(ev => drop.addEventListener(ev, e => { e.preventDefault(); drop.classList.remove('over'); }));
drop.addEventListener('drop', e => { if (e.dataTransfer.files.length) uploadFiles(e.dataTransfer.files); });
fileInput.addEventListener('change', () => { if (fileInput.files.length) uploadFiles(fileInput.files); fileInput.value = ''; });

async function uploadFiles(files) {
  const fd = new FormData();
  Array.from(files).slice(0, 20).forEach(f => fd.append('files[]', f));
  fd.append('project_id', $('#pdxProject').value || '');
  if ($('#pdxCombine')) { fd.append('combine_images', $('#pdxCombine').checked ? 1 : 0); fd.append('image_page', $('#pdxImagePage').value); }
  const box = $('#pdxUploadResult');
  box.innerHTML = '<div class="text-primary small"><span class="spinner-border spinner-border-sm me-1"></span>上傳中…</div>';
  try {
    const d = await api(CFG.routes.upload, { form: fd });
    let html = '';
    (d.documents || []).forEach(doc => { html += `<div class="small text-success"><i class="bi bi-check-circle me-1"></i>${esc(doc.title)}（${doc.pages} 頁）<a class="ms-2" href="${doc.url}">開啟</a></div>`; });
    (d.jobs || []).forEach(j => { html += `<div class="small text-info" data-job="${j.id}"><span class="spinner-border spinner-border-sm me-1"></span>${esc(j.type_label)} #${j.id} 處理中…</div>`; watchJob(j.id); });
    (d.errors || []).forEach(er => { html += `<div class="small text-danger"><i class="bi bi-x-circle me-1"></i>${esc(er)}</div>`; });
    box.innerHTML = html || '<div class="small text-muted">沒有處理任何檔案</div>';
    if ((d.documents || []).length && !(d.jobs || []).length) setTimeout(() => location.reload(), 900);
  } catch (e) { box.innerHTML = `<div class="small text-danger">${esc(e.message)}</div>`; }
}
function esc(s) { return String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c])); }

async function watchJob(id) {
  try {
    const job = await pollJob(CFG.routes.jobStatus.replace('__ID__', id), null, { interval: 2500 });
    const row = document.querySelector(`[data-job="${id}"]`);
    if (row) row.innerHTML = `<i class="bi bi-check-circle text-success me-1"></i>${esc(job.type_label)} #${id} 完成 ` + (job.result ? `<a href="${job.result.url}">開啟「${esc(job.result.title)}」</a>` : (job.download_url ? `<a href="${job.download_url}">下載 ${esc(job.output_name)}</a>` : ''));
    toast(`${job.type_label} 完成`, 'success');
    refreshJobs();
  } catch (e) {
    const row = document.querySelector(`[data-job="${id}"]`);
    if (row) row.innerHTML = `<i class="bi bi-x-circle text-danger me-1"></i>工作 #${id} 失敗：${esc(e.message)}`;
    toast(e.message, 'error');
    refreshJobs();
  }
}

// ── 背景工作列表
async function refreshJobs() {
  try {
    const d = await api(CFG.routes.jobs, { method: 'GET' });
    const box = $('#pdxJobs');
    if (!d.jobs.length) { box.innerHTML = '<div class="text-muted small">目前沒有背景工作</div>'; return; }
    const label = { pending: '等待中', running: '處理中', done: '完成', failed: '失敗' };
    const cls = { pending: 'bg-warning text-dark', running: 'bg-warning text-dark', done: 'bg-success', failed: 'bg-danger' };
    box.innerHTML = d.jobs.map(j => `<div class="pdx-job" data-id="${j.id}" data-status="${j.status}">
      <span class="badge ${cls[j.status]}">${label[j.status]}</span>
      <div class="flex-grow-1"><div>${esc(j.type_label)} <span class="text-muted">#${j.id}</span></div>
      <div class="text-muted" style="font-size:.7rem;">${esc(j.created_at)} ${j.error ? '· ' + esc(j.error.slice(0, 60)) : ''}</div></div>
      ${j.status === 'done' && j.result ? `<a class="btn btn-sm btn-outline-primary py-0" href="${j.result.url}">開啟</a>` : ''}
      ${j.status === 'done' && j.download_url ? `<a class="btn btn-sm btn-outline-success py-0" href="${j.download_url}"><i class="bi bi-download"></i></a>` : ''}
    </div>`).join('');
  } catch (e) { /* ignore */ }
}
$('#pdxJobRefresh').addEventListener('click', refreshJobs);
$$('#pdxJobs .pdx-job').filter(el => ['pending', 'running'].includes(el.dataset.status)).forEach(el => watchJob(el.dataset.id));

// ── 快速工具
$$('.pdx-tool[data-tool]').forEach(el => el.addEventListener('click', () => {
  const min = +(el.dataset.min || 1);
  if (CFG.rank < min) { toast('此功能需要 ' + (min === 3 ? 'Pro' : 'Standard') + ' 等級權限', 'warn'); return; }
  if (el.classList.contains('locked')) { toast('此功能目前無法使用（伺服器未安裝對應元件）', 'warn'); return; }
  switch (el.dataset.tool) {
    case 'merge': toast('請在下方文件清單勾選兩份以上文件，再按「合併所選」', 'info'); window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); break;
    case 'url': $('#pdxUrlBox').classList.toggle('d-none'); $('#pdxUrl').focus(); break;
    case 'office': fileInput.click(); break;
    case 'open': { const first = document.querySelector('#pdxDocRows .title a'); if (first) location.href = first.href; else toast('請先上傳文件', 'info'); break; }
    case 'scan': new bootstrap.Modal('#pdxScanModal').show(); break;
  }
}));

$('#pdxUrlGo').addEventListener('click', async () => {
  const url = $('#pdxUrl').value.trim();
  if (!url) return;
  try {
    const d = await api(CFG.routes.url, { body: { url, project_id: $('#pdxProject').value || null } });
    toast('已送出轉換工作 #' + d.job.id, 'info');
    $('#pdxUploadResult').insertAdjacentHTML('beforeend', `<div class="small text-info" data-job="${d.job.id}"><span class="spinner-border spinner-border-sm me-1"></span>網頁轉 PDF #${d.job.id} 處理中…</div>`);
    watchJob(d.job.id); refreshJobs();
  } catch (e) { toast(e.message, 'error'); }
});

// ── 合併
const selBtn = $('#pdxMergeBtn');
function updateSel() {
  const n = $$('.pdx-sel:checked').length;
  $('#pdxSelCount').textContent = n;
  selBtn.classList.toggle('d-none', n < 2 || CFG.rank < 2);
}
$$('.pdx-sel').forEach(c => c.addEventListener('change', updateSel));
$('#pdxCheckAll')?.addEventListener('change', e => { $$('.pdx-sel:not(:disabled)').forEach(c => c.checked = e.target.checked); updateSel(); });
selBtn.addEventListener('click', async () => {
  const ids = $$('.pdx-sel:checked').map(c => +c.value);
  if (ids.length < 2) return;
  const title = prompt('合併後的文件名稱（留空使用預設）', '');
  if (title === null) return;
  selBtn.disabled = true;
  try {
    const d = await api(CFG.routes.merge, { body: { document_ids: ids, title } });
    toast('合併完成', 'success');
    location.href = d.document.url;
  } catch (e) { toast(e.message, 'error'); selBtn.disabled = false; }
});

// ── 刪除
$$('.pdx-del').forEach(b => b.addEventListener('click', async () => {
  if (!confirm('確定刪除此文件？此動作無法復原。')) return;
  try { await api(b.dataset.url, { method: 'DELETE' }); b.closest('tr').remove(); toast('已刪除', 'success'); }
  catch (e) { toast(e.message, 'error'); }
}));

// ── 掃描
$('#pdxScanGo')?.addEventListener('click', async () => {
  const files = $('#pdxScanFiles').files;
  if (!files.length) { toast('請選擇影像', 'warn'); return; }
  const fd = new FormData();
  Array.from(files).slice(0, 60).forEach(f => fd.append('images[]', f));
  fd.append('enhance', $('#pdxScanEnhance').value);
  fd.append('page', $('#pdxScanPage').value);
  fd.append('deskew', $('#pdxScanDeskew').checked ? 1 : 0);
  fd.append('trim', $('#pdxScanTrim').checked ? 1 : 0);
  fd.append('ocr', $('#pdxScanOcr').checked ? 1 : 0);
  fd.append('title', $('#pdxScanTitle').value);
  fd.append('project_id', $('#pdxProject').value || '');
  const btn = $('#pdxScanGo'); btn.disabled = true;
  try {
    const d = await api(CFG.routes.scan, { form: fd });
    bootstrap.Modal.getInstance($('#pdxScanModal')).hide();
    toast('掃描工作 #' + d.job.id + ' 已送出，完成後會出現在文件清單', 'info');
    $('#pdxUploadResult').insertAdjacentHTML('beforeend', `<div class="small text-info" data-job="${d.job.id}"><span class="spinner-border spinner-border-sm me-1"></span>掃描建檔 #${d.job.id} 處理中…</div>`);
    watchJob(d.job.id); refreshJobs();
  } catch (e) { toast(e.message, 'error'); }
  btn.disabled = false;
});
</script>
@endpush