<script setup>
import { ref, onMounted, computed } from 'vue';
import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
import GoogleIcon from '@Shared/GoogleIcon.vue';
import Draggable from '@Holos/PDF/Draggable.vue';
import CanvasElement from '@Holos/PDF/Canvas.vue';
import PDFViewport from '@Holos/PDF/PDFViewport.vue';
import TextFormatter from '@Holos/PDF/TextFormatter.vue';

/** Estado reactivo */
const pages = ref([{ id: 1, elements: [] }]);
const selectedElementId = ref(null);
const elementCounter = ref(0);
const documentTitle = ref('Documento sin título');
const isExporting = ref(false);
const currentPage = ref(1);
const pageIdCounter = ref(1); // <-- Agregar contador separado para páginas

/** Estado para tamaño de página */
const currentPageSize = ref({
    width: 794,  // A4 por defecto
    height: 1123
});

/** Manejar cambio de tamaño de página */
const handlePageSizeChange = (sizeData) => {
    currentPageSize.value = sizeData.dimensions;
    // Aquí podrías ajustar elementos existentes si es necesario
    window.Notify.info(`Tamaño de página cambiado a ${sizeData.size}`);
};

// Actualizar el método moveElement para usar el tamaño dinámico
const moveElement = (moveData) => {
    const element = allElements.value.find(el => el.id === moveData.id);
    if (element) {
        element.x = Math.max(0, Math.min(currentPageSize.value.width - (element.width || 200), moveData.x));
        element.y = Math.max(0, Math.min(currentPageSize.value.height - (element.height || 40), moveData.y));
    }
};

/** Referencias */
const viewportRef = ref(null);

/** Referencias adicionales para TextFormatter */
const selectedElement = ref(null);
const activeTextElement = ref(null);
const showTextFormatter = ref(false);

const selectElement = (elementId) => {
    selectedElementId.value = elementId;
    const selectedEl = allElements.value.find(el => el.id === elementId);
    selectedElement.value = selectedEl;
    
    // Mostrar TextFormatter si es texto o tabla
    showTextFormatter.value = selectedEl?.type === 'text' || selectedEl?.type === 'table';
    
    // Si es texto directo, activar como activeTextElement
    if (selectedEl?.type === 'text') {
        activeTextElement.value = selectedEl;
    } else {
        activeTextElement.value = null;
    }
};

const updateElement = (update) => {
    const element = allElements.value.find(el => el.id === update.id);
    if (element) {
        Object.assign(element, update);
        
        // Actualizar referencias si es necesario
        if (selectedElement.value?.id === update.id) {
            selectedElement.value = { ...element };
        }
        if (activeTextElement.value?.id === update.id) {
            activeTextElement.value = { ...element };
        }
    }
};

// Manejar selección de texto dentro de celdas de tabla
const handleTextSelected = (data) => {
    activeTextElement.value = data.element;
    showTextFormatter.value = true;
};

/** Tipos de elementos disponibles */
const availableElements = [
    {
        type: 'text',
        icon: 'text_fields',
        title: 'Texto',
        description: 'Texto enriquecido con formato'
    },
    {
        type: 'image',
        icon: 'image',
        title: 'Imagen',
        description: 'Subir y editar imágenes'
    },
    {
        type: 'table',
        icon: 'table_chart',
        title: 'Tabla',
        description: 'Tabla con filas y columnas'
    }
];

/** Propiedades computadas */
const allElements = computed(() => {
    return pages.value.flatMap(page => page.elements);
});

const totalElements = computed(() => {
    return allElements.value.length;
});

