src/ui/huggingface_ui.py

"""

HuggingFace-style UI Implementation



This module creates a modern, HuggingFace-inspired user interface for the MMORPG

with organized tabs, clean design, and intuitive navigation.

"""

import gradio as gr
from typing import Dict, Any, Optional, List
from ..core.game_engine import GameEngine
from ..facades.game_facade import GameFacade
from ..interfaces.npc_addon import get_registered_addons


class HuggingFaceUI:
    """HuggingFace-style UI manager for the MMORPG application."""
    
    def __init__(self, game_facade: GameFacade):
        self.game_facade = game_facade
        from ..core.game_engine import get_game_engine
        self.game_engine = get_game_engine()
        
        # UI state management
        self.player_state = None
        self.chat_tabs_state = None
        
        # Theme configuration
        self.theme = gr.themes.Soft(
            primary_hue="blue",
            secondary_hue="slate",
            neutral_hue="slate",
            radius_size="md",
            spacing_size="md"
        )
          # Custom CSS for HuggingFace-like styling with enhanced design
        self.custom_css = """

        /* HuggingFace-inspired styling with modern enhancements */

        .main-container {

            max-width: 1400px;

            margin: 0 auto;

            padding: 20px;

        }

        

        .hero-section {

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            color: white;

            padding: 30px;

            border-radius: 12px;

            margin-bottom: 30px;

            text-align: center;

            box-shadow: 0 4px 20px rgba(0,0,0,0.1);

        }

        

        .hero-title {

            font-size: 2.5em;

            font-weight: bold;

            margin-bottom: 10px;

            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

        }

        

        .hero-subtitle {

            font-size: 1.2em;

            opacity: 0.9;

            margin-bottom: 15px;

        }

        

        .hero-features {

            font-size: 1em;

            opacity: 0.8;

        }

        

        .game-panel {

            background: white;

            border-radius: 12px;

            padding: 20px;

            box-shadow: 0 4px 15px rgba(0,0,0,0.1);

            margin-bottom: 20px;

            border: 1px solid #e9ecef;

        }

        

        .stats-card {

            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

            border: 1px solid #dee2e6;

            border-radius: 12px;

            padding: 20px;

            margin: 15px 0;

            box-shadow: 0 2px 10px rgba(0,0,0,0.08);

        }

        

        .movement-grid {

            display: grid;

            grid-template-columns: repeat(3, 60px);

            gap: 12px;

            max-width: 220px;

            margin: 15px auto;

            justify-content: center;

        }

        

        .movement-btn {

            width: 60px;

            height: 60px;

            border-radius: 12px;

            border: 2px solid #007bff;

            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);

            font-size: 18px;

            font-weight: bold;

            cursor: pointer;

            transition: all 0.3s ease;

            display: flex;

            align-items: center;

            justify-content: center;

            box-shadow: 0 2px 8px rgba(0,123,255,0.2);

        }

        

        .movement-btn:hover {

            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);

            color: white;

            transform: translateY(-2px);

            box-shadow: 0 4px 12px rgba(0,123,255,0.4);

        }

        

        .movement-btn:active {

            transform: translateY(0px);

            box-shadow: 0 2px 6px rgba(0,123,255,0.3);

        }

        

        .keyboard-status {

            background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);

            border: 2px solid #4caf50;

            border-radius: 8px;

            padding: 12px;

            margin: 10px 0;

            text-align: center;

            font-weight: bold;

            box-shadow: 0 2px 8px rgba(76,175,80,0.2);

        }

        

        .tab-content {

            padding: 25px;

            min-height: 600px;

            background: #fafafa;

            border-radius: 8px;

        }

        

        .doc-section {

            margin-bottom: 30px;

            padding: 25px;

            border-left: 4px solid #007bff;

            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

            border-radius: 0 12px 12px 0;

            box-shadow: 0 2px 10px rgba(0,0,0,0.05);

        }

        

        .feature-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

            gap: 20px;

            margin: 20px 0;

        }

        

        .feature-card {

            background: white;

            border: 1px solid #e9ecef;

            border-radius: 12px;

            padding: 25px;

            box-shadow: 0 4px 15px rgba(0,0,0,0.08);

            transition: all 0.3s ease;

        }

        

        .feature-card:hover {

            transform: translateY(-5px);

            box-shadow: 0 8px 25px rgba(0,0,0,0.15);

        }

        

        .feature-icon {

            font-size: 2.5em;

            margin-bottom: 15px;

            display: block;

            text-align: center;

        }

        

        .chat-tab {

            background: linear-gradient(135deg, #f5f5f5 0%, #e9ecef 100%);

            border: 2px solid #dee2e6;

            border-radius: 8px;

            padding: 10px 16px;

            margin: 3px;

            cursor: pointer;

            display: inline-flex;

            align-items: center;

            gap: 8px;

            transition: all 0.3s ease;

            font-weight: 500;

        }

        

        .chat-tab.active {

            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);

            border-color: #2196f3;

            color: #1976d2;

            box-shadow: 0 2px 8px rgba(33,150,243,0.3);

        }

        

        .chat-tab:hover {

            background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);

            transform: translateY(-1px);

            box-shadow: 0 2px 8px rgba(0,0,0,0.1);

        }

        

        .npc-addon-panel {

            border: 2px solid #e9ecef;

            border-radius: 12px;

            padding: 20px;

            margin: 15px 0;

            background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);

            box-shadow: 0 2px 10px rgba(0,0,0,0.05);

        }

        

        .plugin-card {

            background: white;

            border: 2px solid #e9ecef;

            border-radius: 12px;

            padding: 20px;

            margin: 15px 0;

            box-shadow: 0 2px 10px rgba(0,0,0,0.08);

            transition: all 0.3s ease;

        }

        

        .plugin-card:hover {

            border-color: #007bff;

            box-shadow: 0 4px 15px rgba(0,123,255,0.15);

        }

        

        .status-indicator {

            display: inline-block;

            width: 12px;

            height: 12px;

            border-radius: 50%;

            margin-right: 8px;

            box-shadow: 0 0 0 2px white, 0 0 0 3px currentColor;

        }

        

        .status-online { 

            background-color: #4caf50;

            animation: pulse-green 2s infinite;

        }

        .status-offline { 

            background-color: #f44336;

        }

        .status-idle { 

            background-color: #ff9800;

        }

        

        @keyframes pulse-green {

            0% { box-shadow: 0 0 0 2px white, 0 0 0 3px #4caf50; }

            50% { box-shadow: 0 0 0 2px white, 0 0 0 6px rgba(76,175,80,0.5); }

            100% { box-shadow: 0 0 0 2px white, 0 0 0 3px #4caf50; }

        }

        

        /* Enhanced buttons */

        .gradio-button {

            border-radius: 8px !important;

            font-weight: 600 !important;

            transition: all 0.3s ease !important;

        }

        

        .gradio-button:hover {

            transform: translateY(-1px) !important;

            box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;

        }

        

        /* Enhanced form controls */

        .gradio-textbox, .gradio-dropdown, .gradio-slider {

            border-radius: 8px !important;

            border: 2px solid #e9ecef !important;

            transition: all 0.3s ease !important;

        }

        

        .gradio-textbox:focus, .gradio-dropdown:focus {

            border-color: #007bff !important;

            box-shadow: 0 0 0 3px rgba(0,123,255,0.1) !important;

        }

        

        /* Responsive design */

        @media (max-width: 768px) {

            .main-container {

                padding: 15px;

            }

            

            .hero-section {

                padding: 20px;

            }

            

            .hero-title {

                font-size: 2em;

            }

            

            .feature-grid {

                grid-template-columns: 1fr;

            }

            

            .movement-grid {

                grid-template-columns: repeat(3, 50px);

                gap: 8px;

            }

            

            .movement-btn {

                width: 50px;

                height: 50px;

                font-size: 16px;

            }

        }

        

        /* Dark mode support */

        @media (prefers-color-scheme: dark) {

            .doc-section {

                background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);

                color: white;

            }

            

            .feature-card {

                background: #2d3748;

                border-color: #4a5568;

                color: white;

            }

            

            .npc-addon-panel, .plugin-card {

                background: #2d3748;

                border-color: #4a5568;

                color: white;

            }

        }

        """
    
    def create_hero_section(self) -> gr.HTML:
        """Create the hero section with branding and overview."""
        hero_html = """

        <div class="hero-section">

            <div class="hero-title">🎮 MMORPG with MCP Integration</div>

            <div class="hero-subtitle">Modern Multiplayer Online Role-Playing Game</div>

            <div class="hero-features">

                🌟 Real-time multiplayer • 🤖 AI agent support • 🔥 Read2Burn messaging • 🔌 MCP add-ons • ⌨️ Keyboard controls

            </div>        </div>        """
        return gr.HTML(hero_html)
    
    def create_keyboard_status(self) -> gr.HTML:
        """Create keyboard status indicator."""
        return gr.HTML(
            
           # value="<div class='keyboard-status' id='keyboard-status'>🎮 Initializing keyboard controls...</div>"
        )
    
    def get_keyboard_script(self) -> str:
        """Get the keyboard control script for injection into <head>."""
        keyboard_js = """

        <script>

        let gameKeyboard = {

            enabled: false,

            buttons: {},



            init: function() {

                // Find movement buttons after DOM loads

                setTimeout(() => {

                    const buttons = document.querySelectorAll('button');

                    buttons.forEach(btn => {

                        const text = btn.textContent.trim();

                        if (text === '↑') this.buttons.up = btn;

                        else if (text === '↓') this.buttons.down = btn;

                        else if (text === '←') this.buttons.left = btn;

                        else if (text === '→') this.buttons.right = btn;

                        else if (text === '⚔️' || text.includes('Action')) this.buttons.action = btn;

                    });

                    console.log('🎮 Game keyboard initialized');

                    this.enabled = true;

                }, 1000);

            },



            handleKey: function(event) {

                if (!this.enabled) return;



                // Only capture keys when not typing in inputs

                if (event.target.tagName.toLowerCase() === 'input' ||

                    event.target.tagName.toLowerCase() === 'textarea') {

                    return;

                }



                let button = null;



                switch(event.code) {

                    case 'ArrowUp':

                    case 'KeyW':

                        button = this.buttons.up;

                        break;

                    case 'ArrowDown':

                    case 'KeyS':

                        button = this.buttons.down;

                        break;

                    case 'ArrowLeft':

                    case 'KeyA':

                        button = this.buttons.left;

                        break;

                    case 'ArrowRight':

                    case 'KeyD':

                        button = this.buttons.right;

                        break;

                    case 'Space':

                        button = this.buttons.action;

                        break;

                }



                if (button) {

                    event.preventDefault();

                    button.click();

                    console.log('🎯 Key pressed:', event.code);

                }

            }

        };



        // Initialize when page loads

        document.addEventListener('DOMContentLoaded', () => gameKeyboard.init());



        // Add keyboard listener

        document.addEventListener('keydown', (e) => gameKeyboard.handleKey(e));

        

        // Reinitialize when Gradio updates (for dynamic content)

        setInterval(() => {

            if (!gameKeyboard.enabled) {

                gameKeyboard.init();

            }

        }, 2000);

        </script>

        """
        return keyboard_js
    
    def create_movement_controls(self) -> tuple:
        """Create enhanced movement control buttons."""
        with gr.Group():
            gr.Markdown("### 🕹️ Movement Controls")
            gr.Markdown("**Keyboard:** WASD or Arrow Keys | **Mouse:** Click buttons below")
            
            with gr.Row():
                gr.HTML("")
                move_up = gr.Button("↑", size="lg", elem_classes=["movement-btn"])
                gr.HTML("")
            with gr.Row():
                move_left = gr.Button("←", size="lg", elem_classes=["movement-btn"])
                action_btn = gr.Button("⚔️", size="lg", elem_classes=["movement-btn"], variant="secondary")
                move_right = gr.Button("→", size="lg", elem_classes=["movement-btn"])
            with gr.Row():
                gr.HTML("")
                move_down = gr.Button("↓", size="lg", elem_classes=["movement-btn"])
                gr.HTML("")
        
        return move_up, move_down, move_left, move_right, action_btn
    
    def create_player_stats_panel(self) -> gr.JSON:
        """Create player statistics display panel."""
        return gr.JSON(
            label="🧝‍♂️ Player Stats",
            value={"status": "Not connected", "info": "Join the game to see your stats"},
            elem_classes=["stats-card"]
        )
    
    def create_online_players_panel(self) -> gr.Dataframe:
        """Create online players display panel."""
        return gr.Dataframe(
            headers=["Name", "Type", "Level"],
            label="👥 Online Players",
            elem_classes=["stats-card"]
        )
    
    def create_game_world_view(self) -> gr.HTML:
        """Create the game world visualization."""
        return gr.HTML(
            value=self._generate_world_html(),
            label="🌍 Game World"
        )
    
    def create_chat_system(self) -> tuple:
        """Create the enhanced chat system with tabs."""
        # Public chat
        chat_display = gr.Chatbot(
            label="💬 Game Chat",
            height=300,
            type='messages',
            value=[{"role": "assistant", "content": "Welcome! Join the game to start chatting!"}],
            elem_classes=["game-panel"]
        )
        
        with gr.Row():
            chat_input = gr.Textbox(
                placeholder="Type your message... (use /help for commands)",
                scale=4,
                container=False
            )
            chat_send = gr.Button("Send", scale=1, variant="primary")
        
        # Private chat system
        with gr.Group():
            gr.Markdown("### 🔒 Private Messaging")
            
            proximity_info = gr.HTML(
                value="<div style='text-align: center; color: #666;'>🔍 Move near NPCs or players to chat privately</div>",
                label="📱 Nearby Entities"
            )
            
            with gr.Group(visible=False) as private_chat_group:
                nearby_entities = gr.Dropdown(
                    label="💬 Start new chat with",
                    choices=[],
                    interactive=True
                )
                
                with gr.Row():
                    start_chat_btn = gr.Button("Start Chat", variant="primary", scale=1)
                    clear_all_tabs_btn = gr.Button("Clear All", variant="secondary", scale=1)
                
                # Chat tabs display
                chat_tabs_state = gr.State({})
                active_tabs_display = gr.HTML(
                    value="<div class='chat-tab'>No active chats</div>",
                    label="Active Chats"
                )
                
                # Current chat display
                current_chat_display = gr.Chatbot(
                    label="🔒 Private Messages",
                    height=200,
                    type='messages',
                    value=[],
                    visible=False
                )
                
                with gr.Row(visible=False) as chat_input_row:
                    private_message_input = gr.Textbox(
                        placeholder="Type private message...",
                        scale=4,
                        container=False
                    )
                    private_send_btn = gr.Button("Send", scale=1, variant="secondary")
        
        return (chat_display, chat_input, chat_send, proximity_info, private_chat_group,
                nearby_entities, start_chat_btn, clear_all_tabs_btn, chat_tabs_state,
                active_tabs_display, current_chat_display, chat_input_row,
                private_message_input, private_send_btn)
    
    def create_world_events_panel(self) -> gr.Textbox:
        """Create world events display panel."""
        return gr.Textbox(
            label="🌍 World Events & NPC Interactions",
            lines=4,
            interactive=False,
            placeholder="World events will appear here...\n\n💡 Tip: Walk near NPCs (📮🏪🌤️) to interact with them!\nThen visit the 'NPC Add-ons' tab to use their features.",
            elem_classes=["game-panel"]
        )
    
    def _generate_world_html(self, width: int = 800, height: int = 600) -> str:
        """Generate HTML for the game world visualization with enhanced tooltips."""
        # Enhanced game world with tree collision detection
        # Dynamically generate NPCs from GameFacade with enhanced tooltips from addons
        npc_html = ""
        for npc in self.game_facade.get_all_npcs().values():
            try:
                # Get rich tooltip information from addon system
                tooltip_info = self._get_npc_tooltip_info(npc)
                
                # Ensure tooltip_info is a string
                if not isinstance(tooltip_info, str):
                    print(f"[UI] Warning: tooltip_info for {npc.get('name', 'Unknown')} is {type(tooltip_info)}: {tooltip_info}")
                    tooltip_info = str(tooltip_info)
                
                # Escape any HTML characters in tooltip
                tooltip_info = tooltip_info.replace('"', '&quot;').replace("'", '&#39;')
                
                npc_html += f"""

                <div style="position: absolute; left: {npc['x']}px; top: {npc['y']}px; text-align: center;" 

                     title="{tooltip_info}"

                     class="npc-hover-element">

                    <div style="font-size: 25px; line-height: 1;">{npc['char']}</div>

                    <div style="font-size: 7px; font-weight: bold; color: #333; background: rgba(255,255,255,0.8); 

                               padding: 1px 3px; border-radius: 3px; margin-top: 2px; white-space: nowrap;">{npc['name']}</div>

                </div>"""
            except Exception as npc_e:
                print(f"[UI] Error generating HTML for NPC {npc.get('name', 'Unknown')}: {npc_e}")
                print(f"[UI] NPC data: {npc}")
                # Add a basic NPC without tooltip
                npc_html += f"""

                <div style="position: absolute; left: {npc['x']}px; top: {npc['y']}px; text-align: center;" 

                     title="Interactive NPC"

                     class="npc-hover-element">

                    <div style="font-size: 25px; line-height: 1;">{npc['char']}</div>

                    <div style="font-size: 7px; font-weight: bold; color: #333; background: rgba(255,255,255,0.8); 

                               padding: 1px 3px; border-radius: 3px; margin-top: 2px; white-space: nowrap;">{npc['name']}</div>

                </div>"""
          # Generate player tooltips with enhanced information
        players_html = ""
        try:
            players = self.game_facade.get_all_players()
            for player_id, player in players.items():
                try:
                    player_tooltip = self._get_player_tooltip_info(player)
                    
                    # Ensure player_tooltip is a string
                    if not isinstance(player_tooltip, str):
                        print(f"[UI] Warning: player_tooltip for {player.name} is {type(player_tooltip)}: {player_tooltip}")
                        player_tooltip = str(player_tooltip)
                    
                    # Escape any HTML characters in tooltip
                    player_tooltip = player_tooltip.replace('"', '&quot;').replace("'", '&#39;')
                    
                    players_html += f"""

                    <div style="position: absolute; left: {player.x}px; top: {player.y}px; 

                               font-size: 20px; z-index: 10; border: 2px solid yellow; border-radius: 50%;

                               text-shadow: 2px 2px 4px rgba(0,0,0,0.5);" 

                         title="{player_tooltip}"

                         class="player-hover-element">

                        🧑‍🦰

                    </div>

                      <div style="position: absolute; left: {player.x - 15}px; top: {player.y - 15}px;

                               background: rgba(255,215,0,0.9); color: black; padding: 1px 4px;

                           border-radius: 3px; font-size: 8px; font-weight: bold; z-index: 11;">

                    {player.name} (Lv.{player.level})

                </div>"""
                except Exception as player_e:
                    print(f"[UI] Error generating player tooltip for {player.name}: {player_e}")
                    # Add basic player without tooltip
                    players_html += f"""

                    <div style="position: absolute; left: {player.x}px; top: {player.y}px; 

                               font-size: 20px; z-index: 10; border: 2px solid yellow; border-radius: 50%;

                               text-shadow: 2px 2px 4px rgba(0,0,0,0.5);" 

                         title="Player: {player.name}"

                         class="player-hover-element">

                        🧑‍🦰

                    </div>

                    

                    <div style="position: absolute; left: {player.x - 15}px; top: {player.y - 15}px;

                               background: rgba(255,215,0,0.9); color: black; padding: 1px 4px;

                           border-radius: 3px; font-size: 8px; font-weight: bold; z-index: 11;">

                    {player.name} (Lv.{player.level})

                </div>"""
        except Exception as e:
            print(f"[UI] Error generating player tooltips: {e}")
        
        # Base world template with enhanced tooltip styling
        world_html = f"""

        <div style="position: relative; width: {width}px; height: {height}px; 

                    border: 3px solid #333; border-radius: 12px; 

                    background: linear-gradient(45deg, #4CAF50 0%, #8BC34A 50%, #4CAF50 100%); 

                    margin: 20px auto; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">

            

            <!-- Trees for collision detection -->

            <div style="position: absolute; left: 150px; top: 100px; font-size: 30px;" title="Ancient Oak - Blocks movement">🌳</div>

            <div style="position: absolute; left: 300px; top: 200px; font-size: 30px;" title="Forest Pine - Collision object">🌳</div>

            <div style="position: absolute; left: 500px; top: 150px; font-size: 30px;" title="Mystical Tree - Impassable">🌳</div>

            <div style="position: absolute; left: 650px; top: 300px; font-size: 30px;" title="Old Growth Tree - Blocks path">🌳</div>

            <div style="position: absolute; left: 200px; top: 400px; font-size: 30px;" title="Willow Tree - Natural barrier">🌳</div>

            <div style="position: absolute; left: 450px; top: 450px; font-size: 30px;" title="Sacred Grove Tree - Protected">🌳</div>

            <div style="position: absolute; left: 600px; top: 500px; font-size: 30px;" title="Elder Tree - Wise and immovable">🌳</div>

            

            <!-- NPCs with enhanced tooltips -->

            {npc_html}

            

            <!-- Decorative elements with tooltips -->

            <div style="position: absolute; left: 50px; top: 50px; font-size: 20px;" title="Northern Mountains - Unexplored peaks">🏔️</div>

            <div style="position: absolute; right: 50px; top: 50px; font-size: 20px;" title="Eastern Peaks - Dragon territory">🏔️</div>

            <div style="position: absolute; left: 50px; bottom: 50px; font-size: 20px;" title="Western Waters - Crystal clear lakes">🌊</div>

            <div style="position: absolute; right: 50px; bottom: 50px; font-size: 20px;" title="Southern Seas - Endless horizon">🌊</div>

            

            <!-- Players will be dynamically added here -->

            <div id="players-container">

                {players_html}

            </div>

              <!-- Enhanced tooltip styling -->

            <style>

                .npc-hover-element, .player-hover-element {{

                    cursor: pointer;

                    transition: transform 0.2s ease;

                }}

                .npc-hover-element:hover, .player-hover-element:hover {{

                    transform: scale(1.1);

                    z-index: 100;

                }}

                

                /* Enhanced tooltip styling */

                [title] {{

                    position: relative;

                }}

                

                /* Custom tooltip appearance - wider and more readable */

                div[title]:hover::after {{

                    content: attr(title);

                    position: absolute;

                    bottom: 100%;

                    left: 50%;

                    transform: translateX(-50%);

                    background: rgba(0, 0, 0, 0.9);

                    color: white;

                    padding: 12px 16px;

                    border-radius: 8px;

                    font-size: 14px;

                    white-space: pre-line;

                    min-width: 200px;

                    max-width: 400px;

                    z-index: 1000;

                    box-shadow: 0 4px 12px rgba(0,0,0,0.3);

                    border: 1px solid #555;

                    text-align: center;

                    line-height: 1.4;

                }}

            </style>

              <div style="position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.9); 

                        padding: 10px; border-radius: 8px; font-size: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">

                🌍 <strong>Fantasy Realm</strong> |

                Players: {len(players) if 'players' in locals() else 0}/20 |

                Hover over NPCs and players for information

                <br>

                🧑‍🦰 Players | 📮🏪🚶🧙🌤️ NPCs | 🌳 Trees 

             </div>        </div>

        """
        return world_html
    
    def _get_npc_tooltip_info(self, npc: dict) -> str:
        """Generate simple tooltip information for an NPC from addon data."""
        try:
            # Get addon information if available
            from ..interfaces.npc_addon import get_registered_addons
            registered_addons = get_registered_addons()
            
            # Try to find matching addon
            addon = None
            npc_id = npc.get('id', '')
              # Search for addon by NPC ID or name matching
            for addon_id, registered_addon in registered_addons.items():
                if hasattr(registered_addon, 'npc_config') and registered_addon.npc_config:
                    try:
                        npc_config = registered_addon.npc_config
                        if isinstance(npc_config, dict):
                            addon_npc_id = npc_config.get('id', '')
                            # Ensure both values are strings before comparison
                            if isinstance(addon_npc_id, str) and isinstance(npc_id, str):
                                if addon_npc_id == npc_id or addon_npc_id in npc_id:
                                    addon = registered_addon
                                    break
                    except Exception as config_e:
                        print(f"[UI] Error accessing npc_config for {addon_id}: {config_e}")
                        continue
            
            # Use description from addon's npc_config if available
            if addon and hasattr(addon, 'npc_config') and addon.npc_config:
                description = addon.npc_config.get('description', '')
                if description:
                    return description
            
            # Fallback to basic NPC description
            return npc.get('description', f"{npc['name']} - Interactive NPC")
            
        except Exception as e:
            print(f"[UI] Error generating NPC tooltip for {npc.get('name', 'Unknown')}: {e}")
            return f"{npc['name']} - Interactive NPC"
    
    def _get_player_tooltip_info(self, player) -> str:
        """Generate rich tooltip information for a player."""
        try:
            tooltip = f"👤 {player.name}\n"
            tooltip += f"⭐ Level: {player.level}\n"
            tooltip += f"❤️ Health: {player.hp}/{player.max_hp}\n"
            tooltip += f"💰 Gold: {getattr(player, 'gold', 0)}\n"
            tooltip += f"🎯 XP: {player.experience}\n"
            tooltip += f"📍 Position: ({player.x}, {player.y})\n"
            
            # Add status information
            if hasattr(player, 'last_active'):
                import time
                time_diff = time.time() - player.last_active
                if time_diff < 30:
                    tooltip += "🟢 Status: Active"
                elif time_diff < 300:
                    tooltip += "🟡 Status: Away"
                else:
                    tooltip += "🔴 Status: Idle"
            
            tooltip += "\n\n💬 Walk near to start private chat"
            
            return tooltip
            
        except Exception as e:
            print(f"[UI] Error generating player tooltip: {e}")
            return f"{getattr(player, 'name', 'Player')}\n💬 Interactive player - Walk near to chat"
    
    def create_interface(self) -> gr.Blocks:
        """Create the complete HuggingFace-style interface."""
        
        with gr.Blocks(
            title="🎮 MMORPG with MCP Integration",
            theme=self.theme,
            css=self.custom_css
        ) as interface:
            
            # Hero section
            self.create_hero_section()
            
            # Keyboard status
            keyboard_status = self.create_keyboard_status()
            
            # Player state management
            self.player_state = gr.State({})
            
            with gr.Tabs():
                # Main Game Tab
                with gr.Tab("🌍 Game World", elem_classes=["tab-content"]):
                    with gr.Row():
                        with gr.Column(scale=2):
                            # Player registration
                            with gr.Group():
                                gr.Markdown("### 🎮 Join the Adventure")
                                with gr.Row():
                                    player_name = gr.Textbox(
                                        label="Player Name",
                                        placeholder="Enter your character name",
                                        scale=3
                                    )
                                    join_btn = gr.Button("Join Game", variant="primary", scale=1)
                                    leave_btn = gr.Button("Leave Game", variant="secondary", scale=1)
                            
                            # Enhanced controls info
                            gr.Markdown("""

                            ### ⌨️ Enhanced Controls

                            **Mouse:** Click movement buttons below  

                            **Keyboard:** Use **WASD** or **Arrow Keys** for movement  

                            **Action:** **Spacebar** for special action  

                            💡 *Keyboard controls automatically activate when buttons are ready*

                            """)
                            
                            # Game world view with bigger map
                            game_view = self.create_game_world_view()
                            
                            # Enhanced movement controls
                            move_up, move_down, move_left, move_right, action_btn = self.create_movement_controls()
                        
                        with gr.Column(scale=1):
                            # Player stats
                            player_info = self.create_player_stats_panel()
                            
                            # Online players
                            online_players = self.create_online_players_panel()
                            
                            # World events
                            world_events = self.create_world_events_panel()
                    
                    # Enhanced chat system
                    chat_components = self.create_chat_system()
                    (chat_display, chat_input, chat_send, proximity_info, private_chat_group,
                     nearby_entities, start_chat_btn, clear_all_tabs_btn, chat_tabs_state,
                     active_tabs_display, current_chat_display, chat_input_row,
                     private_message_input, private_send_btn) = chat_components
                
                # Documentation Tab
                with gr.Tab("📚 Documentation", elem_classes=["tab-content"]):
                    self._create_documentation_content()
                
                # NPC Add-ons Tab
                with gr.Tab("🤖 NPC Add-ons", elem_classes=["tab-content"]):
                    self._create_npc_addons_content()
                
                # Plugin System Tab
                with gr.Tab("🔌 Plugin System", elem_classes=["tab-content"]):
                    self._create_plugin_system_content()
                
                # MCP Integration Tab
                with gr.Tab("🔗 MCP Integration", elem_classes=["tab-content"]):
                    self._create_mcp_integration_content()
                
                # Architecture Tab                with gr.Tab("🏗️ Architecture", elem_classes=["tab-content"]):
                    self._create_architecture_content()
            
            # Event handlers will be wired up by the InterfaceManager
            
        return interface
    
    def _create_documentation_content(self) -> None:
        """Create comprehensive documentation content."""
        gr.Markdown("""

        <div class="doc-section">

        

        # 📚 MMORPG Documentation

        

        Welcome to the comprehensive guide for our modern MMORPG with MCP integration!

        

        </div>

        """)
        
        with gr.Tabs():
            with gr.Tab("🚀 Quick Start"):
                gr.Markdown("""

                ## 🚀 Quick Start Guide

                

                ### Getting Started

                1. **Join the Game**: Enter your character name and click "Join Game"

                2. **Move Around**: Use WASD keys or arrow keys to move your character

                3. **Interact**: Walk near NPCs (📮🏪🌤️) to interact with them

                4. **Chat**: Use the chat system to communicate with other players

                5. **Explore**: Check out the NPC Add-ons tab for special features

                

                ### Basic Controls

                - **Movement**: WASD or Arrow Keys

                - **Action**: Spacebar

                - **Chat**: Type in the chat box and press Enter

                - **Private Messages**: Move near players/NPCs and use the private chat system

                

                ### Game Features

                - **Real-time Multiplayer**: Up to 20 players can join simultaneously

                - **AI Agent Support**: AI agents can connect via MCP protocol

                - **NPC Interactions**: Each NPC has unique features and personalities

                - **Plugin System**: Extensible architecture for custom add-ons

                - **Tree Collision**: Navigate around trees in the expanded world

                """)
            
            with gr.Tab("🎮 Game Mechanics"):
                gr.Markdown("""

                ## 🎮 Game Mechanics

                

                ### Player System

                - **Health Points (HP)**: Start with 100 HP, maximum 100 HP

                - **Experience Points**: Gain XP through interactions and activities

                - **Leveling**: Level up as you gain experience

                - **Gold**: Virtual currency for trading with NPCs

                

                ### World Interaction

                - **NPC Proximity**: Walk within range of NPCs to interact

                - **Collision Detection**: Trees and obstacles block movement

                - **Chat System**: Public and private messaging

                - **Real-time Updates**: All actions update in real-time

                

                ### NPCs Available

                - **📮 Secure Mailbox**: Read2Burn messaging system

                - **🏪 Donald the Trader**: Nice trading NPC with funny responses

                - **🚶 Roaming Rick**: Moving NPC that wanders the world

                - **🧙 Ancient Sage**: Mystical NPC with wisdom and magic

                - **🌤️ Weather Oracle**: MCP-powered weather information

                """)
            
            with gr.Tab("💬 Chat System"):
                gr.Markdown("""

                ## 💬 Advanced Chat System

                

                ### Public Chat

                - Visible to all players in the game

                - Supports emojis and basic formatting

                - Command system with /help for available commands

                

                ### Private Messaging

                - **Tab-based Interface**: Multiple simultaneous conversations

                - **Proximity-based**: Start chats with nearby players/NPCs

                - **Pin/Unpin Tabs**: Keep important conversations open

                - **Auto-refresh**: Real-time message updates

                

                ### Chat Commands

                - `/help` - Show available commands

                - `/players` - List online players

                - `/stats` - Show your character stats

                - `/clear` - Clear chat history

                - `/whisper <player> <message>` - Send private message

                

                ### Chat Features

                - **Message History**: Persistent chat history per conversation

                - **Unread Indicators**: Visual badges for new messages

                - **Emoji Support**: Full emoji support in messages

                - **Timestamps**: All messages include timestamps

                """)
            
            with gr.Tab("🔧 Technical"):
                gr.Markdown("""

                ## 🔧 Technical Details

                

                ### Architecture

                - **Clean Architecture**: Separation of concerns with interfaces, services, and facades

                - **Domain Models**: Core game entities (Player, GameWorld)

                - **Service Layer**: Business logic separated into focused services

                - **Facade Pattern**: Simplified interface for complex operations

                

                ### Technologies Used

                - **Frontend**: Gradio with custom HuggingFace-style UI

                - **Backend**: Python with asyncio for real-time features

                - **MCP Integration**: Model Context Protocol for AI agent connectivity

                - **Plugin System**: Hot-reloadable plugin architecture

                

                ### Performance Features

                - **Thread Safety**: Proper locking mechanisms throughout                - **Efficient Updates**: Optimized real-time data synchronization

                - **Memory Management**: Careful resource management for long-running sessions

                - **Error Handling**: Comprehensive exception handling and recovery

                """)
    
    def _create_npc_addons_content(self) -> None:
        """Create NPC add-ons content."""
        gr.Markdown("""

        <div class="doc-section">

        

        # 🤖 NPC Add-ons System

        

        Each NPC in the game has unique functionality through our extensible add-on system.

        Walk near NPCs in the game world to unlock their features!

        

        </div>

        """)
        
        with gr.Tabs():
            # Auto-discover and create tabs for registered addons
            self._create_dynamic_addon_tabs()
            
            # Legacy static tabs for backward compatibility
            with gr.Tab("🔥 Read2Burn Mailbox"):
                gr.Markdown("""

                ## 🔥 Secure Read2Burn Messaging

                

                The Read2Burn Mailbox provides secure, self-destructing messaging between players.

                

                ### Features

                - **Self-Destructing Messages**: Messages automatically delete after reading

                - **Secure Delivery**: End-to-end message protection

                - **Anonymous Options**: Send messages without revealing identity

                - **Time-based Expiry**: Messages expire after set time limits

                

                ### How to Use

                1. Walk near the 📮 Secure Mailbox NPC

                2. Visit this NPC Add-ons tab

                3. Select the Read2Burn tab

                4. Compose and send secure messages

                

                *Note: This feature requires proximity to the Secure Mailbox NPC*

                """)
                  # Read2Burn interface
                self._create_read2burn_interface()
            
            with gr.Tab("🏪 Donald the Trader"):
                gr.Markdown("""

                ## 🏪 Donald the Trader

                

                Meet Donald, our charismatic trader with a unique personality and the best deals!

                

                ### Personality

                Donald speaks in a distinctive style with phrases like:

                - "Listen, I make the best deals. Nobody makes deals like me, believe me!"

                - "You're looking at tremendous value here. Tremendous!"

                - "This item? Fantastic. The best. Everyone says so."

                

                ### Trading Features

                - **Unique Items**: Exclusive merchandise with "tremendous" quality

                - **Negotiation**: Engage in deal making deal-making

                - **Special Offers**: Limited-time deals with signature flair

                - **Personality Responses**: Context-aware, entertaining interactions

                

                ### How to Interact

                1. Walk near the 🏪 Donald the Trader NPC

                2. Start a private chat or use the public chat

                3. Mention trading, deals, or items to trigger responses

                4. Enjoy the unique personality and humor!

                """)
            
            with gr.Tab("🌤️ Weather Oracle"):
                gr.Markdown("""

                ## 🌤️ Weather Oracle (MCP)

                

                The Weather Oracle demonstrates MCP (Model Context Protocol) integration.

                

                ### MCP Features

                - **External Service**: Connects to external weather APIs

                - **Real-time Data**: Live weather information

                - **Protocol Demo**: Shows MCP integration capabilities

                - **Extensible**: Template for other MCP services

                

                ### Available Commands

                - Weather forecasts for any location

                - Current conditions and alerts

                - Historical weather data

                - Climate information

                

                *Note: This is a demonstration of MCP protocol integration*

                """)
            
            with gr.Tab("🏪 Example Merchant"):
                # Get the example merchant addon interface
                try:
                    from ..addons.example_npc_addon import ExampleNPCAddon
                    example_addon = ExampleNPCAddon()
                    example_addon.get_interface()
                except Exception as e:
                    gr.Markdown(f"""

                    ## 🏪 Example Merchant

                    

                    *Interface temporarily unavailable: {str(e)}*

                    

                    Please check that the Example Merchant addon is properly installed.

                    """)
        
        gr.Markdown("""

        ### 🛠️ Add-on Development

        

        Want to create your own NPC add-on? Check out the Plugin System tab for development guidelines!        """)
    
    def _create_dynamic_addon_tabs(self):
        """Create tabs for all registered addons that have ui_tab_name."""
        try:
            # Get registered addons from the global registry
            registered_addons = get_registered_addons()
            
            for addon_id, addon in registered_addons.items():
                # Check if addon wants a UI tab
                if hasattr(addon, 'ui_tab_name') and addon.ui_tab_name:
                    try:
                        with gr.Tab(f"{addon.ui_tab_name}"):
                            # Create a header with addon info
                            gr.Markdown(f"""

                            ## {addon.addon_name}

                            

                            *Self-contained addon with auto-registration*

                            

                            **Addon ID:** `{addon.addon_id}`  

                            **NPC Location:** {f"({addon.npc_config['x']}, {addon.npc_config['y']})" if addon.npc_config else "No NPC"}

                            

                            ---

                            """)
                            
                            # Render the addon's interface
                            addon.get_interface()
                            
                    except Exception as e:
                        # Create error tab for broken addons
                        with gr.Tab(f"❌ {addon.ui_tab_name}"):
                            gr.Markdown(f"""

                            ## ❌ {addon.addon_name}

                            

                            *This addon interface failed to load*

                            

                            **Error:** {str(e)}

                            **Addon ID:** `{addon.addon_id}`

                            

                            Please check the addon configuration and try restarting the server.

                            """)
                            
        except Exception as e:
            print(f"[UI] Error creating dynamic addon tabs: {e}")
            # Fallback: create a single tab explaining the issue
            with gr.Tab("⚠️ Addon System"):
                gr.Markdown(f"""

                ## ⚠️ Addon System Error

                

                Failed to load registered addons: {str(e)}

                

                Please check that the game engine is running and addons are properly registered.

                """)
    
    
    def _create_plugin_system_content(self) -> None:
        """Create plugin system documentation."""
        gr.Markdown("""

        <div class="doc-section">

        

        # 🔌 Plugin System Architecture

        

        Our game features a sophisticated plugin system that allows for easy extension and customization.

        Plugins are automatically discovered and can be hot-reloaded without restarting the server.

        

        </div>

        """)
        
        with gr.Tabs():
            with gr.Tab("📋 Overview"):
                gr.Markdown("""

                ## 🔌 Plugin System Overview

                

                ### Key Features

                - **Hot Reload**: Load/unload plugins without restarting

                - **Dependency Management**: Automatic dependency resolution

                - **Event System**: Plugin communication through events

                - **Type Safety**: Full interface-based architecture

                - **Error Handling**: Robust error recovery and logging

                

                ### Plugin Types

                1. **Game Plugins**: Extend core game functionality

                2. **NPC Plugins**: Add new NPC behaviors and interactions

                3. **UI Plugins**: Custom user interface components

                4. **Service Plugins**: External service integrations

                5. **Tool Plugins**: Development and administrative tools

                

                ### Plugin Directory Structure

                ```

                plugins/

                ├── my_plugin.py              # Single-file plugin

                ├── complex_plugin/           # Multi-file plugin

                │   ├── __init__.py

                │   ├── plugin.py

                │   ├── config.json

                │   └── assets/

                └── examples/                 # Example plugins

                    ├── hello_world.py

                    ├── custom_npc.py

                    └── weather_service.py

                ```

                """)
            
            with gr.Tab("💻 Development"):
                gr.Markdown("""

                ## 💻 Plugin Development Guide

                

                ### Simple Plugin Example

                ```python

                from src.interfaces.plugin_interfaces import IGamePlugin, PluginMetadata

                

                class HelloWorldPlugin(IGamePlugin):

                    @property

                    def metadata(self) -> PluginMetadata:

                        return PluginMetadata(

                            name="Hello World",

                            version="1.0.0",

                            description="A simple greeting plugin",

                            author="Your Name"

                        )

                    

                    def initialize(self) -> bool:

                        print("Hello, World!")

                        return True

                    

                    def cleanup(self) -> bool:

                        print("Goodbye, World!")

                        return True

                

                # Plugin instance

                plugin = HelloWorldPlugin()

                ```

                

                ### NPC Plugin Example

                ```python

                from src.interfaces.plugin_interfaces import INPCPlugin

                

                class CustomNPCPlugin(INPCPlugin):

                    @property

                    def npc_id(self) -> str:

                        return "custom_trader"

                    

                    def handle_interaction(self, player_id: str, message: str) -> str:

                        return f"Hello {player_id}! You said: {message}"

                    

                    def get_npc_data(self) -> dict:

                        return {

                            "name": "Custom Trader",

                            "position": {"x": 100, "y": 100},

                            "sprite": "🛒"

                        }

                ```

                

                ### Installation

                1. Create your plugin file in the `plugins/` directory

                2. The plugin will be automatically discovered

                3. Check the Plugin Manager for status

                4. Use hot-reload to activate without restart

                """)
            
            with gr.Tab("🔧 Plugin Manager"):
                gr.Markdown("## 🔧 Plugin Management Interface")
                
                # Plugin status display
                gr.HTML("""

                <div class="feature-grid">

                    <div class="plugin-card">

                        <h4>📂 Plugin Discovery</h4>

                        <p>Automatically scans the plugins/ directory for new plugins</p>

                        <div class="status-indicator status-online"></div> Active

                    </div>

                    <div class="plugin-card">

                        <h4>🔄 Hot Reload</h4>

                        <p>Load and unload plugins without server restart</p>

                        <div class="status-indicator status-online"></div> Available

                    </div>

                    <div class="plugin-card">

                        <h4>📊 Dependency Management</h4>

                        <p>Automatic dependency resolution and loading order</p>

                        <div class="status-indicator status-online"></div> Active

                    </div>

                    <div class="plugin-card">

                        <h4>⚠️ Error Handling</h4>

                        <p>Robust error recovery and detailed logging</p>

                        <div class="status-indicator status-online"></div> Active

                    </div>

                </div>

                """)
                
                # Plugin actions
                with gr.Row():
                    refresh_plugins_btn = gr.Button("🔄 Refresh Plugins", variant="primary")
                    reload_all_btn = gr.Button("🔄 Reload All", variant="secondary")
                
                plugin_status = gr.JSON(
                    label="Plugin Status",
                    value={
                        "total_plugins": 0,
                        "active_plugins": 0,
                        "failed_plugins": 0,
                        "last_scan": "Never"
                    }
                )
    
    def _create_mcp_integration_content(self) -> None:
        """Create MCP integration documentation."""
        gr.Markdown("""

        <div class="doc-section">

        

        # 🔗 MCP Integration

        

        Model Context Protocol (MCP) integration allows AI agents to connect and interact with the game world.

        

        </div>

        """)
        
        with gr.Tabs():
            with gr.Tab("📡 Server Status"):
                gr.Markdown("## 📡 MCP Server Status")
                
                mcp_status = gr.JSON(
                    label="Server Information",
                    value={
                        "server_status": "🟢 Active",
                        "server_url": "This Gradio app serves as MCP server",
                        "tools_available": [
                            "register_ai_agent",
                            "move_agent", 
                            "send_chat",
                            "get_game_state",
                            "interact_with_npc"
                        ],
                        "active_ai_agents": 0,
                        "total_players": 0
                    }
                )
            
            with gr.Tab("🧪 AI Agent Testing"):
                self._create_ai_testing_tab()

    def _create_ai_testing_tab(self):
        """Create enhanced AI testing tab."""
        gr.Markdown("## 🧪 Test AI Agent Integration")
        gr.Markdown("*Use this to simulate AI agent connections for testing*")
        
        with gr.Row():
            ai_name = gr.Textbox(
                label="AI Agent Name",
                placeholder="Claude the Explorer",
                scale=3
            )
            register_ai_btn = gr.Button("Register AI Agent", variant="primary", scale=1)
        
        with gr.Row():
            ai_action = gr.Dropdown(
                choices=["move up", "move down", "move left", "move right", "chat"],
                label="AI Action",
                scale=2
            )
            ai_message = gr.Textbox(
                label="AI Message (for chat)",
                placeholder="Hello humans!",
                scale=3
            )
        
        execute_ai_btn = gr.Button("Execute AI Action", variant="secondary")
        ai_result = gr.Textbox(label="AI Action Result", interactive=False, lines=5)
        
        # Raw Data Testing Section
        gr.Markdown("### 🧪 Test Raw Data Access")
        gr.Markdown("*Test accessing comprehensive world data without HTML parsing*")
        
        with gr.Row():
            test_raw_data_btn = gr.Button("Get Raw World Data", variant="secondary")
            test_available_npcs_btn = gr.Button("Get Available NPCs", variant="secondary")
        
        raw_data_result = gr.JSON(label="Raw Data Output", visible=True)
        
        # Wire up handlers (simplified versions of original handlers)
        register_ai_btn.click(
            self._handle_register_ai_agent,
            inputs=[ai_name],
            outputs=[ai_result]
        )
        
        execute_ai_btn.click(
            self._handle_execute_ai_action,
            inputs=[ai_action, ai_message],
            outputs=[ai_result]
        )
        
        test_raw_data_btn.click(
            self._handle_test_raw_world_data,
            inputs=[],
            outputs=[raw_data_result]
        )
        
        test_available_npcs_btn.click(
            self._handle_test_available_npcs,
            inputs=[],
            outputs=[raw_data_result]
        )
      # =================================================================

    
    def _handle_register_ai_agent(self, ai_name: str) -> str:
        """Handle AI agent registration."""
        if not ai_name or not ai_name.strip():
            return "❌ Please enter a valid AI agent name"
        
        try:
            agent_id = f"test_agent_{uuid.uuid4().hex[:8]}"
            result = self.game_facade.register_ai_agent(agent_id, ai_name.strip())
            
            if result:
                if not hasattr(self, 'registered_agents'):
                    self.registered_agents = {}
                self.registered_agents[agent_id] = ai_name.strip()
                return f"✅ AI agent '{ai_name.strip()}' registered successfully!\nAgent ID: {agent_id}"
            else:
                return f"❌ Failed to register AI agent '{ai_name.strip()}'"
        except Exception as e:
            return f"❌ Error registering AI agent: {str(e)}"
    
    def _handle_execute_ai_action(self, action: str, message: str) -> str:
        """Handle AI agent action execution."""
        if not hasattr(self, 'registered_agents') or not self.registered_agents:
            return "❌ No AI agents registered. Please register an AI agent first!"
        
        if not action:
            return "❌ Please select an action to execute"
        
        try:
            agent_id = list(self.registered_agents.keys())[0]
            agent_name = self.registered_agents[agent_id]
            
            if action.startswith("move"):
                direction = action.split()[1] if len(action.split()) > 1 else action
                result = self.game_facade.move_ai_agent(agent_id, direction)
                
                if result.get("success"):
                    position = result.get("position", {})
                    return f"🤖 {agent_name} moved {direction} successfully!\nNew position: ({position.get('x', '?')}, {position.get('y', '?')})"
                else:
                    error_msg = result.get("error", "Movement failed")
                    return f"❌ {agent_name} movement failed: {error_msg}"
            elif action == "chat":
                if not message or not message.strip():
                    return "❌ Please enter a chat message"
                
                result = self.game_facade.ai_agent_chat(agent_id, message.strip())
                
                if result.get("success"):
                    return f"💬 {agent_name} sent chat message: '{message.strip()}'"
                else:
                    error_msg = result.get("error", "Chat failed")
                    return f"❌ {agent_name} chat failed: {error_msg}"
            else:
                return f"❓ Unknown action: {action}"
        except Exception as e:
            return f"❌ Error executing AI action: {str(e)}"
        except Exception as e:
            return f"❌ Error executing AI action: {str(e)}"
    
    def _handle_test_raw_world_data(self) -> Dict:
        """Handle testing raw world data access."""
        try:
            raw_data = self.game_facade.get_raw_world_data()
            return raw_data
        except Exception as e:
            return {"error": f"Failed to get raw world data: {str(e)}"}
    
    def _handle_test_available_npcs(self) -> List[Dict]:
        """Handle testing available NPCs data access."""
        try:
            npcs_data = self.game_facade.get_available_npcs()
            return npcs_data
        except Exception as e:
            return [{"error": f"Failed to get NPCs data: {str(e)}"}]
 
    def _create_architecture_content(self) -> None:
        """Create architecture documentation."""
        gr.Markdown("""

        <div class="doc-section">

        

        # 🏗️ System Architecture

        

        Our MMORPG follows clean architecture principles with clear separation of concerns.

        

        </div>

        """)
        
        with gr.Tabs():
            with gr.Tab("🏛️ Clean Architecture"):
                gr.Markdown("""

                ## 🏛️ Clean Architecture Implementation

                

                ### Architecture Layers

                

                ```

                ┌─────────────────────────────────────┐

                │              UI Layer               │

                │     (Gradio Interface, HF-UI)      │

                └─────────────────────────────────────┘

                            ↓ Depends on

                ┌─────────────────────────────────────┐

                │           Facade Layer              │

                │        (GameFacade)                 │

                └─────────────────────────────────────┘

                            ↓ Depends on

                ┌─────────────────────────────────────┐

                │          Service Layer              │

                │  (PlayerService, ChatService, etc) │

                └─────────────────────────────────────┘

                            ↓ Depends on

                ┌─────────────────────────────────────┐

                │           Core Layer                │

                │    (Player, GameWorld, Engine)     │

                └─────────────────────────────────────┘

                ```

                

                ### Key Principles

                - **Dependency Inversion**: High-level modules don't depend on low-level modules

                - **Interface Segregation**: Small, focused interfaces

                - **Single Responsibility**: Each class has one reason to change

                - **Open/Closed**: Open for extension, closed for modification

                """)
            
            with gr.Tab("🔧 Services"):
                gr.Markdown("""

                ## 🔧 Service Architecture

                

                ### Core Services

                

                **PlayerService**

                - Player management and lifecycle

                - Movement and position tracking

                - Health and experience management

                - Statistics and progression

                

                **ChatService** 

                - Public and private messaging

                - Message history and persistence

                - Command processing

                - Real-time communication

                

                **NPCService**

                - NPC behavior management

                - Interaction handling

                - Personality systems (like Donald's responses)

                - Movement and AI logic

                

                **MCPService**

                - AI agent registration and management

                - MCP protocol implementation

                - External service integration

                - Tool and capability exposure

                

                **PluginService**

                - Plugin discovery and loading

                - Dependency management

                - Hot-reload functionality

                - Event system coordination

                

                ### Service Communication

                - Services communicate through well-defined interfaces

                - Event-driven architecture for loose coupling

                - Centralized coordination through GameEngine

                - Thread-safe operations with proper locking

                """)
            
            with gr.Tab("💾 Data Flow"):
                gr.Markdown("""

                ## 💾 Data Flow Architecture

                

                ### Request Flow

                ```

                User Input → UI Layer → Facade → Service → Core → Response

                ```

                

                ### Real-time Updates

                ```

                Game State Change → Service → Event System → UI Update

                ```

                

                ### Plugin Integration

                ```

                Plugin Event → Plugin Service → Core Services → Game State

                ```

                

                ### MCP Agent Flow

                ```

                External Agent → MCP Protocol → MCP Service → Game Services

                ```

                

                ### Error Handling

                - Comprehensive exception handling at each layer

                - Graceful degradation for non-critical failures

                - Detailed logging for debugging and monitoring

                - Recovery mechanisms for transient failures

                

                ### Performance Optimizations

                - Efficient state updates with minimal data transfer

                - Optimized rendering for game world visualization

                - Smart caching for frequently accessed data

                - Asynchronous operations where beneficial

                """)
    
    def create_join_section(self) -> tuple:
        """Create the join game section with input and buttons."""
        with gr.Row():
            with gr.Column(scale=2):
                join_name = gr.Textbox(
                    label="Player Name",
                    placeholder="Enter your player name...",
                    elem_id="join-name-input"
                )
            with gr.Column(scale=1):
                join_btn = gr.Button("Join Game 🎮", variant="primary", elem_id="join-btn")
                leave_btn = gr.Button("Leave Game 🚪", variant="secondary", elem_id="leave-btn")
        
        # Player list display
        player_list = gr.Dataframe(
            headers=["Name", "Level", "Position", "Status"],
            label="Online Players",
            elem_id="player-list"
        )
        
        return (join_name, join_btn, leave_btn, player_list)
    
    def create_game_display(self) -> tuple:
        """Create the main game display section."""
        with gr.Row():
            with gr.Column(scale=3):
                game_canvas = gr.HTML(
                    value=self._get_initial_game_view(),
                    label="Game World",
                    elem_id="game-canvas"
                )
            with gr.Column(scale=1):
                status_display = gr.JSON(
                    label="Game Status",
                    elem_id="status-display"
                )
        
        return (game_canvas, status_display)
    
    def create_documentation_tabs(self):
        """Create documentation tabs using the DocumentationTabs component."""
        from .documentation_tabs import DocumentationTabs
        doc_tabs = DocumentationTabs()
        return doc_tabs.create_documentation_tabs()
    
    def _get_initial_game_view(self) -> str:
        """Get the initial HTML for the game view."""
        return """

        <div id="game-world" style="width: 800px; height: 600px; border: 2px solid #333; 

             position: relative; background: linear-gradient(135deg, #2d5a27, #4a7c40); 

             border-radius: 8px; overflow: hidden;">

            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 

                 color: white; text-align: center; font-size: 18px;">

                🎮 Join the game to start your adventure!

            </div>

        </div>

        """
    
    def _create_read2burn_interface(self) -> None:
        """Create the Read2Burn mailbox interface."""
        from ..addons.read2burn_addon import read2burn_service
        
        with gr.Column():
            gr.Markdown("""

            ### 🔥 Read2Burn Commands

            

            **Commands:**

            - `create Your secret message here` - Create new message

            - `read MESSAGE_ID` - Read message (destroys it!)

            - `list` - Show your created messages

            - `help` - Show detailed help

            """)
            
            with gr.Row():
                command_input = gr.Textbox(
                    label="Command",
                    placeholder="create Hello, this message will self-destruct!",
                    scale=3
                )
                send_btn = gr.Button("Send", variant="primary", scale=1)
            
            result_output = gr.Textbox(
                label="Mailbox Response",
                lines=6,
                interactive=False
            )
            
            # Message history
            message_history = gr.Dataframe(
                headers=["Message ID", "Created", "Status", "Reads Left"],
                label="Your Messages",
                interactive=False
            )
            
            def handle_mailbox_command(command: str):
                from ..core.game_engine import get_game_engine
                
                if not command.strip():
                    return "❌ Please enter a command", []
                try:
                    # Get current player from game engine
                    engine = get_game_engine()
                    players = engine.get_world().get_all_players()
                    
                    if not players:
                        return "❌ No players in the game! Please join the game first.", []
                    
                    # Use the most recently active player
                    player_id = max(players.keys(), key=lambda pid: players[pid].last_active)
                    player_name = players[player_id].name
                    
                    print(f"[Read2Burn] Command '{command}' from player {player_name} ({player_id})")
                    
                    result = read2burn_service.handle_command(player_id, command)
                    history = read2burn_service.get_player_message_history(player_id)
                    
                    # Add player info to the result
                    result = f"**Player:** {player_name}\n\n{result}"
                    
                    return result, history
                    
                except Exception as e:
                    print(f"[Read2Burn] Error: {e}")
                    return f"❌ Error processing command: {str(e)}", []
            
            send_btn.click(
                handle_mailbox_command,
                inputs=[command_input],
                outputs=[result_output, message_history]
            )
            
            command_input.submit(
                handle_mailbox_command,
                inputs=[command_input],
                outputs=[result_output, message_history]
            )