"""
Ritz Debug Console - Self-hosted debug interface written in Ritz itself!

This demonstrates Ritz's capability to build complex interactive UIs with:
- Signal-based state management
- Event handling
- Conditional rendering
- Dynamic content updates

The entire debug console - state, UI, and interactions - is written in Ritz!
"""

from ritz.syntax import *


@external
def js_toggle_debug_console():
    """External JavaScript function to toggle debug console visibility."""
    pass  # Implementation provided by JavaScript runtime


@component
def DebugConsole():
    """
    Self-hosted debug console for Ritz applications.

    Shows runtime information, memory stats, and console commands.
    """
    def toggle():
        """Toggle debug console visibility by calling JavaScript bridge."""
        js_toggle_debug_console()

    # Start hidden - JavaScript will handle toggling via class manipulation
    with Div(class_='ritz-debug hidden', id='ritz-debug'):
        # Header with toggle button
        with Div(class_='debug-header'):
            with H3():
                yield '🎭 Ritz Debug'
            with Button(onclick=toggle):
                yield '×'

        # Status indicator
        with Div(class_='status success', id='status'):
            yield '✅ Main loaded!'

        # Debug content sections
        with Div(class_='debug-content'):
            # Component info
            with Div(class_='debug-section'):
                with H4():
                    yield 'COMPONENT'
                with Pre():
                    yield 'Main.wasm (Multi-Part Switches)'

            # Features section
            with Div(class_='debug-section'):
                with H4():
                    yield 'FEATURES'
                with Pre():
                    yield '✓ Python source to WASM\n'
                    yield '✓ Reactive signals (no vDOM)\n'
                    yield '✓ Conditional CSR (match/case)\n'
                    yield '✓ Event handlers\n'
                    yield '✓ Self-hosted debug console!\n'

            # Runtime stats section
            with Div(class_='debug-section'):
                with H4():
                    yield 'RUNTIME STATS'
                with Pre():
                    yield 'Memory: JavaScript will update\n'
                    yield 'Signals: JavaScript will update\n'
                    yield 'DOM nodes: JavaScript will update\n'

            # Console commands section
            with Div(class_='debug-section'):
                with H4():
                    yield 'CONSOLE COMMANDS'
                with Pre():
                    yield 'ritzRuntime.getLog()\n'
                    yield 'ritzRuntime.nodes.size\n'
                    yield 'ritzInstance.exports\n'

    # Toggle hint (appears on page load)
    with Div(class_='debug-toggle-hint'):
        yield 'Press Ctrl+` to toggle debug'


@component
def RitzMain():
    """Entry point for debug console component."""
    yield DebugConsole()