/** Métodos del canvas */
const handleDrop = (dropData) => {
    try {
        const data = JSON.parse(dropData.originalEvent.dataTransfer.getData('text/plain'));
        
        const newElement = {
            id: `element-${++elementCounter.value}`,
            type: data.type,
            pageIndex: dropData.pageIndex,
            x: dropData.x,
            y: dropData.y,
            width: data.type === 'table' ? 300 : data.type === 'image' ? 200 : 200,
            height: data.type === 'table' ? 120 : data.type === 'image' ? 150 : 40,
            content: getDefaultContent(data.type),
            fileName: getDefaultFileName(data.type),
            created_at: new Date().toISOString()
        };
        
        pages.value[dropData.pageIndex].elements.push(newElement);
        selectedElementId.value = newElement.id;
    } catch (error) {
        console.error('Error al procesar elemento arrastrado:', error);
    }
};

const getDefaultContent = (type) => {
    switch(type) {
        case 'text':
            return 'Nuevo texto';
        case 'table':
            return {
                rows: 3,
                cols: 3,
                data: [
                    ['Encabezado 1', 'Encabezado 2', 'Encabezado 3'],
                    ['Fila 1, Col 1', 'Fila 1, Col 2', 'Fila 1, Col 3'],
                    ['Fila 2, Col 1', 'Fila 2, Col 2', 'Fila 2, Col 3']
                ]
            };
        case 'image':
            return null;
        default:
            return null;
    }
};

const getDefaultFileName = (type) => {
    switch(type) {
        case 'table':
            return 'tabla.csv';
        case 'image':
            return null;
        default:
            return null;
    }
};

const handleDragOver = (event) => {
    event.preventDefault();
};

const deleteElement = (elementId) => {
    const index = allElements.value.findIndex(el => el.id === elementId);
    if (index !== -1) {
        const pageIndex = Math.floor(index / 3); // Suponiendo 3 elementos por página
        pages.value[pageIndex].elements.splice(index % 3, 1);
        if (selectedElementId.value === elementId) {
            selectedElementId.value = null;
        }
    }
};

/** Paginación */
const addPage = () => {
    pageIdCounter.value++; // <-- Incrementar contador independiente
    pages.value.push({
        id: pageIdCounter.value,
        elements: []
    });
};

const deletePage = (pageIndex) => {
    if (pages.value.length > 1) {
        // Mover elementos de la página eliminada a la página anterior
        const elementsToMove = pages.value[pageIndex].elements;
        if (pageIndex > 0 && elementsToMove.length > 0) {
            elementsToMove.forEach(element => {
                element.pageIndex = pageIndex - 1;
                pages.value[pageIndex - 1].elements.push(element);
            });
        }
        
        pages.value.splice(pageIndex, 1);
        
        // Actualizar índices de página de elementos restantes
        pages.value.forEach((page, index) => {
            page.elements.forEach(element => {
                element.pageIndex = index;
            });
        });
        
        // Ajustar página actual si es necesario
        if (currentPage.value > pages.value.length) {
            currentPage.value = pages.value.length;
        }
    }
};

/** Métodos de acciones rápidas */
const addQuickElement = (type) => {
    const targetPageIndex = currentPage.value - 1;
    const existingElements = pages.value[targetPageIndex].elements.length;
    
    const newElement = {
        id: `element-${++elementCounter.value}`,
        type: type,
        pageIndex: targetPageIndex,
        x: 80 + (existingElements * 20),
        y: 80 + (existingElements * 20),
        width: type === 'table' ? 300 : type === 'image' ? 200 : 200,
        height: type === 'table' ? 120 : type === 'image' ? 150 : 40,
        content: getDefaultContent(type),
        fileName: getDefaultFileName(type),
        created_at: new Date().toISOString()
    };
    
    pages.value[targetPageIndex].elements.push(newElement);
    selectedElementId.value = newElement.id;
};

