{% load static %}
{# Panel rendering JavaScript functions - shared between assets and sign views #}
<script>
// Panel text sprite management
const panelTextSpriteDefinitions = new Map();
const renderedPanelTextSprites = new Map();
const panelTextSpriteQueue = new Set();
window.panelTextSpriteMetrics = window.panelTextSpriteMetrics || {};

// Cache Image elements for road sign icons used inside Zone panels
const roadSignImageElements = window.roadSignImageElements || (window.roadSignImageElements = {});

// Sprites waiting for an icon to load
const iconWaiters = new Map(); // iconName -> Set(spriteId)

function registerIconWaiter(iconName, spriteId) {
    if (!iconName || !spriteId) return;
    let set = iconWaiters.get(iconName);
    if (!set) {
        set = new Set();
        iconWaiters.set(iconName, set);
    }
    set.add(spriteId);
}

function notifyIconLoaded(iconName) {
    const set = iconWaiters.get(iconName);
    if (!set) return;
    iconWaiters.delete(iconName);
    const ids = Array.from(set.values());
    ids.forEach(id => ensurePanelTextSprite(panelTextSpriteMap, id));
}

function preloadZoneIcon(remainderCodeOriginal) {
    if (!remainderCodeOriginal) return;
    const cleaned = remainderCodeOriginal.replace(/['']/g, '');
    const iconName = `road-sign-${cleaned.toLowerCase()}`;
    if (roadSignImageElements[iconName]) return;
    const base = "{% static 'assets/road_signs/2025/' %}";
    // Try original case SVG, then lower, then upper, then PNG variants
    const candidates = [
        `${base}${cleaned}.svg`,
        `${base}${cleaned.toLowerCase()}.svg`,
        `${base}${cleaned.toUpperCase()}.svg`,
        `${base}${cleaned}.png`,
        `${base}${cleaned.toLowerCase()}.png`,
        `${base}${cleaned.toUpperCase()}.png`,
    ];
    let idx = 0;
    const attempt = () => {
        if (idx >= candidates.length) return; 
        const url = candidates[idx++];
        const img = new Image(64, 64);
        img.crossOrigin = 'anonymous';
        img.onload = () => { roadSignImageElements[iconName] = img; notifyIconLoaded(iconName); };
        img.onerror = attempt;
        img.src = url;
    };
    attempt();
}

const clamp = (value, min, max) => Math.min(max, Math.max(min, value));

// Load symbol SVGs for panel text rendering
const symbolImages = {};
const whiteSymbolImages = {};

function loadSymbolImages() {
    const symbolsBaseUrl = "{% static 'assets/road_signs/' %}";
    const symbols = {
        'pedestrian': 'pedestrian.svg',
        'car': 'car_side.svg',
        'bike': 'bike.svg'
    };

    Object.keys(symbols).forEach(key => {
        const img = new Image();
        img.crossOrigin = 'anonymous';
        img.onload = () => {
            symbolImages[key] = img;
            
            // Create a white version
            const canvas = document.createElement('canvas');
            canvas.width = img.width || 100;
            canvas.height = img.height || 100;
            const ctx = canvas.getContext('2d');
            
            // Draw original image
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            
            // Get image data and make it white while preserving alpha
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;
            for (let i = 0; i < data.length; i += 4) {
                if (data[i + 3] > 0) { // If not transparent
                    data[i] = 255;     // R
                    data[i + 1] = 255; // G
                    data[i + 2] = 255; // B
                }
            }
            ctx.putImageData(imageData, 0, 0);
            
            // Store as white version
            const whiteImg = new Image();
            whiteImg.onload = () => {
                whiteSymbolImages[key] = whiteImg;
            };
            whiteImg.src = canvas.toDataURL();
        };
        img.onerror = () => {
            console.warn(`Failed to load symbol: ${key}`);
        };
        img.src = `${symbolsBaseUrl}${symbols[key]}`;
    });
}

// Call this function early to start loading symbols
loadSymbolImages();

function normalizePanelText(raw, panelType) {
    const panelTypeUpper = panelType ? panelType.toUpperCase() : '';
    // Z* panels: prepend ZONE header; underlying sign is embedded separately
    if (panelTypeUpper.startsWith('Z')) {
        let text = (raw ?? '').toString()
            .replace(/<br\s*\/??\s*>/gi, '\n')
            .replace(/[|]/g, '\n')
            .trim();
        // Remove any provided ZONE lines to avoid duplicates
        const remainder = panelTypeUpper.slice(1).replace(/['']/g, '');
        const filtered = text
            .split(/\r?\n/)
            .map(s => s.trim())
            .filter(Boolean)
            .filter(s => s.toUpperCase() !== 'ZONE' && s.toUpperCase() !== remainder.toUpperCase());
        const body = filtered.join('\n');
        return body ? `ZONE\n${body}` : 'ZONE';
    }

    // TYPEVE always shows fixed text
    if (panelTypeUpper === 'TYPEVE') {
        return 'PAYANT\nBETALEND';
    }
    // TYPE VIIDE: blue rectangle with fixed text
    if (panelTypeUpper === 'TYPE VIIDE' || panelTypeUpper === 'TYPEVIIDE') {
        return 'C. D.';
    }
    
    // TYPEXIVF: Fixed text for electric vehicle charging
    if (panelTypeUpper === 'TYPEXIVF') {
        return 'Forfait 50€ / 4h30\nExcepté\nUitgezonderd\nVéhicule en charge\nOpladend voertuig';
    }

    // ICR: green bike route panel => bike symbol + ICR
    if (panelTypeUpper === 'ICR') {
        return '\u0001BIKE\u0002\nICR';
    }
    
    // FXX arrows-only when no text
    if ((raw === null || raw === undefined || raw.toString().trim() === '') && panelTypeUpper === 'FXX') {
        return '⟵\n⟶';
    }

    if (raw === null || raw === undefined) {
        return '';
    }

    // FXX special case: "AXE ROUGE" panels -> fixed red text
    const rawStr = raw.toString();
    if (panelTypeUpper === 'FXX' && /^\s*AXE\s+ROUGE/i.test(rawStr)) {
        return 'AXE ROUGE\nRODE AS';
    }
    
    // XC panels: text value + m + up arrow
    if (panelTypeUpper === 'XC') {
        const text = raw.toString().trim();
        return `${text}\nm\n↑`;
    }
    
    let normalized = raw
        .toString()
        .replace(/<br\s*\/?\s*>/gi, '\n')
        .replace(/\bS153\b/gi, '\u0001PEDESTRIAN\u0002')  // S153 -> pedestrian (word boundary)
        .replace(/\bS136\b/gi, '\u0001CAR\u0002')          // S136 -> car (word boundary)
        .replace(/\bS307\b/g, ' ')         // S307 -> space
        .replace(/\bS309\b/g, ' ')         // S309 -> space
        .replace(/[|;]+/g, ' ')            // | and ; -> space (keep symbols on same line)
        .replace(/\bS162b\b/g, '→')        // S162b -> right arrow
        .replace(/\bS301\b/g, 'P')         // S301 -> P symbol
        .replace(/s305 60A‚A/g, 'P')
        .split(/\r?\n/)
        .map(part => part.replace(/\s+/g, ' ').trim())
        .filter(Boolean)
        .join('\n');
    
    // For FXX panels, prepend left and right arrows (longer arrows)
    if (panelTypeUpper === 'FXX') {
        const arrows = '⟵\n⟶'; // Longer arrows
        normalized = normalized ? `${arrows}\n${normalized}` : arrows;
    }
    
    return normalized;
}

function drawRoundedPanel(ctx, x, y, width, height, radius) {
    const r = Math.min(radius, width / 2, height / 2);
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + width - r, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + r);
    ctx.lineTo(x + width, y + height - r);
    ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
    ctx.lineTo(x + r, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - r);
    ctx.lineTo(x, y + r);
    ctx.quadraticCurveTo(x, y, x + r, y);
    ctx.closePath();
}

