// PDF.js Viewer for Blazor WASM
window.pdfViewer = {
    pdfDoc: null,
    pageNum: 1,
    pageRendering: false,
    pageNumPending: null,
    scale: 1.5,
    canvas: null,
    ctx: null,
    totalPages: 0,
    currentRenderTask: null,
    dotNetReference: null,
    wheelEventAttached: false,
    _renderLock: false,  // Lock to prevent concurrent renders
    
    // Quality options (configurable from appsettings.json)
    qualityOptions: {
        thumbnailBaseScale: 0.75,
        thumbnailEnableHiDPI: true,
        thumbnailMaxDPR: 2.0,
        mainCanvasEnableHiDPI: true,
        mainCanvasMaxDPR: 2.0,
        enableSmoothZoom: true,
        zoomTransitionDuration: 150,
        renderingOpacity: 0.85,
        zoomStepPercentage: 5
    },

    setQualityOptions(options) {
        this.qualityOptions = { ...this.qualityOptions, ...options };
        
        // Apply CSS variables for dynamic styling
        document.documentElement.style.setProperty('--zoom-transition-duration', `${options.zoomTransitionDuration}ms`);
        document.documentElement.style.setProperty('--rendering-opacity', options.renderingOpacity);
    },

    async initialize(canvasId, pdfDataUrl, dotNetRef) {
        try {
            this.dotNetReference = dotNetRef;

            if (typeof window.pdfjsLib === 'undefined') {
                await this.waitForPdfJs();
            }

            const pdfjsLib = window.pdfjsLib;
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

            this.canvas = document.getElementById(canvasId);
            if (!this.canvas) {
                return false;
            }

            this.ctx = this.canvas.getContext('2d');
            this.attachWheelEvent();

            const uint8Array = this.base64ToUint8Array(pdfDataUrl);
            const loadingTask = pdfjsLib.getDocument({ data: uint8Array });
            this.pdfDoc = await loadingTask.promise;
            this.totalPages = this.pdfDoc.numPages;

            await this.renderPage(this.pageNum);
            return true;
        } catch (error) {
            console.error('PDF viewer initialization failed:', error);
            return false;
        }
    },

    attachWheelEvent() {
        if (this.wheelEventAttached) return;
        
        // Attach to the entire document body for global zoom control
        document.body.addEventListener('wheel', (e) => {
            // Check if Ctrl key is pressed (zoom gesture)
            if (e.ctrlKey || e.metaKey) {
                e.preventDefault();
                
                const step = this.qualityOptions.zoomStepPercentage / 100; // Convert to decimal
                
                if (e.deltaY < 0) {
                    // Scroll up = Zoom In
                    this.scale = Math.min(this.scale + step, 3.0);
                    this.queueRenderPage(this.pageNum);
                    if (this.dotNetReference) {
                        this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale);
                    }
                } else {
                    // Scroll down = Zoom Out
                    this.scale = Math.max(this.scale - step, 0.5);
                    this.queueRenderPage(this.pageNum);
                    if (this.dotNetReference) {
                        this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale);
                    }
                }
            }
        }, { passive: false });

        this.wheelEventAttached = true;
    },

    async waitForPdfJs() {
        for (let i = 0; i < 50; i++) {
            if (typeof window.pdfjsLib !== 'undefined') {
                return;
            }
            await new Promise(resolve => setTimeout(resolve, 100));
        }
        throw new Error('PDF.js failed to load after 5 seconds');
    },

    base64ToUint8Array(base64) {
        // Remove data URL prefix if present
        const base64String = base64.includes(',') ? base64.split(',')[1] : base64;
        const raw = atob(base64String);
        const uint8Array = new Uint8Array(raw.length);
        for (let i = 0; i < raw.length; i++) {
            uint8Array[i] = raw.charCodeAt(i);
        }
        return uint8Array;
    },

    async renderPage(num) {
        // CRITICAL: Single render at a time - use a lock
        if (this._renderLock) {
            // Another render is in progress, queue it
            this.pageNumPending = num;
            return;
        }

        this._renderLock = true;

        // Cancel any existing render task
        if (this.currentRenderTask) {
            try {
                this.currentRenderTask.cancel();
                await new Promise(resolve => setTimeout(resolve, 100));
            } catch (e) {
                // Ignore cancellation errors
            }
            this.currentRenderTask = null;
        }

        this.pageRendering = true;
        
        // Add rendering class for smooth transition (if enabled)
        if (this.qualityOptions.enableSmoothZoom) {
            this.canvas.classList.add('rendering');
        }

        try {
            // Get scroll container
            const container = this.canvas.closest('.pdf-canvas-wrapper');
            
            // Store scroll position and viewport center BEFORE rendering
            let scrollLeft = 0, scrollTop = 0;
            let centerX = 0, centerY = 0;
            let oldWidth = this.canvas.width;
            let oldHeight = this.canvas.height;
            
            if (container) {
                scrollLeft = container.scrollLeft;
                scrollTop = container.scrollTop;
                centerX = scrollLeft + container.clientWidth / 2;
                centerY = scrollTop + container.clientHeight / 2;
            }

            const page = await this.pdfDoc.getPage(num);
            
            // HiDPI support for main canvas (configurable)
            const dpr = this.qualityOptions.mainCanvasEnableHiDPI 
                ? Math.min(window.devicePixelRatio || 1, this.qualityOptions.mainCanvasMaxDPR)
                : 1.0;
            const viewport = page.getViewport({ scale: this.scale * dpr });

            // Set internal canvas resolution (high quality)
            this.canvas.width = viewport.width;
            this.canvas.height = viewport.height;
            
            // Set CSS display size (visual size)
            this.canvas.style.width = `${viewport.width / dpr}px`;
            this.canvas.style.height = `${viewport.height / dpr}px`;

            const renderContext = {
                canvasContext: this.ctx,
                viewport: viewport
            };

            // Enable high-quality rendering
            this.ctx.imageSmoothingEnabled = true;
            this.ctx.imageSmoothingQuality = 'high';

            // Start new render task
            this.currentRenderTask = page.render(renderContext);
            await this.currentRenderTask.promise;

            // Render text layer for copy-paste functionality
            await this.renderTextLayer(page, viewport, dpr);

            // Restore viewport center position AFTER rendering
            if (container && oldWidth > 0 && oldHeight > 0) {
                const scaleX = this.canvas.width / oldWidth;
                const scaleY = this.canvas.height / oldHeight;
                
                const newCenterX = centerX * scaleX;
                const newCenterY = centerY * scaleY;
                
                container.scrollLeft = newCenterX - container.clientWidth / 2;
                container.scrollTop = newCenterY - container.clientHeight / 2;
            }

            // Remove rendering class after completion
            if (this.qualityOptions.enableSmoothZoom) {
                this.canvas.classList.remove('rendering');
            }
            
            this.currentRenderTask = null;
            this.pageRendering = false;

        } catch (error) {
            if (error.name !== 'RenderingCancelledException') {
                console.error('Render error:', error);
            }
            this.canvas.classList.remove('rendering');
            this.currentRenderTask = null;
            this.pageRendering = false;
        } finally {
            // Always release lock
            this._renderLock = false;

            // Process pending render
            if (this.pageNumPending !== null) {
                const pendingPage = this.pageNumPending;
                this.pageNumPending = null;
                this.renderPage(pendingPage);
            }
        }
    },

    async renderTextLayer(page, viewport, dpr) {
        try {
            const textLayerDiv = document.getElementById('pdf-text-layer');
            if (!textLayerDiv) {
                return;
            }

            // Clear previous text layer
            textLayerDiv.innerHTML = '';
            
            // Set text layer dimensions to match canvas display size
            textLayerDiv.style.width = `${viewport.width / dpr}px`;
            textLayerDiv.style.height = `${viewport.height / dpr}px`;
            
            // Set --scale-factor CSS variable required by PDF.js
            textLayerDiv.style.setProperty('--scale-factor', this.scale);

            // Get text content from PDF
            const textContent = await page.getTextContent();
            
            // Create viewport for text layer (without DPR scaling for positioning)
            const textViewport = page.getViewport({ scale: this.scale });

            // Render text layer using PDF.js built-in function
            const pdfjsLib = window.pdfjsLib;
            await pdfjsLib.renderTextLayer({
                textContentSource: textContent,
                container: textLayerDiv,
                viewport: textViewport,
                textDivs: []
            }).promise;

        } catch (error) {
            // Silently handle text layer errors (non-critical feature)
        }
    },

    queueRenderPage(num) {
        // Always use pending mechanism to avoid race conditions
        if (this.pageRendering || this.currentRenderTask) {
            this.pageNumPending = num;
        } else {
            this.renderPage(num);
        }
    },

    nextPage() {
        if (this.pageNum >= this.totalPages) {
            return false;
        }
        this.pageNum++;
        this.queueRenderPage(this.pageNum);
        return true;
    },

    previousPage() {
        if (this.pageNum <= 1) {
            return false;
        }
        this.pageNum--;
        this.queueRenderPage(this.pageNum);
        return true;
    },

    goToPage(num) {
        if (num < 1 || num > this.totalPages) {
            return false;
        }
        this.pageNum = num;
        this.queueRenderPage(this.pageNum);
        return true;
    },

    zoomIn() {
        const step = this.qualityOptions.zoomStepPercentage / 100;
        this.scale = Math.min(this.scale + step, 3.0);
        this.queueRenderPage(this.pageNum);
    },

    zoomOut() {
        const step = this.qualityOptions.zoomStepPercentage / 100;
        this.scale = Math.max(this.scale - step, 0.5);
        this.queueRenderPage(this.pageNum);
    },

    setScale(scale) {
        if (scale >= 0.5 && scale <= 3.0) {
            this.scale = scale;
            this.queueRenderPage(this.pageNum);
        }
    },

    async fitToWidth() {
        const container = this.canvas.closest('.pdf-frame');
        if (!container || !this.pdfDoc) return;

        try {
            const page = await this.pdfDoc.getPage(this.pageNum);
            const viewport = page.getViewport({ scale: 1.0 });
            
            const containerWidth = container.clientWidth - 80;
            const optimalScale = containerWidth / viewport.width;
            
            this.scale = Math.min(Math.max(optimalScale, 0.5), 3.0);
            this.queueRenderPage(this.pageNum);
        } catch (error) {
            console.error('Error fitting to width:', error);
        }
    },

    async renderThumbnail(pageNum, canvasId) {
        if (!this.pdfDoc) {
            return;
        }

        try {
            // Wait for canvas to be in DOM
            let canvas = document.getElementById(canvasId);
            let retries = 0;
            while (!canvas && retries < 10) {
                await new Promise(resolve => setTimeout(resolve, 100));
                canvas = document.getElementById(canvasId);
                retries++;
            }

            if (!canvas) {
                return;
            }

            // Check if canvas is already being used by a render task
            if (canvas._renderTask) {
                try {
                    await canvas._renderTask;
                } catch (e) {
                    // Ignore cancellation errors
                }
            }

            const page = await this.pdfDoc.getPage(pageNum);
            
            // High-quality rendering with HiDPI support (configurable)
            const dpr = this.qualityOptions.thumbnailEnableHiDPI 
                ? Math.min(window.devicePixelRatio || 1, this.qualityOptions.thumbnailMaxDPR)
                : 1.0;
            const baseScale = this.qualityOptions.thumbnailBaseScale;
            const scale = baseScale * dpr;
            
            const viewport = page.getViewport({ scale: scale });
            
            // Set actual canvas pixel dimensions (internal resolution)
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            
            // Remove any inline styles - let CSS handle display size
            canvas.style.width = '';
            canvas.style.height = '';

            const ctx = canvas.getContext('2d');
            
            // Enable maximum quality rendering
            ctx.imageSmoothingEnabled = true;
            ctx.imageSmoothingQuality = 'high';
            
            const renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };

            // Store render task on canvas to track active renders
            const renderTask = page.render(renderContext);
            canvas._renderTask = renderTask.promise;
            
            await renderTask.promise;
            
            // Clear the task when done
            delete canvas._renderTask;
        } catch (error) {
            // Silently handle thumbnail errors (non-critical)
        }
    },

    getCurrentPage() {
        return this.pageNum;
    },

    getTotalPages() {
        return this.totalPages;
    },

    getScale() {
        return this.scale;
    },

    dispose() {
        if (this.wheelEventAttached) {
            this.wheelEventAttached = false;
            this.dotNetReference = null;
        }
        this.detachResizeListeners();
    },

    // Resizable splitter functionality
    isResizing: false,
    resizeMouseMoveHandler: null,
    resizeMouseUpHandler: null,

    attachResizeListeners(dotNetRef) {
        this.dotNetReference = dotNetRef;

        this.resizeMouseMoveHandler = (e) => {
            if (this.isResizing && this.dotNetReference) {
                this.dotNetReference.invokeMethodAsync('OnSplitterMouseMove', e.clientX);
            }
        };

        this.resizeMouseUpHandler = () => {
            if (this.isResizing && this.dotNetReference) {
                this.isResizing = false;
                this.dotNetReference.invokeMethodAsync('OnSplitterMouseUp');
            }
        };

        document.addEventListener('mousemove', this.resizeMouseMoveHandler);
        document.addEventListener('mouseup', this.resizeMouseUpHandler);
    },

    detachResizeListeners() {
        if (this.resizeMouseMoveHandler) {
            document.removeEventListener('mousemove', this.resizeMouseMoveHandler);
            this.resizeMouseMoveHandler = null;
        }
        if (this.resizeMouseUpHandler) {
            document.removeEventListener('mouseup', this.resizeMouseUpHandler);
            this.resizeMouseUpHandler = null;
        }
        this.isResizing = false;
    },

    startResize() {
        this.isResizing = true;
    },

    // Signature button functionality
    signatureButtons: [],
    appliedSignatures: [],  // Track which signatures have been applied

    /**
     * Gets signature navigation state (for toolbar display)
     * @returns {object} { total, signed, unsigned, currentIndex, canGoPrev, canGoNext }
     */
    getSignatureNavState() {
        // Global imza listesi yoksa bo? state dön
        if (!this._allSignatures || this._allSignatures.length === 0) {
            return {
                total: 0,
                signed: 0,
                unsigned: 0,
                currentIndex: -1,
                canGoPrev: false,
                canGoNext: false
            };
        }
        
        // TÜM sayfalardaki imzalar? say (database'den gelen global liste)
        const total = this._allSignatures.length;           // Global: Toplam imza say?s?
        const signed = this.appliedSignatures.length;       // ?mzalananlar
        const unsigned = total - signed;                    // Hesaplanan: ?mzalanmayanlar
        
        return {
            total: total,
            signed: signed,
            unsigned: unsigned,
            currentIndex: signed,           // Sonraki imzan?n index'i
            canGoPrev: signed > 0,          // En az 1 imza uygulanm?? m??
            canGoNext: unsigned > 0         // Hala imzalanmam?? var m??
        };
    },

    /**
     * Navigates to the next unsigned signature button.
     * Scrolls to button position and changes page if necessary.
     * Cross-page navigation: searches ALL pages for next unsigned signature.
     */
    async goToNextSignature(dotNetRef) {
        // Global imza listesi yoksa ç?k
        if (!this._allSignatures || this._allSignatures.length === 0) {
            return false;
        }

        // TÜM sayfalar aras?nda ilk imzalanmam?? imzay? bul
        const appliedIds = new Set(this.appliedSignatures.map(s => s.id));
        const nextSignature = this._allSignatures.find(sig => !appliedIds.has(sig.id));
        
        if (!nextSignature) {
            return false; // Hepsi imzalanm??
        }

        // Farkl? sayfadaysa sayfa de?i?tir
        if (nextSignature.page !== this.pageNum) {
            // Sayfa de?i?tir
            this.pageNum = nextSignature.page;
            this.queueRenderPage(this.pageNum);
            
            // Render tamamlanana kadar bekle
            let waitCount = 0;
            while (this.pageRendering && waitCount < 20) {
                await new Promise(resolve => setTimeout(resolve, 100));
                waitCount++;
            }
            
            // Blazor'a haber ver - signature butonlar?n? yeniden ?iz
            if (dotNetRef) {
                await dotNetRef.invokeMethodAsync('OnPageChangedBySignatureNav', this.pageNum);
            }
            
            // Butonlar?n DOM'a eklenmesini bekle
            await new Promise(resolve => setTimeout(resolve, 150));
        }
        
        // Mevcut sayfadaki (art?k yeni sayfa olabilir) butonu bul
        const button = this.signatureButtons.find(btn => 
            parseInt(btn.getAttribute('data-signature-id')) === nextSignature.id
        );
        
        // Butonu görünür hale getir (scroll ile)
        if (button) {
            this.scrollToButton(button);
        }

        // Counter'? güncelle (Blazor'a bildir)
        if (dotNetRef) {
            dotNetRef.invokeMethodAsync('OnSignatureNavChanged');
        }

        return true;
    },

    /**
     * Navigates to the previous signature (last applied one).
     * Scrolls to signature position and changes page if necessary.
     */
    async goToPreviousSignature(dotNetRef) {
        if (this.appliedSignatures.length === 0) {
            return false;
        }

        // Get last applied signature
        const lastSig = this.appliedSignatures[this.appliedSignatures.length - 1];
        
        // Change page if needed
        if (lastSig.page !== this.pageNum) {
            // Sayfa de?i?tir
            this.pageNum = lastSig.page;
            this.queueRenderPage(this.pageNum);
            
            // Render tamamlanana kadar bekle
            let waitCount = 0;
            while (this.pageRendering && waitCount < 20) {
                await new Promise(resolve => setTimeout(resolve, 100));
                waitCount++;
            }
            
            // Blazor'a haber ver - signature butonlar?n? yeniden çiz
            if (dotNetRef) {
                await dotNetRef.invokeMethodAsync('OnPageChangedBySignatureNav', this.pageNum);
            }
            
            // DOM güncellenmesini bekle
            await new Promise(resolve => setTimeout(resolve, 150));
        }

        // Find applied signature container
        const container = document.querySelector(`.applied-signature[data-signature-id="${lastSig.id}"]`);
        if (container) {
            this.scrollToElement(container);
        }

        // Notify Blazor
        if (dotNetRef) {
            dotNetRef.invokeMethodAsync('OnSignatureNavChanged');
        }

        return true;
    },

    /**
     * Scrolls to center a button in the viewport
     */
    scrollToButton(button) {
        const wrapper = this.canvas.closest('.pdf-canvas-wrapper');
        if (!wrapper) return;

        const buttonRect = button.getBoundingClientRect();
        const wrapperRect = wrapper.getBoundingClientRect();

        // Calculate scroll to center button
        const scrollLeft = wrapper.scrollLeft + buttonRect.left - wrapperRect.left - (wrapperRect.width / 2) + (buttonRect.width / 2);
        const scrollTop = wrapper.scrollTop + buttonRect.top - wrapperRect.top - (wrapperRect.height / 2) + (buttonRect.height / 2);

        wrapper.scrollTo({
            left: scrollLeft,
            top: scrollTop,
            behavior: 'smooth'
        });
    },

    /**
     * Scrolls to center an element in the viewport
     */
    scrollToElement(element) {
        const wrapper = this.canvas.closest('.pdf-canvas-wrapper');
        if (!wrapper) return;

        const elemRect = element.getBoundingClientRect();
        const wrapperRect = wrapper.getBoundingClientRect();

        const scrollLeft = wrapper.scrollLeft + elemRect.left - wrapperRect.left - (wrapperRect.width / 2) + (elemRect.width / 2);
        const scrollTop = wrapper.scrollTop + elemRect.top - wrapperRect.top - (wrapperRect.height / 2) + (elemRect.height / 2);

        wrapper.scrollTo({
            left: scrollLeft,
            top: scrollTop,
            behavior: 'smooth'
        });
    },

    /**
     * Renders clickable signature buttons on the PDF canvas.
     * @param {Array} signatures - Array of SignatureDto objects with x, y coordinates in PDF POINTS
     * @param {number} currentPageNum - Current page number (1-based)
     * @param {object} dotNetRef - .NET reference for callbacks
     */
    async renderSignatureButtons(signatures, currentPageNum, dotNetRef) {
        // Clear existing buttons (NOT applied signatures!)
        this.clearSignatureButtons();

        if (!this.pdfDoc || !signatures || signatures.length === 0) {
            return;
        }

        this.dotNetReference = dotNetRef;
        this._allSignatures = signatures;  // Store for navigation

        try {
            // CRITICAL: Filter OUT already applied signatures!
            const appliedIds = new Set(this.appliedSignatures.map(s => s.id));
            const pageSignatures = signatures.filter(sig => 
                sig.page === currentPageNum && !appliedIds.has(sig.id)  // ? Skip applied ones!
            );
            
            if (pageSignatures.length === 0) {
                return;
            }

            // Get current page and viewport
            const page = await this.pdfDoc.getPage(currentPageNum);
            const dpr = this.qualityOptions.mainCanvasEnableHiDPI 
                ? Math.min(window.devicePixelRatio || 1, this.qualityOptions.mainCanvasMaxDPR)
                : 1.0;
            const viewport = page.getViewport({ scale: this.scale * dpr });
            
            // Get signature layer container
            const signatureLayer = document.getElementById('pdf-signature-layer');
            if (!signatureLayer) {
                console.warn('Signature layer not found');
                return;
            }

            // Set signature layer dimensions to match canvas display size
            signatureLayer.style.width = `${viewport.width / dpr}px`;
            signatureLayer.style.height = `${viewport.height / dpr}px`;

            // Create button for each UNSIGNED signature
            pageSignatures.forEach(sig => {
                // Coordinates are in PDF POINTS - convert to display pixels
                const xPx = (sig.x * this.scale);
                const yPx = (sig.y * this.scale);

                // Create button element
                const button = document.createElement('button');
                button.className = 'signature-button';
                button.setAttribute('data-signature-id', sig.id);
                button.setAttribute('type', 'button');
                button.setAttribute('tabindex', '0');
                button.style.position = 'absolute';
                button.style.left = `${xPx}px`;
                button.style.top = `${yPx}px`;
                button.style.width = '150px';
                button.style.height = '60px';
                button.style.backgroundColor = '#4F46E5';
                button.style.color = 'white';
                button.style.border = 'none';
                button.style.borderRadius = '8px';
                button.style.cursor = 'pointer';
                button.style.fontSize = '16px';
                button.style.fontWeight = '600';
                button.style.display = 'flex';
                button.style.flexDirection = 'column';
                button.style.alignItems = 'center';
                button.style.justifyContent = 'center';
                button.style.gap = '4px';
                button.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
                button.style.transition = 'all 0.2s ease';
                button.style.zIndex = '100';

                // Add text
                const textDiv = document.createElement('div');
                textDiv.textContent = 'Unterschreiben';
                textDiv.style.fontSize = '18px';
                textDiv.style.fontWeight = '700';

                // Add SVG icon
                const svgNS = 'http://www.w3.org/2000/svg';
                const svg = document.createElementNS(svgNS, 'svg');
                svg.setAttribute('width', '24');
                svg.setAttribute('height', '24');
                svg.setAttribute('viewBox', '0 8 32 36');
                svg.setAttribute('fill', 'none');
                svg.style.filter = 'drop-shadow(0 1px 2px rgba(0,0,0,0.2))';

                const path = document.createElementNS(svgNS, 'path');
                path.setAttribute('fill-rule', 'evenodd');
                path.setAttribute('clip-rule', 'evenodd');
                path.setAttribute('d', 'M25.061 6.90625L23.7115 8.25503C23.2861 8.05188 22.8241 7.9503 22.3621 7.9503C21.5605 7.9503 20.7589 8.25613 20.1483 8.86778L8.18147 20.8336L6.70565 26.7379H6.70557V27.7817H26.5372V26.7379H6.70671L12.6102 25.2623L24.576 13.2955C25.5404 12.3318 25.7445 10.8952 25.1882 9.73146L26.5369 8.38214L25.061 6.90625ZM23.174 10.27C22.9569 10.0539 22.6688 9.93388 22.362 9.93388C22.0551 9.93388 21.767 10.0539 21.5499 10.27L13.5323 18.2876L15.1564 19.9117L23.174 11.8941C23.6218 11.4463 23.6218 10.7177 23.174 10.27ZM14.4922 20.5759L12.868 18.9518L9.97241 21.8475L9.43069 24.0133L11.5965 23.4716L14.4922 20.5759Z');
                path.setAttribute('fill', 'white');

                svg.appendChild(path);
                button.appendChild(textDiv);
                button.appendChild(svg);

                // Add hover effect
                button.addEventListener('mouseenter', () => {
                    button.style.backgroundColor = '#4338CA';
                    button.style.transform = 'scale(1.05)';
                    button.style.boxShadow = '0 4px 12px rgba(79, 70, 229, 0.4)';
                });
                button.addEventListener('mouseleave', () => {
                    button.style.backgroundColor = '#4F46E5';
                    button.style.transform = 'scale(1)';
                    button.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
                });

                // Add click handler
                button.addEventListener('click', () => {
                    if (this.dotNetReference) {
                        this.dotNetReference.invokeMethodAsync('OnSignatureButtonClick', sig.id);
                    }
                });

                signatureLayer.appendChild(button);
                this.signatureButtons.push(button);
            });

        } catch (error) {
            console.error('Error rendering signature buttons:', error);
        }
    },

    /**
     * Clears all signature buttons from the canvas.
     * Also hides applied signatures that don't belong to current page.
     */
    clearSignatureButtons() {
        // Remove unsigned signature buttons
        this.signatureButtons.forEach(button => {
            if (button.parentNode) {
                button.parentNode.removeChild(button);
            }
        });
        this.signatureButtons = [];
        
        // Hide/show applied signatures based on current page
        const signatureLayer = document.getElementById('pdf-signature-layer');
        if (signatureLayer) {
            const appliedContainers = signatureLayer.querySelectorAll('.applied-signature');
            appliedContainers.forEach(container => {
                const signatureId = parseInt(container.getAttribute('data-signature-id'));
                const signature = this._allSignatures?.find(s => s.id === signatureId);
                
                if (signature) {
                    // Show only if on current page, hide otherwise
                    if (signature.page === this.pageNum) {
                        container.style.display = '';  // Show
                    } else {
                        container.style.display = 'none';  // Hide
                    }
                }
            });
        }
    },

    /**
     * Applies a signature to a specific signature field, removing the button and rendering the signature.
     * German standard: Signature image + Name, Position, Place, Date
     * @param {number} signatureId - ID of the signature field
     * @param {string} signatureDataUrl - Base64 PNG data URL of signature
     * @param {string} fullName - Signer's full name
     * @param {string} position - Signer's position (optional, can be empty)
     * @param {string} place - Signing place
     */
    async applySignature(signatureId, signatureDataUrl, fullName, position, place) {
        try {
            // Find and remove the button
            const buttonIndex = this.signatureButtons.findIndex(btn => {
                return btn.getAttribute('data-signature-id') == signatureId;
            });

            if (buttonIndex === -1) {
                console.warn(`Signature button #${signatureId} not found`);
                return;
            }

            const button = this.signatureButtons[buttonIndex];
            const signatureLayer = document.getElementById('pdf-signature-layer');
            
            if (!signatureLayer) {
                console.error('Signature layer not found');
                return;
            }

            // Get button position before removing it
            const left = button.style.left;
            const top = button.style.top;

            // Find signature data for tracking
            const signature = this._allSignatures?.find(s => s.id === signatureId);

            // Remove button
            if (button.parentNode) {
                button.parentNode.removeChild(button);
            }
            this.signatureButtons.splice(buttonIndex, 1);

            // Track applied signature
            if (signature) {
                this.appliedSignatures.push({
                    id: signatureId,
                    page: signature.page
                });
            }

            // Create signature container
            const signatureContainer = document.createElement('div');
            signatureContainer.className = 'applied-signature';
            signatureContainer.setAttribute('data-signature-id', signatureId);
            signatureContainer.style.position = 'absolute';
            signatureContainer.style.left = left;
            signatureContainer.style.top = top;
            signatureContainer.style.width = '230px';
            signatureContainer.style.backgroundColor = '#f8f9fa';
            signatureContainer.style.border = '1px solid #dee2e6';
            signatureContainer.style.borderRadius = '6px';
            signatureContainer.style.padding = '12px';
            signatureContainer.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
            signatureContainer.style.fontFamily = "'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";

            // Signature image
            const signatureImg = document.createElement('img');
            signatureImg.src = signatureDataUrl;
            signatureImg.alt = 'Unterschrift';
            signatureImg.style.width = '100%';
            signatureImg.style.height = 'auto';
            signatureImg.style.maxHeight = '70px';
            signatureImg.style.display = 'block';
            signatureImg.style.objectFit = 'contain';
            signatureImg.style.marginBottom = '6px';

            // Separator line (German standard)
            const separator = document.createElement('div');
            separator.style.width = '100%';
            separator.style.height = '1px';
            separator.style.backgroundColor = '#495057';
            separator.style.marginBottom = '8px';

            // Text information container
            const infoContainer = document.createElement('div');
            infoContainer.style.fontSize = '9px';
            infoContainer.style.lineHeight = '1.4';
            infoContainer.style.color = '#495057';
            infoContainer.style.fontWeight = '400';

            // Format date (German style: dd.MM.yyyy)
            const today = new Date();
            const dateStr = today.toLocaleDateString('de-DE', { 
                day: '2-digit', 
                month: '2-digit', 
                year: 'numeric' 
            });

            // Build text lines (German standard format)
            const lines = [];
            lines.push(`<strong style="font-weight: 600; color: #212529;">${this.escapeHtml(fullName)}</strong>`);
            
            if (position && position.trim() !== '') {
                lines.push(`${this.escapeHtml(position)}`);
            }
            
            lines.push(`${this.escapeHtml(place)}, ${dateStr}`);

            infoContainer.innerHTML = lines.join('<br>');

            // Assemble container
            signatureContainer.appendChild(signatureImg);
            signatureContainer.appendChild(separator);
            signatureContainer.appendChild(infoContainer);

            // Add to signature layer
            signatureLayer.appendChild(signatureContainer);

            console.log(`Signature #${signatureId} applied successfully`);

        } catch (error) {
            console.error('Error applying signature:', error);
        }
    },

    /**
     * Escapes HTML to prevent XSS attacks
     */
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
};