/**
 * LiveComponent DevTools Overlay
 *
 * Entwickler-Werkzeuge für LiveComponents mit:
 * - Component Tree Visualisierung
 * - Action Log Viewer
 * - Event Stream Monitor
 * - Performance Profiling
 * - State Inspector
 * - Network Request Timeline
 *
 * @module LiveComponentDevTools
 */

import { Core } from '../core.js';

export class LiveComponentDevTools {
    constructor() {
        this.isOpen = false;
        this.activeTab = 'components';
        this.components = new Map();
        this.actionLog = [];
        this.eventLog = [];
        this.networkLog = [];
        this.performanceData = [];
        this.domBadges = new Map(); // Track DOM badges for cleanup
        this.badgesEnabled = true; // Badge visibility toggle

        // Performance profiling state
        this.isRecording = false;
        this.performanceRecording = [];
        this.componentRenderTimes = new Map();
        this.actionExecutionTimes = new Map();
        this.memorySnapshots = [];

        this.overlay = null;
        this.isEnabled = this.checkIfEnabled();

        if (this.isEnabled) {
            this.init();
        }
    }

    /**
     * Check if DevTools should be enabled
     */
    checkIfEnabled() {
        // Only in development mode
        const isDev = document.documentElement.dataset.env === 'development';

        // Or explicit activation via localStorage
        const isExplicitlyEnabled = localStorage.getItem('livecomponent_devtools') === 'true';

        return isDev || isExplicitlyEnabled;
    }

    /**
     * Initialize DevTools
     */
    init() {
        this.createOverlay();
        this.attachEventListeners();
        this.registerGlobalShortcuts();
        this.startMonitoring();

        console.log('[LiveComponent DevTools] Initialized');
    }

    /**
     * Create DevTools overlay DOM structure
     */
    createOverlay() {
        this.overlay = document.createElement('div');
        this.overlay.id = 'livecomponent-devtools';
        this.overlay.className = 'lc-devtools';
        this.overlay.style.display = 'none';

        this.overlay.innerHTML = `
            <div class="lc-devtools__panel">
                <div class="lc-devtools__header">
                    <div class="lc-devtools__title">
                        <span class="lc-devtools__icon">🛠️</span>
                        LiveComponent DevTools
                    </div>
                    <div class="lc-devtools__actions">
                        <button class="lc-devtools__btn lc-devtools__btn--small" data-action="toggle-badges" title="Toggle DOM badges">
                            ⚡ Badges
                        </button>
                        <button class="lc-devtools__btn" data-action="minimize">_</button>
                        <button class="lc-devtools__btn" data-action="close">×</button>
                    </div>
                </div>

                <div class="lc-devtools__tabs">
                    <button class="lc-devtools__tab lc-devtools__tab--active" data-tab="components">
                        Components
                    </button>
                    <button class="lc-devtools__tab" data-tab="actions">
                        Actions
                    </button>
                    <button class="lc-devtools__tab" data-tab="events">
                        Events
                    </button>
                    <button class="lc-devtools__tab" data-tab="performance">
                        Performance
                    </button>
                    <button class="lc-devtools__tab" data-tab="network">
                        Network
                    </button>
                </div>

                <div class="lc-devtools__content">
                    <div class="lc-devtools__pane lc-devtools__pane--active" data-pane="components">
                        <div class="lc-devtools__toolbar">
                            <input
                                type="search"
                                class="lc-devtools__search"
                                placeholder="Filter components..."
                                data-filter="components"
                            />
                            <button class="lc-devtools__btn lc-devtools__btn--small" data-action="refresh-components">
                                ↻ Refresh
                            </button>
                        </div>
                        <div class="lc-devtools__tree" data-content="components"></div>
                    </div>

                    <div class="lc-devtools__pane" data-pane="actions">
                        <div class="lc-devtools__toolbar">
                            <input
                                type="search"
                                class="lc-devtools__search"
                                placeholder="Filter actions..."
                                data-filter="actions"
                            />
                            <button class="lc-devtools__btn lc-devtools__btn--small" data-action="clear-actions">
                                Clear
                            </button>
                        </div>
                        <div class="lc-devtools__log" data-content="actions"></div>
                    </div>

                    <div class="lc-devtools__pane" data-pane="events">
                        <div class="lc-devtools__toolbar">
                            <input
                                type="search"
                                class="lc-devtools__search"
                                placeholder="Filter events..."
                                data-filter="events"
                            />
                            <button class="lc-devtools__btn lc-devtools__btn--small" data-action="clear-events">
                                Clear
                            </button>
                        </div>
                        <div class="lc-devtools__log" data-content="events"></div>
                    </div>

                    <div class="lc-devtools__pane" data-pane="performance">
                        <div class="lc-devtools__toolbar">
                            <button class="lc-devtools__btn lc-devtools__btn--small" data-action="record-performance">
                                ● Record
                            </button>
                            <button class="lc-devtools__btn lc-devtools__btn--small" data-action="clear-performance">
                                Clear
                            </button>
                        </div>
                        <div class="lc-devtools__metrics" data-content="performance"></div>
                    </div>

                    <div class="lc-devtools__pane" data-pane="network">
                        <div class="lc-devtools__toolbar">
                            <input
                                type="search"
                                class="lc-devtools__search"
                                placeholder="Filter requests..."
                                data-filter="network"
                            />
                            <button class="lc-devtools__btn lc-devtools__btn--small" data-action="clear-network">
                                Clear
                            </button>
                        </div>
                        <div class="lc-devtools__timeline" data-content="network"></div>
                    </div>
                </div>
            </div>
        `;

        document.body.appendChild(this.overlay);
        this.injectStyles();
    }