const exportPDF = async () => {
    if (totalElements.value === 0) {
        window.Notify.warning('No hay elementos para exportar');
        return;
    }

    try {
        isExporting.value = true;
        window.Notify.info('Generando PDF...');

        // Crear un nuevo documento PDF con el tamaño de página seleccionado
        const pdfDoc = await PDFDocument.create();
        
        // Convertir dimensiones de pixels a puntos (1 px = 0.75 puntos)
        const pageWidthPoints = currentPageSize.value.width * 0.75;
        const pageHeightPoints = currentPageSize.value.height * 0.75;

        // Obtener fuentes
        const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
        const helveticaBoldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
        const courierFont = await pdfDoc.embedFont(StandardFonts.Courier);

        // Procesar páginas del maquetador
        for (let pageIndex = 0; pageIndex < pages.value.length; pageIndex++) {
            const page = pages.value[pageIndex];
            
            // Crear nueva página PDF
            let currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
            let currentPageHeight = pageHeightPoints;

            // Ordenar elementos de esta página por posición
            const sortedElements = [...page.elements].sort((a, b) => {
                if (Math.abs(a.y - b.y) < 20) {
                    return a.x - b.x;
                }
                return a.y - b.y;
            });

            // Procesar elementos de la página
            for (const element of sortedElements) {
                // Calcular posición en el PDF manteniendo proporciones
                const scaleX = pageWidthPoints / currentPageSize.value.width;
                const scaleY = pageHeightPoints / currentPageSize.value.height;
                
                const x = Math.max(50, element.x * scaleX);
                const y = currentPageHeight - (element.y * scaleY) - 50;

                switch (element.type) {
                    case 'text':
                        if (element.content && element.content.trim()) {
                            // Obtener formato del elemento
                            const formatting = element.formatting || {};
                            const fontSize = Math.max(8, Math.min(72, formatting.fontSize || 12));
                            const isBold = formatting.bold || false;
                            const textAlign = formatting.textAlign || 'left';
                            
                            // Convertir color hexadecimal a RGB
                            let textColor = rgb(0, 0, 0);
                            if (formatting.color) {
                                const hex = formatting.color.replace('#', '');
                                const r = parseInt(hex.substr(0, 2), 16) / 255;
                                const g = parseInt(hex.substr(2, 2), 16) / 255;
                                const b = parseInt(hex.substr(4, 2), 16) / 255;
                                textColor = rgb(r, g, b);
                            }
                            
                            // Seleccionar fuente
                            let font = isBold ? helveticaBoldFont : helveticaFont;

                            // NUEVO: Dividir por párrafos (saltos de línea)
                            const paragraphs = element.content.split('\n');
                            const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
                            const lineHeight = fontSize * 1.4;
                            let currentY = y;

                            paragraphs.forEach((paragraph, paragraphIndex) => {
                                if (paragraph.trim() === '') {
                                    // Párrafo vacío - solo agregar espacio
                                    currentY -= lineHeight;
                                    return;
                                }

                                // Dividir párrafo en líneas que caben en el ancho
                                const words = paragraph.split(' ');
                                const lines = [];
                                let currentLine = '';

                                for (const word of words) {
                                    const testLine = currentLine + (currentLine ? ' ' : '') + word;
                                    const testWidth = font.widthOfTextAtSize(testLine, fontSize);
                                    
                                    if (testWidth <= maxWidth) {
                                        currentLine = testLine;
                                    } else {
                                        if (currentLine) lines.push(currentLine);
                                        currentLine = word;
                                    }
                                }
                                if (currentLine) lines.push(currentLine);

                                // Dibujar cada línea del párrafo
                                lines.forEach((line, lineIndex) => {
                                    let lineX = x;
                                    const lineWidth = font.widthOfTextAtSize(line, fontSize);
                                    
                                    // Calcular posición X según alineación
                                    if (textAlign === 'center') {
                                        lineX = x + (maxWidth - lineWidth) / 2;
                                    } else if (textAlign === 'right') {
                                        lineX = x + maxWidth - lineWidth;
                                    }

                                    currentPDFPage.drawText(line, {
                                        x: Math.max(50, lineX),
                                        y: currentY,
                                        size: fontSize,
                                        font: font,
                                        color: textColor,
                                    });

                                    currentY -= lineHeight;
                                });

                                // Agregar espacio extra entre párrafos
                                if (paragraphIndex < paragraphs.length - 1) {
                                    currentY -= lineHeight * 0.3;
                                }
                            });
                        }
                        break;

                    case 'image':
                        if (element.content && element.content.startsWith('data:image')) {
                            try {
                                const base64Data = element.content.split(',')[1];
                                const imageBytes = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0));
                                
                                let image;
                                if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
                                    image = await pdfDoc.embedJpg(imageBytes);
                                } else if (element.content.includes('image/png')) {
                                    image = await pdfDoc.embedPng(imageBytes);
                                }

                                if (image) {
                                    const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
                                    const maxHeight = Math.min(300, (element.height || 150) * scaleY);
                                    
                                    const imageAspectRatio = image.width / image.height;
                                    let displayWidth = maxWidth;
                                    let displayHeight = maxWidth / imageAspectRatio;
                                    
                                    if (displayHeight > maxHeight) {
                                        displayHeight = maxHeight;
                                        displayWidth = maxHeight * imageAspectRatio;
                                    }

                                    currentPDFPage.drawImage(image, {
                                        x: x,
                                        y: y - displayHeight,
                                        width: displayWidth,
                                        height: displayHeight,
                                    });
                                }
                            } catch (imageError) {
                                console.warn('Error al procesar imagen:', imageError);
                                // Placeholder para imagen con error
                                currentPDFPage.drawRectangle({
                                    x: x,
                                    y: y - 60,
                                    width: 100 * scaleX,
                                    height: 60 * scaleY,
                                    borderColor: rgb(0.7, 0.7, 0.7),
                                    borderWidth: 1,
                                });

                                currentPDFPage.drawText('[Error al cargar imagen]', {
                                    x: x + 5,
                                    y: y - 35,
                                    size: 10,
                                    font: helveticaFont,
                                    color: rgb(0.7, 0.7, 0.7),
                                });
                            }
                        }
                        break;

                    case 'table':
                        if (element.content && element.content.data && Array.isArray(element.content.data)) {
                            const tableData = element.content.data;
                            const totalCols = tableData[0]?.length || 0;
                            const totalRows = tableData.length;
                            
                            if (totalCols > 0 && totalRows > 0) {
                                const availableWidth = Math.min(pageWidthPoints - 100, (element.width || 300) * scaleX);
                                const cellWidth = availableWidth / totalCols;
                                const cellHeight = 25;
                                const tableWidth = cellWidth * totalCols;
                                const tableHeight = cellHeight * totalRows;

                                // Dibujar borde exterior de la tabla
                                currentPDFPage.drawRectangle({
                                    x: x,
                                    y: y - tableHeight,
                                    width: tableWidth,
                                    height: tableHeight,
                                    borderColor: rgb(0.2, 0.2, 0.2),
                                    borderWidth: 1.5,
                                });

                                // Dibujar cada celda
                                tableData.forEach((row, rowIndex) => {
                                    if (Array.isArray(row)) {
                                        row.forEach((cell, colIndex) => {
                                            const cellX = x + (colIndex * cellWidth);
                                            const cellY = y - (rowIndex * cellHeight);

                                            // Dibujar borde de celda
                                            currentPDFPage.drawRectangle({
                                                x: cellX,
                                                y: cellY - cellHeight,
                                                width: cellWidth,
                                                height: cellHeight,
                                                borderColor: rgb(0.7, 0.7, 0.7),
                                                borderWidth: 0.5,
                                            });

                                            // Fondo especial para headers
                                            if (rowIndex === 0) {
                                                currentPDFPage.drawRectangle({
                                                    x: cellX,
                                                    y: cellY - cellHeight,
                                                    width: cellWidth,
                                                    height: cellHeight,
                                                    color: rgb(0.95, 0.95, 1),
                                                });
                                            }

                                            // Dibujar texto de la celda
                                            if (cell && typeof cell === 'string' && cell.trim()) {
                                                const maxChars = Math.max(1, Math.floor(cellWidth / 6));
                                                let displayText = cell.trim();
                                                
                                                if (displayText.length > maxChars) {
                                                    displayText = displayText.substring(0, maxChars - 3) + '...';
                                                }

                                                const fontSize = Math.max(8, Math.min(12, cellWidth / 8));
                                                const font = rowIndex === 0 ? helveticaBoldFont : helveticaFont;
                                                const textColor = rowIndex === 0 ? rgb(0.1, 0.1, 0.6) : rgb(0, 0, 0);

                                                const textWidth = font.widthOfTextAtSize(displayText, fontSize);
                                                const textX = cellX + (cellWidth - textWidth) / 2;
                                                const textY = cellY - cellHeight/2 - fontSize/2;

                                                currentPDFPage.drawText(displayText, {
                                                    x: Math.max(cellX + 2, textX),
                                                    y: Math.max(cellY - cellHeight + 5, textY),
                                                    size: fontSize,
                                                    font: font,
                                                    color: textColor,
                                                });
                                            }
                                        });
                                    }
                                });
                            }
                        }
                        break;

                    default:
                        console.warn(`Tipo de elemento no soportado: ${element.type}`);
                        break;
                }
            }
        }

        // Generar PDF
        const pdfBytes = await pdfDoc.save();

        // Descargar
        const blob = new Blob([pdfBytes], { type: 'application/pdf' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = `${documentTitle.value.replace(/\s+/g, '_')}.pdf`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);

        window.Notify.success('PDF generado correctamente');
        
    } catch (error) {
        console.error('Error al generar PDF:', error);
        window.Notify.error('Error al generar el PDF: ' + error.message);
    } finally {
        isExporting.value = false;
    }
};

