@include('documents.partials.hint')

<div class="document-manager">
    @foreach($categories as $code => $label)
        @php
            $categoryDocs = $documents->get($code, collect());
            $hasFiles = $categoryDocs->isNotEmpty();
        @endphp
        <div class="doc-category-card {{ $hasFiles ? 'has-files' : '' }}">
            <div class="doc-category-header">
                <div class="doc-category-title">
                    <span class="doc-category-index">{{ $code }}</span>
                    <span>{{ $label }}</span>
                </div>
                <span class="doc-status-badge {{ $hasFiles ? 'uploaded' : 'pending' }}">
                    @if($hasFiles)
                        <i class="bi bi-check-circle-fill me-1"></i>已上載 {{ $categoryDocs->count() }} 份
                    @else
                        <i class="bi bi-dash-circle me-1"></i>未上載
                    @endif
                </span>
            </div>

            @if($hasFiles)
                <ul class="doc-file-list">
                    @foreach($categoryDocs as $doc)
                        <li class="doc-file-item">
                            <div class="doc-file-info">
                                <i class="bi bi-file-earmark-pdf text-danger"></i>
                                <div>
                                    <button type="button"
                                            class="doc-file-name doc-preview-btn"
                                            data-preview-url="{{ route('documents.previewUrl', $doc) }}"
                                            data-preview-title="{{ $doc->original_filename }}">
                                        {{ $doc->original_filename }}
                                    </button>
                                    <div class="doc-file-meta">
                                        {{ $doc->created_at?->format('Y-m-d H:i') }}
                                        @if($doc->uploader)
                                            · {{ $doc->uploader->name }}
                                        @endif
                                        @if($doc->expires_on)
                                            · <i class="bi bi-calendar-event"></i>
                                            @if($doc->expires_on->isPast())
                                                <span class="text-danger">已到期 {{ $doc->expires_on->format('Y-m-d') }}</span>
                                            @elseif($doc->expires_on->lte(now()->addDays(30)))
                                                <span class="text-warning">{{ $doc->expires_on->format('Y-m-d') }} 到期</span>
                                            @else
                                                {{ $doc->expires_on->format('Y-m-d') }} 到期
                                            @endif
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="doc-file-actions">
                                <button type="button"
                                        class="btn btn-sm btn-outline-primary doc-preview-btn"
                                        title="預覽 PDF"
                                        data-preview-url="{{ route('documents.previewUrl', $doc) }}"
                                        data-preview-title="{{ $doc->original_filename }}">
                                    <i class="bi bi-eye"></i>
                                </button>
                                @can('delete', $doc)
                                    <form action="{{ route('documents.destroy', $doc) }}" method="POST" onsubmit="return confirm('確定要刪除此文件嗎？');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="刪除">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                @endcan
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif

            <form action="{{ $uploadRoute }}" method="POST" enctype="multipart/form-data" class="doc-upload-form">
                @csrf
                <input type="hidden" name="category" value="{{ $code }}">
                <div class="doc-upload-row">
                    <input type="file" name="files[]" class="form-control form-control-sm"
                           accept="application/pdf,.pdf,image/jpeg,image/png,image/*" multiple required>
                    <button type="submit" class="btn btn-sm btn-primary">
                        <i class="bi bi-upload me-1"></i>上載
                    </button>
                </div>
                <div class="doc-upload-row mt-1">
                    <input type="date" name="expires_on" class="form-control form-control-sm" title="到期日（適用於本次上載的全部文件，可留空）">
                    <span class="form-text text-nowrap">到期日（可留空）</span>
                </div>
            </form>
        </div>
    @endforeach
</div>