    /**
     * Inject DevTools styles
     */
    injectStyles() {
        const styles = `
            .lc-devtools {
                position: fixed;
                bottom: 20px;
                right: 20px;
                width: 800px;
                height: 600px;
                z-index: 999999;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                font-size: 13px;
            }

            .lc-devtools__panel {
                background: #1e1e1e;
                border: 1px solid #3c3c3c;
                border-radius: 8px;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
                display: flex;
                flex-direction: column;
                height: 100%;
                overflow: hidden;
            }

            .lc-devtools__header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 16px;
                background: #252526;
                border-bottom: 1px solid #3c3c3c;
                color: #cccccc;
                cursor: move;
            }

            .lc-devtools__title {
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 600;
            }

            .lc-devtools__icon {
                font-size: 16px;
            }

            .lc-devtools__actions {
                display: flex;
                gap: 8px;
            }

            .lc-devtools__btn {
                background: transparent;
                border: 1px solid #3c3c3c;
                border-radius: 4px;
                color: #cccccc;
                cursor: pointer;
                padding: 4px 12px;
                font-size: 13px;
                transition: all 0.2s;
            }

            .lc-devtools__btn:hover {
                background: #3c3c3c;
                border-color: #4c4c4c;
            }

            .lc-devtools__btn--small {
                padding: 4px 8px;
                font-size: 11px;
            }

            .lc-devtools__tabs {
                display: flex;
                background: #2d2d30;
                border-bottom: 1px solid #3c3c3c;
                overflow-x: auto;
            }

            .lc-devtools__tab {
                background: transparent;
                border: none;
                border-bottom: 2px solid transparent;
                color: #969696;
                cursor: pointer;
                padding: 10px 16px;
                font-size: 12px;
                transition: all 0.2s;
                white-space: nowrap;
            }

            .lc-devtools__tab:hover {
                color: #cccccc;
            }

            .lc-devtools__tab--active {
                color: #ffffff;
                border-bottom-color: #007acc;
            }

            .lc-devtools__content {
                flex: 1;
                overflow: hidden;
                position: relative;
            }

            .lc-devtools__pane {
                display: none;
                flex-direction: column;
                height: 100%;
                overflow: hidden;
            }

            .lc-devtools__pane--active {
                display: flex;
            }

            .lc-devtools__toolbar {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 12px 16px;
                background: #252526;
                border-bottom: 1px solid #3c3c3c;
            }

            .lc-devtools__search {
                flex: 1;
                background: #3c3c3c;
                border: 1px solid #4c4c4c;
                border-radius: 4px;
                color: #cccccc;
                padding: 6px 12px;
                font-size: 12px;
            }

            .lc-devtools__search:focus {
                outline: none;
                border-color: #007acc;
            }

            .lc-devtools__tree,
            .lc-devtools__log,
            .lc-devtools__metrics,
            .lc-devtools__timeline {
                flex: 1;
                overflow-y: auto;
                padding: 16px;
                color: #cccccc;
            }

            .lc-devtools__tree::-webkit-scrollbar,
            .lc-devtools__log::-webkit-scrollbar,
            .lc-devtools__metrics::-webkit-scrollbar,
            .lc-devtools__timeline::-webkit-scrollbar {
                width: 8px;
            }

            .lc-devtools__tree::-webkit-scrollbar-track,
            .lc-devtools__log::-webkit-scrollbar-track,
            .lc-devtools__metrics::-webkit-scrollbar-track,
            .lc-devtools__timeline::-webkit-scrollbar-track {
                background: #1e1e1e;
            }

            .lc-devtools__tree::-webkit-scrollbar-thumb,
            .lc-devtools__log::-webkit-scrollbar-thumb,
            .lc-devtools__metrics::-webkit-scrollbar-thumb,
            .lc-devtools__timeline::-webkit-scrollbar-thumb {
                background: #3c3c3c;
                border-radius: 4px;
            }

            .lc-devtools--minimized {
                height: auto;
            }

            .lc-devtools--minimized .lc-devtools__tabs,
            .lc-devtools--minimized .lc-devtools__content {
                display: none;
            }

            /* DOM Badge Styles */
            .lc-dom-badge {
                position: fixed;
                background: rgba(30, 30, 30, 0.95);
                border: 1px solid #007acc;
                border-radius: 4px;
                padding: 6px 10px;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                font-size: 11px;
                color: #cccccc;
                cursor: pointer;
                transition: all 0.2s;
                backdrop-filter: blur(4px);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
                pointer-events: auto;
            }

            .lc-dom-badge:hover {
                background: rgba(30, 30, 30, 1);
                border-color: #4ec9b0;
                transform: scale(1.05);
            }

            .lc-dom-badge.lc-badge-active {
                animation: badge-pulse 0.5s ease-out;
                border-color: #4ec9b0;
            }

            @keyframes badge-pulse {
                0% {
                    transform: scale(1);
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
                }
                50% {
                    transform: scale(1.1);
                    box-shadow: 0 4px 16px rgba(78, 201, 176, 0.5);
                }
                100% {
                    transform: scale(1);
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
                }
            }

            .lc-badge-header {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-bottom: 4px;
            }

            .lc-badge-icon {
                font-size: 12px;
            }

            .lc-badge-name {
                color: #569cd6;
                font-weight: 600;
            }

            .lc-badge-id {
                color: #858585;
                font-size: 10px;
            }

            .lc-badge-activity {
                display: flex;
                gap: 8px;
                font-size: 10px;
                color: #4ec9b0;
            }

            .lc-badge-actions {
                color: #dcdcaa;
            }
        `;

        const styleSheet = document.createElement('style');
        styleSheet.textContent = styles;
        document.head.appendChild(styleSheet);
    }

