/**
 * Debug Control - Displays debug information and system messages
 * Implements the Robustness Principle with Fail Fast mode support
 */

class DebugControl {
    constructor() {
        this.control = Object.create(Control);
        this.control.config = {
            icon: '🪲',
            title: 'Debug',
            className: 'debug-control',
            defaultContent: 'Click to view debug information',
            ariaLabel: 'Debug Control',
            position: 'w'
        };

        // Bind methods to control
        this.control.buildContent = () => {
            const content = this.control.element.querySelector('.control-content');
            const messages = window.MarkitectDebugSystem ?
                window.MarkitectDebugSystem.getMessages() : [];

            content.innerHTML = `
                <div style="padding: 1rem; font-size: 0.8rem;">
                    <h4 style="margin-top: 0;">Debug Messages</h4>
                    <div style="max-height: 200px; overflow-y: auto;">
                        ${messages.length > 0 ?
                            messages.slice(-10).map(msg =>
                                `<div style="margin-bottom: 0.5rem; padding: 0.3rem; background: #f8f9fa; border-radius: 3px;">
                                    <strong>[${msg.category}]</strong> ${msg.component}: ${msg.message}
                                    <div style="font-size: 0.7rem; color: #666;">${msg.displayTime}</div>
                                </div>`
                            ).join('') :
                            '<p>No debug messages yet</p>'
                        }
                    </div>
                    <button onclick="if(window.MarkitectDebugSystem) window.MarkitectDebugSystem.clearMessages(); this.closest('.control-panel').querySelector('.control-content').innerHTML = '<div style=&quot;padding: 1rem; font-size: 0.8rem;&quot;><h4 style=&quot;margin-top: 0;&quot;>Debug Messages</h4><p>Messages cleared</p></div>'"
                            style="margin-top: 0.5rem; padding: 0.3rem 0.6rem; font-size: 0.7rem; background: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
                        Clear Messages
                    </button>
                </div>
            `;
            this.control.isExpanded = true;
        };

        this.control.toggle = () => {
            if (this.control.isExpanded) {
                this.control.element.querySelector('.control-content').style.display = 'none';
                this.control.isExpanded = false;
            } else {
                this.control.buildContent();
                this.control.element.querySelector('.control-content').style.display = 'block';
            }
        };
    }

    createControl() {
        return this.control.createControl();
    }
}

window.DebugControl = DebugControl;