{{-- PDF Preview + Inline Annotation (adaptasi dari workflow surat keluar) --}}
@php
    // Untuk Surat Masuk: fokus ke KASMIN sebagai editor anotasi
    $user = auth()->user();
    $canAnnotate = $user && $user->isKASMIN();
    $isSignerMode = false; // tidak ada mode signer khusus di surat masuk

    // Versi PDF yang tersedia: file_annotated (jika ada) atau file_surat
    if ($suratMasuk->file_annotated) {
        $pdfToShow = 'annotated';
        $pdfVersionLabel = 'Versi Anotasi/Koreksi';
        $annotatedTabLabel = 'Anotasi/Koreksi';
    } else {
        $pdfToShow = 'current';
        $pdfVersionLabel = 'Versi Asli';
        $annotatedTabLabel = 'Anotasi/Koreksi';
    }

    // Di surat masuk: KASMIN boleh annotate di file current maupun annotated
    $canAnnotateOnCurrentPdf = $canAnnotate && in_array($pdfToShow, ['current', 'annotated']);
@endphp

@push('styles')
<style>
    /* Container & canvas mengikuti layout workflow surat keluar */
    #pdf-container {
        min-height: auto;
        height: auto;
        max-height: none;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 15px;
    }
    #pdf-wrapper {
        display: inline-block;
        position: relative;
        margin: 0 auto;
    }
    #pdf-canvas {
        display: block;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }
    #annotation-canvas {
        position: absolute;
        top: 0;
        left: 0;
        touch-action: none;
    }
    #annotation-canvas.allow-scroll {
        touch-action: pan-x pan-y;
        pointer-events: none;
    }
    #pdf-loading[style*="display: none"] {
        display: none !important;
    }
    #pdf-nav {
        background: #343a40;
        padding: 10px;
        border-top: 1px solid #495057;
    }
    @media (min-width: 992px) and (max-width: 1399px) and (orientation: landscape),
           (max-width: 991.98px) {
        .pdf-preview-reorderable {
            display: flex;
            flex-direction: column;
        }
        .pdf-preview-reorderable #annotation-toolbar {
            order: 10;
            border-top: 1px solid #dee2e6;
            border-bottom: none;
        }
        .pdf-preview-reorderable #pdf-container {
            order: 2;
        }
        .pdf-preview-reorderable #pdf-nav {
            order: 3;
        }
        #pdf-container {
            min-height: auto;
            height: auto;
            max-height: none;
        }
    }
</style>
@endpush

