/*
 * chandra_devtools.h — DevTools JS constant and helpers
 * Included from Chandra.xs
 */

#ifndef CHANDRA_DEVTOOLS_H
#define CHANDRA_DEVTOOLS_H

static const char Chandra__DevTools__js_code_str[] =
    "(function() {\n"
    "    if (window.__chandraDevTools) return;\n"
    "\n"
    "    var dt = window.__chandraDevTools = {\n"
    "        visible: false,\n"
    "        errors: [],\n"
    "        panel: null,\n"
    "        currentTab: 'console',\n"
    "\n"
    "        init: function() {\n"
    "            this.panel = document.createElement('div');\n"
    "            this.panel.id = '__chandra-devtools';\n"
    "            this.panel.style.cssText = 'position:fixed;bottom:0;left:0;right:0;height:250px;' +\n"
    "                'background:#1e1e2e;color:#cdd6f4;font-family:monospace;font-size:12px;' +\n"
    "                'border-top:2px solid #89b4fa;z-index:999999;display:none;overflow:hidden;';\n"
    "\n"
    "            var header = document.createElement('div');\n"
    "            header.style.cssText = 'display:flex;align-items:center;padding:4px 8px;' +\n"
    "                'background:#313244;border-bottom:1px solid #45475a;';\n"
    "\n"
    "            var title = document.createElement('span');\n"
    "            title.style.cssText = 'flex:1;font-weight:bold;color:#89b4fa;';\n"
    "            title.textContent = 'Chandra DevTools';\n"
    "            header.appendChild(title);\n"
    "\n"
    "            var tabs = ['Console', 'Bindings', 'Elements'];\n"
    "            var self = this;\n"
    "            tabs.forEach(function(tab) {\n"
    "                var btn = document.createElement('button');\n"
    "                btn.textContent = tab;\n"
    "                btn.className = '__cdt-tab';\n"
    "                btn.setAttribute('data-tab', tab.toLowerCase());\n"
    "                btn.style.cssText = 'background:none;border:1px solid #45475a;color:#cdd6f4;' +\n"
    "                    'padding:2px 8px;margin:0 2px;cursor:pointer;border-radius:3px;font-size:11px;';\n"
    "                btn.onclick = function() { self.showTab(tab.toLowerCase()); };\n"
    "                header.appendChild(btn);\n"
    "            });\n"
    "\n"
    "            var reloadBtn = document.createElement('button');\n"
    "            reloadBtn.textContent = '\\u27F3 Reload';\n"
    "            reloadBtn.style.cssText = 'background:none;border:1px solid #45475a;color:#a6e3a1;' +\n"
    "                'padding:2px 8px;margin:0 2px;cursor:pointer;border-radius:3px;font-size:11px;';\n"
    "            reloadBtn.onclick = function() {\n"
    "                if (window.chandra) window.chandra.invoke('__devtools_reload', []);\n"
    "            };\n"
    "            header.appendChild(reloadBtn);\n"
    "\n"
    "            var clearBtn = document.createElement('button');\n"
    "            clearBtn.textContent = '\\u2718 Clear';\n"
    "            clearBtn.style.cssText = 'background:none;border:1px solid #45475a;color:#f9e2af;' +\n"
    "                'padding:2px 8px;margin:0 2px;cursor:pointer;border-radius:3px;font-size:11px;';\n"
    "            clearBtn.onclick = function() { self.clearConsole(); };\n"
    "            header.appendChild(clearBtn);\n"
    "\n"
    "            var closeBtn = document.createElement('button');\n"
    "            closeBtn.textContent = '\\u2715';\n"
    "            closeBtn.style.cssText = 'background:none;border:none;color:#f38ba8;padding:2px 6px;' +\n"
    "                'cursor:pointer;font-size:14px;margin-left:4px;';\n"
    "            closeBtn.onclick = function() { self.toggle(); };\n"
    "            header.appendChild(closeBtn);\n"
    "\n"
    "            this.panel.appendChild(header);\n"
    "\n"
    "            this.content = document.createElement('div');\n"
    "            this.content.style.cssText = 'height:calc(100% - 30px);overflow-y:auto;padding:8px;';\n"
    "            this.panel.appendChild(this.content);\n"
    "\n"
    "            document.body.appendChild(this.panel);\n"
    "\n"
    "            document.addEventListener('keydown', function(e) {\n"
    "                if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) {\n"
    "                    e.preventDefault();\n"
    "                    self.toggle();\n"
    "                }\n"
    "            });\n"
    "\n"
    "            var origError = console.error;\n"
    "            console.error = function() {\n"
    "                origError.apply(console, arguments);\n"
    "                var msg = Array.prototype.slice.call(arguments).join(' ');\n"
    "                self.addError(msg);\n"
    "            };\n"
    "\n"
    "            window.addEventListener('error', function(e) {\n"
    "                self.addError(e.message + ' at ' + e.filename + ':' + e.lineno);\n"
    "            });\n"
    "\n"
    "            this.showTab('console');\n"
    "        },\n"
    "\n"
    "        toggle: function() {\n"
    "            this.visible = !this.visible;\n"
    "            this.panel.style.display = this.visible ? 'block' : 'none';\n"
    "        },\n"
    "\n"
    "        show: function() {\n"
    "            this.visible = true;\n"
    "            this.panel.style.display = 'block';\n"
    "        },\n"
    "\n"
    "        hide: function() {\n"
    "            this.visible = false;\n"
    "            this.panel.style.display = 'none';\n"
    "        },\n"
    "\n"
    "        addError: function(msg) {\n"
    "            this.errors.push({ time: new Date().toLocaleTimeString(), message: msg, level: 'error' });\n"
    "            if (this.currentTab === 'console') this.showTab('console');\n"
    "        },\n"
    "\n"
    "        addLog: function(level, msg) {\n"
    "            this.errors.push({ time: new Date().toLocaleTimeString(), message: msg, level: level });\n"
    "            if (this.currentTab === 'console') this.showTab('console');\n"
    "        },\n"
    "\n"
    "        showTab: function(tab) {\n"
    "            this.currentTab = tab;\n"
    "            var html = '';\n"
    "            var btns = this.panel.querySelectorAll('.__cdt-tab');\n"
    "            for (var i = 0; i < btns.length; i++) {\n"
    "                var active = btns[i].getAttribute('data-tab') === tab;\n"
    "                btns[i].style.background = active ? '#45475a' : 'none';\n"
    "            }\n"
    "\n"
    "            if (tab === 'console') {\n"
    "                if (this.errors.length === 0) {\n"
    "                    html = '<div style=\"color:#6c7086;padding:20px;text-align:center;\">No messages</div>';\n"
    "                } else {\n"
    "                    this.errors.forEach(function(err) {\n"
    "                        var color = err.level === 'warn' ? '#f9e2af' : err.level === 'info' ? '#89b4fa' : '#f38ba8';\n"
    "                        html += '<div style=\"padding:4px 0;border-bottom:1px solid #313244;\">';\n"
    "                        html += '<span style=\"color:#6c7086;\">' + err.time + '</span> ';\n"
    "                        html += '<span style=\"color:' + color + ';\">' + err.message.replace(/\\\\n/g, '<br>&nbsp;&nbsp;') + '</span>';\n"
    "                        html += '</div>';\n"
    "                    });\n"
    "                }\n"
    "            } else if (tab === 'bindings') {\n"
    "                html = '<div style=\"color:#6c7086;padding:8px;\">Loading...</div>';\n"
    "                var self = this;\n"
    "                if (window.chandra) {\n"
    "                    window.chandra.invoke('__devtools_list_bindings', []).then(function(bindings) {\n"
    "                        if (self.currentTab !== 'bindings') return;\n"
    "                        var h = '<table style=\"width:100%;border-collapse:collapse;\">';\n"
    "                        h += '<tr style=\"border-bottom:1px solid #45475a;\">';\n"
    "                        h += '<th style=\"text-align:left;padding:4px;color:#89b4fa;\">Name</th>';\n"
    "                        h += '<th style=\"text-align:left;padding:4px;color:#89b4fa;\">Status</th></tr>';\n"
    "                        if (bindings && bindings.length) {\n"
    "                            bindings.forEach(function(name) {\n"
    "                                h += '<tr style=\"border-bottom:1px solid #313244;\">';\n"
    "                                h += '<td style=\"padding:4px;\">' + name + '</td>';\n"
    "                                h += '<td style=\"padding:4px;color:#a6e3a1;\">bound</td></tr>';\n"
    "                            });\n"
    "                        } else {\n"
    "                            h += '<tr><td colspan=\"2\" style=\"padding:8px;color:#6c7086;\">No bindings registered</td></tr>';\n"
    "                        }\n"
    "                        h += '</table>';\n"
    "                        if (self.content) self.content.innerHTML = h;\n"
    "                    });\n"
    "                    return;\n"
    "                }\n"
    "            } else if (tab === 'elements') {\n"
    "                html = '<div style=\"padding:4px;\">';\n"
    "                html += '<div style=\"color:#89b4fa;margin-bottom:8px;font-weight:bold;\">DOM Tree</div>';\n"
    "                html += this._renderDomTree(document.body, 0);\n"
    "                html += '</div>';\n"
    "            }\n"
    "\n"
    "            this.content.innerHTML = html;\n"
    "        },\n"
    "\n"
    "        _renderDomTree: function(node, depth) {\n"
    "            if (!node || (node.id && node.id === '__chandra-devtools')) return '';\n"
    "            var indent = '';\n"
    "            for (var i = 0; i < depth; i++) indent += '&nbsp;&nbsp;';\n"
    "\n"
    "            var html = '';\n"
    "            if (node.nodeType === 1) {\n"
    "                var tag = node.tagName.toLowerCase();\n"
    "                var attrs = '';\n"
    "                if (node.id) attrs += ' <span style=\"color:#f9e2af;\">id</span>=&quot;' + node.id + '&quot;';\n"
    "                if (node.className && typeof node.className === 'string')\n"
    "                    attrs += ' <span style=\"color:#f9e2af;\">class</span>=&quot;' + node.className + '&quot;';\n"
    "                html += '<div style=\"padding:1px 0;\">' + indent;\n"
    "                html += '<span style=\"color:#89b4fa;\">&lt;' + tag + '</span>';\n"
    "                html += attrs;\n"
    "                html += '<span style=\"color:#89b4fa;\">&gt;</span>';\n"
    "                html += '</div>';\n"
    "\n"
    "                var children = node.childNodes;\n"
    "                for (var i = 0; i < children.length; i++) {\n"
    "                    html += this._renderDomTree(children[i], depth + 1);\n"
    "                }\n"
    "            } else if (node.nodeType === 3 && node.textContent.trim()) {\n"
    "                var text = node.textContent.trim();\n"
    "                if (text.length > 60) text = text.substring(0, 60) + '...';\n"
    "                html += '<div style=\"padding:1px 0;color:#a6e3a1;\">' + indent + '&quot;' + text + '&quot;</div>';\n"
    "            }\n"
    "            return html;\n"
    "        },\n"
    "\n"
    "        clearConsole: function() {\n"
    "            this.errors = [];\n"
    "            if (this.currentTab === 'console') this.showTab('console');\n"
    "        }\n"
    "    };\n"
    "\n"
    "    if (document.body) {\n"
    "        dt.init();\n"
    "    } else {\n"
    "        document.addEventListener('DOMContentLoaded', function() { dt.init(); });\n"
    "    }\n"
    "})();\n"
    ;

#endif /* CHANDRA_DEVTOOLS_H */
