@php
    // Collect anotasi_pdf from disposisi or sourceDisposisi
    $anotasiPdfData = null;
    $anotasiDariUser = null;

    // Check disposisi attached to this surat (pimpinan annotated this surat)
    if ($suratMasuk->relationLoaded('disposisi')) {
        foreach ($suratMasuk->disposisi as $disposisi) {
            if (!empty($disposisi->anotasi_pdf)) {
                $anotasiPdfData = $disposisi->anotasi_pdf;
                $anotasiDariUser = $disposisi->dariUser->jabatan_with_satuan ?? $disposisi->dariUser->jabatan ?? 'Pengirim';
                break;
            }
        }
    }

    // Also check sourceDisposisi (surat created from disposisi)
    if (!$anotasiPdfData && $suratMasuk->relationLoaded('sourceDisposisi') && $suratMasuk->sourceDisposisi) {
        if (!empty($suratMasuk->sourceDisposisi->anotasi_pdf)) {
            $anotasiPdfData = $suratMasuk->sourceDisposisi->anotasi_pdf;
            $anotasiDariUser = $suratMasuk->sourceDisposisi->dariUser->jabatan_with_satuan ?? $suratMasuk->sourceDisposisi->dariUser->jabatan ?? 'Pengirim';
        }
    }

    $hasAnotasi = !empty($anotasiPdfData);
@endphp

<!-- PDF Preview Card with PDF.js -->
<div class="card shadow-sm mb-4">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            <i class="bi bi-file-earmark-pdf"></i> Preview Dokumen
        </h5>
        @if($hasAnotasi)
        <div class="btn-group btn-group-sm" id="anotasi-toggle-group">
            <button type="button" class="btn btn-outline-light btn-sm" id="btn-view-original" title="Lihat dokumen asli">
                <i class="bi bi-file-earmark"></i> Original
            </button>
            <button type="button" class="btn btn-light btn-sm active" id="btn-view-anotasi" title="Lihat anotasi dari {{ $anotasiDariUser }}">
                <i class="bi bi-pencil-square"></i> Anotasi
            </button>
        </div>
        @endif
    </div>
    <div class="card-body p-0" style="background-color: #525659;">
        <div id="pdf-scroll-wrapper" style="max-height: 80vh; overflow-y: auto; overflow-x: auto; background-color: #525659;">
            <div id="pdf-pages-container" class="d-flex flex-column align-items-start py-3"></div>
        </div>
    </div>
    <div class="card-footer bg-white">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <!-- Zoom Controls -->
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="pdf-zoom-out">
                    <i class="bi bi-zoom-out"></i>
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="pdf-zoom-in">
                    <i class="bi bi-zoom-in"></i>
                </button>
            </div>

            <!-- Action Buttons -->
            <div class="btn-group">
                <a href="{{ route('surat-masuk.view-pdf', $suratMasuk) }}" class="btn btn-sm btn-outline-primary" target="_blank">
                    <i class="bi bi-box-arrow-up-right"></i> Buka di Tab Baru
                </a>
                <a href="{{ route('surat-masuk.download-pdf', $suratMasuk) }}" class="btn btn-sm btn-outline-success">
                    <i class="bi bi-download"></i> Download
                </a>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .pdf-page-canvas {
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        margin: 10px 0;
        display: block;
        height: auto;
    }

    #pdf-pages-container {
        margin: 0 auto;
    }
    #pdf-scroll-wrapper {
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
    }
    #pdf-scroll-wrapper.dragging {
        cursor: grabbing;
    }

    @if($hasAnotasi)
    #anotasi-toggle-group .btn.active {
        font-weight: 600;
    }
    .anno-overlay-canvas {
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        margin: 10px auto;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
    }
    @endif