// Draw a directional panel (rectangle with a triangular arrow tip on the right)
function drawDirectionalPanel(ctx, x, y, width, height, radius, tipWidth = 18, direction = 'right') {
    const r = Math.min(radius, width / 2, height / 2);
    const tip = Math.min(tipWidth, Math.max(12, Math.floor(width * 0.18)));
    // Base rectangle width before the tip
    const rectWidth = width - tip;

    ctx.beginPath();
    if (direction === 'right') {
        // Top edge with rounded corner
        ctx.moveTo(x + r, y);
        ctx.lineTo(x + rectWidth, y);
        // Right arrow point matching the white/brown arrow angle (0.1 to 0.9 of height)
        ctx.lineTo(x + rectWidth, y + (height * 0));
        ctx.lineTo(x + width, y + height / 2);
        ctx.lineTo(x + rectWidth, y + (height * 1));
        // Bottom edge
        ctx.lineTo(x + rectWidth, y + height);
        ctx.lineTo(x + r, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - r);
        ctx.lineTo(x, y + r);
        ctx.quadraticCurveTo(x, y, x + r, y);
    } else {
        // Left-pointing arrow version
        ctx.moveTo(x + tip, y);
        ctx.lineTo(x + width - r, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + r);
        ctx.lineTo(x + width, y + height - r);
        ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
        ctx.lineTo(x + tip, y + height);
        // Left arrow point matching the white/brown arrow angle (0.1 to 0.9 of height)
        ctx.lineTo(x + tip, y + (height * 0));
        ctx.lineTo(x, y + height / 2);
        ctx.lineTo(x + tip, y + (height * 1));
        ctx.lineTo(x + tip, y);
    }
    ctx.closePath();
}

