ui/modern_integration.py

"""
ui/modern_integration.py
Modern UI integration for Gradio app
"""

import gradio as gr
from ui.modern_components import (
    initialize_modern_ui,
    Card, Button, Badge, Grid, Stack,
    ObservationGate, SequencingFlow, ProcessDisplay, Chart,
    ResponsiveUtils, Accessibility, DarkMode
)

class ModernUIIntegration:
    """Integrate modern UI components with Gradio"""
    
    @staticmethod
    def inject_css_and_js() -> str:
        """Inject modern UI CSS and JavaScript"""
        return initialize_modern_ui()
    
    @staticmethod
    def create_modern_layout() -> dict:
        """Create modern layout structure for tabs"""
        return {
            "css": ModernUIIntegration.inject_css_and_js(),
            "container_class": "container container-lg",
            "header": """
                <div class="app-header">
                    <h1 class="text-3xl font-bold text-primary mb-2">
                        🚀 Agentic Reliability Framework v3.3.9
                    </h1>
                    <p class="text-muted mb-6">
                        OSS advises → Enterprise executes | Modern UI Enabled
                    </p>
                </div>
            """,
            "tab_classes": {
                "live_demo": "p-4 bg-gradient-to-br from-green-50 to-white dark:from-green-900/20 dark:to-gray-900",
                "roi": "p-4 bg-gradient-to-br from-blue-50 to-white dark:from-blue-900/20 dark:to-gray-900",
                "enterprise": "p-4 bg-gradient-to-br from-purple-50 to-white dark:from-purple-900/20 dark:to-gray-900",
                "audit": "p-4 bg-gradient-to-br from-orange-50 to-white dark:from-orange-900/20 dark:to-gray-900",
                "learning": "p-4 bg-gradient-to-br from-indigo-50 to-white dark:from-indigo-900/20 dark:to-gray-900"
            }
        }
    
    @staticmethod
    def wrap_component(component, card_config=None):
        """Wrap Gradio component with modern styling"""
        if card_config:
            # Create a card wrapper
            title = card_config.get("title", "")
            variant = card_config.get("variant", "default")
            border_color = card_config.get("border_color", "")
            
            with gr.Group(elem_classes=f"card card-{variant}"):
                if title:
                    gr.Markdown(f"### {title}", elem_classes="card-title")
                return component
        return component
    
    @staticmethod
    def create_boundary_display(oss_content, enterprise_content):
        """Create OSS vs Enterprise boundary display"""
        with gr.Row(elem_classes="boundary-row"):
            with gr.Column(scale=1, elem_classes="oss-column"):
                with gr.Group(elem_classes="card card-outlined border-l-4 border-l-green-500"):
                    gr.Markdown("### 🟢 OSS Advisory Layer", 
                              elem_classes="text-lg font-semibold mb-2")
                    gr.Markdown("*Analysis & Recommendations*", 
                              elem_classes="text-sm text-muted mb-4")
                    yield oss_content
            
            with gr.Column(scale=1, elem_classes="enterprise-column"):
                with gr.Group(elem_classes="card card-elevated border-l-4 border-l-purple-500"):
                    gr.Markdown("### 🟣 Enterprise Execution Layer", 
                              elem_classes="text-lg font-semibold mb-2")
                    gr.Markdown("*Autonomous Action & Execution*", 
                              elem_classes="text-sm text-muted mb-4")
                    yield enterprise_content