<script setup>
import { ref, computed, nextTick, watch } from 'vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';
import PageSizeSelector from '@Holos/PDF/PageSizeSelector.vue';

/** Propiedades */
const props = defineProps({
    pages: {
        type: Array,
        default: () => [{ id: 1, elements: [] }]
    },
    selectedElementId: String,
    isExporting: Boolean
});

/** Eventos */
const emit = defineEmits(['drop', 'dragover', 'click', 'add-page', 'delete-page', 'page-change', 'page-size-change']);

/** Referencias */
const viewportRef = ref(null);
const currentPage = ref(1);
const pageSize = ref('A4');

/** Tamaños de página */
const pageSizes = {
    'A4': { width: 794, height: 1123, label: '210 × 297 mm' },
    'A3': { width: 1123, height: 1587, label: '297 × 420 mm' },
    'Letter': { width: 816, height: 1056, label: '216 × 279 mm' },
    'Legal': { width: 816, height: 1344, label: '216 × 356 mm' },
    'Tabloid': { width: 1056, height: 1632, label: '279 × 432 mm' }
};

/** Constantes de diseño ajustadas */
const PAGE_MARGIN = 50;
const ZOOM_LEVEL = 0.65;

/** Propiedades computadas */
const currentPageSize = computed(() => pageSizes[pageSize.value]);
const PAGE_WIDTH = computed(() => currentPageSize.value.width);
const PAGE_HEIGHT = computed(() => currentPageSize.value.height);
const scaledPageWidth = computed(() => PAGE_WIDTH.value * ZOOM_LEVEL);
const scaledPageHeight = computed(() => PAGE_HEIGHT.value * ZOOM_LEVEL);
const totalPages = computed(() => props.pages.length);

/** Watchers */
watch(pageSize, (newSize) => {
    emit('page-size-change', {
        size: newSize,
        dimensions: pageSizes[newSize]
    });
});

/** Métodos */
const handleDrop = (event, pageIndex) => {
    event.preventDefault();
    
    const pageElement = event.currentTarget;
    const rect = pageElement.getBoundingClientRect();
    
    const relativeX = (event.clientX - rect.left) / ZOOM_LEVEL;
    const relativeY = (event.clientY - rect.top) / ZOOM_LEVEL;
    
    emit('drop', {
        originalEvent: event,
        pageIndex,
        x: Math.max(0, Math.min(PAGE_WIDTH.value, relativeX)),
        y: Math.max(0, Math.min(PAGE_HEIGHT.value, relativeY))
    });
};

const handleDragOver = (event) => {
    event.preventDefault();
    emit('dragover', event);
};

const handleClick = (event, pageIndex) => {
    if (event.target.classList.contains('pdf-page')) {
        emit('click', { originalEvent: event, pageIndex });
    }
};

const handleNextPage = () => {
    if (currentPage.value >= totalPages.value) {
        addPage();
    } else {
        setCurrentPage(currentPage.value + 1);
    }
};

const addPage = () => {
    emit('add-page');
    // Solo cambiar a la nueva página cuando se agrega una
    nextTick(() => {
        const newPageNumber = totalPages.value + 1;
        setCurrentPage(newPageNumber);
    });
};

const deletePage = (pageIndex) => {
    if (totalPages.value > 1) {
        emit('delete-page', pageIndex);
    }
};

const scrollToPage = (pageNumber) => {
    if (viewportRef.value) {
        const pageElement = viewportRef.value.querySelector(`[data-page="${pageNumber}"]`);
        if (pageElement) {
            pageElement.scrollIntoView({ 
                behavior: 'smooth', 
                block: 'nearest',
                inline: 'center'
            });
        }
    }
};

const setCurrentPage = (pageNumber) => {
    currentPage.value = pageNumber;
    emit('page-change', pageNumber);
    
    // Mantener la página actual centrada
    nextTick(() => {
        scrollToPage(pageNumber);
    });
};

/** Métodos expuestos */
defineExpose({
    scrollToPage,
    setCurrentPage,
    PAGE_WIDTH,
    PAGE_HEIGHT,
    ZOOM_LEVEL
});
</script>