// Función auxiliar para calcular la altura aproximada de un elemento
const getElementHeight = (element) => {
    switch (element.type) {
        case 'text':
            if (!element.content) return 20;
            const lines = Math.ceil(element.content.length / 50);
            return lines * 15 + 10;
        case 'table':
            if (!element.content || !element.content.data) return 60;
            const tableRows = element.content.data.length;
            return (tableRows * 20) + 20;
        case 'image':
            return Math.min(300, (element.height || 150) * 0.75) + 30;
        default:
            return 40;
    }
};

const clearCanvas = () => {
    if (confirm('¿Estás seguro de que quieres limpiar el canvas? Se perderán todos los elementos.')) {
        pages.value = [{ id: 1, elements: [] }];
        selectedElementId.value = null;
        elementCounter.value = 0;
        pageIdCounter.value = 1; // <-- Resetear también el contador de páginas
        currentPage.value = 1;
    }
};

/** Atajos de teclado */
const handleKeydown = (event) => {
    if (event.key === 'Delete' && selectedElementId.value) {
        deleteElement(selectedElementId.value);
    }
    
    if (event.key === 'Escape') {
        selectedElementId.value = null;
    }
};

/** Ciclo de vida */
onMounted(() => {
    document.addEventListener('keydown', handleKeydown);
});
</script>

