{{-- General meeting notice signature pad — standalone (not shared with scheme notice). --}}
<script>
(function () {
    var root = document.getElementById('mws-notice-static');
    if (!root || root.getAttribute('data-mws-nl-general') !== '1') {
        return;
    }

    var block = document.getElementById('mwsNlSignBlock');
    if (!block) {
        return;
    }

    var editorWrap = block.querySelector('[data-mws-nl-general-sig-editor-wrap="1"]');
    var canvas = editorWrap ? editorWrap.querySelector('[data-mws-nl-general-sig-canvas="1"]') : null;
    var panelDraw = editorWrap ? editorWrap.querySelector('[data-mws-nl-general-sig-panel-draw="1"]') : null;
    var panelUpload = editorWrap ? editorWrap.querySelector('[data-mws-nl-general-sig-panel-upload="1"]') : null;
    if (!editorWrap || !canvas || !panelDraw || !panelUpload) {
        return;
    }

    var serverEffective = (block.getAttribute('data-mws-nl-general-sig-effective') || '').trim();
    var serverDrawn = (block.getAttribute('data-mws-nl-general-sig-drawn') || '').trim();
    var serverUploaded = (block.getAttribute('data-mws-nl-general-sig-uploaded') || '').trim();

    var mode = '';
    var pendingDrawDataUrl = null;
    var pendingUpload = null;
    var uiLetterCleared = false;
    var pad = null;

    function cssCanvasWidth() {
        var wrap = canvas ? canvas.closest('.notice-mn-sig-canvas-wrap') : null;
        if (!wrap || wrap.hidden) {
            return 280;
        }
        var cs = window.getComputedStyle(wrap);
        var padL = parseFloat(cs.paddingLeft) || 0;
        var padR = parseFloat(cs.paddingRight) || 0;
        var w = wrap.clientWidth - padL - padR;
        return Math.max(Math.floor(w), 240);
    }

    function resizeCanvas() {
        if (!canvas) {
            return;
        }
        var ratio = Math.max(window.devicePixelRatio || 1, 1);
        var w = cssCanvasWidth();
        var h = 120;
        var data = pad && typeof pad.toData === 'function' ? pad.toData() : null;
        canvas.width = Math.floor(w * ratio);
        canvas.height = Math.floor(h * ratio);
        var ctx = canvas.getContext('2d');
        if (ctx) {
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.scale(ratio, ratio);
        }
        canvas.style.width = w + 'px';
        canvas.style.height = h + 'px';
        if (pad) {
            pad.clear();
            if (data && data.length) {
                pad.fromData(data);
            }
        }
    }

    function afterDrawPanelVisible() {
        requestAnimationFrame(function () {
            requestAnimationFrame(function () {
                resizeCanvas();
            });
        });
    }

    function setPanelVisible(el, visible) {
        if (!el) {
            return;
        }
        el.hidden = !visible;
        if (visible) {
            el.classList.add('mws-nl-general-sig-panel--open');
        } else {
            el.classList.remove('mws-nl-general-sig-panel--open');
        }
    }

    function ensurePad() {
        if (typeof SignaturePad === 'undefined' || !canvas) {
            return pad;
        }
        if (!pad) {
            pad = new SignaturePad(canvas, {
                minWidth: 0.5,
                maxWidth: 2.5,
                penColor: 'rgb(0, 0, 0)',
                backgroundColor: 'rgba(255, 255, 255, 0)'
            });
            if (typeof pad.addEventListener === 'function') {
                pad.addEventListener('endStroke', function () {
                    if (mode !== 'draw' || !pad || pad.isEmpty()) {
                        return;
                    }
                    pendingDrawDataUrl = pad.toDataURL('image/png');
                    refreshLetterSigPreview();
                });
            }
        }
        return pad;
    }

    function setDisplayOnBlock(blk, url) {
        var wrap = blk.querySelector('[data-mws-nl-general-sig-display-wrap="1"]');
        if (!wrap) {
            return;
        }
        var u = (url && String(url).trim()) ? String(url).trim() : '';
        while (wrap.firstChild) {
            wrap.removeChild(wrap.firstChild);
        }
        if (u === '') {
            blk.removeAttribute('data-mws-nl-general-sig-effective-url');
            var ph = document.createElement('div');
            ph.className = 'mws-nl-general-sig-line';
            ph.setAttribute('data-mws-nl-general-sig-placeholder', '1');
            ph.setAttribute('aria-hidden', 'true');
            wrap.appendChild(ph);
            return;
        }
        blk.setAttribute('data-mws-nl-general-sig-effective-url', u);
        var outer = document.createElement('div');
        outer.className = 'notice-sign-img-wrap mws-nl-general-sig-img-wrap';
        outer.style.justifyContent = 'end !important';
        var img = document.createElement('img');
        img.className = 'notice-sign-img mws-nl-general-sig-img';
        img.alt = '';
        img.setAttribute('data-mws-nl-general-sig-img', '1');
        if (/^data:/i.test(u)) {
            img.src = u;
        } else {
            img.src = u + (u.indexOf('?') >= 0 ? '&' : '?') + 't=' + Date.now();
        }
        outer.appendChild(img);
        wrap.appendChild(outer);
    }

    function updateDisplayUrl(url) {
        root.querySelectorAll('[data-mws-nl-general-sig-block="1"]').forEach(function (blk) {
            setDisplayOnBlock(blk, url);
        });
    }

    function refreshLetterSigPreview() {
        if (mode === 'draw') {
            var pDraw = ensurePad();
            if (pDraw && !pDraw.isEmpty()) {
                pendingDrawDataUrl = pDraw.toDataURL('image/png');
            }
        }
        if (uiLetterCleared && !pendingDrawDataUrl && !pendingUpload && mode === '') {
            updateDisplayUrl('');
            return;
        }
        if (mode === 'draw') {
            if (pendingDrawDataUrl) {
                updateDisplayUrl(pendingDrawDataUrl);
                return;
            }
            if (!uiLetterCleared && serverDrawn !== '') {
                updateDisplayUrl(serverDrawn);
                return;
            }
            updateDisplayUrl('');
            return;
        }
        if (mode === 'upload') {
            if (pendingUpload && pendingUpload.dataUrl) {
                updateDisplayUrl(pendingUpload.dataUrl);
                return;
            }
            if (!uiLetterCleared && serverUploaded !== '') {
                updateDisplayUrl(serverUploaded);
                return;
            }
            updateDisplayUrl('');
            return;
        }
        if (uiLetterCleared) {
            updateDisplayUrl('');
            return;
        }
        updateDisplayUrl(serverEffective);
    }

    window.__mwsNlRefreshLetterSigPreview = refreshLetterSigPreview;

    function readModeFromRadios() {
        var checked = editorWrap.querySelector('[data-mws-nl-general-sig-mode-radio="1"]:checked');
        return checked ? String(checked.value || '').trim() : '';
    }

    function syncModePanels() {
        setPanelVisible(panelDraw, mode === 'draw');
        setPanelVisible(panelUpload, mode === 'upload');
        if (mode === 'draw') {
            afterDrawPanelVisible();
            requestAnimationFrame(function () {
                ensurePad();
                if (pad && typeof pad.on === 'function') {
                    pad.on();
                }
            });
        } else if (pad && typeof pad.off === 'function') {
            pad.off();
        }
    }

    window.__mwsNlGeneralSigSyncPanels = function () {
        mode = readModeFromRadios() || mode;
        syncModePanels();
    };

    function setMode(next) {
        var prev = mode;
        mode = next === 'draw' || next === 'upload' ? next : '';
        if (mode === 'draw' && prev === 'upload') {
            pendingUpload = null;
            var fiUp = editorWrap.querySelector('[data-mws-nl-general-sig-file="1"]');
            if (fiUp) {
                fiUp.value = '';
            }
        }
        if (mode === 'upload' && prev === 'draw') {
            pendingDrawDataUrl = null;
            if (pad) {
                pad.clear();
            }
        }
        if (mode !== '') {
            uiLetterCleared = false;
        }
        syncModePanels();
        refreshLetterSigPreview();
    }

    editorWrap.querySelectorAll('[data-mws-nl-general-sig-mode-radio="1"]').forEach(function (radio) {
        radio.addEventListener('change', function () {
            if (!radio.checked) {
                return;
            }
            setMode(radio.value);
        });
    });

    editorWrap.addEventListener('click', function (ev) {
        var label = ev.target.closest('label.btn');
        if (!label || !editorWrap.contains(label)) {
            return;
        }
        var radio = label.querySelector('[data-mws-nl-general-sig-mode-radio="1"]');
        if (!radio) {
            return;
        }
        window.setTimeout(function () {
            if (radio.checked) {
                setMode(radio.value);
            }
        }, 0);
    });

    var clearUiBtn = editorWrap.querySelector('[data-mws-nl-general-sig-clear-all-ui="1"]');
    if (clearUiBtn) {
        clearUiBtn.addEventListener('click', function () {
            uiLetterCleared = true;
            pendingDrawDataUrl = null;
            pendingUpload = null;
            mode = '';
            editorWrap.querySelectorAll('[data-mws-nl-general-sig-mode-radio="1"]').forEach(function (r) {
                r.checked = false;
            });
            if (pad) {
                pad.clear();
            }
            var fi = editorWrap.querySelector('[data-mws-nl-general-sig-file="1"]');
            if (fi) {
                fi.value = '';
            }
            syncModePanels();
            refreshLetterSigPreview();
        });
    }

    var padClear = editorWrap.querySelector('[data-mws-nl-general-sig-pad-clear="1"]');
    if (padClear) {
        padClear.addEventListener('click', function () {
            if (pad) {
                pad.clear();
            }
            pendingDrawDataUrl = null;
            if (mode === 'draw') {
                refreshLetterSigPreview();
            }
        });
    }

    function readFileAsDataUrl(file, done) {
        if (!file || !/^image\//i.test(file.type || '')) {
            done(null, 'Choose an image file.');
            return;
        }
        var fr = new FileReader();
        fr.onload = function () {
            var img = new Image();
            img.onload = function () {
                var maxW = 520;
                var maxH = 220;
                var iw = img.naturalWidth || img.width || 1;
                var ih = img.naturalHeight || img.height || 1;
                var scale = Math.min(1, maxW / iw, maxH / ih);
                var cw = Math.max(1, Math.round(iw * scale));
                var ch = Math.max(1, Math.round(ih * scale));
                var c = document.createElement('canvas');
                c.width = cw;
                c.height = ch;
                var ctx = c.getContext('2d');
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(0, 0, cw, ch);
                ctx.drawImage(img, 0, 0, cw, ch);
                var mime = (file.type && String(file.type).toLowerCase().indexOf('png') >= 0) ? 'image/png' : 'image/jpeg';
                done(c.toDataURL(mime, 0.92), null, file.name || 'signature.png');
            };
            img.onerror = function () {
                done(null, 'Could not read that image.');
            };
            img.src = fr.result;
        };
        fr.onerror = function () {
            done(null, 'Could not read that file.');
        };
        fr.readAsDataURL(file);
    }

    var fileIn = editorWrap.querySelector('[data-mws-nl-general-sig-file="1"]');
    if (fileIn) {
        fileIn.addEventListener('change', function () {
            var f = fileIn.files && fileIn.files[0];
            fileIn.value = '';
            if (!f) {
                return;
            }
            if (mode !== 'upload') {
                setMode('upload');
            }
            readFileAsDataUrl(f, function (dataUrl, err, name) {
                if (!dataUrl) {
                    window.alert(err || 'Invalid file');
                    return;
                }
                pendingUpload = { dataUrl: dataUrl, name: name };
                uiLetterCleared = false;
                refreshLetterSigPreview();
            });
        });
    }

    window.__mwsNlGetLetterSignaturePayload = function () {
        if (mode === 'draw') {
            var p = ensurePad();
            var url = null;
            if (p && !p.isEmpty()) {
                url = p.toDataURL('image/png');
            } else if (pendingDrawDataUrl) {
                url = pendingDrawDataUrl;
            }
            if (!url) {
                return null;
            }
            return { mode: 'draw', png_data_url: url };
        }
        if (mode === 'upload') {
            if (!pendingUpload || !pendingUpload.dataUrl) {
                return null;
            }
            return {
                mode: 'upload',
                image_data_url: pendingUpload.dataUrl,
                upload_filename: pendingUpload.name || 'signature.png'
            };
        }
        return null;
    };

    window.__mwsNlLetterSignatureOkForSave = function () {
        if (uiLetterCleared && !pendingDrawDataUrl && !pendingUpload && mode === '') {
            return false;
        }
        if (typeof window.__mwsNlGetLetterSignaturePayload === 'function') {
            var payloadSig = window.__mwsNlGetLetterSignaturePayload();
            if (payloadSig) {
                return true;
            }
        }
        if (mode === 'draw') {
            if (!uiLetterCleared && serverDrawn !== '') {
                return true;
            }
            var pDraw = ensurePad();
            if (pDraw && !pDraw.isEmpty()) {
                return true;
            }
            if (!uiLetterCleared && serverEffective !== '') {
                return true;
            }
            return false;
        }
        if (mode === 'upload') {
            if (!uiLetterCleared && serverUploaded !== '') {
                return true;
            }
            if (!uiLetterCleared && serverEffective !== '') {
                return true;
            }
            return false;
        }
        if (uiLetterCleared) {
            return false;
        }
        return (serverEffective || '').trim() !== '';
    };

    var editToggleEl = document.getElementById('mwsNlEditToggle');
    if (editToggleEl) {
        editToggleEl.addEventListener('click', function () {
            window.setTimeout(function () {
                window.__mwsNlGeneralSigSyncPanels();
            }, 0);
        });
    }

    if (!canvas.__mwsNlGeneralSigResizeBound) {
        canvas.__mwsNlGeneralSigResizeBound = true;
        window.addEventListener('resize', function () {
            if (!panelDraw || panelDraw.hidden) {
                return;
            }
            window.clearTimeout(canvas.__mwsNlGeneralSigResizeTimer);
            canvas.__mwsNlGeneralSigResizeTimer = window.setTimeout(resizeCanvas, 100);
        });
    }

    syncModePanels();
})();
</script>