src/ui/components.py

"""
Reusable UI components
"""
from src.config.settings import AppConfig
from src.config.constants import ReasoningMode, ModelConfig
from src.core.reasoner import AdvancedReasoner
from src.core.prompt_engine import PromptEngine
from src.utils.logger import logger


class UIComponents:
    """
    🎨 REUSABLE UI COMPONENTS
    """
    
    @staticmethod
    def get_header_html() -> str:
        """
        📋 GENERATE ENHANCED HEADER HTML
        """
        return """
        <div class="research-header">
            <div class="header-branding">
                <div class="logo-section">
                    <div class="logo-circle">🧠</div>
                    <div class="brand-text">
                        <h1>Advanced AI Reasoning System Pro</h1>
                        <span class="brand-tagline">Next-Generation AI Research Platform</span>
                    </div>
                </div>
                <div class="status-indicator">
                    <span class="status-dot"></span>
                    <span class="status-text">System Active</span>
                </div>
            </div>
            <div class="header-subtitle">
                <p><strong>🚀 Research-Backed Implementation:</strong> Tree of Thoughts + Constitutional AI + Multi-Agent Validation + Performance Optimization</p>
            </div>
            <div class="feature-badges">
                <span class="badge feature-badge">🌳 Tree of Thoughts (Yao '23)</span>
                <span class="badge feature-badge">🛡️ Constitutional AI (Bai '22)</span>
                <span class="badge feature-badge">🔬 6 Reasoning Modes</span>
                <span class="badge feature-badge">⚡ Smart Caching + Rate Limiting</span>
                <span class="badge feature-badge">🎛️ Dynamic Configuration</span>
                <span class="badge feature-badge">📊 Real-Time Analytics</span>
            </div>
        </div>
        """
    
    @staticmethod
    def get_metrics_html(reasoner: AdvancedReasoner) -> str:
        """
        📊 GENERATE METRICS HTML
        """
        m = reasoner.metrics
        cache_stats = reasoner.cache.get_stats()
        
        if m.tokens_used > 0:
            status = '<span class="status-active">● Active</span>'
        else:
            status = '<span style="color: #64748b;">● Ready</span>'
        
        return f"""<div class="metrics-card">
        <strong>⚡ Inference:</strong> {m.inference_time:.2f}s<br>
        <strong>⏱️  Avg Time:</strong> {m.avg_response_time:.2f}s<br>
        <strong>🚀 Speed:</strong> {m.tokens_per_second:.1f} tok/s<br>
        <strong>🧠 Reasoning:</strong> {m.reasoning_depth} steps<br>
        <strong>🔄 Corrections:</strong> {m.self_corrections}<br>
        <strong>✨ Confidence:</strong> {m.confidence_score:.1f}%<br>
        <strong>💬 Total:</strong> {m.total_conversations}<br>
        <strong>📊 Tokens:</strong> {m.tokens_used:,}<br>
        <strong>🏔️  Peak:</strong> {m.peak_tokens}<br>
        <strong>💾 Cache:</strong> {cache_stats['hit_rate']}% hit rate<br>
        <strong>📡 Status:</strong> {status}<br>
        <strong>🔑 Session:</strong> {reasoner.session_id[:8]}...
        </div>"""
    
    @staticmethod
    def get_empty_analytics_html() -> str:
        """
        📊 GENERATE ENHANCED EMPTY ANALYTICS HTML
        """
        return """
        <div class="analytics-panel-welcome">
            <div class="analytics-header">
                <div class="analytics-icon">📊</div>
                <div class="analytics-text">
                    <h3>Analytics Dashboard</h3>
                    <p class="analytics-subtitle">Performance insights & conversation metrics</p>
                </div>
            </div>

            <div class="analytics-placeholder">
                <div class="placeholder-icon">🚀</div>
                <h4>No Data Available Yet</h4>
                <p>Start a conversation to begin collecting detailed performance analytics and usage insights.</p>

                <div class="metrics-preview">
                    <div class="metric-item">
                        <span class="metric-emoji">⚡</span>
                        <span class="metric-label">Inference Speed</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-emoji">🧠</span>
                        <span class="metric-label">Reasoning Depth</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-emoji">✨</span>
                        <span class="metric-label">Confidence Score</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-emoji">💾</span>
                        <span class="metric-label">Cache Performance</span>
                    </div>
                </div>

                <div class="get-started">
                    <div class="arrow-icon">👆</div>
                    <span>Navigate to the "Reasoning Workspace" tab to get started!</span>
                </div>
            </div>
        </div>"""
    
    @staticmethod
    def get_system_info_html(reasoner: AdvancedReasoner) -> str:
        """
        ℹ️ GENERATE SYSTEM INFO HTML
        """
        return f"""
        **Session ID:** `{reasoner.session_id}`  
        **Environment:** `{AppConfig.ENV}`  
        **Cache Size:** {AppConfig.CACHE_SIZE} entries  
        **Cache TTL:** {AppConfig.CACHE_TTL}s  
        **Rate Limit:** {AppConfig.RATE_LIMIT_REQUESTS} req/{AppConfig.RATE_LIMIT_WINDOW}s  
        **Max History:** {AppConfig.MAX_HISTORY_LENGTH} messages  
        **Available Models:** {len(ModelConfig)} models  
        **Reasoning Modes:** {len(ReasoningMode)} modes
        """
    
    @staticmethod
    def get_settings_table_html() -> str:
        """
        ⚙️ GENERATE SETTINGS TABLE HTML
        """
        return f"""
        | Setting | Value |
        |---------|-------|
        | **Environment** | `{AppConfig.ENV}` |
        | **Debug Mode** | `{AppConfig.DEBUG}` |
        | **Max History Length** | {AppConfig.MAX_HISTORY_LENGTH} messages |
        | **Max Conversation Storage** | {AppConfig.MAX_CONVERSATION_STORAGE} conversations |
        | **Cache Size** | {AppConfig.CACHE_SIZE} entries |
        | **Cache TTL** | {AppConfig.CACHE_TTL} seconds |
        | **Rate Limit** | {AppConfig.RATE_LIMIT_REQUESTS} requests per {AppConfig.RATE_LIMIT_WINDOW}s |
        | **Request Timeout** | {AppConfig.REQUEST_TIMEOUT} seconds |
        | **Max Retries** | {AppConfig.MAX_RETRIES} attempts |
        | **Export Directory** | `{AppConfig.EXPORT_DIR}` |
        | **Backup Directory** | `{AppConfig.BACKUP_DIR}` |
        | **Available Models** | {len(ModelConfig)} models |
        | **Reasoning Modes** | {len(ReasoningMode)} modes |
        """
    
    @staticmethod
    def get_reasoning_mode_choices() -> list:
        """Get reasoning mode choices"""
        return [mode.value for mode in ReasoningMode]
    
    @staticmethod
    def get_prompt_template_choices() -> list:
        """Get prompt template choices"""
        return list(PromptEngine.TEMPLATES.keys())
    
    @staticmethod
    def get_model_choices() -> list:
        """Get model choices"""
        return [m.model_id for m in ModelConfig]