function buildPanelTextCanvasPayload(lines, options = {}) {
    if (!Array.isArray(lines) || lines.length === 0) {
        return null;
    }

    // Default options for white panels (F34A style)
    const bgColor = options.bgColor || '#ffffff';
    const textColor = options.textColor || '#111111';
    const borderColor = options.borderColor || '#111111';
    const borderWidth = options.borderWidth !== undefined ? options.borderWidth : 3;
    const isArrowPanel = options.isArrowPanel || false;
    const scaleFactor = 1.0; // Override to avoid double-scaling by MapLibre icon-size
    const widthCm = Number(options.widthCm || 40);
    const heightCm = Number(options.heightCm || widthCm);
    const baseWidthPx = 76;

    const paddingX = 10;
    const paddingY = 5;
    
    // Width configuration
    let minWidth = 140;
    let maxWidth = 400;
    if (options.vertical) {
        minWidth = 30;  // Very narrow for XC and TYPEXIVF vertical panels
        maxWidth = 200; // Allow wider for TYPEXIVF with more text
    }
    if (options.narrow) {
        minWidth = Math.min(minWidth, 100); // Narrow min width for TYPE*/FXX
    }

    // When dimensions are available (or defaulted to 40cm), keep a consistent visual width
    // across panel types for the same physical width.
    const widthScale = Math.max(0.2, widthCm / 40);
    const targetWidth = Math.round(baseWidthPx * widthScale);
    minWidth = targetWidth;
    maxWidth = targetWidth;
    
    const longestLength = Math.max(...lines.map(line => line.length));
    const baseFontSize = 14;
    const scaledBaseFontSize = baseFontSize * scaleFactor;

    const measurerCanvas = document.createElement('canvas');
    const measurer = measurerCanvas.getContext('2d');
    if (!measurer) {
        return null;
    }
    
    // Symbol markers: \u0001PEDESTRIAN\u0002, \u0001CAR\u0002, \u0001BIKE\u0002
    const SYMBOL_REGEX = /(\u0001PEDESTRIAN\u0002|\u0001CAR\u0002|\u0001BIKE\u0002)/g;
    const PEDESTRIAN_MARKER = '\u0001PEDESTRIAN\u0002';
    const CAR_MARKER = '\u0001CAR\u0002';
    const BIKE_MARKER = '\u0001BIKE\u0002';
    
    function measureMaxLineWidth(currentFontSize) {
        const fontFamily = `700 ${currentFontSize}px 'Open Sans','Arial','Helvetica',sans-serif`;
        measurer.font = fontFamily;
        let maxWidth = 0;
        lines.forEach(line => {
            if (line.includes(PEDESTRIAN_MARKER) || line.includes(CAR_MARKER) || line.includes(BIKE_MARKER)) {
                const parts = line.split(SYMBOL_REGEX);
                let lineWidth = 0;
                parts.forEach(part => {
                    if (part === PEDESTRIAN_MARKER || part === CAR_MARKER || part === BIKE_MARKER) {
                        lineWidth += currentFontSize * 1.5;
                    } else if (part) {
                        lineWidth += measurer.measureText(part).width;
                    }
                });
                maxWidth = Math.max(maxWidth, lineWidth);
            } else {
                maxWidth = Math.max(maxWidth, measurer.measureText(line).width || 0);
            }
        });
        return Math.max(maxWidth, 1);
    }

    // Add extra padding based on panel type
    let extraPadding = 10; // Default
    if (options.directional) {
        extraPadding = 40; // Directional panels need more space
    } else if (options.vertical) {
        extraPadding = 5; // Vertical panels (XC, TYPEXIVF) minimal padding
    }

    const displayWidth = targetWidth;
    const availableTextWidth = Math.max(8, displayWidth - (paddingX * 2 + extraPadding));
    let fontSize = clamp(
        scaledBaseFontSize - Math.max(0, longestLength - 12) * 1.05 * scaleFactor,
        scaledBaseFontSize * 0.5,
        30 * scaleFactor
    );
    const minFontSize = Math.max(8 * scaleFactor, scaledBaseFontSize * 0.4);
    let measuredWidth = measureMaxLineWidth(fontSize);
    while (measuredWidth > availableTextWidth && fontSize > minFontSize) {
        fontSize -= 0.5 * scaleFactor;
        measuredWidth = measureMaxLineWidth(fontSize);
    }

    const fontFamily = `700 ${fontSize}px 'Open Sans','Arial','Helvetica',sans-serif`;
    measurer.font = fontFamily;

    // Reduce line height for arrow lines in FXX panels
    const baseLineHeight = fontSize + 10;
    
    // Calculate height - all lines use same height calculation
    let totalTextHeight = 0;
    lines.forEach((line, index) => {
        const isArrowLine = isArrowPanel && index < 2;
        const lineHeight = isArrowLine ? (fontSize + 2) : baseLineHeight;
        totalTextHeight += lineHeight;
    });

    const idealHeight = Math.round(displayWidth * (heightCm / widthCm));
    const totalHeight = paddingY * 2 + totalTextHeight;
    const displayHeight = Math.ceil(Math.max(totalHeight, idealHeight));

    const pixelRatio = clamp(window.devicePixelRatio || 1, 1, 2.5);
    const canvas = document.createElement('canvas');
    const bitmapWidth = Math.ceil(displayWidth * pixelRatio);
    const bitmapHeight = Math.ceil(displayHeight * pixelRatio);
    canvas.width = bitmapWidth;
    canvas.height = bitmapHeight;
    const ctx = canvas.getContext('2d');
    if (!ctx) {
        return null;
    }
    ctx.scale(pixelRatio, pixelRatio);
    ctx.font = fontFamily;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';

    ctx.fillStyle = bgColor;
    ctx.strokeStyle = borderColor;
    ctx.lineWidth = borderWidth;
    if (options.directional) {
        drawDirectionalPanel(ctx, 1.5, 1.5, displayWidth - 3, displayHeight - 3, 12, options.tipWidth || 18, options.direction || 'right');
        ctx.fill();
        if (borderWidth > 0) {
            ctx.stroke();
        }
        // Fill the arrow tip interior with white
        ctx.fillStyle = '#ffffff';
        const x = 1.5, y = 1.5, width = displayWidth - 3, height = displayHeight - 3;
        const tip = Math.min((options.tipWidth || 18), Math.max(12, Math.floor(width * 0.18)));
        const rectWidth = width - tip;
        const offsetX = 0; // Shift more to the left to hide rounded edge
        if (options.direction === 'right') {
            ctx.beginPath();
            ctx.moveTo(x + rectWidth + offsetX, y + (height * 0));
            ctx.lineTo(x + width + offsetX, y + height / 2);
            ctx.lineTo(x + rectWidth + offsetX, y + (height * 1));
            ctx.closePath();
            ctx.fill();
            // Draw a narrower brown arrow on top
            ctx.fillStyle = bgColor;
            const narrowTip = tip * 0.55; // Wider brown arrow
            const inset = (height * 0.8) * 0; // Less inset = taller arrow
            ctx.beginPath();
            ctx.moveTo(x + rectWidth + offsetX, y + (height * 0) + inset);
            ctx.lineTo(x + rectWidth + narrowTip + offsetX, y + height / 2);
            ctx.lineTo(x + rectWidth + offsetX, y + (height * 1) - inset);
            ctx.closePath();
            ctx.fill();
        } else {
            const offsetXLeft = 6; // Shift more to the right to hide rounded edge
            ctx.beginPath();
            ctx.moveTo(x + tip + offsetXLeft, y + (height * 0));
            ctx.lineTo(x + offsetXLeft, y + height / 2);
            ctx.lineTo(x + tip + offsetXLeft, y + (height * 1));
            ctx.closePath();
            ctx.fill();
            // Draw a narrower brown arrow on top
            ctx.fillStyle = bgColor;
            const narrowTip = tip * 0.55; // Wider brown arrow
            const inset = (height * 0.8) * 0.12; // Less inset = taller arrow
            ctx.beginPath();
            ctx.moveTo(x + tip + offsetXLeft, y + (height * 0) + inset);
            ctx.lineTo(x + tip - narrowTip + offsetXLeft, y + height / 2);
            ctx.lineTo(x + tip + offsetXLeft, y + (height * 1) - inset);
            ctx.closePath();
            ctx.fill();
        }
    } else {
        drawRoundedPanel(ctx, 1.5, 1.5, displayWidth - 3, displayHeight - 3, 12);
        ctx.fill();
        if (borderWidth > 0) {
            ctx.stroke();
        }
    }

    ctx.fillStyle = textColor;
    // Vertically center the entire text block inside the displayHeight
    let currentY = (displayHeight - totalTextHeight) / 2;
    lines.forEach((line, index) => {
        const isArrowLine = isArrowPanel && index < 2;
        const lineHeight = isArrowLine ? (fontSize + 2) : baseLineHeight;
        currentY += lineHeight / 2;
        
        // Check if line contains symbol placeholders
        if (line.includes(PEDESTRIAN_MARKER) || line.includes(CAR_MARKER) || line.includes(BIKE_MARKER)) {
            // Split line and render text + symbols inline
            const parts = line.split(SYMBOL_REGEX);
            let currentX = 0;
            
            // First measure total width
            let totalWidth = 0;
            parts.forEach(part => {
                if (part === PEDESTRIAN_MARKER || part === CAR_MARKER || part === BIKE_MARKER) {
                    totalWidth += fontSize * 1.5;
                } else if (part) {
                    totalWidth += measurer.measureText(part).width;
                }
            });
            
            currentX = (displayWidth - totalWidth) / 2;
            
            // Render each part
            parts.forEach(part => {
                if (part === PEDESTRIAN_MARKER) {
                    const symbolImg = (textColor === '#ffffff') ? whiteSymbolImages.pedestrian : symbolImages.pedestrian;
                    if (symbolImg) {
                        const symbolSize = fontSize * 1.5;
                        ctx.drawImage(symbolImg, currentX, currentY - symbolSize / 2, symbolSize, symbolSize);
                        currentX += symbolSize;
                    }
                } else if (part === CAR_MARKER) {
                    const symbolImg = (textColor === '#ffffff') ? whiteSymbolImages.car : symbolImages.car;
                    if (symbolImg) {
                        const symbolSize = fontSize * 1.5;
                        ctx.drawImage(symbolImg, currentX, currentY - symbolSize / 2, symbolSize, symbolSize);
                        currentX += symbolSize;
                    }
                } else if (part === BIKE_MARKER) {
                    const symbolImg = (textColor === '#ffffff') ? whiteSymbolImages.bike : symbolImages.bike;
                    if (symbolImg) {
                        const symbolSize = fontSize * 1.5;
                        ctx.drawImage(symbolImg, currentX, currentY - symbolSize / 2, symbolSize, symbolSize);
                        currentX += symbolSize;
                    }
                } else if (part) {
                    ctx.textAlign = 'left';
                    ctx.fillStyle = textColor;
                    ctx.fillText(part, currentX, currentY);
                    currentX += measurer.measureText(part).width;
                }
            });
            ctx.textAlign = 'center';
        } else {
            // Normal text rendering
            ctx.fillStyle = textColor;
            ctx.fillText(line, displayWidth / 2, currentY);
        }
        
        currentY += lineHeight / 2;
    });

    const imageData = ctx.getImageData(0, 0, bitmapWidth, bitmapHeight);

    return {
        width: bitmapWidth,
        height: bitmapHeight,
        data: imageData.data,
        pixelRatio,
    };
}