<div class="modal fade" id="docPreviewModal" tabindex="-1" aria-labelledby="docPreviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="docPreviewModalLabel">PDF 預覽</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="關閉"></button>
            </div>
            <div class="doc-preview-toolbar px-3 py-2 border-bottom bg-light">
                <div class="doc-preview-search">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="search" class="form-control" id="docPreviewSearch" placeholder="搜尋文字..." autocomplete="off">
                        <button type="button" class="btn btn-outline-secondary" id="docPreviewSearchPrev" title="上一個結果" disabled>
                            <i class="bi bi-chevron-up"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="docPreviewSearchNext" title="下一個結果" disabled>
                            <i class="bi bi-chevron-down"></i>
                        </button>
                    </div>
                    <span id="docPreviewSearchInfo" class="doc-preview-search-info text-muted small"></span>
                </div>
                <div class="doc-preview-zoom">
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary" id="docPreviewZoomOut" title="縮小">
                            <i class="bi bi-dash-lg"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary doc-preview-zoom-level" id="docPreviewZoomFit" title="適應寬度">
                            <span id="docPreviewZoomLevel">100%</span>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="docPreviewZoomIn" title="放大">
                            <i class="bi bi-plus-lg"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-body p-0 doc-preview-body">
                <div id="docPreviewLoading" class="doc-preview-loading">
                    <div class="spinner-border text-light" role="status"></div>
                    <span class="ms-2">載入中...</span>
                </div>
                <div id="docPreviewError" class="doc-preview-error d-none"></div>
                <div id="docPreviewCanvasWrap" class="doc-preview-canvas-wrap d-none">
                    <div class="doc-preview-page-wrap">
                        <canvas id="docPreviewCanvas"></canvas>
                        <canvas id="docPreviewHighlight"></canvas>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <div class="btn-group">
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="docPreviewPrev" disabled>
                        <i class="bi bi-chevron-left"></i> 上一頁
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="docPreviewNext" disabled>
                        下一頁 <i class="bi bi-chevron-right"></i>
                    </button>
                </div>
                <span id="docPreviewPageInfo" class="text-muted small">-</span>
            </div>
        </div>
    </div>
</div>

@once
@push('styles')
<link rel="stylesheet" href="{{ asset('css/pages/documents/partials/manager.css') }}">
@endpush
@endonce

