window.receiverSignature = (() => {

    // ?? State ???????????????????????????????????????????????????????????????
    const pads            = new Map();
    const typedSignatures = new Map();
    const imageSignatures = new Map();
    const overlayButtons  = new Map(); // annotationId -> { btn, signed }
    let   _dotNetRef      = null;

    // DevExpress Blazor Report Viewer selectors (confirmed via debugDumpViewerDom)
    const PAGE_IMG_SEL         = '.dxbrv-report-preview-content-img';
    const SCROLL_CONTAINER_SEL = '.dxbrv-surface-wrapper';
    const VIEWER_WRAPPER_SEL   = '.receiver-viewer-wrapper';

    // DX report coordinate space (1/100 inch, A4)
    const DX_PAGE_WIDTH  = 827.0;
    const DX_PAGE_HEIGHT = 1169.0;

    // Signature field size in DX units
    const SIG_WIDTH_DX  = 230.0;
    const SIG_HEIGHT_DX = 154.0;

    // ?? Annotation Checkboxes ????????????????????????????????????????????????

    // Active install context — holds everything needed to reposition on resize/scroll
    let _installCtx = null;

    function installAnnotationCheckboxes(annotations, checkedIds, dotNetRef) {
        _dotNetRef = dotNetRef;

        // Tear down previous install completely
        _teardownCheckboxes();

        if (!annotations || annotations.length === 0) return;

        const ctx = {
            annotations,
            checkedIds: new Set(Array.isArray(checkedIds) ? checkedIds : []),
            scrollEl:   null,
            pageEls:    [],
            resizeObs:  null,
            onScroll:   null,
            onResize:   null,
            resizeTimer: null,
        };
        _installCtx = ctx;

        _waitForCheckboxPages(ctx);
    }

    function _teardownCheckboxes() {
        document.querySelectorAll('.annot-sig-cb-wrapper').forEach(el => el.remove());
        overlayButtons.clear();

        if (!_installCtx) return;
        const ctx = _installCtx;

        if (ctx.resizeObs)  { ctx.resizeObs.disconnect(); ctx.resizeObs = null; }
        if (ctx.scrollEl && ctx.onScroll)  ctx.scrollEl.removeEventListener('scroll', ctx.onScroll);
        if (ctx.onResize)   window.removeEventListener('resize', ctx.onResize);
        if (ctx.resizeTimer) clearTimeout(ctx.resizeTimer);

        _installCtx = null;
    }

    function _waitForCheckboxPages(ctx) {
        const wrapper = document.querySelector(VIEWER_WRAPPER_SEL);
        if (!wrapper) return;

        if (!_tryInstallCheckboxes(ctx)) {
            const observer = new MutationObserver(() => {
                if (_tryInstallCheckboxes(ctx)) observer.disconnect();
            });
            observer.observe(wrapper, { childList: true, subtree: true });
            setTimeout(() => observer.disconnect(), 15000);
        }
    }

    function _tryInstallCheckboxes(ctx) {
        const scrollEl = document.querySelector(SCROLL_CONTAINER_SEL);
        if (!scrollEl) return false;

        const pageEls = Array.from(document.querySelectorAll(PAGE_IMG_SEL));
        if (pageEls.length === 0) return false;

        if (getComputedStyle(scrollEl).position === 'static')
            scrollEl.style.position = 'relative';

        ctx.scrollEl = scrollEl;
        ctx.pageEls  = pageEls;

        // Initial render
        _renderAllCheckboxes(ctx);

        // ResizeObserver — watches every page image for size changes (zoom in/out)
        const ro = new ResizeObserver(() => _repositionAll(ctx));
        pageEls.forEach(el => ro.observe(el));
        ctx.resizeObs = ro;

        // Scroll — reposition when user scrolls the viewer
        ctx.onScroll = () => _repositionAll(ctx);
        scrollEl.addEventListener('scroll', ctx.onScroll, { passive: true });

        // Window resize — debounced 60 ms
        ctx.onResize = () => {
            if (ctx.resizeTimer) clearTimeout(ctx.resizeTimer);
            ctx.resizeTimer = setTimeout(() => _repositionAll(ctx), 60);
        };
        window.addEventListener('resize', ctx.onResize, { passive: true });

        return true;
    }

    function _repositionAll(ctx) {
        if (!ctx || !ctx.scrollEl) return;

        const scrollEl = ctx.scrollEl;
        const pageEls  = Array.from(document.querySelectorAll(PAGE_IMG_SEL)); // re-query in case DOM changed
        if (pageEls.length === 0) return;

        const scrollRect = scrollEl.getBoundingClientRect();

        ctx.annotations.forEach(ann => {
            const wrapper = document.querySelector(`.annot-sig-cb-wrapper[data-annot-id="${ann.id}"]`);
            if (!wrapper) return;

            const pageEl = pageEls[(ann.page || 1) - 1] ?? pageEls[pageEls.length - 1];
            if (!pageEl) return;

            const pageRect = pageEl.getBoundingClientRect();
            if (pageRect.width === 0 || pageRect.height === 0) return;

            const scaleX = pageRect.width  / DX_PAGE_WIDTH;
            const scaleY = pageRect.height / DX_PAGE_HEIGHT;

            const absLeft = pageRect.left - scrollRect.left + scrollEl.scrollLeft + (ann.x || 0) * scaleX;
            const absTop  = pageRect.top  - scrollRect.top  + scrollEl.scrollTop  + (ann.y || 0) * scaleY;
            const boxW    = SIG_WIDTH_DX  * scaleX;
            const boxH    = SIG_HEIGHT_DX * scaleY;

            wrapper.style.left   = Math.round(absLeft) + 'px';
            wrapper.style.top    = Math.round(absTop)  + 'px';
            wrapper.style.width  = Math.round(boxW)    + 'px';
            wrapper.style.height = Math.round(boxH)    + 'px';
        });
    }

    function _renderAllCheckboxes(ctx) {
        const scrollEl  = ctx.scrollEl;
        const pageEls   = ctx.pageEls;
        const scrollRect = scrollEl.getBoundingClientRect();

        ctx.annotations.forEach(ann => {
            const pageEl = pageEls[(ann.page || 1) - 1] ?? pageEls[pageEls.length - 1];
            if (!pageEl) return;

            const pageRect = pageEl.getBoundingClientRect();
            if (pageRect.width === 0 || pageRect.height === 0) return;

            const scaleX = pageRect.width  / DX_PAGE_WIDTH;
            const scaleY = pageRect.height / DX_PAGE_HEIGHT;

            const absLeft = pageRect.left - scrollRect.left + scrollEl.scrollLeft + (ann.x || 0) * scaleX;
            const absTop  = pageRect.top  - scrollRect.top  + scrollEl.scrollTop  + (ann.y || 0) * scaleY;
            const boxW    = SIG_WIDTH_DX  * scaleX;
            const boxH    = SIG_HEIGHT_DX * scaleY;

            const isChecked = ctx.checkedIds.has(ann.id);
            _createCheckboxOverlay(ann.id, scrollEl, absLeft, absTop, boxW, boxH, isChecked);
        });
    }

    function _createCheckboxOverlay(annotationId, container, left, top, width, height, isChecked) {
        const wrapper = document.createElement('div');
        wrapper.className = 'annot-sig-cb-wrapper' + (isChecked ? ' annot-sig-cb-wrapper--checked' : '');
        wrapper.setAttribute('data-annot-id', String(annotationId));

        Object.assign(wrapper.style, {
            position:   'absolute',
            left:       Math.round(left)   + 'px',
            top:        Math.round(top)    + 'px',
            width:      Math.round(width)  + 'px',
            height:     Math.round(height) + 'px',
            zIndex:     '9999',
            cursor:     'pointer',
            boxSizing:  'border-box',
        });

        const cb = document.createElement('input');
        cb.type = 'checkbox';
        cb.checked = isChecked;
        cb.className = 'annot-sig-cb';
        cb.setAttribute('aria-label', 'Unterschriftsfeld bestaetigen');

        const label = document.createElement('span');
        label.className = 'annot-sig-cb__label';
        label.textContent = isChecked ? '\u2713 Bestaetigt' : '\u270e Hier unterschreiben';

        wrapper.appendChild(cb);
        wrapper.appendChild(label);

        wrapper.addEventListener('click', (e) => {
            if (e.target !== cb) cb.checked = !cb.checked;
            const checked = cb.checked;
            wrapper.classList.toggle('annot-sig-cb-wrapper--checked', checked);
            label.textContent = checked ? '\u2713 Bestaetigt' : '\u270e Hier unterschreiben';
            if (_installCtx) {
                if (checked) _installCtx.checkedIds.add(annotationId);
                else         _installCtx.checkedIds.delete(annotationId);
            }
            if (_dotNetRef)
                _dotNetRef.invokeMethodAsync('OnAnnotationToggled', annotationId, checked);
        });

        container.appendChild(wrapper);
        overlayButtons.set(annotationId, { btn: wrapper, signed: isChecked });
    }

    function debugDumpViewerDom() {
        const wrapper = document.querySelector(VIEWER_WRAPPER_SEL);
        if (!wrapper) { console.warn('[annot] .receiver-viewer-wrapper not found'); return; }
        console.group('[annot] viewer DOM snapshot');
        const cs = new Set();
        wrapper.querySelectorAll('*').forEach(el => el.classList.forEach(c => cs.add(c)));
        console.log('classes:', [...cs].sort().join(', '));
        console.log('scroll container:', document.querySelector(SCROLL_CONTAINER_SEL));
        console.log('page images:', document.querySelectorAll(PAGE_IMG_SEL));
        console.groupEnd();
    }

    // ?? Signature Pad ???????????????????????????????????????????????????????

    function _pos(canvas, event) {
        const r = canvas.getBoundingClientRect();
        const s = (event.touches && event.touches.length) ? event.touches[0] : event;
        return { x: (s.clientX - r.left) * (canvas.width / r.width), y: (s.clientY - r.top) * (canvas.height / r.height) };
    }

    function _clear(canvas) { canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); }

    function initialize(canvasId) {
        const canvas = document.getElementById(canvasId);
        if (!canvas || pads.has(canvasId)) return;
        const ctx = canvas.getContext('2d');
        ctx.lineWidth = 2.5; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.strokeStyle = '#111';
        const state = { drawing: false, hasSignature: false };
        pads.set(canvasId, state);
        const start = e => { e.preventDefault(); const p = _pos(canvas, e); state.drawing = true; ctx.beginPath(); ctx.moveTo(p.x, p.y); };
        const move  = e => { if (!state.drawing) return; e.preventDefault(); const p = _pos(canvas, e); ctx.lineTo(p.x, p.y); ctx.stroke(); state.hasSignature = true; };
        const end   = e => { if (!state.drawing) return; e.preventDefault(); state.drawing = false; };
        canvas.addEventListener('mousedown', start);
        canvas.addEventListener('mousemove', move);
        window.addEventListener('mouseup', end);
        canvas.addEventListener('touchstart', start, { passive: false });
        canvas.addEventListener('touchmove',  move,  { passive: false });
        canvas.addEventListener('touchend',   end,   { passive: false });
    }

    function initializeTyped(canvasId) {
        const canvas = document.getElementById(canvasId);
        if (!canvas || typedSignatures.has(canvasId)) return;
        typedSignatures.set(canvasId, { hasSignature: false });
    }

    function initializeImage(inputId, canvasId) {
        const input  = document.getElementById(inputId);
        const canvas = document.getElementById(canvasId);
        if (!input || !canvas || imageSignatures.has(canvasId)) return;
        const state = { hasSignature: false };
        imageSignatures.set(canvasId, state);
        input.addEventListener('change', () => {
            const file = input.files && input.files[0];
            if (!file || !file.type.startsWith('image/')) { _clear(canvas); state.hasSignature = false; return; }
            const reader = new FileReader();
            reader.onload = () => {
                const img = new Image();
                img.onload = () => {
                    const ctx = canvas.getContext('2d'); _clear(canvas);
                    const p = 10, mw = canvas.width - p * 2, mh = canvas.height - p * 2;
                    const s = Math.min(mw / img.width, mh / img.height, 1);
                    ctx.drawImage(img, (canvas.width - img.width * s) / 2, (canvas.height - img.height * s) / 2, img.width * s, img.height * s);
                    state.hasSignature = true;
                };
                img.src = reader.result;
            };
            reader.readAsDataURL(file);
        });
    }

    function clear(canvasId) {
        const c = document.getElementById(canvasId); const s = pads.get(canvasId);
        if (c && s) { _clear(c); s.hasSignature = false; }
    }

    function clearTyped(canvasId) {
        const c = document.getElementById(canvasId); const s = typedSignatures.get(canvasId);
        if (c && s) { _clear(c); s.hasSignature = false; }
    }

    function clearImage(inputId, canvasId) {
        const inp = document.getElementById(inputId); const c = document.getElementById(canvasId); const s = imageSignatures.get(canvasId);
        if (c && s) { if (inp) inp.value = ''; _clear(c); s.hasSignature = false; }
    }

    function renderTypedSignature(canvasId, text, fontFamily) {
        const canvas = document.getElementById(canvasId); const state = typedSignatures.get(canvasId);
        if (!canvas || !state) return;
        const value = (text || '').trim(); _clear(canvas);
        if (!value) { state.hasSignature = false; return; }
        const ctx = canvas.getContext('2d'); let fs = 54;
        do { ctx.font = 'italic ' + fs + 'px ' + (fontFamily || 'cursive'); fs -= 2; }
        while (ctx.measureText(value).width > canvas.width - 30 && fs > 24);
        ctx.fillStyle = '#111'; ctx.textBaseline = 'middle'; ctx.textAlign = 'center';
        ctx.fillText(value, canvas.width / 2, canvas.height / 2);
        state.hasSignature = true;
    }

    function startTyped(elementId, text, typeSpeed) {
        if (typeof Typed === 'undefined') return;
        new Typed('#' + elementId, {
            strings: [text],
            typeSpeed: typeSpeed || 15,
            showCursor: false
        });
    }

    function getDataUrl(id)      { const c = document.getElementById(id); const s = pads.get(id);            return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
    function getTypedDataUrl(id) { const c = document.getElementById(id); const s = typedSignatures.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
    function getImageDataUrl(id) { const c = document.getElementById(id); const s = imageSignatures.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }

    // ?? Public API ??????????????????????????????????????????????????????????
    return {
        startTyped:                  startTyped,
        installAnnotationCheckboxes: installAnnotationCheckboxes,
        debugDumpViewerDom:          debugDumpViewerDom,
        initialize:                  initialize,
        initializeTyped:             initializeTyped,
        initializeImage:             initializeImage,
        clear:                       clear,
        clearTyped:                  clearTyped,
        clearImage:                  clearImage,
        renderTypedSignature:        renderTypedSignature,
        getDataUrl:                  getDataUrl,
        getTypedDataUrl:             getTypedDataUrl,
        getImageDataUrl:             getImageDataUrl
    };
})();