// Dedicated payload builder for Zone panels with embedded sign icon
function buildPanelTextCanvasPayloadZone(lines, options = {}) {
    if (!Array.isArray(lines) || lines.length === 0) return null;
    const bgColor = options.bgColor || '#ffffff';
    const textColor = options.textColor || '#111111';
    const borderColor = options.borderColor || '#111111';
    const borderWidth = options.borderWidth !== undefined ? options.borderWidth : 3;
    const scaleFactor = 1.0; // Override to avoid double-scaling by MapLibre icon-size
    const widthCm = Number(options.widthCm || 40);
    const heightCm = Number(options.heightCm || widthCm);
    const baseWidthPx = 72;
    const paddingX = 10, paddingY = 5;
    const baseFontSize = 14;
    let fontSize = baseFontSize * scaleFactor;
    let fontFamily = `700 ${fontSize}px 'Open Sans','Arial','Helvetica',sans-serif`;
    const measurerCanvas = document.createElement('canvas');
    const measurer = measurerCanvas.getContext('2d');
    if (!measurer) return null;
    measurer.font = fontFamily;
    // embedded icon
    let iconW = 64 * scaleFactor, iconH = (options.signIconHeight || 64) * scaleFactor;
    const img = options.signIconName ? roadSignImageElements[options.signIconName] : null;
    if (img && img.width && img.height) {
        const ratio = img.width / img.height;
        iconW = Math.round(iconH * ratio);
    }
    const widthScale = Math.max(0.2, widthCm / 40);
    const targetWidth = Math.round(baseWidthPx * widthScale);
    const availableTextWidth = Math.max(8, targetWidth - (paddingX * 2));
    let measuredWidth = 0;
    lines.forEach(line => { measuredWidth = Math.max(measuredWidth, measurer.measureText(line).width); });
    const minFontSize = Math.max(8 * scaleFactor, baseFontSize * 0.45 * scaleFactor);
    while (measuredWidth > availableTextWidth && fontSize > minFontSize) {
        fontSize -= 0.5 * scaleFactor;
        fontFamily = `700 ${fontSize}px 'Open Sans','Arial','Helvetica',sans-serif`;
        measurer.font = fontFamily;
        measuredWidth = 0;
        lines.forEach(line => { measuredWidth = Math.max(measuredWidth, measurer.measureText(line).width); });
    }
    const displayWidth = Math.max(targetWidth, Math.ceil(paddingX * 2 + Math.max(measuredWidth, iconW)));
    const lineHeight = fontSize + 10;
    // total height: all lines + icon between first and the rest
    const totalContentHeight = lines.length * lineHeight + iconH + 6;
    const idealHeight = Math.round(displayWidth * (heightCm / widthCm));
    const totalHeight = Math.ceil(Math.max(paddingY * 2 + totalContentHeight, idealHeight));
    const pixelRatio = Math.min(Math.max(window.devicePixelRatio || 1, 1), 2.5);
    const canvas = document.createElement('canvas');
    const bitmapWidth = Math.ceil(displayWidth * pixelRatio);
    const bitmapHeight = Math.ceil(totalHeight * pixelRatio);
    canvas.width = bitmapWidth; canvas.height = bitmapHeight;
    const ctx = canvas.getContext('2d');
    if (!ctx) return null;
    ctx.scale(pixelRatio, pixelRatio);
    ctx.font = fontFamily; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
    // draw panel background
    ctx.fillStyle = bgColor; ctx.strokeStyle = borderColor; ctx.lineWidth = borderWidth;
    drawRoundedPanel(ctx, 1.5, 1.5, displayWidth - 3, totalHeight - 3, 12);
    ctx.fill(); if (borderWidth > 0) ctx.stroke();
    // Vertically center the entire content block in totalHeight
    let currentY = (totalHeight - totalContentHeight) / 2;
    // draw first line
    ctx.fillStyle = textColor;
    ctx.fillText(lines[0], displayWidth / 2, currentY + lineHeight / 2);
    currentY += lineHeight;
    // draw embedded icon centered
    const drawW = iconW, drawH = iconH;
    const imgX = Math.round((displayWidth - drawW) / 2);
    const imgY = Math.round(currentY);
    if (img) {
        // Optionally render icon in grayscale for apostrophe variants
        const prevFilter = ctx.filter;
        ctx.filter = options.grayIcon ? 'grayscale(100%)' : 'none';
        ctx.drawImage(img, imgX, imgY, drawW, drawH);
        ctx.filter = prevFilter || 'none';
    } else {
        ctx.fillStyle = '#d0d0d0';
        drawRoundedPanel(ctx, imgX, imgY, drawW, drawH, 6);
        ctx.fill();
        ctx.strokeStyle = '#7a7a7a'; ctx.lineWidth = 1.5; ctx.stroke();
        ctx.fillStyle = textColor;
    }
    currentY += drawH + 6;
    // draw remaining lines
    for (let i = 1; i < lines.length; i++) {
        ctx.fillText(lines[i], displayWidth / 2, currentY + lineHeight / 2);
        currentY += lineHeight;
    }

    // Add a large black diagonal strike for apostrophe variants
    if (options.strike) {
        const margin = 8;
        ctx.strokeStyle = '#000000';
        ctx.lineWidth = 10;
        ctx.beginPath();
        ctx.moveTo(margin, totalHeight - margin);
        ctx.lineTo(displayWidth - margin, margin);
        ctx.stroke();
    }
    const imageData = ctx.getImageData(0, 0, bitmapWidth, bitmapHeight);
    return { width: bitmapWidth, height: bitmapHeight, data: imageData.data, pixelRatio };
}