@pushOnce('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof pdfjsLib === 'undefined' || typeof bootstrap === 'undefined') {
        return;
    }

    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

    const MIN_SCALE = 0.5;
    const MAX_SCALE = 4;
    const ZOOM_STEP = 1.25;

    const modalEl = document.getElementById('docPreviewModal');
    const titleEl = document.getElementById('docPreviewModalLabel');
    const loadingEl = document.getElementById('docPreviewLoading');
    const errorEl = document.getElementById('docPreviewError');
    const canvasWrapEl = document.getElementById('docPreviewCanvasWrap');
    const canvasEl = document.getElementById('docPreviewCanvas');
    const highlightEl = document.getElementById('docPreviewHighlight');
    const prevBtn = document.getElementById('docPreviewPrev');
    const nextBtn = document.getElementById('docPreviewNext');
    const pageInfoEl = document.getElementById('docPreviewPageInfo');
    const searchInput = document.getElementById('docPreviewSearch');
    const searchPrevBtn = document.getElementById('docPreviewSearchPrev');
    const searchNextBtn = document.getElementById('docPreviewSearchNext');
    const searchInfoEl = document.getElementById('docPreviewSearchInfo');
    const zoomInBtn = document.getElementById('docPreviewZoomIn');
    const zoomOutBtn = document.getElementById('docPreviewZoomOut');
    const zoomFitBtn = document.getElementById('docPreviewZoomFit');
    const zoomLevelEl = document.getElementById('docPreviewZoomLevel');

    if (!modalEl || !canvasEl || !highlightEl) {
        return;
    }

    const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
    let pdfDoc = null;
    let pageNum = 1;
    let rendering = false;
    let scaleMode = 'fit';
    let manualScale = 1;
    let currentScale = 1;
    let searchQuery = '';
    let searchMatches = [];
    let currentMatchIndex = -1;

    function showLoading() {
        loadingEl.classList.remove('d-none');
        errorEl.classList.add('d-none');
        canvasWrapEl.classList.add('d-none');
        errorEl.textContent = '';
    }

    function showError(message) {
        loadingEl.classList.add('d-none');
        canvasWrapEl.classList.add('d-none');
        errorEl.classList.remove('d-none');
        errorEl.textContent = message;
    }

    function showCanvas() {
        loadingEl.classList.add('d-none');
        errorEl.classList.add('d-none');
        canvasWrapEl.classList.remove('d-none');
    }

    function getFitScale(page) {
        const viewportBase = page.getViewport({ scale: 1 });
        const containerWidth = canvasWrapEl.clientWidth > 0 ? canvasWrapEl.clientWidth - 32 : 900;
        return Math.min(Math.max(containerWidth / viewportBase.width, MIN_SCALE), MAX_SCALE);
    }

    async function getEffectiveScale(page) {
        if (scaleMode === 'fit') {
            return getFitScale(page);
        }

        return Math.min(Math.max(manualScale, MIN_SCALE), MAX_SCALE);
    }

    function updateZoomDisplay(scale) {
        zoomLevelEl.textContent = Math.round(scale * 100) + '%';
    }

    function updatePageControls() {
        const total = pdfDoc ? pdfDoc.numPages : 0;
        pageInfoEl.textContent = total ? (pageNum + ' / ' + total) : '-';
        prevBtn.disabled = !pdfDoc || pageNum <= 1;
        nextBtn.disabled = !pdfDoc || pageNum >= total;
        zoomInBtn.disabled = !pdfDoc;
        zoomOutBtn.disabled = !pdfDoc;
        zoomFitBtn.disabled = !pdfDoc;
    }

    function updateSearchControls() {
        const hasQuery = searchQuery.length > 0;
        const hasMatches = searchMatches.length > 0;

        searchPrevBtn.disabled = !hasMatches;
        searchNextBtn.disabled = !hasMatches;

        if (!hasQuery) {
            searchInfoEl.textContent = '';
        } else if (!hasMatches) {
            searchInfoEl.textContent = '找不到結果';
        } else {
            searchInfoEl.textContent = (currentMatchIndex + 1) + ' / ' + searchMatches.length;
        }
    }

    function clearHighlights() {
        const context = highlightEl.getContext('2d');
        context.clearRect(0, 0, highlightEl.width, highlightEl.height);
    }

    function drawHighlights(pageMatches, viewport) {
        clearHighlights();
        const context = highlightEl.getContext('2d');

        pageMatches.forEach(function (match, index) {
            const item = match.item;
            const transform = pdfjsLib.Util.transform(viewport.transform, item.transform);
            const fontHeight = Math.hypot(transform[2], transform[3]);
            const charWidth = item.width / Math.max(item.str.length, 1);
            const x = transform[4] + charWidth * match.charIndex;
            const y = transform[5] - fontHeight;
            const width = charWidth * match.length;
            const isActive = searchMatches[currentMatchIndex] === match;

            context.fillStyle = isActive ? 'rgba(255, 165, 0, 0.55)' : 'rgba(255, 255, 0, 0.4)';
            context.fillRect(x, y, width, fontHeight);
        });
    }

    async function buildSearchMatches(query) {
        if (!pdfDoc || !query) {
            return [];
        }

        const matches = [];
        const normalizedQuery = query.toLowerCase();

        for (let i = 1; i <= pdfDoc.numPages; i++) {
            const page = await pdfDoc.getPage(i);
            const textContent = await page.getTextContent();

            textContent.items.forEach(function (item) {
                if (!item.str) {
                    return;
                }

                const text = item.str;
                const lowerText = text.toLowerCase();
                let start = 0;

                while (start < lowerText.length) {
                    const index = lowerText.indexOf(normalizedQuery, start);
                    if (index === -1) {
                        break;
                    }

                    matches.push({
                        pageNum: i,
                        charIndex: index,
                        length: query.length,
                        item: item,
                    });
                    start = index + 1;
                }
            });
        }

        return matches;
    }

    async function runSearch(query) {
        searchQuery = query.trim();
        searchMatches = searchQuery ? await buildSearchMatches(searchQuery) : [];
        currentMatchIndex = searchMatches.length ? 0 : -1;
        updateSearchControls();

        if (currentMatchIndex >= 0) {
            await goToMatch(currentMatchIndex);
        } else if (pdfDoc) {
            await renderPage(pageNum);
        }
    }

    async function goToMatch(index) {
        if (!searchMatches.length || index < 0 || index >= searchMatches.length) {
            return;
        }

        currentMatchIndex = index;
        const match = searchMatches[currentMatchIndex];
        updateSearchControls();

        if (match.pageNum !== pageNum) {
            await renderPage(match.pageNum);
        } else {
            const page = await pdfDoc.getPage(pageNum);
            const viewport = page.getViewport({ scale: currentScale });
            const pageMatches = searchMatches.filter(function (item) {
                return item.pageNum === pageNum;
            });
            drawHighlights(pageMatches, viewport);
        }

        const page = await pdfDoc.getPage(pageNum);
        const viewport = page.getViewport({ scale: currentScale });
        const transform = pdfjsLib.Util.transform(viewport.transform, match.item.transform);
        const fontHeight = Math.hypot(transform[2], transform[3]);
        const charWidth = match.item.width / Math.max(match.item.str.length, 1);
        const x = transform[4] + charWidth * match.charIndex;
        const y = transform[5] - fontHeight;

        canvasWrapEl.scrollTo({
            left: Math.max(x - canvasWrapEl.clientWidth / 2, 0),
            top: Math.max(y - canvasWrapEl.clientHeight / 2, 0),
            behavior: 'smooth',
        });
    }

    async function renderPage(num) {
        if (!pdfDoc || rendering) {
            return;
        }

        rendering = true;
        pageNum = num;

        try {
            const page = await pdfDoc.getPage(pageNum);
            const scale = await getEffectiveScale(page);
            currentScale = scale;
            const viewport = page.getViewport({ scale });
            const context = canvasEl.getContext('2d');

            canvasEl.width = viewport.width;
            canvasEl.height = viewport.height;
            highlightEl.width = viewport.width;
            highlightEl.height = viewport.height;

            await page.render({
                canvasContext: context,
                viewport: viewport,
            }).promise;

            const pageMatches = searchMatches.filter(function (item) {
                return item.pageNum === pageNum;
            });
            drawHighlights(pageMatches, viewport);

            showCanvas();
            updatePageControls();
            updateZoomDisplay(scale);
        } catch (error) {
            showError('無法顯示 PDF 頁面');
            console.error(error);
        } finally {
            rendering = false;
        }
    }

    async function setZoom(scale) {
        if (!pdfDoc) {
            return;
        }

        scaleMode = 'manual';
        manualScale = Math.min(Math.max(scale, MIN_SCALE), MAX_SCALE);
        await renderPage(pageNum);
    }

    async function zoomBy(factor) {
        if (!pdfDoc) {
            return;
        }

        const page = await pdfDoc.getPage(pageNum);
        const baseScale = scaleMode === 'fit' ? await getFitScale(page) : manualScale;
        scaleMode = 'manual';
        manualScale = baseScale * factor;
        await renderPage(pageNum);
    }

    async function zoomToFit() {
        if (!pdfDoc) {
            return;
        }

        scaleMode = 'fit';
        await renderPage(pageNum);
    }

    async function openPreview(url, title) {
        titleEl.textContent = title || 'PDF 預覽';
        pdfDoc = null;
        pageNum = 1;
        scaleMode = 'fit';
        manualScale = 1;
        searchQuery = '';
        searchMatches = [];
        currentMatchIndex = -1;
        searchInput.value = '';
        showLoading();
        updatePageControls();
        updateSearchControls();
        modal.show();

        try {
            const response = await fetch(url, {
                credentials: 'same-origin',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/pdf',
                },
            });

            if (!response.ok) {
                if (response.status === 404) {
                    throw new Error('NOT_FOUND');
                }
                if (response.status === 403) {
                    throw new Error('SIGNATURE_EXPIRED');
                }
                throw new Error('HTTP ' + response.status);
            }

            const buffer = await response.arrayBuffer();
            pdfDoc = await pdfjsLib.getDocument({ data: buffer }).promise;
            await renderPage(1);
        } catch (error) {
            if (error && error.message === 'NOT_FOUND') {
                showError('找不到此檔案，可能已被移除或上載失敗。請刪除此記錄後重新上載。');
            } else if (error && error.message === 'SIGNATURE_EXPIRED') {
                showError('預覽連結已過期，請重新整理頁面後再試。');
            } else {
                showError('無法載入 PDF，請稍後再試。');
            }
            console.error(error);
        }
    }

    function resetPreview() {
        pdfDoc = null;
        pageNum = 1;
        rendering = false;
        scaleMode = 'fit';
        manualScale = 1;
        searchQuery = '';
        searchMatches = [];
        currentMatchIndex = -1;
        pinchActive = false;
        pinchJustEnded = false;
        lastTapTime = 0;

        if (pageWrapEl) {
            pageWrapEl.style.transform = '';
        }
        searchInput.value = '';

        const context = canvasEl.getContext('2d');
        context.clearRect(0, 0, canvasEl.width, canvasEl.height);
        canvasEl.width = 0;
        canvasEl.height = 0;
        clearHighlights();
        highlightEl.width = 0;
        highlightEl.height = 0;

        showLoading();
        updatePageControls();
        updateSearchControls();
        zoomLevelEl.textContent = '100%';
    }

    document.addEventListener('click', async function (event) {
        const button = event.target.closest('.doc-preview-btn');
        if (!button) {
            return;
        }

        event.preventDefault();

        // 所有裝置統一使用頁內 canvas 預覽（手機支援雙指縮放／雙擊放大／單指平移），
        // 不提供直連網址或原生檢視器，避免產生下載入口。
        // 簽名網址在點擊當下才即時簽發，頁面放多久都不會過期。
        try {
            const response = await fetch(button.dataset.previewUrl, {
                credentials: 'same-origin',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                },
            });

            if (!response.ok) {
                throw new Error('HTTP ' + response.status);
            }

            const data = await response.json();
            openPreview(data.url, button.dataset.previewTitle);
        } catch (error) {
            alert('無法開啟預覽，請重新整理頁面後再試。');
            console.error(error);
        }
    });

    // ---------- 相片自動轉 PDF 上載 ----------
    const isImageFile = function (file) {
        return file.type && file.type.indexOf('image/') === 0;
    };

    const imageToPdfBlob = function (file) {
        return new Promise(function (resolve, reject) {
            const { jsPDF } = window.jspdf || {};
            if (typeof jsPDF !== 'function') {
                reject(new Error('PDF 轉換元件未載入'));
                return;
            }

            const objectUrl = URL.createObjectURL(file);
            const img = new Image();

            img.onload = function () {
                URL.revokeObjectURL(objectUrl);

                try {
                    const canvas = document.createElement('canvas');
                    canvas.width = img.naturalWidth;
                    canvas.height = img.naturalHeight;
                    const context = canvas.getContext('2d');

                    // 先鋪白底（處理 PNG 透明背景）
                    context.fillStyle = '#ffffff';
                    context.fillRect(0, 0, canvas.width, canvas.height);
                    context.drawImage(img, 0, 0);

                    const landscape = canvas.width > canvas.height;
                    const pdf = new jsPDF({
                        orientation: landscape ? 'landscape' : 'portrait',
                        unit: 'mm',
                        format: 'a4',
                    });

                    const pageWidth = pdf.internal.pageSize.getWidth();
                    const pageHeight = pdf.internal.pageSize.getHeight();
                    const scale = Math.min(pageWidth / canvas.width, pageHeight / canvas.height);
                    const drawWidth = canvas.width * scale;
                    const drawHeight = canvas.height * scale;

                    pdf.addImage(
                        canvas.toDataURL('image/jpeg', 0.92),
                        'JPEG',
                        (pageWidth - drawWidth) / 2,
                        (pageHeight - drawHeight) / 2,
                        drawWidth,
                        drawHeight
                    );

                    resolve(pdf.output('blob'));
                } catch (error) {
                    reject(error);
                }
            };

            img.onerror = function () {
                URL.revokeObjectURL(objectUrl);
                reject(new Error('無法讀取此圖片格式'));
            };

            img.src = objectUrl;
        });
    };

    document.querySelectorAll('form.doc-upload-form').forEach(function (form) {
        form.addEventListener('submit', async function (event) {
            const input = form.querySelector('input[type="file"]');

            if (!input || !input.files.length) {
                return;
            }

            const files = Array.from(input.files);

            // 全部已是 PDF 就照原本流程
            if (files.every(function (file) { return file.type === 'application/pdf'; })) {
                return;
            }

            if (typeof window.jspdf === 'undefined') {
                event.preventDefault();
                alert('相片轉 PDF 元件未載入（需要網路連線），請改用 PDF 檔案上載。');
                return;
            }

            event.preventDefault();
            form.querySelector('button[type="submit"]').disabled = true;

            const transfer = new DataTransfer();

            for (const file of files) {
                if (file.type === 'application/pdf') {
                    transfer.items.add(file);
                    continue;
                }

                try {
                    const pdfBlob = await imageToPdfBlob(file);
                    const baseName = (file.name || '相片').replace(/\.[^.]+$/, '') || '相片';
                    transfer.items.add(new File([pdfBlob], baseName + '.pdf', { type: 'application/pdf' }));
                } catch (error) {
                    form.querySelector('button[type="submit"]').disabled = false;
                    alert('「' + file.name + '」轉換 PDF 失敗（' + error.message + '），請改用 JPEG/PNG 相片或 PDF 檔案。');
                    return;
                }
            }

            input.files = transfer.files;
            form.submit();
        });
    });

    prevBtn.addEventListener('click', function () {
        if (pdfDoc && pageNum > 1) {
            renderPage(pageNum - 1);
        }
    });

    nextBtn.addEventListener('click', function () {
        if (pdfDoc && pageNum < pdfDoc.numPages) {
            renderPage(pageNum + 1);
        }
    });

    zoomInBtn.addEventListener('click', function () {
        zoomBy(ZOOM_STEP);
    });

    zoomOutBtn.addEventListener('click', function () {
        zoomBy(1 / ZOOM_STEP);
    });

    zoomFitBtn.addEventListener('click', function () {
        zoomToFit();
    });

    let searchDebounceTimer = null;
    searchInput.addEventListener('input', function () {
        clearTimeout(searchDebounceTimer);
        searchDebounceTimer = setTimeout(function () {
            runSearch(searchInput.value);
        }, 300);
    });

    searchInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
            event.preventDefault();
            if (event.shiftKey) {
                if (currentMatchIndex > 0) {
                    goToMatch(currentMatchIndex - 1);
                } else if (searchMatches.length) {
                    goToMatch(searchMatches.length - 1);
                }
            } else if (searchMatches.length) {
                if (currentMatchIndex < 0) {
                    goToMatch(0);
                } else {
                    goToMatch((currentMatchIndex + 1) % searchMatches.length);
                }
            } else {
                runSearch(searchInput.value);
            }
        }
    });

    searchPrevBtn.addEventListener('click', function () {
        if (!searchMatches.length) {
            return;
        }

        const nextIndex = currentMatchIndex <= 0
            ? searchMatches.length - 1
            : currentMatchIndex - 1;
        goToMatch(nextIndex);
    });

    searchNextBtn.addEventListener('click', function () {
        if (!searchMatches.length) {
            return;
        }

        const nextIndex = currentMatchIndex < 0
            ? 0
            : (currentMatchIndex + 1) % searchMatches.length;
        goToMatch(nextIndex);
    });

    canvasWrapEl.addEventListener('wheel', function (event) {
        if (!pdfDoc || !event.ctrlKey) {
            return;
        }

        event.preventDefault();
        zoomBy(event.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP);
    }, { passive: false });

    // ---------- 觸控手勢：雙指縮放 / 雙擊放大 / 單指平移 ----------
    const pageWrapEl = canvasEl.parentElement;
    if (pageWrapEl) {
        pageWrapEl.style.transformOrigin = '0 0';
    }
    canvasWrapEl.style.touchAction = 'pan-x pan-y';

    let pinchActive = false;
    let pinchStartDist = 0;
    let pinchStartScale = 1;
    let pinchVisualScale = 1;
    let pinchPrevRatio = 1;
    let pinchJustEnded = false;
    let lastTapTime = 0;
    let lastTapX = 0;
    let lastTapY = 0;

    const touchDistance = function (t1, t2) {
        return Math.hypot(t1.clientX - t2.clientX, t1.clientY - t2.clientY);
    };

    const applyGestureTransform = function (visualScale) {
        if (pageWrapEl && currentScale > 0) {
            pageWrapEl.style.transform = 'scale(' + (visualScale / currentScale) + ')';
        }
    };

    canvasWrapEl.addEventListener('touchstart', function (event) {
        if (!pdfDoc) {
            return;
        }

        if (event.touches.length === 2) {
            event.preventDefault();
            pinchActive = true;
            pinchStartDist = touchDistance(event.touches[0], event.touches[1]);
            pinchStartScale = scaleMode === 'manual' ? manualScale : currentScale;
            pinchVisualScale = currentScale;
            pinchPrevRatio = 1;
        }
    }, { passive: false });

    canvasWrapEl.addEventListener('touchmove', function (event) {
        if (!pinchActive || event.touches.length < 2) {
            return;
        }

        event.preventDefault();

        if (!pinchStartDist || !currentScale) {
            return;
        }

        const dist = touchDistance(event.touches[0], event.touches[1]);
        pinchVisualScale = Math.min(
            Math.max(pinchStartScale * (dist / pinchStartDist), MIN_SCALE),
            MAX_SCALE
        );

        const rect = canvasWrapEl.getBoundingClientRect();
        const midX = (event.touches[0].clientX + event.touches[1].clientX) / 2;
        const midY = (event.touches[0].clientY + event.touches[1].clientY) / 2;
        const newRatio = pinchVisualScale / currentScale;

        // 保持雙指中點下的內容位置不跳動
        const contentX = (midX - rect.left + canvasWrapEl.scrollLeft) / pinchPrevRatio;
        const contentY = (midY - rect.top + canvasWrapEl.scrollTop) / pinchPrevRatio;

        applyGestureTransform(pinchVisualScale);

        canvasWrapEl.scrollLeft = Math.max(0, contentX * newRatio - (midX - rect.left));
        canvasWrapEl.scrollTop = Math.max(0, contentY * newRatio - (midY - rect.top));
        pinchPrevRatio = newRatio;
    }, { passive: false });

    canvasWrapEl.addEventListener('touchend', function (event) {
        if (pinchActive && event.touches.length < 2) {
            pinchActive = false;
            pinchJustEnded = true;

            if (pageWrapEl) {
                pageWrapEl.style.transform = '';
            }

            // 手勢結束後以最終縮放比例重新渲染（畫面變清晰）
            if (pinchVisualScale && Math.abs(pinchVisualScale - currentScale) > currentScale * 0.02) {
                setZoom(pinchVisualScale);
            }
            return;
        }

        if (pinchJustEnded) {
            pinchJustEnded = false;
            return;
        }

        if (event.touches.length > 0) {
            return;
        }

        // 雙擊偵測：300ms 內兩次輕點
        const t = event.changedTouches[0];
        if (!t) {
            return;
        }

        const now = Date.now();
        if (now - lastTapTime < 300 && Math.hypot(t.clientX - lastTapX, t.clientY - lastTapY) < 30) {
            lastTapTime = 0;
            handleDoubleTapZoom(t.clientX, t.clientY);
        } else {
            lastTapTime = now;
            lastTapX = t.clientX;
            lastTapY = t.clientY;
        }
    });

    const handleDoubleTapZoom = function (clientX, clientY) {
        const rect = canvasWrapEl.getBoundingClientRect();
        const px = clientX - rect.left;
        const py = clientY - rect.top;

        if (scaleMode === 'fit') {
            // 放大到 2.5 倍，並以輕點位置為中心
            const contentX = (px + canvasWrapEl.scrollLeft) / currentScale;
            const contentY = (py + canvasWrapEl.scrollTop) / currentScale;
            const target = Math.min(Math.max(currentScale * 2.5, MIN_SCALE), MAX_SCALE);

            setZoom(target).then(function () {
                canvasWrapEl.scrollLeft = Math.max(0, contentX * target - px);
                canvasWrapEl.scrollTop = Math.max(0, contentY * target - py);
            });
        } else {
            zoomToFit();
        }
    };

    window.addEventListener('resize', function () {
        if (!pdfDoc || scaleMode !== 'fit' || !modalEl.classList.contains('show')) {
            return;
        }

        renderPage(pageNum);
    });

    modalEl.addEventListener('hidden.bs.modal', resetPreview);
});
</script>
@endPushOnce