@extends('layouts.app')

@section('title', 'Visor de Reporte - ' . $report->title)

@section('content')
<style>
    .btn-actions-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
        margin-top: 15px;
    }
    @media(min-width: 768px) {
        .btn-actions-grid {
            grid-template-columns: repeat(4, 1fr);
            margin-top: 0;
            width: auto;
        }
    }
    .btn-actions-grid .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 12px;
        white-space: nowrap;
    }
    .swal-email-modal {
        width: 90% !important;
    }
    @media(min-width: 768px) {
        .swal-email-modal {
            width: 450px !important;
        }
    }
</style>
<div class="card shadow-sm" style="margin-bottom: 25px;">
    <div class="card-body d-flex flex-wrap justify-content-between align-items-center" style="gap: 15px;">
        <div class="d-flex align-items-center gap-sm">
            <a href="{{ route('reports.history') }}" class="btn btn-ghost btn-icon" title="Volver al Historial" style="margin-right: 10px;">
                <i class="ph ph-arrow-left"></i>
            </a>
            <div>
                <h4 class="mb-1 text-primary"><i class="ph ph-file-pdf"></i> {{ $report->title }}</h4>
                <p class="text-muted mb-0 small">N° Reporte: {{ $report->report_number }} | Generado el {{ $report->created_at->format('d/m/Y H:i') }}</p>
            </div>
        </div>
        <div class="btn-actions-grid">
            <button onclick="printPdf()" class="btn btn-outline">
                <i class="ph ph-printer"></i> Imprimir
            </button>
            <button onclick="sharePdf()" class="btn btn-outline">
                <i class="ph ph-whatsapp-logo"></i> WhatsApp
            </button>
            <button onclick="emailPdf()" class="btn btn-outline">
                <i class="ph ph-envelope-simple"></i> Correo
            </button>
            <a href="{{ asset('storage/' . $report->file_path) }}" download class="btn btn-outline">
                <i class="ph ph-download-simple"></i> Descargar
            </a>
        </div>


    </div>
</div>

<div class="card shadow-sm" style="height: 75vh; position: relative;" id="pdfContainer">
    <!-- Desktop: iframe nativo -->
    <iframe id="pdfFrame" src="{{ asset('storage/' . $report->file_path) }}" style="width: 100%; height: 100%; border: none; border-radius: 8px;" class="d-none d-md-block"></iframe>
    
    <!-- Mobile: Contenedor para PDF.js -->
    <div id="pdfMobileViewer" class="d-block d-md-none" style="width: 100%; height: 100%; overflow-y: auto; background: #e5e7eb; border-radius: 8px; text-align: center; padding: 15px 0;">
        <div id="pdfLoading" style="padding: 20px; color: #6b7280;">
            <i class="ph ph-spinner ph-spin" style="font-size: 2rem;"></i>
            <p style="margin-top: 10px;">Renderizando documento...</p>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function printPdf() {
        var iframe = document.getElementById('pdfFrame');
        if (iframe) {
            iframe.contentWindow.focus();
            iframe.contentWindow.print();
        }
    }

    async function sharePdf() {
        const fileUrl = "{{ asset('storage/' . $report->file_path) }}";
        const title = "{{ $report->title }}";
        const text = "Te comparto el reporte generado.";
        
        try {
            if (navigator.canShare) {
                const response = await fetch(fileUrl);
                const blob = await response.blob();
                const file = new File([blob], "{{ basename($report->file_path) }}", { type: 'application/pdf' });
                
                if (navigator.canShare({ files: [file] })) {
                    await navigator.share({
                        files: [file],
                        title: title,
                        text: text
                    });
                    return;
                }
            }
        } catch (error) {
            console.warn('Web Share API falló o se canceló', error);
        }
        
        const whatsappUrl = "https://wa.me/?text=" + encodeURIComponent(text + " Puedes descargarlo aquí: " + fileUrl);
        window.open(whatsappUrl, '_blank');
    }

    function emailPdf() {
        Swal.fire({
            title: 'Enviar por Correo',
            html: '<p style="margin-bottom: 10px; color: #666; font-size: 0.9rem;">Se enviará una copia en PDF.</p>',
            input: 'email',
            inputPlaceholder: 'ejemplo@empresa.com',
            showCancelButton: true,
            confirmButtonText: 'Enviar',
            cancelButtonText: 'Cancelar',
            confirmButtonColor: 'var(--primary)',
            cancelButtonColor: '#94a3b8',
            padding: '1.25em',
            customClass: {
                popup: 'rounded-4 swal-email-modal',
                confirmButton: 'btn btn-primary',
                cancelButton: 'btn btn-outline'
            }
        }).then((result) => {
            if (result.isConfirmed && result.value) {
                let form = document.createElement('form');
                form.method = 'POST';
                form.action = "{{ route('reports.email', $report->id) }}";
                
                let csrf = document.createElement('input');
                csrf.type = 'hidden';
                csrf.name = '_token';
                csrf.value = "{{ csrf_token() }}";
                
                let email = document.createElement('input');
                email.type = 'hidden';
                email.name = 'email';
                email.value = result.value;
                
                form.appendChild(csrf);
                form.appendChild(email);
                document.body.appendChild(form);
                
                Swal.fire({
                    title: 'Enviando...',
                    text: 'Por favor espera mientras se envía el correo.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                
                form.submit();
            }
        });
    }

    // Lógica para renderizar PDF en dispositivos móviles usando PDF.js
    document.addEventListener('DOMContentLoaded', function() {
        if (window.innerWidth >= 768) return; // Solo ejecutar en móviles
        
        // Cargar PDF.js dinámicamente
        const script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
        script.onload = function() {
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
            
            const url = "{{ asset('storage/' . $report->file_path) }}";
            const mobileViewer = document.getElementById('pdfMobileViewer');
            const loadingIndicator = document.getElementById('pdfLoading');
            
            pdfjsLib.getDocument(url).promise.then(function(pdf) {
                loadingIndicator.style.display = 'none';
                
                // Función recursiva para cargar páginas secuencialmente y mantener orden
                const renderPage = function(pageNum) {
                    if (pageNum > pdf.numPages) return;
                    
                    pdf.getPage(pageNum).then(function(page) {
                        const containerWidth = mobileViewer.clientWidth - 30; // 30px de margen
                        const unscaledViewport = page.getViewport({ scale: 1 });
                        const scale = containerWidth / unscaledViewport.width;
                        const viewport = page.getViewport({ scale: scale > 0 ? scale : 1.5 });
                        
                        const canvas = document.createElement('canvas');
                        canvas.style.maxWidth = '100%';
                        canvas.style.marginBottom = '15px';
                        canvas.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
                        canvas.style.borderRadius = '4px';
                        canvas.style.display = 'block';
                        canvas.style.margin = '0 auto 15px auto';
                        
                        const context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        
                        page.render({
                            canvasContext: context,
                            viewport: viewport
                        }).promise.then(() => {
                            mobileViewer.appendChild(canvas);
                            renderPage(pageNum + 1); // Cargar siguiente página
                        });
                    });
                };
                
                renderPage(1);
                
            }).catch(function(error) {
                console.error('Error al cargar PDF:', error);
                loadingIndicator.innerHTML = '<div style="color: #ef4444;"><i class="ph ph-warning-circle" style="font-size: 2rem;"></i><p>No se pudo renderizar. Usa el botón de descargar.</p></div>';
            });
        };
        document.head.appendChild(script);
    });
</script>
@endpush