<template>
    <div class="flex-1 flex flex-col bg-gray-100 dark:bg-primary-d/20">
        <!-- Toolbar de páginas -->
        <div class="flex items-center justify-between px-4 py-3 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20">
            <div class="flex items-center gap-4">
                <span class="text-sm font-medium text-gray-700 dark:text-primary-dt">
                    Página {{ currentPage }} de {{ totalPages }}
                </span>
                
                <div class="flex items-center gap-1 border-l border-gray-200 dark:border-primary/20 pl-4">
                    <button
                        @click="setCurrentPage(Math.max(1, currentPage - 1))"
                        :disabled="currentPage <= 1"
                        class="p-2 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded-md hover:bg-gray-100 dark:hover:bg-primary/10 transition-colors"
                        title="Página anterior"
                    >
                        <GoogleIcon name="keyboard_arrow_left" class="text-xl" />
                    </button>
                    
                    <button
                        @click="handleNextPage"
                        :disabled="isExporting"
                        class="p-2 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded-md hover:bg-gray-100 dark:hover:bg-primary/10 relative transition-colors"
                        :title="currentPage >= totalPages ? 'Crear nueva página' : 'Página siguiente'"
                    >
                        <GoogleIcon name="keyboard_arrow_right" class="text-xl" />
                        <!-- Indicador mejorado -->
                        <div 
                            v-if="currentPage >= totalPages"
                            class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full flex items-center justify-center"
                        >
                            <GoogleIcon name="add" class="text-white text-xs" />
                        </div>
                    </button>
                </div>
            </div>

            <div class="flex items-center gap-4">
                <!-- Selector de tamaño de página -->
                <PageSizeSelector v-model="pageSize" />
                
                <!-- Info de página -->
                <span class="text-xs text-gray-500 dark:text-primary-dt/70 bg-gray-50 dark:bg-primary/10 px-3 py-1.5 rounded-md border border-gray-200 dark:border-primary/20">
                    {{ currentPageSize.label }}
                </span>
                
                <button
                    @click="addPage"
                    :disabled="isExporting"
                    class="flex items-center gap-2 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors disabled:opacity-50 font-medium shadow-sm"
                >
                    <GoogleIcon name="add" class="text-sm" />
                    Nueva Página
                </button>
            </div>
        </div>

        <!-- Resto del viewport -->
        <div
            ref="viewportRef"
            class="flex-1 overflow-auto"
            style="background-color: #f8fafc; background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px); background-size: 20px 20px;"
        >
            <!-- Contenedor horizontal centrado -->
            <div class="flex items-center justify-center min-h-full p-8">
                <div class="flex items-center gap-10">
                    <!-- Páginas MEJORADAS -->
                    <div
                        v-for="(page, pageIndex) in pages"
                        :key="page.id"
                        :data-page="pageIndex + 1"
                        class="relative group flex-shrink-0"
                    >
                        <!-- Header de página -->
                        <div class="flex flex-col items-center mb-4">
                            <div class="flex items-center gap-3 mb-1">
                                <span class="text-sm font-semibold text-gray-700 dark:text-primary-dt/90 bg-white dark:bg-primary-d px-3 py-1 rounded-full shadow-sm border border-gray-200 dark:border-primary/20">
                                    Página {{ pageIndex + 1 }}
                                </span>
                                <button
                                    v-if="totalPages > 1"
                                    @click="deletePage(pageIndex)"
                                    :disabled="isExporting"
                                    class="opacity-0 group-hover:opacity-100 w-7 h-7 text-red-500 hover:text-white hover:bg-red-500 disabled:opacity-50 rounded-full flex items-center justify-center transition-all duration-200"
                                    title="Eliminar página"
                                >
                                    <GoogleIcon name="delete" class="text-sm" />
                                </button>
                            </div>
                            <span class="text-xs text-gray-500 dark:text-primary-dt/60">
                                {{ currentPageSize.label }}
                            </span>
                        </div>
                        
                        <!-- Contenedor de página -->
                        <div class="relative">
                            <!-- Sombra mejorada -->
                            <div class="absolute top-3 left-3 w-full h-full bg-gray-400/20 rounded-xl blur-sm"></div>
                            
                            <!-- Página PDF -->
                            <div
                                class="pdf-page relative bg-white rounded-xl border border-gray-300 dark:border-primary/30 overflow-hidden transition-all duration-300"
                                :class="{
                                    'ring-3 ring-blue-500/50 shadow-2xl scale-105': currentPage === pageIndex + 1,
                                    'shadow-lg hover:shadow-xl hover:scale-102': currentPage !== pageIndex + 1,
                                    'opacity-60': isExporting
                                }"
                                :style="{
                                    width: `${scaledPageWidth}px`,
                                    height: `${scaledPageHeight}px`
                                }"
                                @drop="(e) => handleDrop(e, pageIndex)"
                                @dragover="handleDragOver"
                                @click="(e) => handleClick(e, pageIndex)"
                            >
                                <!-- Área de contenido -->
                                <div class="relative w-full h-full">
                                    <!-- Guías de margen SUTILES -->
                                    <div
                                        class="absolute border border-dashed border-blue-300/30 pointer-events-none rounded-lg"
                                        :style="{
                                            top: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
                                            left: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
                                            width: `${(PAGE_WIDTH - (PAGE_MARGIN * 2)) * ZOOM_LEVEL}px`,
                                            height: `${(PAGE_HEIGHT - (PAGE_MARGIN * 2)) * ZOOM_LEVEL}px`
                                        }"
                                    ></div>
                                    
                                    <!-- Elementos de la página -->
                                    <div 
                                        class="absolute inset-0"
                                        :style="{
                                            transform: `scale(${ZOOM_LEVEL})`,
                                            transformOrigin: 'top left',
                                            width: `${PAGE_WIDTH}px`,
                                            height: `${PAGE_HEIGHT}px`
                                        }"
                                    >
                                        <slot
                                            name="elements"
                                            :page="page"
                                            :pageIndex="pageIndex"
                                            :pageWidth="PAGE_WIDTH"
                                            :pageHeight="PAGE_HEIGHT"
                                            :zoomLevel="ZOOM_LEVEL"
                                        />
                                    </div>
                                </div>
                                
                                <!-- Indicador de página vacía -->
                                <div
                                    v-if="page.elements.length === 0"
                                    class="absolute inset-0 flex items-center justify-center pointer-events-none z-10"
                                    :style="{ transform: `scale(${1/ZOOM_LEVEL})` }"
                                >
                                    <div class="text-center text-gray-400 dark:text-primary-dt/50 p-6 bg-gray-50/80 dark:bg-primary/5 rounded-xl border-2 border-dashed border-gray-300/50 dark:border-primary/20">
                                        <GoogleIcon name="description" class="text-5xl mb-3 opacity-60" />
                                        <p class="text-base font-medium mb-1">Página {{ pageIndex + 1 }}</p>
                                        <p class="text-sm opacity-75">Arrastra elementos aquí</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Overlay durante exportación -->
        <div
            v-if="isExporting"
            class="absolute inset-0 bg-white/95 dark:bg-primary-d/95 flex items-center justify-center z-50 backdrop-blur-sm"
        >
            <div class="text-center bg-white dark:bg-primary-d rounded-2xl p-8 shadow-2xl border border-gray-200 dark:border-primary/20 max-w-sm w-full mx-4">
                <div class="relative mb-4">
                    <GoogleIcon name="picture_as_pdf" class="text-6xl text-red-600 dark:text-red-400 animate-pulse" />
                    <div class="absolute inset-0 bg-red-100 dark:bg-red-900/20 rounded-full animate-ping opacity-20"></div>
                </div>
                <p class="text-xl font-semibold text-gray-900 dark:text-primary-dt mb-2">Generando PDF</p>
                <p class="text-sm text-gray-600 dark:text-primary-dt/70 mb-4">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
                <div class="w-full bg-gray-200 dark:bg-primary/20 rounded-full h-1">
                    <div class="bg-red-600 dark:bg-red-400 h-1 rounded-full animate-pulse" style="width: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.pdf-page {
    transform-origin: center;
}

.scale-102 {
    transform: scale(1.02);
}

.overflow-auto::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.overflow-auto::-webkit-scrollbar-track {
    background: transparent;
}

.overflow-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.overflow-auto::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
</style>