/* 
 js/core/biscuits-var-dump.js 
 This must render an array of arrays into a nested list where the structure is clearly visible
 */

const varDumpOb = {
    codeName: 'Leon Wooldridge',
    arrayToTable(value, level = 0) {
        if (!Array.isArray(value) || value.length === 0) {
            return `<em style="color:#777;">[] empty</em>`;
        }

        const indentEm = level * 1.6;
        const style = "margin:0.4em 0; padding-left:${indentEm}em;";

        let html = `
        <div style="background-color: #eeeeee;color:green;margin:6px;padding:3px;">
        <table style="border-collapse:collapse; margin:0.5em 0; ${style}">
            <thead>
                <tr>
                    <th style="border-bottom:1px solid #ccc; padding:4px 8px; text-align:left; color:#555;">Index</th>
                    <th style="border-bottom:1px solid #ccc; padding:4px 8px; text-align:left; color:#555;">Value</th>
                </tr>
            </thead>
            <tbody>
    `;

        for (let i = 0; i < value.length; i++) {
            const v = value[i];
            const rendered = this.objectToNestedList(v, level + 1);

            html += `
            <tr>
                <td style="padding:4px 8px; vertical-align:top; color:#777;">${i}</td>
                <td style="padding:4px 8px;">${rendered}</td>
            </tr>
        `;
        }

        html += `
            </tbody>
        </table>
        </div>
    `;

        return html;
    },

    objectToNestedList(value, level = 0) {
        const indentEm = level * 1.6;
        const style = `margin:0.4em 0; padding-left:${indentEm}em;`;

        // ────────────────────────────────────────
        // Null / undefined
        if (value == null) {
            return `<span style="color:#999;font-style:italic;">${value === null ? 'null' : 'undefined'}</span>`;
        }

        // ────────────────────────────────────────
        // Primitive values
        if (typeof value !== 'object') {
            let str = String(value).trim();

            // Very long string → treat as PGN / multiline text
            if (str.length > 60 || str.includes('\n') || /\d+\./.test(str)) {
                str = this.escapeHtml(str)
                        .replace(/\n/g, '<br>')
                        .replace(/\{([^}]*)\}/g, '<span style="color:#c41e3b;background:#fff4f4;padding:1px 4px;border-radius:3px;">{$1}</span>')   // comments
                        .replace(/\(/g, '<span style="color:#0066cc;">(</span>')
                        .replace(/\)/g, '<span style="color:#0066cc;">)</span>')
                        .replace(/(\d+\.)/g, '<strong style="color:#1a5c38;">$1</strong> ')
                        .replace(/(0-1|1-0|1\/2-1\/2)/, '<strong style="color:#b8860b;font-size:1.1em;">$1</strong>');
                return `<div style="font-family:Consolas,monospace; font-size:0.96em; line-height:1.38; ${style}">${str}</div>`;
            }

            // Normal short string / number / bool
            return this.escapeHtml(str);
        }

        // ────────────────────────────────────────
        // Array
// ────────────────────────────────────────
// Array
        if (Array.isArray(value)) {
            if (value.length === 0) {
                return `<em style="color:#777;">[] empty</em>`;
            }

            // ─── Special case: flat array of moves (strings or null) ─────────────────
            if (value.every(item => item === null || typeof item === 'string')) {
                const formattedLines = value.map((item, idx) => {
                    const indexStr = String(idx).padStart(2, '0');
                    const moveStr = (item === null || item === undefined) ? 'null' : item.trim();
                    return `${indexStr} ${moveStr}`;
                }).join('\n');

                return `
            <pre style="${style} 
                 font-family: Consolas, monospace; 
                 white-space: pre-wrap; 
                 background: #0000000a; 
                 padding: 10px 14px; 
                 border-radius: 5px; 
                 line-height: 1.45; 
                 border: 1px solid #ddd;"
            >${this.escapeHtml(formattedLines)}</pre>
        `;
            }

            // ─── Normal nested arrays (fallback) ─────────────────────────────────────
            let html = `<ul style="${style} list-style:none; padding-left:1.2em;" class="dump-array">`;
            value.forEach((item, i) => {
                const indexBadge = `<small style="color:#777;background:#f0f0f0;padding:1px 5px;border-radius:3px;">${i}</small>`;
                html += `<li style="margin:0.3em 0;">${indexBadge} ${this.objectToNestedList(item, level + 1)}</li>`;
            });
            html += `</ul>`;
            return html;
        }

        // ────────────────────────────────────────
        // Object
        let html = `<div style="${style}" class="dump-object">`;
        let empty = true;

        for (const [k, v] of Object.entries(value)) {
            empty = false;
            const keyHtml = this.escapeHtml(k).replace(/([A-Z])/g, ' $1').trim(); // Header → Header
            html += `
            <div style="margin:0.5em 0;">
                <strong style="color:#2c5282;">${keyHtml}:</strong>
                <div style="margin-left:1.8em;">${this.objectToNestedList(v, level + 1)}</div>
            </div>`;
        }

        if (empty) {
            html += `<em style="color:#777;">{} empty object</em>`;
        }

        html += `</div>`;
        return html;
    },

    escapeHtml(unsafe) {
        return String(unsafe)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
    }
};