<template>
    <div class="flex flex-col lg:flex-row h-screen bg-gray-50">
        <!-- Panel Izquierdo - Responsive -->
        <div class="w-full lg:w-64 bg-white border-r border-gray-200 flex flex-col">
            <!-- Header del panel -->
            <div class="p-3 lg:p-4 border-b border-gray-200">
                <div class="flex items-center gap-2 mb-3 lg:mb-4">
                    <GoogleIcon name="text_snippet" class="text-blue-600 text-lg lg:text-xl" />
                    <h2 class="font-semibold text-gray-900 text-sm">
                        Diseñador de Documentos
                    </h2>
                </div>
                
                <!-- Título del documento -->
                <input
                    v-model="documentTitle"
                    class="w-full px-2 py-1 text-xs border border-gray-200 rounded mb-3"
                    placeholder="Título del documento"
                />
                
                <!-- Botón de exportación PDF -->
                <button
                    @click="exportPDF"
                    :disabled="isExporting"
                    class="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded transition-colors"
                    :class="isExporting ? 'bg-gray-400 text-white cursor-not-allowed' : 'bg-red-600 hover:bg-red-700 text-white'"
                >
                    <GoogleIcon :name="isExporting ? 'hourglass_empty' : 'picture_as_pdf'" class="text-sm" />
                    {{ isExporting ? 'Generando PDF...' : 'Exportar PDF' }}
                </button>
            </div>

            <!-- Sección Elementos -->
            <div class="p-3 lg:p-4 flex-1 overflow-y-auto">
                <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">
                    Elementos
                </h3>
                <p class="text-xs text-gray-400 mb-4 hidden lg:block">
                    Arrastra elementos al canvas para crear tu documento
                </p>
                
                <!-- Grid responsive de elementos -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-2 lg:gap-3">
                    <Draggable
                        v-for="element in availableElements"
                        :key="element.type"
                        :type="element.type"
                        :icon="element.icon"
                        :title="element.title"
                        :description="element.description"
                    />
                </div>

                <!-- Agregar rápido - Solo en desktop -->
                <div class="hidden lg:block">
                    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-3">
                        Agregar rápido
                    </h3>
                    
                    <div class="space-y-2">
                        <button
                            v-for="element in availableElements"
                            :key="`quick-${element.type}`"
                            @click="addQuickElement(element.type)"
                            :disabled="isExporting"
                            class="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded transition-colors disabled:opacity-50"
                        >
                            <GoogleIcon name="add" class="text-gray-400 text-sm" />
                            {{ element.title }}
                        </button>
                    </div>
                </div>

                <!-- Limpiar todo -->
                <div class="pt-4 mt-4 border-t border-gray-200">
                    <button
                        v-if="totalElements > 0"
                        @click="clearCanvas"
                        :disabled="isExporting"
                        class="w-full flex items-center justify-center gap-1 px-2 py-1 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 rounded transition-colors disabled:opacity-50"
                    >
                        <GoogleIcon name="delete" class="text-sm" />
                        Limpiar Todo
                    </button>
                </div>
            </div>
        </div>

        <!-- Área Principal con Viewport -->
        <div class="flex-1 flex flex-col min-h-0">
            <!-- Toolbar superior básico -->
            <div class="h-12 lg:h-14 bg-white border-b border-gray-200 flex items-center justify-between px-3 lg:px-4">
                <div class="flex items-center gap-2 lg:gap-4">
                    <h2 class="font-semibold text-gray-900 text-sm truncate max-w-32 lg:max-w-none">
                        {{ documentTitle }}
                    </h2>
                </div>

                <div class="flex items-center gap-2 lg:gap-4">
                    <span class="text-xs text-gray-500 hidden sm:block">
                        {{ totalElements }} elemento{{ totalElements !== 1 ? 's' : '' }} • {{ pages.length }} página{{ pages.length !== 1 ? 's' : '' }}
                    </span>
                </div>
            </div>

            <!-- TextFormatter estático y universal -->
            <TextFormatter
                :selected-element="selectedElement"
                :active-text-element="activeTextElement"
                :visible="showTextFormatter"
                @update="updateElement"
                @smart-align="handleSmartAlign"
            />

            <!-- PDFViewport -->
            <PDFViewport
                ref="viewportRef"
                :pages="pages"
                :selected-element-id="selectedElementId"
                :is-exporting="isExporting"
                @drop="handleDrop"
                @click="handleCanvasClick"
                @add-page="addPage"
                @delete-page="deletePage"
                @page-change="(page) => currentPage = page"
                @page-size-change="handlePageSizeChange"
            >
                <template #elements="{ page, pageIndex }">
                    <CanvasElement
                        v-for="element in page.elements"
                        :key="element.id"
                        :element="element"
                        :is-selected="selectedElementId === element.id && !isExporting"
                        @select="selectElement"
                        @delete="deleteElement"
                        @update="updateElement"
                        @move="moveElement"
                        @text-selected="handleTextSelected"
                    />
                </template>
            </PDFViewport>
        </div>
    </div>
</template>