<div class="card shadow-sm mb-4">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center py-2">
        <h5 class="mb-0">
            <i class="bi bi-file-earmark-pdf"></i> Dokumen Surat
            @if($pdfToShow === 'annotated')
                <span class="badge bg-warning text-dark ms-2">
                    <i class="bi bi-pencil-square"></i> {{ $pdfVersionLabel }}
                </span>
            @endif
        </h5>
        <div class="btn-group btn-group-sm">
            @if($suratMasuk->file_surat || $suratMasuk->file_annotated)
                <a href="{{ route('surat-masuk.download-pdf', $suratMasuk) }}"
                   class="btn btn-light"
                   title="Download">
                    <i class="bi bi-download"></i> Download
                </a>
            @endif
        </div>
    </div>

    {{-- Toggle versi (jika ada file_annotated) --}}
    @if($suratMasuk->file_annotated)
    <div class="card-header bg-light py-2 border-bottom">
        <div class="btn-group btn-group-sm w-100" role="group">
            <input type="radio" class="btn-check" name="pdfVersionMasuk" id="showAnnotatedMasuk" value="annotated" {{ $pdfToShow === 'annotated' ? 'checked' : '' }}>
            <label class="btn btn-outline-warning" for="showAnnotatedMasuk">
                <i class="bi bi-pencil-square"></i> {{ $annotatedTabLabel }}
            </label>

            <input type="radio" class="btn-check" name="pdfVersionMasuk" id="showOriginalMasuk" value="current" {{ $pdfToShow === 'current' ? 'checked' : '' }}>
            <label class="btn btn-outline-secondary" for="showOriginalMasuk">
                <i class="bi bi-file-earmark"></i> File Asli
            </label>
        </div>
    </div>
    @endif

    <div class="pdf-preview-reorderable">
        {{-- Toolbar anotasi untuk KASMIN --}}
        @if($canAnnotate && $canAnnotateOnCurrentPdf)
        <div class="card-header bg-light py-2 border-bottom" id="annotation-toolbar">
            {{-- Desktop: single row layout (full tools) --}}
            <div class="d-none d-md-flex justify-content-between align-items-center flex-wrap gap-2">
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-outline-secondary active" id="tool-select" data-tool="select" title="Pilih">
                        <i class="bi bi-cursor"></i>
                    </button>
                    <button type="button" class="btn btn-outline-primary" id="tool-pen" data-tool="pen" title="Pena">
                        <i class="bi bi-pen"></i>
                    </button>
                    <button type="button" class="btn btn-outline-warning" id="tool-highlight" data-tool="highlight" title="Highlight">
                        <i class="bi bi-highlighter"></i>
                    </button>
                    <button type="button" class="btn btn-outline-danger" id="tool-underline" data-tool="underline" title="Coret">
                        <i class="bi bi-slash-lg"></i>
                    </button>
                    <button type="button" class="btn btn-outline-success" id="tool-text" data-tool="text" title="Teks">
                        <i class="bi bi-fonts"></i>
                    </button>
                    <button type="button" class="btn btn-outline-info" id="tool-arrow" data-tool="arrow" title="Panah">
                        <i class="bi bi-arrow-up-right"></i>
                    </button>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <input type="color" id="annotation-color" value="#ff0000" class="form-control form-control-color p-0" style="width: 28px; height: 28px;" title="Warna">
                    <select id="annotation-size" class="form-select form-select-sm" style="width: 70px;">
                        <option value="2">Tipis</option>
                        <option value="4" selected>Sedang</option>
                        <option value="8">Tebal</option>
                    </select>
                </div>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-outline-secondary" id="annotation-undo" title="Undo">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </button>
                    <button type="button" class="btn btn-outline-danger" id="annotation-clear" title="Hapus Semua">
                        <i class="bi bi-eraser"></i>
                    </button>
                    <button type="button" class="btn btn-primary" id="annotation-save" title="Simpan Anotasi">
                        <i class="bi bi-save"></i> Simpan
                    </button>
                </div>
            </div>

            {{-- Mobile: 2 baris --}}
            <div class="d-block d-md-none">
                <div class="d-flex justify-content-center mb-2">
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary active" id="tool-select-mobile" data-tool="select" title="Pilih">
                            <i class="bi bi-cursor"></i>
                        </button>
                        <button type="button" class="btn btn-outline-primary" id="tool-pen-mobile" data-tool="pen" title="Pena">
                            <i class="bi bi-pen"></i>
                        </button>
                        <button type="button" class="btn btn-outline-warning" id="tool-highlight-mobile" data-tool="highlight" title="Highlight">
                            <i class="bi bi-highlighter"></i>
                        </button>
                        <button type="button" class="btn btn-outline-danger" id="tool-underline-mobile" data-tool="underline" title="Coret">
                            <i class="bi bi-slash-lg"></i>
                        </button>
                        <button type="button" class="btn btn-outline-success" id="tool-text-mobile" data-tool="text" title="Teks">
                            <i class="bi bi-fonts"></i>
                        </button>
                        <button type="button" class="btn btn-outline-info" id="tool-arrow-mobile" data-tool="arrow" title="Panah">
                            <i class="bi bi-arrow-up-right"></i>
                        </button>
                    </div>
                </div>
                <div class="d-flex justify-content-center align-items-center gap-2 flex-wrap">
                    <input type="color" id="annotation-color-mobile" value="#ff0000" class="form-control form-control-color p-0" style="width: 32px; height: 32px;" title="Warna">
                    <select id="annotation-size-mobile" class="form-select form-select-sm" style="width: 75px;">
                        <option value="2">Tipis</option>
                        <option value="4" selected>Sedang</option>
                        <option value="8">Tebal</option>
                    </select>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-secondary" id="annotation-undo-mobile" title="Undo">
                            <i class="bi bi-arrow-counterclockwise"></i>
                        </button>
                        <button type="button" class="btn btn-outline-danger" id="annotation-clear-mobile" title="Hapus">
                            <i class="bi bi-eraser"></i>
                        </button>
                        <button type="button" class="btn btn-primary" id="annotation-save-mobile" title="Simpan">
                            <i class="bi bi-save"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <div class="card-body p-0" style="background-color: #525659; text-align: center; position: relative;" id="pdf-container">
            @if($suratMasuk->file_surat)
                <div id="pdf-wrapper" style="display: none;">
                    <canvas id="pdf-canvas"></canvas>
                    @if($canAnnotate && $canAnnotateOnCurrentPdf)
                        <canvas id="annotation-canvas"></canvas>
                    @endif
                </div>

                <div id="pdf-loading" class="d-flex align-items-center justify-content-center" style="height: 300px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #525659; z-index: 10;">
                    <div>
                        <div class="spinner-border text-light" role="status"></div>
                        <p class="mt-2 text-white-50">Memuat PDF...</p>
                    </div>
                </div>
            @else
                <div class="text-center d-flex align-items-center justify-content-center h-100">
                    <div class="text-white-50">
                        <i class="bi bi-file-earmark-x" style="font-size: 4rem;"></i>
                        <p class="mt-3">Tidak ada file yang tersedia</p>
                    </div>
                </div>
            @endif
        </div>

        @if($suratMasuk->file_surat)
        <div id="pdf-nav" style="display: none;">
            <div class="d-flex justify-content-center align-items-center gap-3">
                <button type="button" class="btn btn-sm btn-light" id="pdf-prev-page">
                    <i class="bi bi-chevron-left"></i>
                </button>
                <span class="text-white" id="pdf-page-info">Page 1 / 1</span>
                <button type="button" class="btn btn-sm btn-light" id="pdf-next-page">
                    <i class="bi bi-chevron-right"></i>
                </button>
            </div>
        </div>
        @endif
    </div>