function ensurePanelTextSprite(map, spriteId) {
    if (!map || !spriteId || !panelTextSpriteDefinitions.has(spriteId)) {
        return;
    }

    const definition = panelTextSpriteDefinitions.get(spriteId);
    if (!definition) {
        return;
    }

    // If sprite depends on a Zone icon not yet loaded, wait and retry later
    if (definition.style && definition.style.signIconName) {
        const iconName = definition.style.signIconName;
        if (!roadSignImageElements[iconName]) {
            registerIconWaiter(iconName, spriteId);
            return;
        }
    }

    const currentSignature = renderedPanelTextSprites.get(spriteId);
    if (currentSignature === definition.textKey && map.hasImage(spriteId)) {
        return;
    }

    const payload = (definition.style && definition.style.signIconName)
        ? buildPanelTextCanvasPayloadZone(definition.lines, definition.style)
        : buildPanelTextCanvasPayload(definition.lines, definition.style);
    if (!payload) {
        return;
    }

    const imagePayload = {
        width: payload.width,
        height: payload.height,
        data: payload.data,
    };

    const imageOptions = { pixelRatio: payload.pixelRatio || 1 };

    if (map.hasImage(spriteId)) {
        map.updateImage(spriteId, imagePayload);
    } else {
        map.addImage(spriteId, imagePayload, imageOptions);
    }

    const displayPixelRatio = payload.pixelRatio || 1;
    window.panelTextSpriteMetrics[spriteId] = {
        width: payload.width / displayPixelRatio,
        height: payload.height / displayPixelRatio,
    };
    window.dispatchEvent(new CustomEvent('panelTextSpriteRendered', {
        detail: {
            spriteId,
            width: window.panelTextSpriteMetrics[spriteId].width,
            height: window.panelTextSpriteMetrics[spriteId].height,
        }
    }));

    renderedPanelTextSprites.set(spriteId, definition.textKey);
}

