<div class="h-screen bg-gray-100" wire:ignore>
    <!-- Toolbar -->
    <div class="fixed top-0 left-0 right-0 bg-white shadow-lg p-4 flex gap-4 z-50">
        <button @click="zoomIn">➕</button>
        <button @click="zoomOut">➖</button>
        <input type="number" v-model="currentPage" @change="goToPage">
        <span>@{{ currentPage }}/@{{ totalPages }}</span>
    </div>

    <!-- Visor PDF -->
    <div id="pdf-container" class="pt-16">
        <livewire-pdf
            :url="$pdfUrl"
            @page-loaded="totalPages = $event.total"
            @page-changed="currentPage = $event.current"
            :page="$currentPage"
            :zoom="$zoomLevel"
        />
    </div>

    <!-- Canvas para Anotaciones -->
    <canvas id="annotation-layer" class="absolute top-0 left-0"></canvas>
</div>

<script>
    const fabricCanvas = new fabric.Canvas('annotation-layer');
    
    // Lógica de interacción con Fabric.js
    document.addEventListener('DOMContentLoaded', () => {
        Livewire.on('refreshAnnotations', () => {
            // Cargar anotaciones desde backend
        });
    });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const container = document.getElementById('pdf-viewer');
        const pdfInstance = pdfjsLib.getDocument('{{ $pdfUrl }}');
        
        pdfInstance.promise.then(pdf => {
            window.pdfDoc = pdf;
            Livewire.emit('totalPages', pdf.numPages);
            
            // Función para renderizar página
            const renderPage = (num) => {
                pdf.getPage(num).then(page => {
                    const viewport = page.getViewport({ scale: $wire.zoomLevel });
                    const canvas = document.createElement('canvas');
                    const context = canvas.getContext('2d');
                    
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    
                    container.innerHTML = '';
                    container.appendChild(canvas);
                    
                    page.render({
                        canvasContext: context,
                        viewport: viewport
                    });
                });
            };
            
            // Escuchar cambios desde Livewire
            Livewire.on('pageChanged', page => renderPage(page));
            Livewire.on('zoomChanged', zoom => renderPage($wire.currentPage));
            
            // Renderizar primera página
            renderPage($wire.currentPage);
        });
    });
</script>