    /**
     * Attach event listeners
     */
    attachEventListeners() {
        // Header actions
        this.overlay.querySelector('[data-action="toggle-badges"]')?.addEventListener('click', () => {
            this.toggleBadges();
        });

        this.overlay.querySelector('[data-action="minimize"]')?.addEventListener('click', () => {
            this.toggleMinimize();
        });

        this.overlay.querySelector('[data-action="close"]')?.addEventListener('click', () => {
            this.close();
        });

        // Tab switching
        this.overlay.querySelectorAll('[data-tab]').forEach(tab => {
            tab.addEventListener('click', (e) => {
                this.switchTab(e.target.dataset.tab);
            });
        });

        // Toolbar actions
        this.overlay.querySelector('[data-action="refresh-components"]')?.addEventListener('click', () => {
            this.refreshComponents();
        });

        this.overlay.querySelector('[data-action="clear-actions"]')?.addEventListener('click', () => {
            this.clearActionLog();
        });

        this.overlay.querySelector('[data-action="clear-events"]')?.addEventListener('click', () => {
            this.clearEventLog();
        });

        this.overlay.querySelector('[data-action="record-performance"]')?.addEventListener('click', () => {
            this.togglePerformanceRecording();
        });

        this.overlay.querySelector('[data-action="clear-performance"]')?.addEventListener('click', () => {
            this.clearPerformanceData();
        });

        this.overlay.querySelector('[data-action="clear-network"]')?.addEventListener('click', () => {
            this.clearNetworkLog();
        });

        // Make header draggable
        this.makeDraggable();
    }