function flushPanelTextSpriteQueue() {
    if (!panelTextSpriteMap || panelTextSpriteQueue.size === 0) {
        return;
    }
    const ids = Array.from(panelTextSpriteQueue.values());
    panelTextSpriteQueue.clear();
    ids.forEach(id => ensurePanelTextSprite(panelTextSpriteMap, id));
}

function registerPanelTextDefinitionFromProperties(props) {
    if (!props || !props.panel_text_can_render || !props.panel_text_image_id) {
        return null;
    }

    const panelType = props.panel_type || '';
    const panelTypeUpper = panelType.toUpperCase();
    const widthCm = Number(props.panel_width_cm || 50);
    const heightCm = Number(props.panel_height_cm || widthCm);
    
    // TYPEVE, TYPEXIVF, TYPE VIIDE and FXX (arrows-only) don't need panel_text property
    if (!props.panel_text && panelTypeUpper !== 'TYPEVE' && panelTypeUpper !== 'TYPEXIVF' 
        && panelTypeUpper !== 'FXX' && panelTypeUpper !== 'TYPE VIIDE' && panelTypeUpper !== 'TYPEVIIDE' && panelTypeUpper !== 'ICR') {
        return null;
    }

    const normalized = normalizePanelText(props.panel_text, panelType);
    if (!normalized) {
        return null;
    }

    const lines = normalized.split('\n');
    const existing = panelTextSpriteDefinitions.get(props.panel_text_image_id);
    if (existing && existing.textKey === normalized) {
        return props.panel_text_image_id;
    }

    // Determine panel style based on panel_type
    let style = {}; // Default: white background (F34A style)
    
    // Get scale factor from properties (default to 1.0 if not provided)
    const scaleFactor = props.panel_scale_factor || 1.0;
    
    // TYPEVE: Blue panel with fixed text PAYANT/BETALEND
    if (panelTypeUpper === 'TYPEVE') {
        style = {
            bgColor: '#0000FF',      // Blue background
            textColor: '#ffffff',     // White text
            borderColor: '#ffffff',   // White border
            borderWidth: 2,
            scaleFactor: scaleFactor,
            widthCm: widthCm,
            heightCm: heightCm
        };
    }
    // TYPE VIIDE: Blue rectangle with fixed text C. D.
    else if (panelTypeUpper === 'TYPE VIIDE' || panelTypeUpper === 'TYPEVIIDE') {
        style = {
            bgColor: '#0000FF',
            textColor: '#ffffff',
            borderColor: '#ffffff',
            borderWidth: 2,
            narrow: true,
            scaleFactor: scaleFactor,
            widthCm: widthCm,
            heightCm: heightCm
        };
    }
    // XC: White vertical panel with text + m + up arrow
    else if (panelTypeUpper === 'XC') {
        style = {
            bgColor: '#ffffff',      // White background
            textColor: '#111111',     // Black text
            borderColor: '#111111',   // Black border
            borderWidth: 3,
            vertical: true,           // Vertical orientation
            scaleFactor: scaleFactor,
            widthCm: widthCm,
            heightCm: heightCm
        };
    }
    // TYPEXIVF: White vertical panel with charging info
    else if (panelTypeUpper === 'TYPEXIVF') {
        style = {
            bgColor: '#ffffff',      // White background
            textColor: '#111111',     // Black text
            borderColor: '#111111',   // Black border
            borderWidth: 3,
            vertical: true,           // Vertical orientation (not minimal)
            scaleFactor: scaleFactor,
            widthCm: widthCm,
            heightCm: heightCm
        };
    }
    // Blue rectangular panels (TYPE* series and FXX)
    else if (panelTypeUpper.startsWith('Z')) {
        // Zone panels: white rectangle, black text, and embedded sign icon (e.g., ZE9a -> E9a)
        const rawType = (props.panel_type || '').toString();
        const remainderOriginal = rawType.slice(1);
        const cleanedRemainder = remainderOriginal.replace(/['']/g, '');
        const iconName = `road-sign-${cleanedRemainder.toLowerCase()}`;
        preloadZoneIcon(remainderOriginal);
        registerIconWaiter(iconName, props.panel_text_image_id);
        const hasApostrophe = /['']\s*$/.test(rawType);
        style = {
            bgColor: '#ffffff',
            textColor: '#111111',
            borderColor: '#111111',
            borderWidth: 3,
            signIconName: iconName,
            signIconHeight: 64,
            grayIcon: hasApostrophe,
            strike: hasApostrophe,
            scaleFactor: scaleFactor,
            widthCm: widthCm,
            heightCm: heightCm
        };
    }
    else if (panelTypeUpper.startsWith('TYPE') || panelTypeUpper === 'FXX') {
        const isAxeRouge = normalized.startsWith('AXE ROUGE\nRODE AS');
        if (panelTypeUpper === 'FXX' && isAxeRouge) {
            // Red variant for AXE ROUGE panels
            style = {
                bgColor: '#c00000',   // Red background
                textColor: '#ffffff', // White text
                borderColor: '#ffffff',
                borderWidth: 2,
                isArrowPanel: false,
                narrow: true,
                scaleFactor: scaleFactor,
                widthCm: widthCm,
                heightCm: heightCm
            };
        } else {
            style = {
                bgColor: '#0000FF',      // Blue background (same as F23a SVG)
                textColor: '#ffffff',     // White text
                borderColor: '#ffffff',   // White border
                borderWidth: 2,
                isArrowPanel: panelTypeUpper === 'FXX', // Flag for FXX panels with arrows
                narrow: true,             // Allow narrower width adapting to text
                scaleFactor: scaleFactor,
                widthCm: widthCm,
                heightCm: heightCm
            };
        }
    } else if (panelTypeUpper === 'ICR') {
        style = {
            bgColor: '#1f8b3b',      // Green background
            textColor: '#ffffff',    // White text
            borderColor: '#ffffff',  // White border
            borderWidth: 2,
            narrow: true,
            scaleFactor: scaleFactor,
            widthCm: widthCm,
            heightCm: heightCm
        };
    } else if (panelTypeUpper === 'F33C' || panelTypeUpper === 'F35') {
        // Brown directional panel with arrow tip
        // Determine arrow direction from orientation (degrees), default to 'right'
        let computedDirection = 'right';
        const orientationDeg = Number(props.orientation);
        if (!Number.isNaN(orientationDeg)) {
            const a = ((orientationDeg % 360) + 360) % 360; // normalize 0..359
            // Tolerance band: choose left for angles within [80°, 280°], else right
            const LEFT_START = 80;
            const LEFT_END = 280;
            computedDirection = (a >= LEFT_START && a <= LEFT_END) ? 'left' : 'right';
        }

        style = {
            bgColor: '#8B5A2B',      // Brown background (tourism signs style)
            textColor: '#ffffff',     // White text
            borderColor: '#ffffff',   // White border
            borderWidth: 2,
            directional: true,        // Use directional arrow shape
            tipWidth: 20,             // Width of arrow tip
            direction: computedDirection,
            scaleFactor: scaleFactor,
            widthCm: widthCm,
            heightCm: heightCm
        };
    } else {
        // Default white panel style
        style = {
            scaleFactor: scaleFactor,
            widthCm: widthCm,
            heightCm: heightCm
        };
    }

    panelTextSpriteDefinitions.set(props.panel_text_image_id, {
        lines,
        textKey: normalized,
        style,
    });
    panelTextSpriteQueue.add(props.panel_text_image_id);
    return props.panel_text_image_id;
}

function enqueuePanelTextSprites(features) {
    if (!Array.isArray(features)) {
        return;
    }

    features.forEach(feature => {
        registerPanelTextDefinitionFromProperties(feature?.properties);
    });

    flushPanelTextSpriteQueue();
}

function ensurePanelTextDefinitionFromMap(map, spriteId) {
    if (!map || !spriteId) {
        return false;
    }

    if (panelTextSpriteDefinitions.has(spriteId)) {
        return true;
    }

    let features = [];
    try {
        if (typeof map.querySourceFeatures === 'function') {
            features = map.querySourceFeatures('sign-assets', {
                filter: ['==', ['get', 'panel_text_image_id'], spriteId]
            }) || [];
        }
    } catch (err) {
        console.warn('Impossible de récupérer la définition du panneau via querySourceFeatures', err);
        return false;
    }

    if (!features.length) {
        return false;
    }

    registerPanelTextDefinitionFromProperties(features[0]?.properties);
    return panelTextSpriteDefinitions.has(spriteId);
}
</script>