</div>

{{-- Modal input teks anotasi --}}
<div class="modal fade" id="textInputModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title">Tambah Teks</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <textarea id="text-input-content" class="form-control" rows="3" placeholder="Ketik teks anotasi..."></textarea>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-sm btn-primary" id="text-input-save">Tambahkan</button>
            </div>
        </div>
    </div>
</div>

@push('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/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    @if(!$suratMasuk->file_surat)
        return;
    @endif

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

    const pdfUrlOriginal = '{{ route("surat-masuk.view-pdf", $suratMasuk) }}';
    const pdfUrlAnnotated = @if($suratMasuk->file_annotated)'{{ route("surat-masuk.view-annotated-pdf", $suratMasuk) }}'@else null @endif;

    let currentPdfVersion = '{{ $pdfToShow }}';
    let pdfUrl = currentPdfVersion === 'annotated' && pdfUrlAnnotated ? pdfUrlAnnotated : pdfUrlOriginal;

    const pdfCanvas = document.getElementById('pdf-canvas');
    const pdfCtx = pdfCanvas.getContext('2d');

    @if($canAnnotate && $canAnnotateOnCurrentPdf)
    const annotationCanvas = document.getElementById('annotation-canvas');
    const annotationCtx = annotationCanvas.getContext('2d');
    @endif

    let pdfDoc = null;
    let pageNum = 1;
    let scale = 1.5;
    let scaleCalculated = false;

    function calculateFixedScale(page) {
        if (scaleCalculated) return scale;
        const container = document.getElementById('pdf-container');
        const containerWidth = container.clientWidth - 30;
        const defaultViewport = page.getViewport({ scale: 1 });
        const fitScale = containerWidth / defaultViewport.width;
        scale = Math.min(Math.max(fitScale, 0.8), 1.8);
        scaleCalculated = true;
        return scale;
    }

    @if($canAnnotate && $canAnnotateOnCurrentPdf)
    let currentTool = 'select';
    let isDrawing = false;
    let lastX = 0, lastY = 0;
    let annotations = {};
    let currentStroke = null;
    let textPosition = null;

    function initAnnotations(numPages) {
        for (let i = 1; i <= numPages; i++) {
            if (!annotations[i]) annotations[i] = [];
        }
    }
    @endif

    function renderPage(num) {
        pdfDoc.getPage(num).then(page => {
            calculateFixedScale(page);
            const viewport = page.getViewport({ scale: scale });
            pdfCanvas.width = viewport.width;
            pdfCanvas.height = viewport.height;

            @if($canAnnotate && $canAnnotateOnCurrentPdf)
            annotationCanvas.width = viewport.width;
            annotationCanvas.height = viewport.height;
            @endif

            page.render({
                canvasContext: pdfCtx,
                viewport: viewport
            }).promise.then(() => {
                const loadingEl = document.getElementById('pdf-loading');
                const wrapperEl = document.getElementById('pdf-wrapper');
                const navEl = document.getElementById('pdf-nav');

                if (loadingEl) {
                    loadingEl.style.display = 'none';
                    loadingEl.style.visibility = 'hidden';
                }
                if (wrapperEl) {
                    wrapperEl.style.display = 'block';
                }
                if (navEl) {
                    navEl.style.display = 'block';
                }

                @if($canAnnotate && $canAnnotateOnCurrentPdf)
                redrawAnnotations();
                @endif
            });

            document.getElementById('pdf-page-info').textContent = `Page ${num} / ${pdfDoc.numPages}`;
        });
    }

    function loadPdf(url) {
        document.getElementById('pdf-loading').style.display = 'flex';
        document.getElementById('pdf-wrapper').style.display = 'none';
        document.getElementById('pdf-nav').style.display = 'none';

        pdfjsLib.getDocument(url).promise.then(doc => {
            pdfDoc = doc;
            pageNum = 1;
            @if($canAnnotate && $canAnnotateOnCurrentPdf)
            initAnnotations(doc.numPages);
            @endif
            renderPage(pageNum);
        }).catch(err => {
            console.error('Error loading PDF:', err);
            document.getElementById('pdf-loading').innerHTML = `
                <div class="text-center">
                    <i class="bi bi-exclamation-triangle text-warning" style="font-size: 3rem;"></i>
                    <p class="mt-2 text-white-50">Gagal memuat PDF</p>
                    <a href="${url}" target="_blank" class="btn btn-sm btn-light mt-2">
                        <i class="bi bi-box-arrow-up-right"></i> Buka di Tab Baru
                    </a>
                </div>
            `;
        });
    }

    // Toggle versi (annotated / current)
    document.querySelectorAll('input[name="pdfVersionMasuk"]').forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.value === 'annotated' && pdfUrlAnnotated) {
                pdfUrl = pdfUrlAnnotated;
                currentPdfVersion = 'annotated';
            } else {
                pdfUrl = pdfUrlOriginal;
                currentPdfVersion = 'current';
            }
            loadPdf(pdfUrl);
        });
    });

    @if($canAnnotate && $canAnnotateOnCurrentPdf)
    function redrawAnnotations() {
        annotationCtx.clearRect(0, 0, annotationCanvas.width, annotationCanvas.height);
        const pageAnnotations = annotations[pageNum] || [];
        pageAnnotations.forEach(a => drawAnnotation(a));
    }

    function drawAnnotation(a) {
        annotationCtx.save();
        if (a.type === 'stroke') {
            annotationCtx.beginPath();
            annotationCtx.strokeStyle = a.color;
            annotationCtx.lineWidth = a.size;
            annotationCtx.lineCap = 'round';
            annotationCtx.lineJoin = 'round';
            if (a.tool === 'highlight') {
                annotationCtx.globalAlpha = 0.08;
                annotationCtx.lineWidth = a.size * 5;
            }
            a.points.forEach((p, i) => {
                if (i === 0) annotationCtx.moveTo(p.x, p.y);
                else annotationCtx.lineTo(p.x, p.y);
            });
            annotationCtx.stroke();
        } else if (a.type === 'text') {
            annotationCtx.font = `bold ${a.size * 4}px Arial`;
            annotationCtx.fillStyle = a.color;
            annotationCtx.fillText(a.text, a.x, a.y);
        } else if (a.type === 'arrow') {
            drawArrow(annotationCtx, a.startX, a.startY, a.endX, a.endY, a.color, a.size);
        }
        annotationCtx.restore();
    }

    function drawArrow(ctx, fromX, fromY, toX, toY, color, size) {
        const headLength = size * 5;
        const angle = Math.atan2(toY - fromY, toX - fromX);
        ctx.beginPath();
        ctx.strokeStyle = color;
        ctx.lineWidth = size;
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
    }

    function getPos(e) {
        const rect = annotationCanvas.getBoundingClientRect();
        const scaleX = annotationCanvas.width / rect.width;
        const scaleY = annotationCanvas.height / rect.height;
        if (e.touches) {
            return {
                x: (e.touches[0].clientX - rect.left) * scaleX,
                y: (e.touches[0].clientY - rect.top) * scaleY,
            };
        }
        return {
            x: (e.clientX - rect.left) * scaleX,
            y: (e.clientY - rect.top) * scaleY,
        };
    }

    function getAnnotationColor() {
        const desktopColor = document.getElementById('annotation-color');
        const mobileColor = document.getElementById('annotation-color-mobile');
        if (window.innerWidth < 768 && mobileColor) return mobileColor.value;
        return desktopColor ? desktopColor.value : '#ff0000';
    }

    function getAnnotationSize() {
        const desktopSize = document.getElementById('annotation-size');
        const mobileSize = document.getElementById('annotation-size-mobile');
        if (window.innerWidth < 768 && mobileSize) return parseInt(mobileSize.value);
        return desktopSize ? parseInt(desktopSize.value) : 4;
    }

    annotationCanvas.addEventListener('mousedown', function(e) {
        if (currentTool === 'select') return;
        if (currentTool === 'text') {
            textPosition = getPos(e);
            new bootstrap.Modal(document.getElementById('textInputModal')).show();
            return;
        }
        isDrawing = true;
        const pos = getPos(e);
        lastX = pos.x;
        lastY = pos.y;
        if (currentTool === 'arrow') {
            currentStroke = {
                type: 'arrow',
                startX: pos.x,
                startY: pos.y,
                endX: pos.x,
                endY: pos.y,
                color: getAnnotationColor(),
                size: getAnnotationSize(),
            };
        } else {
            currentStroke = {
                type: 'stroke',
                tool: currentTool,
                color: getAnnotationColor(),
                size: getAnnotationSize(),
                points: [{ x: pos.x, y: pos.y }],
            };
        }
    });

    annotationCanvas.addEventListener('mousemove', function(e) {
        if (!isDrawing || currentTool === 'select' || currentTool === 'text') return;
        const pos = getPos(e);
        if (currentTool === 'arrow') {
            currentStroke.endX = pos.x;
            currentStroke.endY = pos.y;
            redrawAnnotations();
            drawArrow(annotationCtx, currentStroke.startX, currentStroke.startY, pos.x, pos.y, currentStroke.color, currentStroke.size);
        } else {
            annotationCtx.beginPath();
            annotationCtx.strokeStyle = currentStroke.color;
            annotationCtx.lineWidth = currentStroke.size;
            annotationCtx.lineCap = 'round';
            if (currentTool === 'highlight') {
                annotationCtx.globalAlpha = 0.08;
                annotationCtx.lineWidth = currentStroke.size * 5;
            }
            annotationCtx.moveTo(lastX, lastY);
            annotationCtx.lineTo(pos.x, pos.y);
            annotationCtx.stroke();
            annotationCtx.globalAlpha = 1;
            currentStroke.points.push({ x: pos.x, y: pos.y });
            lastX = pos.x;
            lastY = pos.y;
        }
    });

    ['mouseup', 'mouseout'].forEach(ev => {
        annotationCanvas.addEventListener(ev, function() {
            if (isDrawing && currentStroke) {
                if (!annotations[pageNum]) annotations[pageNum] = [];
                annotations[pageNum].push(currentStroke);
                currentStroke = null;
            }
            isDrawing = false;
        });
    });

    annotationCanvas.addEventListener('touchstart', function(e) {
        e.preventDefault();
        if (currentTool === 'select') return;
        if (currentTool === 'text') {
            textPosition = getPos(e);
            new bootstrap.Modal(document.getElementById('textInputModal')).show();
            return;
        }
        isDrawing = true;
        const pos = getPos(e);
        lastX = pos.x;
        lastY = pos.y;
        if (currentTool === 'arrow') {
            currentStroke = {
                type: 'arrow',
                startX: pos.x,
                startY: pos.y,
                endX: pos.x,
                endY: pos.y,
                color: getAnnotationColor(),
                size: getAnnotationSize(),
            };
        } else {
            currentStroke = {
                type: 'stroke',
                tool: currentTool,
                color: getAnnotationColor(),
                size: getAnnotationSize(),
                points: [{ x: pos.x, y: pos.y }],
            };
        }
    }, { passive: false });

    annotationCanvas.addEventListener('touchmove', function(e) {
        e.preventDefault();
        if (!isDrawing || currentTool === 'select' || currentTool === 'text') return;
        const pos = getPos(e);
        if (currentTool === 'arrow') {
            currentStroke.endX = pos.x;
            currentStroke.endY = pos.y;
            redrawAnnotations();
            drawArrow(annotationCtx, currentStroke.startX, currentStroke.startY, pos.x, pos.y, currentStroke.color, currentStroke.size);
        } else {
            annotationCtx.beginPath();
            annotationCtx.strokeStyle = currentStroke.color;
            annotationCtx.lineWidth = currentStroke.size;
            annotationCtx.lineCap = 'round';
            if (currentTool === 'highlight') {
                annotationCtx.globalAlpha = 0.08;
                annotationCtx.lineWidth = currentStroke.size * 5;
            }
            annotationCtx.moveTo(lastX, lastY);
            annotationCtx.lineTo(pos.x, pos.y);
            annotationCtx.stroke();
            annotationCtx.globalAlpha = 1;
            currentStroke.points.push({ x: pos.x, y: pos.y });
            lastX = pos.x;
            lastY = pos.y;
        }
    }, { passive: false });

    annotationCanvas.addEventListener('touchend', function(e) {
        e.preventDefault();
        if (isDrawing && currentStroke) {
            if (!annotations[pageNum]) annotations[pageNum] = [];
            annotations[pageNum].push(currentStroke);
            currentStroke = null;
        }
        isDrawing = false;
    }, { passive: false });

    function syncColorAndSize() {
        const desktopColor = document.getElementById('annotation-color');
        const mobileColor = document.getElementById('annotation-color-mobile');
        const desktopSize = document.getElementById('annotation-size');
        const mobileSize = document.getElementById('annotation-size-mobile');
        desktopColor?.addEventListener('change', function() {
            if (mobileColor) mobileColor.value = this.value;
        });
        mobileColor?.addEventListener('change', function() {
            if (desktopColor) desktopColor.value = this.value;
        });
        desktopSize?.addEventListener('change', function() {
            if (mobileSize) mobileSize.value = this.value;
        });
        mobileSize?.addEventListener('change', function() {
            if (desktopSize) desktopSize.value = this.value;
        });
    }
    syncColorAndSize();

    document.querySelectorAll('[data-tool]').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('[data-tool]').forEach(b => b.classList.remove('active'));
            const tool = this.dataset.tool;
            document.querySelectorAll(`[data-tool="${tool}"]`).forEach(b => b.classList.add('active'));
            currentTool = tool;
            annotationCanvas.style.cursor = currentTool === 'select' ? 'default' : (currentTool === 'text' ? 'text' : 'crosshair');
            if (currentTool === 'select') {
                annotationCanvas.classList.add('allow-scroll');
            } else {
                annotationCanvas.classList.remove('allow-scroll');
            }
        });
    });

    if (currentTool === 'select') {
        annotationCanvas.classList.add('allow-scroll');
    }

    document.getElementById('text-input-save')?.addEventListener('click', function() {
        const text = document.getElementById('text-input-content').value.trim();
        if (text && textPosition) {
            if (!annotations[pageNum]) annotations[pageNum] = [];
            annotations[pageNum].push({
                type: 'text',
                x: textPosition.x,
                y: textPosition.y,
                text: text,
                color: getAnnotationColor(),
                size: getAnnotationSize(),
            });
            redrawAnnotations();
        }
        document.getElementById('text-input-content').value = '';
        textPosition = null;
        bootstrap.Modal.getInstance(document.getElementById('textInputModal')).hide();
    });

    function handleUndo() {
        if (annotations[pageNum] && annotations[pageNum].length > 0) {
            annotations[pageNum].pop();
            redrawAnnotations();
        }
    }
    document.getElementById('annotation-undo')?.addEventListener('click', handleUndo);
    document.getElementById('annotation-undo-mobile')?.addEventListener('click', handleUndo);

    function handleClear() {
        Swal.fire({
            title: 'Hapus Semua Anotasi?',
            text: 'Semua anotasi pada halaman ini akan dihapus.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                annotations[pageNum] = [];
                redrawAnnotations();
                Swal.fire({
                    icon: 'success',
                    title: 'Terhapus!',
                    text: 'Semua anotasi pada halaman ini telah dihapus.',
                    timer: 1500,
                    showConfirmButton: false
                });
            }
        });
    }
    document.getElementById('annotation-clear')?.addEventListener('click', handleClear);
    document.getElementById('annotation-clear-mobile')?.addEventListener('click', handleClear);

    async function handleSave(btn) {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
        try {
            let hasAnnotations = false;
            for (let p in annotations) {
                if (annotations[p] && annotations[p].length > 0) {
                    hasAnnotations = true;
                    break;
                }
            }
            if (!hasAnnotations) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak Ada Anotasi',
                    text: 'Silakan gambar anotasi terlebih dahulu.',
                    confirmButtonColor: '#198754'
                });
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-save"></i>';
                return;
            }

            const { PDFDocument, rgb, StandardFonts } = PDFLib;
            const pdfUrlForAnnotation = pdfUrlAnnotated || pdfUrlOriginal;
            const existingPdfBytes = await fetch(pdfUrlForAnnotation).then(res => res.arrayBuffer());
            const pdfDocLib = await PDFDocument.load(existingPdfBytes);
            const pages = pdfDocLib.getPages();
            const font = await pdfDocLib.embedFont(StandardFonts.Helvetica);
            const canvasWidth = pdfCanvas.width;
            const canvasHeight = pdfCanvas.height;

            function hexToRgb(hex) {
                const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
                return result ? {
                    r: parseInt(result[1], 16),
                    g: parseInt(result[2], 16),
                    b: parseInt(result[3], 16)
                } : { r: 255, g: 0, b: 0 };
            }

            for (let pageIdx = 0; pageIdx < pages.length; pageIdx++) {
                const page = pages[pageIdx];
                const pageAnnotations = annotations[pageIdx + 1] || [];
                const { width: pdfWidth, height: pdfHeight } = page.getSize();
                const scaleX = pdfWidth / canvasWidth;
                const scaleY = pdfHeight / canvasHeight;

                pageAnnotations.forEach(a => {
                    const color = hexToRgb(a.color || '#ff0000');
                    if (a.type === 'stroke' && a.points && a.points.length > 1) {
                        const thickness = (a.size || 2) * Math.min(scaleX, scaleY);
                        const lineThickness = a.tool === 'highlight' ? thickness * 5 : thickness;
                        const lineOpacity = a.tool === 'highlight' ? 0.3 : 1;
                        for (let i = 1; i < a.points.length; i++) {
                            const p1 = a.points[i - 1];
                            const p2 = a.points[i];
                            const x1 = p1.x * scaleX;
                            const y1 = pdfHeight - (p1.y * scaleY);
                            const x2 = p2.x * scaleX;
                            const y2 = pdfHeight - (p2.y * scaleY);
                            page.drawLine({
                                start: { x: x1, y: y1 },
                                end: { x: x2, y: y2 },
                                thickness: lineThickness,
                                color: rgb(color.r / 255, color.g / 255, color.b / 255),
                                opacity: lineOpacity,
                            });
                        }
                    } else if (a.type === 'text' && a.text) {
                        const fontSize = (a.size || 4) * 4 * Math.min(scaleX, scaleY);
                        const x = a.x * scaleX;
                        const y = pdfHeight - (a.y * scaleY);
                        page.drawText(a.text, {
                            x,
                            y,
                            size: Math.max(8, fontSize),
                            font,
                            color: rgb(color.r / 255, color.g / 255, color.b / 255),
                        });
                    } else if (a.type === 'arrow') {
                        const thickness = (a.size || 2) * Math.min(scaleX, scaleY);
                        const x1 = a.startX * scaleX;
                        const y1 = pdfHeight - (a.startY * scaleY);
                        const x2 = a.endX * scaleX;
                        const y2 = pdfHeight - (a.endY * scaleY);
                        page.drawLine({
                            start: { x: x1, y: y1 },
                            end: { x: x2, y: y2 },
                            thickness,
                            color: rgb(color.r / 255, color.g / 255, color.b / 255),
                        });
                        const headLength = thickness * 5;
                        const angle = Math.atan2(y1 - y2, x1 - x2);
                        const headX1 = x2 + headLength * Math.cos(angle - Math.PI / 6);
                        const headY1 = y2 + headLength * Math.sin(angle - Math.PI / 6);
                        const headX2 = x2 + headLength * Math.cos(angle + Math.PI / 6);
                        const headY2 = y2 + headLength * Math.sin(angle + Math.PI / 6);
                        page.drawLine({
                            start: { x: x2, y: y2 },
                            end: { x: headX1, y: headY1 },
                            thickness,
                            color: rgb(color.r / 255, color.g / 255, color.b / 255),
                        });
                        page.drawLine({
                            start: { x: x2, y: y2 },
                            end: { x: headX2, y: headY2 },
                            thickness,
                            color: rgb(color.r / 255, color.g / 255, color.b / 255),
                        });
                    }
                });
            }

            const modifiedPdfBytes = await pdfDocLib.save();
            function uint8ArrayToBase64(bytes) {
                let binary = '';
                const chunkSize = 8192;
                for (let i = 0; i < bytes.length; i += chunkSize) {
                    const chunk = bytes.subarray(i, i + chunkSize);
                    binary += String.fromCharCode.apply(null, chunk);
                }
                return btoa(binary);
            }
            const base64Pdf = uint8ArrayToBase64(modifiedPdfBytes);

            const response = await fetch('{{ route("surat-masuk.save-annotated-pdf", $suratMasuk) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    pdf_data: base64Pdf,
                    annotations: JSON.stringify(annotations)
                })
            });

            const result = await response.json();
            if (result.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: 'Anotasi berhasil disimpan sebagai file PDF baru.',
                    confirmButtonColor: '#198754'
                }).then(() => {
                    window.location.reload();
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal Menyimpan handleSave',
                    text: result.message || 'Terjadi kesalahan yang tidak diketahui.',
                    confirmButtonColor: '#198754'
                });
            }
        } catch (error) {
            console.error('Error saving annotation:', error);
            Swal.fire({
                icon: 'error',
                title: 'Terjadi Kesalahan',
                text: 'Gagal menyimpan anotasi: ' + error.message,
                confirmButtonColor: '#198754'
            });
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-save"></i>';
        }
    }

    document.getElementById('annotation-save')?.addEventListener('click', function() {
        handleSave(this);
    });
    document.getElementById('annotation-save-mobile')?.addEventListener('click', function() {
        handleSave(this);
    });
    @endif

    loadPdf(pdfUrl);

    document.getElementById('pdf-prev-page')?.addEventListener('click', function() {
        if (pageNum > 1) {
            pageNum--;
            renderPage(pageNum);
        }
    });
    document.getElementById('pdf-next-page')?.addEventListener('click', function() {
        if (pdfDoc && pageNum < pdfDoc.numPages) {
            pageNum++;
            renderPage(pageNum);
        }
    });
});
</script>
@endpush