    /**
     * Register global keyboard shortcuts
     */
    registerGlobalShortcuts() {
        document.addEventListener('keydown', (e) => {
            // Ctrl/Cmd + Shift + D - Toggle DevTools
            if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'D') {
                e.preventDefault();
                this.toggle();
            }
        });
    }

    /**
     * Start monitoring LiveComponents
     */
    startMonitoring() {
        // Intercept Core.emit for event logging
        this.interceptCoreEmit();

        // Monitor component initialization
        this.monitorComponentInit();

        // Monitor network requests
        this.monitorNetworkRequests();

        // Connect to LiveComponent manager
        this.connectToLiveComponent();

        // Initialize DOM badges
        this.initializeDomBadges();
    }

    /**
     * Connect to LiveComponent manager for action/event logging
     */
    connectToLiveComponent() {
        // Wait for LiveComponent to be available
        const checkLiveComponent = () => {
            if (window.LiveComponent) {
                window.LiveComponent.enableDevTools(this);
                console.log('[LiveComponent DevTools] Connected to LiveComponent manager');
            } else {
                // Retry after a short delay
                setTimeout(checkLiveComponent, 100);
            }
        };

        checkLiveComponent();
    }

    /**
     * Toggle DevTools visibility
     */
    toggle() {
        if (this.isOpen) {
            this.close();
        } else {
            this.open();
        }
    }

    /**
     * Open DevTools
     */
    open() {
        this.overlay.style.display = 'block';
        this.isOpen = true;
        this.refreshComponents();
        // Show badges when DevTools opens
        if (this.badgesEnabled) {
            this.updateDomBadges();
        }
        Core.emit('devtools:opened');
    }

    /**
     * Close DevTools
     */
    close() {
        this.overlay.style.display = 'none';
        this.isOpen = false;
        Core.emit('devtools:closed');
    }

    /**
     * Toggle minimize state
     */
    toggleMinimize() {
        this.overlay.classList.toggle('lc-devtools--minimized');
    }

    /**
     * Switch active tab
     */
    switchTab(tabName) {
        this.activeTab = tabName;

        // Update tab buttons
        this.overlay.querySelectorAll('[data-tab]').forEach(tab => {
            tab.classList.toggle('lc-devtools__tab--active', tab.dataset.tab === tabName);
        });

        // Update panes
        this.overlay.querySelectorAll('[data-pane]').forEach(pane => {
            pane.classList.toggle('lc-devtools__pane--active', pane.dataset.pane === tabName);
        });

        // Refresh content for active tab
        this.refreshActiveTab();
    }

    /**
     * Make overlay draggable
     */
    makeDraggable() {
        const header = this.overlay.querySelector('.lc-devtools__header');
        let isDragging = false;
        let currentX;
        let currentY;
        let initialX;
        let initialY;

        header.addEventListener('mousedown', (e) => {
            if (e.target.closest('.lc-devtools__actions')) return;

            isDragging = true;
            initialX = e.clientX - this.overlay.offsetLeft;
            initialY = e.clientY - this.overlay.offsetTop;
        });

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;

            e.preventDefault();
            currentX = e.clientX - initialX;
            currentY = e.clientY - initialY;

            this.overlay.style.left = currentX + 'px';
            this.overlay.style.top = currentY + 'px';
            this.overlay.style.right = 'auto';
            this.overlay.style.bottom = 'auto';
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
        });
    }

    /**
     * Refresh active tab content
     */
    refreshActiveTab() {
        switch (this.activeTab) {
            case 'components':
                this.renderComponents();
                break;
            case 'actions':
                this.renderActionLog();
                break;
            case 'events':
                this.renderEventLog();
                break;
            case 'performance':
                this.renderPerformanceData();
                break;
            case 'network':
                this.renderNetworkLog();
                break;
        }
    }

    /**
     * Refresh components tree
     */
    refreshComponents() {
        // Find all LiveComponent elements in DOM
        this.components.clear();

        document.querySelectorAll('[data-component-id]').forEach(element => {
            const componentId = element.dataset.componentId;
            const componentName = element.dataset.componentName || 'Unknown';

            this.components.set(componentId, {
                id: componentId,
                name: componentName,
                element: element,
                state: this.extractComponentState(element),
                props: this.extractComponentProps(element)
            });
        });

        this.renderComponents();
    }

    /**
     * Extract component state from element
     */
    extractComponentState(element) {
        // Try to get state from data attribute or custom property
        return element.__liveComponentState || {};
    }

    /**
     * Extract component props from element
     */
    extractComponentProps(element) {
        const props = {};

        // Extract data-* attributes as props
        for (const [key, value] of Object.entries(element.dataset)) {
            if (key !== 'componentId' && key !== 'componentName') {
                props[key] = value;
            }
        }

        return props;
    }

    /**
     * Render components tree
     */
    renderComponents() {
        const container = this.overlay.querySelector('[data-content="components"]');
        if (!container) return;

        if (this.components.size === 0) {
            container.innerHTML = '<div style="color: #969696; text-align: center; padding: 40px;">No LiveComponents found</div>';
            return;
        }

        let html = '<div class="lc-component-tree">';

        for (const [id, component] of this.components) {
            html += `
                <div class="lc-component-item" data-component-id="${id}">
                    <div class="lc-component-header">
                        <span class="lc-component-name">${component.name}</span>
                        <span class="lc-component-id">#${id}</span>
                    </div>
                    <div class="lc-component-details" style="display: none;">
                        <div class="lc-component-section">
                            <strong>Props:</strong>
                            <pre>${JSON.stringify(component.props, null, 2)}</pre>
                        </div>
                        <div class="lc-component-section">
                            <strong>State:</strong>
                            <pre>${JSON.stringify(component.state, null, 2)}</pre>
                        </div>
                    </div>
                </div>
            `;
        }

        html += '</div>';
        container.innerHTML = html;

        // Add click handlers for component items
        container.querySelectorAll('.lc-component-item').forEach(item => {
            item.addEventListener('click', () => {
                const details = item.querySelector('.lc-component-details');
                details.style.display = details.style.display === 'none' ? 'block' : 'none';
            });
        });
    }

    /**
     * Log action execution
     * Called by LiveComponent manager
     */
    logAction(componentId, actionName, params, startTime, endTime, success, error = null) {
        const duration = endTime - startTime;

        this.actionLog.unshift({
            timestamp: Date.now(),
            componentId,
            actionName,
            params,
            duration,
            success,
            error
        });

        // Keep only last 100 actions
        if (this.actionLog.length > 100) {
            this.actionLog.pop();
        }

        // Track performance data if recording
        if (this.isRecording) {
            this.recordActionExecution(componentId, actionName, duration, startTime, endTime);
        }

        // Update DOM badge activity
        this.updateBadgeActivity(componentId);

        if (this.activeTab === 'actions') {
            this.renderActionLog();
        }
    }

    /**
     * Render action log
     */
    renderActionLog() {
        const container = this.overlay.querySelector('[data-content="actions"]');
        if (!container) return;

        if (this.actionLog.length === 0) {
            container.innerHTML = '<div style="color: #969696; text-align: center; padding: 40px;">No actions logged</div>';
            return;
        }

        let html = '<div class="lc-action-log" style="font-family: monospace; font-size: 12px;">';

        for (const action of this.actionLog) {
            const time = new Date(action.timestamp).toLocaleTimeString();
            const statusIcon = action.success ? '✓' : '✗';
            const statusColor = action.success ? '#4ec9b0' : '#f48771';
            const paramsPreview = JSON.stringify(action.params).substring(0, 50);

            html += `
                <div class="lc-log-entry" style="padding: 8px; border-bottom: 1px solid #3c3c3c; cursor: pointer;" data-action-index="${this.actionLog.indexOf(action)}">
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <span style="color: ${statusColor};">${statusIcon}</span>
                        <span style="color: #858585;">${time}</span>
                        <span style="color: #569cd6;">${action.componentId}</span>
                        <span style="color: #dcdcaa;">${action.actionName}()</span>
                        <span style="color: #858585;">${action.duration.toFixed(2)}ms</span>
                    </div>
                    ${action.error ? `
                        <div style="color: #f48771; padding-left: 24px; margin-top: 4px; font-size: 11px;">
                            Error: ${action.error}
                        </div>
                    ` : ''}
                    ${Object.keys(action.params).length > 0 ? `
                        <div style="color: #858585; padding-left: 24px; margin-top: 4px; font-size: 11px;">
                            ${paramsPreview}${JSON.stringify(action.params).length > 50 ? '...' : ''}
                        </div>
                    ` : ''}
                </div>
            `;
        }

        html += '</div>';
        container.innerHTML = html;

        // Add click handlers to show full details
        container.querySelectorAll('.lc-log-entry').forEach(entry => {
            entry.addEventListener('click', () => {
                const index = parseInt(entry.dataset.actionIndex);
                const action = this.actionLog[index];
                console.log('[LiveComponent DevTools] Action details:', action);
            });
        });
    }

    /**
     * Clear action log
     */
    clearActionLog() {
        this.actionLog = [];
        this.renderActionLog();
    }

    /**
     * Log event
     * Called by LiveComponent manager or Core.emit interception
     */
    logEvent(eventName, data, source = 'client') {
        this.eventLog.unshift({
            timestamp: Date.now(),
            eventName,
            data,
            source
        });

        // Keep only last 100 events
        if (this.eventLog.length > 100) {
            this.eventLog.pop();
        }

        if (this.activeTab === 'events') {
            this.renderEventLog();
        }
    }

    /**
     * Render event log
     */
    renderEventLog() {
        const container = this.overlay.querySelector('[data-content="events"]');
        if (!container) return;

        if (this.eventLog.length === 0) {
            container.innerHTML = '<div style="color: #969696; text-align: center; padding: 40px;">No events logged</div>';
            return;
        }

        let html = '<div class="lc-event-log" style="font-family: monospace; font-size: 12px;">';

        for (const event of this.eventLog) {
            const time = new Date(event.timestamp).toLocaleTimeString();
            const sourceColor = event.source === 'server' ? '#ce9178' : '#4ec9b0';
            const sourceIcon = event.source === 'server' ? '⬅' : '⬆';

            html += `
                <div class="lc-log-entry" style="padding: 8px; border-bottom: 1px solid #3c3c3c; cursor: pointer;" data-event-index="${this.eventLog.indexOf(event)}">
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <span style="color: ${sourceColor};">${sourceIcon}</span>
                        <span style="color: #858585;">${time}</span>
                        <span style="color: #dcdcaa;">${event.eventName}</span>
                        <span style="color: #858585; font-size: 10px;">[${event.source}]</span>
                    </div>
                    ${event.data && Object.keys(event.data).length > 0 ? `
                        <div style="color: #858585; padding-left: 24px; margin-top: 4px; font-size: 11px;">
                            ${JSON.stringify(event.data).substring(0, 60)}${JSON.stringify(event.data).length > 60 ? '...' : ''}
                        </div>
                    ` : ''}
                </div>
            `;
        }

        html += '</div>';
        container.innerHTML = html;

        // Add click handlers to show full details
        container.querySelectorAll('.lc-log-entry').forEach(entry => {
            entry.addEventListener('click', () => {
                const index = parseInt(entry.dataset.eventIndex);
                const event = this.eventLog[index];
                console.log('[LiveComponent DevTools] Event details:', event);
            });
        });
    }

    /**
     * Clear event log
     */
    clearEventLog() {
        this.eventLog = [];
        this.renderEventLog();
    }

    /**
     * Clear performance data
     */
    clearPerformanceData() {
        this.performanceData = [];
        this.performanceRecording = [];
        this.componentRenderTimes.clear();
        this.actionExecutionTimes.clear();
        this.memorySnapshots = [];
        this.renderPerformanceData();
    }

    /**
     * Toggle performance recording
     */
    togglePerformanceRecording() {
        this.isRecording = !this.isRecording;

        const recordBtn = this.overlay?.querySelector('[data-action="record-performance"]');
        if (recordBtn) {
            if (this.isRecording) {
                recordBtn.textContent = '■ Stop';
                recordBtn.style.color = '#f48771';
                this.startPerformanceRecording();
            } else {
                recordBtn.textContent = '● Record';
                recordBtn.style.color = '#cccccc';
                this.stopPerformanceRecording();
            }
        }
    }

    /**
     * Start performance recording
     */
    startPerformanceRecording() {
        console.log('[LiveComponent DevTools] Performance recording started');
        this.performanceRecording = [];
        this.memorySnapshots = [];

        // Take initial memory snapshot if available
        if (performance.memory) {
            this.takeMemorySnapshot();
        }

        // Start periodic memory snapshots (every 500ms)
        this.memorySnapshotInterval = setInterval(() => {
            if (this.isRecording && performance.memory) {
                this.takeMemorySnapshot();
            }
        }, 500);
    }

    /**
     * Stop performance recording
     */
    stopPerformanceRecording() {
        console.log('[LiveComponent DevTools] Performance recording stopped');

        if (this.memorySnapshotInterval) {
            clearInterval(this.memorySnapshotInterval);
        }

        // Take final memory snapshot
        if (performance.memory) {
            this.takeMemorySnapshot();
        }

        this.renderPerformanceData();
    }

    /**
     * Record action execution for performance profiling
     */
    recordActionExecution(componentId, actionName, duration, startTime, endTime) {
        this.performanceRecording.push({
            type: 'action',
            componentId,
            actionName,
            duration,
            startTime,
            endTime,
            timestamp: Date.now()
        });

        // Update action execution times map
        const key = `${componentId}:${actionName}`;
        if (!this.actionExecutionTimes.has(key)) {
            this.actionExecutionTimes.set(key, []);
        }
        this.actionExecutionTimes.get(key).push(duration);

        // Keep only last 100 recordings
        if (this.performanceRecording.length > 100) {
            this.performanceRecording.shift();
        }
    }

    /**
     * Record component render for performance profiling
     */
    recordComponentRender(componentId, duration, startTime, endTime) {
        if (!this.isRecording) return;

        this.performanceRecording.push({
            type: 'render',
            componentId,
            duration,
            startTime,
            endTime,
            timestamp: Date.now()
        });

        // Update component render times map
        if (!this.componentRenderTimes.has(componentId)) {
            this.componentRenderTimes.set(componentId, []);
        }
        this.componentRenderTimes.get(componentId).push(duration);

        // Keep only last 100 recordings
        if (this.performanceRecording.length > 100) {
            this.performanceRecording.shift();
        }
    }

    /**
     * Take memory snapshot
     */
    takeMemorySnapshot() {
        if (!performance.memory) return;

        this.memorySnapshots.push({
            timestamp: Date.now(),
            usedJSHeapSize: performance.memory.usedJSHeapSize,
            totalJSHeapSize: performance.memory.totalJSHeapSize,
            jsHeapSizeLimit: performance.memory.jsHeapSizeLimit
        });

        // Keep only last 100 snapshots
        if (this.memorySnapshots.length > 100) {
            this.memorySnapshots.shift();
        }
    }

    /**
     * Render performance data
     */
    renderPerformanceData() {
        const container = this.overlay.querySelector('[data-content="performance"]');
        if (!container) return;

        if (this.performanceRecording.length === 0 && this.memorySnapshots.length === 0) {
            container.innerHTML = `
                <div style="color: #969696; text-align: center; padding: 40px;">
                    <p>No performance data recorded</p>
                    <p style="font-size: 12px; margin-top: 12px;">Click "● Record" to start profiling</p>
                </div>
            `;
            return;
        }

        let html = '<div class="lc-performance-view" style="padding: 0;">';

        // Performance Summary
        html += this.renderPerformanceSummary();

        // Flamegraph
        html += this.renderFlamegraph();

        // Timeline
        html += this.renderPerformanceTimeline();

        // Memory Usage Chart
        if (this.memorySnapshots.length > 0) {
            html += this.renderMemoryChart();
        }

        html += '</div>';
        container.innerHTML = html;
    }

    /**
     * Render performance summary
     */
    renderPerformanceSummary() {
        const actionCount = this.performanceRecording.filter(r => r.type === 'action').length;
        const renderCount = this.performanceRecording.filter(r => r.type === 'render').length;

        const avgActionTime = actionCount > 0
            ? this.performanceRecording
                .filter(r => r.type === 'action')
                .reduce((sum, r) => sum + r.duration, 0) / actionCount
            : 0;

        const avgRenderTime = renderCount > 0
            ? this.performanceRecording
                .filter(r => r.type === 'render')
                .reduce((sum, r) => sum + r.duration, 0) / renderCount
            : 0;

        const totalDuration = this.performanceRecording.reduce((sum, r) => sum + r.duration, 0);

        return `
            <div class="lc-perf-summary" style="padding: 16px; border-bottom: 1px solid #3c3c3c; background: #252526;">
                <h3 style="margin: 0 0 12px 0; color: #cccccc; font-size: 14px; font-weight: 600;">Performance Summary</h3>
                <div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; font-size: 12px;">
                    <div>
                        <div style="color: #858585; margin-bottom: 4px;">Total Events</div>
                        <div style="color: #4ec9b0; font-size: 18px; font-weight: 600;">${this.performanceRecording.length}</div>
                    </div>
                    <div>
                        <div style="color: #858585; margin-bottom: 4px;">Actions</div>
                        <div style="color: #dcdcaa; font-size: 18px; font-weight: 600;">${actionCount}</div>
                    </div>
                    <div>
                        <div style="color: #858585; margin-bottom: 4px;">Renders</div>
                        <div style="color: #569cd6; font-size: 18px; font-weight: 600;">${renderCount}</div>
                    </div>
                    <div>
                        <div style="color: #858585; margin-bottom: 4px;">Avg Action</div>
                        <div style="color: #dcdcaa; font-size: 18px; font-weight: 600;">${avgActionTime.toFixed(2)}ms</div>
                    </div>
                    <div>
                        <div style="color: #858585; margin-bottom: 4px;">Total Duration</div>
                        <div style="color: #f48771; font-size: 18px; font-weight: 600;">${totalDuration.toFixed(2)}ms</div>
                    </div>
                </div>
            </div>
        `;
    }

    /**
     * Render flamegraph
     */
    renderFlamegraph() {
        if (this.actionExecutionTimes.size === 0 && this.componentRenderTimes.size === 0) {
            return '';
        }

        let html = `
            <div class="lc-flamegraph" style="padding: 16px; border-bottom: 1px solid #3c3c3c;">
                <h3 style="margin: 0 0 12px 0; color: #cccccc; font-size: 14px; font-weight: 600;">
                    Execution Breakdown (Flamegraph)
                </h3>
        `;

        // Calculate total time for each component/action
        const breakdown = [];

        // Process action execution times
        for (const [key, times] of this.actionExecutionTimes) {
            const [componentId, actionName] = key.split(':');
            const totalTime = times.reduce((sum, t) => sum + t, 0);
            const avgTime = totalTime / times.length;
            const count = times.length;

            breakdown.push({
                type: 'action',
                componentId,
                label: actionName,
                totalTime,
                avgTime,
                count,
                color: '#dcdcaa'
            });
        }

        // Process component render times
        for (const [componentId, times] of this.componentRenderTimes) {
            const totalTime = times.reduce((sum, t) => sum + t, 0);
            const avgTime = totalTime / times.length;
            const count = times.length;

            breakdown.push({
                type: 'render',
                componentId,
                label: 'render',
                totalTime,
                avgTime,
                count,
                color: '#569cd6'
            });
        }

        // Sort by total time descending
        breakdown.sort((a, b) => b.totalTime - a.totalTime);

        // Calculate max time for bar width
        const maxTime = breakdown[0]?.totalTime || 1;

        // Render bars
        html += '<div style="font-family: monospace; font-size: 11px;">';
        for (const item of breakdown.slice(0, 10)) { // Top 10
            const widthPercent = (item.totalTime / maxTime) * 100;
            const componentName = this.components.get(item.componentId)?.name || item.componentId.substring(0, 8);

            html += `
                <div style="margin-bottom: 8px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px; color: #858585;">
                        <span>
                            <span style="color: #569cd6;">${componentName}</span>
                            <span style="color: ${item.color};">.${item.label}()</span>
                            <span style="color: #858585;">×${item.count}</span>
                        </span>
                        <span>${item.totalTime.toFixed(2)}ms (avg: ${item.avgTime.toFixed(2)}ms)</span>
                    </div>
                    <div style="width: 100%; height: 20px; background: #3c3c3c; border-radius: 2px; overflow: hidden;">
                        <div style="width: ${widthPercent}%; height: 100%; background: ${item.color}; transition: width 0.3s;"></div>
                    </div>
                </div>
            `;
        }
        html += '</div>';

        html += '</div>';
        return html;
    }

    /**
     * Render performance timeline
     */
    renderPerformanceTimeline() {
        if (this.performanceRecording.length === 0) {
            return '';
        }

        let html = `
            <div class="lc-timeline" style="padding: 16px; border-bottom: 1px solid #3c3c3c;">
                <h3 style="margin: 0 0 12px 0; color: #cccccc; font-size: 14px; font-weight: 600;">
                    Execution Timeline
                </h3>
        `;

        // Get time range
        const minTime = Math.min(...this.performanceRecording.map(r => r.startTime));
        const maxTime = Math.max(...this.performanceRecording.map(r => r.endTime));
        const timeRange = maxTime - minTime;

        // Render timeline bars
        html += '<div style="position: relative; height: 200px; margin-top: 12px; border: 1px solid #3c3c3c; border-radius: 4px; padding: 8px;">';

        let yOffset = 0;
        const barHeight = 16;
        const maxBars = Math.floor(200 / barHeight);

        for (const record of this.performanceRecording.slice(0, maxBars)) {
            const leftPercent = ((record.startTime - minTime) / timeRange) * 100;
            const widthPercent = (record.duration / timeRange) * 100;
            const color = record.type === 'action' ? '#dcdcaa' : '#569cd6';
            const componentName = this.components.get(record.componentId)?.name || record.componentId.substring(0, 8);
            const label = record.type === 'action' ? record.actionName : 'render';

            html += `
                <div
                    style="
                        position: absolute;
                        left: ${leftPercent}%;
                        top: ${yOffset}px;
                        width: ${widthPercent}%;
                        height: ${barHeight - 2}px;
                        background: ${color};
                        border-radius: 2px;
                        font-size: 10px;
                        color: #1e1e1e;
                        padding: 2px 4px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    "
                    title="${componentName}.${label}() - ${record.duration.toFixed(2)}ms"
                >
                    ${componentName}.${label}()
                </div>
            `;

            yOffset += barHeight;
        }

        html += '</div>';

        // Time labels
        html += `
            <div style="display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: #858585;">
                <span>0ms</span>
                <span>${(timeRange / 2).toFixed(2)}ms</span>
                <span>${timeRange.toFixed(2)}ms</span>
            </div>
        `;

        html += '</div>';
        return html;
    }

    /**
     * Render memory usage chart
     */
    renderMemoryChart() {
        if (this.memorySnapshots.length === 0) {
            return '';
        }

        let html = `
            <div class="lc-memory-chart" style="padding: 16px;">
                <h3 style="margin: 0 0 12px 0; color: #cccccc; font-size: 14px; font-weight: 600;">
                    Memory Usage
                </h3>
        `;

        // Get current memory stats
        const current = this.memorySnapshots[this.memorySnapshots.length - 1];
        const initial = this.memorySnapshots[0];
        const delta = current.usedJSHeapSize - initial.usedJSHeapSize;
        const deltaPercent = (delta / initial.usedJSHeapSize) * 100;

        html += `
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; font-size: 12px;">
                <div>
                    <div style="color: #858585; margin-bottom: 4px;">Used Heap</div>
                    <div style="color: #4ec9b0; font-size: 18px; font-weight: 600;">${this.formatBytes(current.usedJSHeapSize)}</div>
                </div>
                <div>
                    <div style="color: #858585; margin-bottom: 4px;">Total Heap</div>
                    <div style="color: #569cd6; font-size: 18px; font-weight: 600;">${this.formatBytes(current.totalJSHeapSize)}</div>
                </div>
                <div>
                    <div style="color: #858585; margin-bottom: 4px;">Heap Limit</div>
                    <div style="color: #dcdcaa; font-size: 18px; font-weight: 600;">${this.formatBytes(current.jsHeapSizeLimit)}</div>
                </div>
                <div>
                    <div style="color: #858585; margin-bottom: 4px;">Delta</div>
                    <div style="color: ${delta > 0 ? '#f48771' : '#4ec9b0'}; font-size: 18px; font-weight: 600;">
                        ${delta > 0 ? '+' : ''}${this.formatBytes(delta)}
                    </div>
                </div>
            </div>
        `;

        // Render memory chart
        const maxMemory = Math.max(...this.memorySnapshots.map(s => s.usedJSHeapSize));
        const chartHeight = 100;

        html += '<div style="position: relative; height: 100px; border: 1px solid #3c3c3c; border-radius: 4px; background: #252526;">';

        // Draw memory line chart
        let points = '';
        const step = 100 / (this.memorySnapshots.length - 1);
        for (let i = 0; i < this.memorySnapshots.length; i++) {
            const snapshot = this.memorySnapshots[i];
            const x = i * step;
            const y = chartHeight - (snapshot.usedJSHeapSize / maxMemory) * chartHeight;
            points += `${x},${y} `;
        }

        html += `
            <svg width="100%" height="100" style="position: absolute; top: 0; left: 0;">
                <polyline
                    points="${points}"
                    style="fill: none; stroke: #4ec9b0; stroke-width: 2;"
                />
            </svg>
        `;

        html += '</div>';

        html += '</div>';
        return html;
    }

    /**
     * Format bytes to human-readable string
     */
    formatBytes(bytes) {
        if (bytes === 0) return '0 B';
        const k = 1024;
        const sizes = ['B', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    /**
     * Clear network log
     */
    clearNetworkLog() {
        this.networkLog = [];
        this.renderNetworkLog();
    }

    /**
     * Render network log
     */
    renderNetworkLog() {
        const container = this.overlay.querySelector('[data-content="network"]');
        if (!container) return;

        if (this.networkLog.length === 0) {
            container.innerHTML = '<div style="color: #969696; text-align: center; padding: 40px;">No requests logged</div>';
            return;
        }

        let html = '<div class="lc-network-log">';

        for (const request of this.networkLog) {
            const time = new Date(request.timestamp).toLocaleTimeString();

            html += `
                <div class="lc-log-entry">
                    <div class="lc-log-header">
                        <span class="lc-log-time">${time}</span>
                        <span class="lc-log-method">${request.method}</span>
                        <span class="lc-log-url">${request.url}</span>
                        <span class="lc-log-status">${request.status}</span>
                        <span class="lc-log-duration">${request.duration.toFixed(2)}ms</span>
                    </div>
                </div>
            `;
        }

        html += '</div>';
        container.innerHTML = html;
    }

    /**
     * Initialize DOM badges for all components
     */
    initializeDomBadges() {
        // Observe DOM for new components
        const observer = new MutationObserver(() => {
            this.updateDomBadges();
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['data-component-id']
        });

        // Initial badge creation
        this.updateDomBadges();
    }

    /**
     * Update DOM badges for all LiveComponents
     */
    updateDomBadges() {
        if (!this.badgesEnabled) return;

        // Find all LiveComponent elements
        document.querySelectorAll('[data-component-id]').forEach(element => {
            const componentId = element.dataset.componentId;

            // Skip if badge already exists
            if (this.domBadges.has(componentId)) {
                const existingBadge = this.domBadges.get(componentId);
                // Update badge position if element moved
                this.updateBadgePosition(existingBadge, element);
                return;
            }

            // Create new badge
            this.createDomBadge(componentId, element);
        });

        // Clean up badges for removed components
        this.cleanupRemovedBadges();
    }

    /**
     * Create DOM badge for a component
     */
    createDomBadge(componentId, element) {
        const badge = document.createElement('div');
        badge.className = 'lc-dom-badge';
        badge.dataset.componentId = componentId;

        const componentName = element.dataset.componentName || 'Unknown';

        badge.innerHTML = `
            <div class="lc-badge-header">
                <span class="lc-badge-icon">⚡</span>
                <span class="lc-badge-name">${componentName}</span>
                <span class="lc-badge-id">#${componentId.substring(0, 8)}</span>
            </div>
            <div class="lc-badge-activity">
                <span class="lc-badge-actions">0 actions</span>
            </div>
        `;

        // Position badge relative to element
        this.positionBadge(badge, element);

        // Add interaction handlers
        badge.addEventListener('click', (e) => {
            e.stopPropagation();
            this.highlightComponent(componentId);
            this.focusComponentInDevTools(componentId);
        });

        badge.addEventListener('mouseenter', () => {
            this.highlightElement(element);
        });

        badge.addEventListener('mouseleave', () => {
            this.unhighlightElement(element);
        });

        document.body.appendChild(badge);
        this.domBadges.set(componentId, { badge, element, actionCount: 0 });
    }

    /**
     * Position badge relative to component element
     */
    positionBadge(badge, element) {
        const rect = element.getBoundingClientRect();

        badge.style.position = 'fixed';
        badge.style.top = `${rect.top + window.scrollY}px`;
        badge.style.left = `${rect.left + window.scrollX}px`;
        badge.style.zIndex = '999998';
    }

    /**
     * Update badge position when element moves
     */
    updateBadgePosition(badgeData, element) {
        const rect = element.getBoundingClientRect();
        badgeData.badge.style.top = `${rect.top + window.scrollY}px`;
        badgeData.badge.style.left = `${rect.left + window.scrollX}px`;
    }

    /**
     * Update badge activity counter
     */
    updateBadgeActivity(componentId) {
        const badgeData = this.domBadges.get(componentId);
        if (!badgeData) return;

        badgeData.actionCount++;

        const actionsSpan = badgeData.badge.querySelector('.lc-badge-actions');
        if (actionsSpan) {
            actionsSpan.textContent = `${badgeData.actionCount} action${badgeData.actionCount !== 1 ? 's' : ''}`;
        }

        // Flash badge to show activity
        badgeData.badge.classList.add('lc-badge-active');
        setTimeout(() => {
            badgeData.badge.classList.remove('lc-badge-active');
        }, 500);
    }

    /**
     * Highlight component element
     */
    highlightElement(element) {
        element.style.outline = '2px solid #007acc';
        element.style.outlineOffset = '2px';
    }

    /**
     * Remove element highlight
     */
    unhighlightElement(element) {
        element.style.outline = '';
        element.style.outlineOffset = '';
    }

    /**
     * Highlight component in DevTools
     */
    highlightComponent(componentId) {
        if (!this.isOpen) {
            this.open();
        }

        this.switchTab('components');

        // Highlight component in tree
        const componentItem = this.overlay.querySelector(`[data-component-id="${componentId}"]`);
        if (componentItem) {
            componentItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
            componentItem.style.background = 'rgba(0, 122, 204, 0.2)';
            setTimeout(() => {
                componentItem.style.background = '';
            }, 2000);
        }
    }

    /**
     * Focus component in DevTools tree
     */
    focusComponentInDevTools(componentId) {
        const componentItem = this.overlay.querySelector(`[data-component-id="${componentId}"]`);
        if (componentItem) {
            // Expand component details
            const details = componentItem.querySelector('.lc-component-details');
            if (details) {
                details.style.display = 'block';
            }
        }
    }

    /**
     * Clean up badges for removed components
     */
    cleanupRemovedBadges() {
        const existingComponents = new Set(
            Array.from(document.querySelectorAll('[data-component-id]'))
                .map(el => el.dataset.componentId)
        );

        for (const [componentId, badgeData] of this.domBadges) {
            if (!existingComponents.has(componentId)) {
                badgeData.badge.remove();
                this.domBadges.delete(componentId);
            }
        }
    }

    /**
     * Toggle DOM badges visibility
     */
    toggleBadges() {
        this.badgesEnabled = !this.badgesEnabled;

        if (this.badgesEnabled) {
            // Show all badges
            for (const badgeData of this.domBadges.values()) {
                badgeData.badge.style.display = 'block';
            }
            this.updateDomBadges();
        } else {
            // Hide all badges
            for (const badgeData of this.domBadges.values()) {
                badgeData.badge.style.display = 'none';
            }
        }

        // Update button state
        const badgeBtn = this.overlay?.querySelector('[data-action="toggle-badges"]');
        if (badgeBtn) {
            badgeBtn.style.opacity = this.badgesEnabled ? '1' : '0.5';
        }
    }

    /**
     * Remove all DOM badges
     */
    removeAllBadges() {
        for (const badgeData of this.domBadges.values()) {
            badgeData.badge.remove();
        }
        this.domBadges.clear();
    }

    /**
     * Intercept Core.emit for event logging
     */
    interceptCoreEmit() {
        const originalEmit = Core.emit;

        Core.emit = (eventName, data) => {
            // Log as client-side event (from Core.emit)
            this.logEvent(eventName, data, 'client');
            return originalEmit.call(Core, eventName, data);
        };
    }

    /**
     * Monitor component initialization
     */
    monitorComponentInit() {
        Core.on('component:initialized', (data) => {
            this.refreshComponents();
        });

        Core.on('component:destroyed', (data) => {
            this.refreshComponents();
        });
    }

    /**
     * Monitor network requests
     */
    monitorNetworkRequests() {
        // Intercept fetch
        const originalFetch = window.fetch;

        window.fetch = async (...args) => {
            const startTime = performance.now();
            const url = typeof args[0] === 'string' ? args[0] : args[0].url;
            const method = args[1]?.method || 'GET';

            try {
                const response = await originalFetch(...args);
                const duration = performance.now() - startTime;

                this.networkLog.unshift({
                    timestamp: Date.now(),
                    method,
                    url,
                    status: response.status,
                    duration
                });

                // Keep only last 50 requests
                if (this.networkLog.length > 50) {
                    this.networkLog.pop();
                }

                if (this.activeTab === 'network') {
                    this.renderNetworkLog();
                }

                return response;
            } catch (error) {
                const duration = performance.now() - startTime;

                this.networkLog.unshift({
                    timestamp: Date.now(),
                    method,
                    url,
                    status: 'Error',
                    duration
                });

                throw error;
            }
        };
    }
}

// Auto-initialize if enabled
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
        window.__liveComponentDevTools = new LiveComponentDevTools();
    });
} else {
    window.__liveComponentDevTools = new LiveComponentDevTools();
}