openbox/src/lib/cmps/BtDownload.svelte

<script lang="ts">
    import { dataConfig } from "../data/DataConfig.js";
    import type { DownloadState } from "../data/DownloadTypes";
    import PoDownload from "../cmps/PoDownload.svelte";
    import { projectFonts } from "../data/DataFonts";
    import { dataPdfImages } from "../data/DataPdfImagesB64";
    import { images } from "../data/DataImagesB64";
    import { jsPDF } from "jspdf";
    import { appState, getViewImage } from "../data/AppState.svelte";
    import { formatPrice } from "../utils/formats";
    import type { View } from "../data/DataConfigTypes";
    import { advertenciaIconB64 } from "../data/DataIconsB64"

    // ============================================================================
    // TIPOS
    // ============================================================================

    interface Option {
        nombreGrupo: string;
        nombre: string;
        precio?: number | null | string;
        consultar: boolean;
        warning: boolean;
        warningMessage?: string;
    }

    interface ViewOptions {
        options: Option[];
        total: number;
        hasWarning: boolean;
        hasConsult: boolean;
    }

    interface PDFConfig {
        pageWidth: number;
        pageHeight: number;
        margin: number;
        fonts: {
            title: string;
            regular: string;
            bold: string;
            light: string;
        };
    }

    interface TextStyles {
        group: { font: string; size: number };
        option: { font: string; size: number };
        price: { font: string; size: number };
    }

    // ============================================================================
    // ESTADO
    // ============================================================================

    const TIPOLOGIAS = ['A1', 'P1', 'P2'];
    const STEP_TIMEOUT = 1000;

    let downloadState: DownloadState = $state('idle');
    let isVisible = $state(false);
    let message = $state('');

    const views = appState.getAllViews();
    const logoProject = dataConfig.sources.logos + dataConfig.logos.project;
    const logoCompany = dataConfig.sources.logos + dataConfig.logos.company;

    // ============================================================================
    // HANDLERS
    // ============================================================================

    function openSelector() {
        isVisible = true;
        downloadState = 'idle';
    }

    function handleCancel() {
        isVisible = false;
        downloadState = 'idle';
    }

    async function handleTipologiaSelected(tipologia: string) {
        downloadState = 'creating';

        try {
            const pdfDoc = createPDFDocument();
            const config = getPDFConfig(pdfDoc);

            registerFonts(pdfDoc);
            await generatePDFContent(pdfDoc, config, tipologia);

            downloadState = 'downloading';
            pdfDoc.save(`OPENBOX_${tipologia}_${Date.now()}.pdf`);
            downloadState = 'success';

            setTimeout(() => {
                isVisible = false;
                downloadState = 'idle';
            }, 2000);

        } catch (err: any) {
            downloadState = 'error';
            message = err?.message || 'Error desconocido al generar el PDF';
            console.error('PDF Generation Error:', err);
        }
    }

    // ============================================================================
    // CREACIÓN DE PDF
    // ============================================================================

    function createPDFDocument(): jsPDF {
        return new jsPDF({
            orientation: 'landscape',
            unit: 'mm',
            format: 'A4',
        });
    }

    function getPDFConfig(pdfDoc: jsPDF): PDFConfig {
        return {
            pageWidth: pdfDoc.internal.pageSize.getWidth(),
            pageHeight: pdfDoc.internal.pageSize.getHeight(),
            margin: 15,
            fonts: {
                title: projectFonts['Didot'].name,
                regular: projectFonts['proxima_nova_regular'].name,
                bold: projectFonts['proxima_nova_bold'].name,
                light: projectFonts['proxima_nova_light'].name,
            }
        };
    }

    function registerFonts(pdfDoc: jsPDF) {
        const fontsToRegister = [
            projectFonts['Didot'],
            projectFonts['proxima_nova_regular'],
            projectFonts['proxima_nova_bold'],
            projectFonts['proxima_nova_light']
        ];

        fontsToRegister.forEach(font => {
            pdfDoc.addFileToVFS(font.filename, font.base64);
            pdfDoc.addFont(font.filename, font.name, font.style);
        });
    }

    async function generatePDFContent(pdfDoc: jsPDF, config: PDFConfig, tipologia: string) {
        addCoverPage(pdfDoc, config, tipologia);
        addPresentationPage(pdfDoc, config);
        addViewPages(pdfDoc, config);
        addFinalPage(pdfDoc, config);
    }

    // ============================================================================
    // PÁGINAS DEL PDF
    // ============================================================================

    function addCoverPage(pdfDoc: jsPDF, config: PDFConfig, tipologia: string) {
        const coverImage = dataPdfImages['pdf_openbox_ini'];
        if (!coverImage) return;

        const format = coverImage.includes('jpeg') ? 'JPEG' : 'PNG';
        pdfDoc.addImage(coverImage, format, 0, 0, config.pageWidth, config.pageHeight, '', 'FAST');

        pdfDoc.setFontSize(20);
        pdfDoc.setFont(config.fonts.bold, "normal");
        pdfDoc.text(tipologia.toUpperCase(), 265, 119);

        pdfDoc.addPage();
    }

    function addPresentationPage(pdfDoc: jsPDF, config: PDFConfig) {
        const cols = 3;
        const spacing = 10;
        const squareSize = (config.pageWidth - config.margin * 2 - spacing * (cols - 1)) / cols;
        let startY = 15;

        // Imagen de presentación
        const preImage = dataPdfImages['pdf_openbox_pre'];
        if (preImage) {
            const format = preImage.includes('jpeg') ? 'JPEG' : 'PNG';
            pdfDoc.addImage(preImage, format, config.margin, startY, squareSize, squareSize, '', 'FAST');
        }

        // Primera fila (2 vistas)
        views.slice(0, 2).forEach((view, i) => {
            const image = images[getViewImage(view.id)];
            if (!image) return;
            const x = config.margin + (i + 1) * (squareSize + spacing);
            pdfDoc.addImage(image, 'JPEG', x, startY, squareSize, squareSize, '', 'FAST');
        });

        startY += squareSize + 14;

        // Segunda fila (3 vistas)
        views.slice(2, 5).forEach((view, i) => {
            const image = images[getViewImage(view.id)];
            if (!image) return;
            const x = config.margin + i * (squareSize + spacing);
            pdfDoc.addImage(image, 'JPEG', x, startY, squareSize, squareSize, '', 'FAST');
        });

        pdfDoc.addPage();
    }

    function addViewPages(pdfDoc: jsPDF, config: PDFConfig) {
        const imageRatio = 1; // 1500x1500
        const pageRatio = config.pageWidth / config.pageHeight;

        views.forEach((view, index) => {
            const viewImage = images[getViewImage(view.id)];
            if (!viewImage) return;

            // Calcular dimensiones de imagen
            const renderHeight = config.pageHeight - 2 * config.margin;
            const renderWidth = renderHeight * imageRatio;
            const x = config.margin;
            const y = (config.pageHeight - renderHeight) / 2;

            // Añadir imagen
            pdfDoc.addImage(viewImage, 'JPEG', x, y, renderWidth, renderHeight, '', 'FAST');

            // Añadir contenido de texto
            const textStartX = config.margin + renderWidth + 10;
            const textMaxWidth = config.pageWidth - textStartX - config.margin;

            addViewContent(pdfDoc, config, view, textStartX, textMaxWidth);

            // Nueva página (excepto la última)
            if (index < views.length - 1) pdfDoc.addPage();
        });
    }

    function addViewContent(pdfDoc: jsPDF, config: PDFConfig, view: View, x: number, maxWidth: number) {
        let cursorY = config.margin + 5;

        // Título de la vista
        pdfDoc.setFontSize(18);
        pdfDoc.setFont(config.fonts.regular, "normal");
        pdfDoc.setTextColor(30, 30, 30);
        pdfDoc.text(view.name.toUpperCase(), x, cursorY);

        // Descripción
        if (view.text) {
            cursorY += 8;
            cursorY = addMultilineText(pdfDoc, view.text, x, cursorY, maxWidth, config.fonts.light, 12, 5);
        }

        // Opciones
        const viewOptions = getViewOptions(view);
        if (viewOptions.options.length > 0) {
            cursorY = 100;
            addOptionsSection(pdfDoc, config, viewOptions, x, cursorY, maxWidth);
        }
    }

    function addOptionsSection(pdfDoc: jsPDF, config: PDFConfig, viewOptions: ViewOptions, x: number, y: number, maxWidth: number) {
        let cursorY = y;

        // Título de sección
        pdfDoc.setFontSize(14);
        pdfDoc.setFont(config.fonts.regular, "normal");
        pdfDoc.setTextColor(30, 30, 30);
        pdfDoc.text('ACABADOS SELECCIONADOS', x, cursorY);
        cursorY += 10;

        // Estilos de texto
        const styles: TextStyles = {
            group: { font: config.fonts.regular, size: 9 },
            option: { font: config.fonts.bold, size: 11 },
            price: { font: config.fonts.regular, size: 11 }
        };

        // Listar opciones
        viewOptions.options.forEach((option) => {
            const icon = (option.warning || option.consultar) ? advertenciaIconB64 : null;
            cursorY = renderOption(pdfDoc, option, x, cursorY, maxWidth, styles, icon);
        });
    }

    function addFinalPage(pdfDoc: jsPDF, config: PDFConfig) {
        pdfDoc.addPage();
        const finalImage = dataPdfImages['pdf_openbox_fin'];
        if (!finalImage) return;

        const format = finalImage.includes('jpeg') ? 'JPEG' : 'PNG';
        pdfDoc.addImage(finalImage, format, 0, 0, config.pageWidth, config.pageHeight, '', 'FAST');
    }

    // ============================================================================
    // UTILIDADES DE TEXTO
    // ============================================================================

    function addMultilineText(
        pdfDoc: jsPDF,
        text: string | string[] | null | undefined,
        x: number,
        yStart: number,
        maxWidth: number,
        font: string,
        fontSize: number,
        lineHeight: number
    ): number {
        if (!text) return yStart;

        const safeText = Array.isArray(text) ? text.join("\n") : String(text);
        if (safeText.trim().length === 0) return yStart;

        pdfDoc.setFont(font, "normal");
        pdfDoc.setFontSize(fontSize);

        const paragraphs = safeText.split(/\r?\n/);
        let cursorY = yStart;

        paragraphs.forEach(paragraph => {
            const trimmed = paragraph.trim();
            if (!trimmed) {
                cursorY += lineHeight;
                return;
            }

            const lines = pdfDoc.splitTextToSize(trimmed, maxWidth);
            lines.forEach((line: string) => {
                pdfDoc.text(line, x, cursorY);
                cursorY += lineHeight;
            });
            cursorY += lineHeight; // Espacio entre párrafos
        });

        return cursorY;
    }

    // ============================================================================
    // RENDERIZADO DE OPCIONES
    // ============================================================================

    function renderOption(
        pdfDoc: jsPDF,
        option: Option,
        x: number,
        y: number,
        maxWidth: number,
        styles: TextStyles,
        icon: string | null = null
    ): number {
        let cursorY = y;

        // Línea 1: Nombre del grupo
        cursorY = renderGroupName(pdfDoc, option.nombreGrupo, x, cursorY, styles.group);

        // Línea 2: Nombre de la opción + icono
        cursorY = renderOptionName(pdfDoc, option.nombre, x, cursorY, maxWidth, styles.option, icon);

        // Línea 3: Precio
        cursorY = renderPrice(pdfDoc, option, x, cursorY, maxWidth, styles.price);

        // Línea 4: Warning (si existe)
        if (option.warningMessage) {
            cursorY = renderWarning(pdfDoc, option.warningMessage, x, cursorY, maxWidth, styles.group.font);
        }

        return cursorY + 4; // Espacio entre opciones
    }

    function renderGroupName(pdfDoc: jsPDF, groupName: string, x: number, y: number, style: { font: string; size: number }): number {
        pdfDoc.setFont(style.font, "normal");
        pdfDoc.setFontSize(style.size);
        pdfDoc.setTextColor(120, 120, 120);
        pdfDoc.text(groupName.toUpperCase(), x, y);
        return y + style.size * 0.5;
    }

    function renderOptionName(
        pdfDoc: jsPDF,
        optionName: string,
        x: number,
        y: number,
        maxWidth: number,
        style: { font: string; size: number },
        icon: string | null
    ): number {
        const ICON_SIZE = 6;

        pdfDoc.setFont(style.font, "normal");
        pdfDoc.setFontSize(style.size);
        pdfDoc.setTextColor(30, 30, 30);

        const lines = pdfDoc.splitTextToSize(optionName, maxWidth);
        const iconYPosition = y;

        let cursorY = y;
        lines.forEach((line: string) => {
            pdfDoc.text(line, x, cursorY);
            cursorY += style.size * 0.45;
        });

        // Icono alineado a la derecha
        if (icon) {
            const iconX = x + maxWidth - ICON_SIZE;
            pdfDoc.addImage(icon, 'PNG', iconX, iconYPosition - ICON_SIZE + 1, ICON_SIZE, ICON_SIZE);
        }

        return cursorY;
    }

    function renderPrice(
        pdfDoc: jsPDF,
        option: Option,
        x: number,
        y: number,
        maxWidth: number,
        style: { font: string; size: number }
    ): number {
        const precio = option.consultar ? 'consultar' : option.precio;
        if (precio === null || precio === undefined) return y;

        pdfDoc.setFont(style.font, "normal");
        pdfDoc.setFontSize(style.size);

        const { text, color } = getPriceDisplay(precio);
        const priceWidth = pdfDoc.getTextWidth(text);
        const priceX = x + maxWidth - priceWidth;

        pdfDoc.setTextColor(color.r, color.g, color.b);
        pdfDoc.text(text, priceX, y);
        pdfDoc.setTextColor(0, 0, 0); // Reset

        return y + style.size * 0.45;
    }

    function getPriceDisplay(precio: number | string): { text: string; color: { r: number; g: number; b: number } } {
        if (typeof precio === 'number' && precio > 0) {
            return {
                text: '+ ' + formatPrice(precio),
                color: { r: 46, g: 125, b: 50 } // Verde
            };
        } else if (precio === 'consultar' || typeof precio === 'string') {
            return {
                text: 'CONSULTAR',
                color: { r: 255, g: 140, b: 0 } // Naranja
            };
        } else {
            return {
                text: 'Sin coste adicional',
                color: { r: 120, g: 120, b: 120 } // Gris
            };
        }
    }

    function renderWarning(
        pdfDoc: jsPDF,
        message: string,
        x: number,
        y: number,
        maxWidth: number,
        font: string
    ): number {
        let cursorY = y + 1;

        pdfDoc.setFont(font, "normal");
        pdfDoc.setFontSize(8);
        pdfDoc.setTextColor(200, 100, 0);

        const lines = pdfDoc.splitTextToSize(message, maxWidth - 5);
        lines.forEach((line: string) => {
            pdfDoc.text('⚠️ ' + line, x, cursorY);
            cursorY += 3;
        });

        pdfDoc.setTextColor(0, 0, 0); // Reset
        return cursorY;
    }

    // ============================================================================
    // EXTRACCIÓN DE DATOS
    // ============================================================================

    function getViewOptions(view: View): ViewOptions {
        const options: Option[] = [];
        let hasWarning = false;
        let hasConsult = false;
        let total = 0;

        view.options.forEach((group) => {
            const currentOptionId = appState.getCurrentOption(view.id, group.id);
            if (!currentOptionId) return;

            const optionValue = appState.getOptionValue(currentOptionId);
            const optionRef = group.values.find(v => v.id === currentOptionId);
            const requiresConsult = appState.requiresConsultation(view.id, group.id, currentOptionId);

            const hasPrice = optionRef?.amount && typeof optionRef.amount === 'number' && optionRef.amount > 0;
            const isConsultar = optionRef?.amount === 'consultar';

            if (requiresConsult.required) hasWarning = true;
            if (isConsultar) hasConsult = true;
            if (hasPrice) total += (optionRef.amount as number);

            options.push({
                nombreGrupo: group.name || group.id,
                nombre: optionValue?.name || currentOptionId || 'No seleccionado',
                precio: hasPrice ? optionRef.amount : null,
                consultar: isConsultar,
                warning: requiresConsult.required,
                warningMessage: requiresConsult.message
            });
        });

        return { options, total, hasWarning, hasConsult };
    }
</script>

<!-- ============================================================================ -->
<!-- UI -->
<!-- ============================================================================ -->

<button
        type="button"
        class="px-3 lg:px-4 py-2 rounded-md text-base font-medium transition-colors duration-200 text-white bg-green-900 hover:bg-green-700 cursor-pointer"
        onclick={openSelector}
>
    Descargar Selección
</button>

<PoDownload
        {isVisible}
        {message}
        {downloadState}
        tipologias={TIPOLOGIAS}
        {logoCompany}
        {logoProject}
        text="Descarga tu Selección"
        onTipologiaSelected={handleTipologiaSelected}
        onCancel={handleCancel}
/>