</style>
@endpush

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
    // PDF.js Configuration
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

    let pdfDoc = null;
    let baseScale = 1;
    let zoomLevel = 1;
    const scrollWrapper = document.getElementById('pdf-scroll-wrapper');
    const pagesContainer = document.getElementById('pdf-pages-container');
    const minZoom = 0.5;
    const maxZoom = 3;
    const zoomStep = 0.25;

    @if($hasAnotasi)
    // Annotation data
    let anotasiData = {};
    let showAnotasi = true; // Default show annotation when available

    try {
        anotasiData = JSON.parse(@json($anotasiPdfData));
    } catch(e) {
        console.warn('Failed to parse anotasi data:', e);
    }

    function renderAnnotationOverlay(pageNumber, overlayCanvas, baseCanvas) {
        if (!showAnotasi || !overlayCanvas || !baseCanvas) return;

        const annoCtx = overlayCanvas.getContext('2d');
        overlayCanvas.width = baseCanvas.width;
        overlayCanvas.height = baseCanvas.height;
        annoCtx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);

        const pageKey = String(pageNumber);
        if (anotasiData[pageKey]) {
            const img = new Image();
            img.onload = function() {
                annoCtx.drawImage(img, 0, 0, overlayCanvas.width, overlayCanvas.height);
            };
            img.src = anotasiData[pageKey];
        }
    }

    // Toggle buttons
    document.getElementById('btn-view-original').addEventListener('click', function() {
        showAnotasi = false;
        this.classList.add('active');
        this.classList.remove('btn-outline-light');
        this.classList.add('btn-light');
        const anotasiBtn = document.getElementById('btn-view-anotasi');
        anotasiBtn.classList.remove('active');
        anotasiBtn.classList.remove('btn-light');
        anotasiBtn.classList.add('btn-outline-light');
        document.querySelectorAll('.anno-overlay-canvas').forEach(function(el) {
            el.style.display = 'none';
        });
    });

    document.getElementById('btn-view-anotasi').addEventListener('click', function() {
        showAnotasi = true;
        this.classList.add('active');
        this.classList.remove('btn-outline-light');
        this.classList.add('btn-light');
        const originalBtn = document.getElementById('btn-view-original');
        originalBtn.classList.remove('active');
        originalBtn.classList.remove('btn-light');
        originalBtn.classList.add('btn-outline-light');
        document.querySelectorAll('.anno-overlay-canvas').forEach(function(el) {
            el.style.display = 'block';
        });
    });
    @endif

    // Load PDF - use route for private files support
    const pdfUrl = '{{ route('surat-masuk.view-pdf', $suratMasuk) }}';

    pdfjsLib.getDocument(pdfUrl).promise.then(function(pdfDoc_) {
        pdfDoc = pdfDoc_;
        renderAllPages();
    }).catch(function(error) {
        console.error('Error loading PDF:', error);
        scrollWrapper.innerHTML =
            '<div class="alert alert-danger m-3">Gagal memuat PDF. <a href="' + pdfUrl + '" target="_blank">Klik di sini untuk membuka PDF</a></div>';
    });

    function renderAllPages() {
        if (!pdfDoc) return;
        pagesContainer.innerHTML = '';
        zoomLevel = 1;
        pagesContainer.style.zoom = '1';

        const totalPages = pdfDoc.numPages;
        let renderedCount = 0;

        for (let pageNumber = 1; pageNumber <= totalPages; pageNumber++) {
            pdfDoc.getPage(pageNumber).then(function(page) {
                const viewport = page.getViewport({ scale: baseScale });

                const pageWrapper = document.createElement('div');
                pageWrapper.className = 'position-relative mb-2';

                const canvas = document.createElement('canvas');
                canvas.className = 'pdf-page-canvas';
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                pageWrapper.appendChild(canvas);

                @if($hasAnotasi)
                const overlayCanvas = document.createElement('canvas');
                overlayCanvas.className = 'anno-overlay-canvas';
                overlayCanvas.style.display = showAnotasi ? 'block' : 'none';
                pageWrapper.appendChild(overlayCanvas);
                @endif

                pagesContainer.appendChild(pageWrapper);

                const renderContext = {
                    canvasContext: canvas.getContext('2d'),
                    viewport: viewport
                };

                page.render(renderContext).promise.then(function() {
                    @if($hasAnotasi)
                    renderAnnotationOverlay(page.pageNumber, overlayCanvas, canvas);
                    @endif
                    renderedCount++;
                });
            });
        }
    }

    function zoomIn() {
        if (zoomLevel >= maxZoom) return;
        const scrollTop = scrollWrapper.scrollTop;
        const scrollLeft = scrollWrapper.scrollLeft;
        const oldZoom = zoomLevel;
        zoomLevel = Math.min(maxZoom, zoomLevel + zoomStep);
        pagesContainer.style.zoom = zoomLevel;
        scrollWrapper.scrollTop = scrollTop * (zoomLevel / oldZoom);
        scrollWrapper.scrollLeft = scrollLeft * (zoomLevel / oldZoom);
    }

    function zoomOut() {
        if (zoomLevel <= minZoom) return;
        const scrollTop = scrollWrapper.scrollTop;
        const scrollLeft = scrollWrapper.scrollLeft;
        const oldZoom = zoomLevel;
        zoomLevel = Math.max(minZoom, zoomLevel - zoomStep);
        pagesContainer.style.zoom = zoomLevel;
        scrollWrapper.scrollTop = scrollTop * (zoomLevel / oldZoom);
        scrollWrapper.scrollLeft = scrollLeft * (zoomLevel / oldZoom);
    }

    document.getElementById('pdf-zoom-in').addEventListener('click', zoomIn);
    document.getElementById('pdf-zoom-out').addEventListener('click', zoomOut);

    // Drag to scroll
    (function() {
        let isDragging = false;
        let startX, startY;
        let scrollStartX, scrollStartY;

        scrollWrapper.addEventListener('mousedown', function(e) {
            if (e.button !== 0) return;
            isDragging = true;
            startX = e.clientX;
            startY = e.clientY;
            scrollStartX = scrollWrapper.scrollLeft;
            scrollStartY = scrollWrapper.scrollTop;
            scrollWrapper.classList.add('dragging');
            e.preventDefault();
        });

        document.addEventListener('mousemove', function(e) {
            if (!isDragging) return;
            const dx = e.clientX - startX;
            const dy = e.clientY - startY;
            scrollWrapper.scrollLeft = scrollStartX - dx;
            scrollWrapper.scrollTop = scrollStartY - dy;
        });

        document.addEventListener('mouseup', function() {
            if (!isDragging) return;
            isDragging = false;
            scrollWrapper.classList.remove('dragging');
        });
    })();
</script>
@endpush