ui/components.py

"""
UI components for the 5-tab demo - FIXED VERSION
"""

import gradio as gr
from typing import Dict, List, Any, Optional, Tuple
import plotly.graph_objects as go


def create_header(oss_version: str, oss_available: bool) -> gr.HTML:  # CHANGED from gr.Markdown to gr.HTML
    """Create the demo header - FIXED VERSION"""
    status_badge = "✅ Connected" if oss_available else "⚠️ Mock Mode"
    
    return gr.HTML(f"""  # CHANGED from gr.Markdown to gr.HTML
    <div style="text-align: center; padding: 30px 20px 20px 20px; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); border-radius: 0 0 20px 20px; margin-bottom: 30px; border-bottom: 3px solid #4ECDC4;">
        <h1 style="margin-bottom: 10px;">🚀 Agentic Reliability Framework</h1>
        <h2 style="color: #4a5568; font-weight: 600; margin-bottom: 20px;">Investor Demo v3.8.0</h2>
        
        <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;">
            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 0.85rem;">
                🏢 Enterprise Edition
            </div>
            <div style="background: linear-gradient(135deg, #4299e1 0%, #38b2ac 100%); color: white; padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 0.85rem;">
                🆓 OSS v{oss_version}
            </div>
            <div style="background: #e8f5e8; color: #2d3748; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85rem;">
                📈 5.2× ROI
            </div>
            <div style="background: #fff3cd; color: #856404; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85rem;">
                ⚡ 85% MTTR Reduction
            </div>
        </div>
        
        <div style="color: #718096; font-size: 16px; max-width: 800px; margin: 0 auto; line-height: 1.6;">
            From <span style="font-weight: 700; color: #4299e1;">OSS Advisory</span> 
            to <span style="font-weight: 700; color: #764ba2;">Enterprise Autonomous Healing</span>.
        </div>
        
        <div style="margin-top: 15px; font-size: 0.9rem; color: #4ECDC4; font-weight: 600;">
            {status_badge}
        </div>
    </div>
    """)


def create_status_bar() -> gr.HTML:
    """Create system status bar - FIXED VERSION"""
    return gr.HTML("""
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 25px;">
        <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #4ECDC4;">
            <div style="font-size: 0.9rem; color: #718096; margin-bottom: 5px;">System Status</div>
            <div style="display: flex; align-items: center; gap: 8px;">
                <div style="width: 10px; height: 10px; background: #4ECDC4; border-radius: 50%;"></div>
                <div style="font-weight: 700; color: #2d3748;">Operational</div>
            </div>
        </div>
        
        <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #FFA726;">
            <div style="font-size: 0.9rem; color: #718096; margin-bottom: 5px;">Performance</div>
            <div style="font-weight: 700; color: #2d3748; font-size: 1.1rem;">8.2 min avg resolution</div>
        </div>
        
        <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #42A5F5;">
            <div style="font-size: 0.9rem; color: #718096; margin-bottom: 5px;">Learning Engine</div>
            <div style="font-weight: 700; color: #2d3748; font-size: 1.1rem;">6 patterns detected</div>
        </div>
    </div>
    """)


def create_tab1_incident_demo(scenarios: Dict, default_scenario: str = "Cache Miss Storm") -> Tuple:
    """Create Tab 1: Live Incident Demo - FIXED WORKING VERSION"""
    with gr.Row():
        # Left Panel
        with gr.Column(scale=1):
            gr.Markdown("### 🎬 Select Incident Scenario")
            
            scenario_dropdown = gr.Dropdown(
                choices=list(scenarios.keys()),
                value=default_scenario,
                label="Choose an incident to analyze:",
                interactive=True
            )
            
            scenario_description = gr.Markdown(
                value=scenarios[default_scenario]["description"]
            )
            
            gr.Markdown("### 📊 Current Metrics")
            metrics_display = gr.JSON(
                value=scenarios[default_scenario].get("metrics", {}),
                label="",
                show_label=False
            )
            
            gr.Markdown("### 💰 Business Impact")
            impact_display = gr.JSON(
                value=scenarios[default_scenario].get("business_impact", {}),
                label="",
                show_label=False
            )
        
        # Right Panel
        with gr.Column(scale=2):
            gr.Markdown("### 📈 Incident Timeline")
            timeline_output = gr.Plot(label="", show_label=False)
            
            gr.Markdown("### ⚡ Take Action")
            with gr.Row():
                oss_btn = gr.Button(
                    "🆓 Run OSS Analysis",
                    variant="secondary",
                    size="lg",
                    elem_id="oss_btn"
                )
                enterprise_btn = gr.Button(
                    "🚀 Execute Enterprise Healing",
                    variant="primary",
                    size="lg",
                    elem_id="enterprise_btn"
                )
            
            with gr.Row():
                approval_toggle = gr.Checkbox(
                    label="🔐 Require Manual Approval",
                    value=True,
                    interactive=True
                )
                demo_btn = gr.Button(
                    "⚡ Quick Demo",
                    variant="secondary",
                    size="sm"
                )
            
            approval_display = gr.HTML(
                value="<div style='padding: 15px; background: #f8f9fa; border-radius: 8px; color: #6c757d;'>"
                      "Approval workflow will appear here after execution"
                      "</div>"
            )
            
            with gr.Row():
                with gr.Column():
                    gr.Markdown("### 📋 OSS Results")
                    oss_results_display = gr.JSON(label="", value={})
                
                with gr.Column():
                    gr.Markdown("### 🎯 Enterprise Results")
                    enterprise_results_display = gr.JSON(label="", value={})
    
    return (scenario_dropdown, scenario_description, metrics_display, impact_display,
            timeline_output, oss_btn, enterprise_btn, approval_toggle, demo_btn,
            approval_display, oss_results_display, enterprise_results_display)


def create_tab2_business_roi() -> Tuple:
    """Create Tab 2: Business Impact & ROI - FIXED VERSION"""
    with gr.Column():
        gr.Markdown("### 📊 Executive Dashboard")
        dashboard_output = gr.Plot(label="", show_label=False)
        
        gr.Markdown("### 🧮 ROI Calculator")
        with gr.Row():
            with gr.Column(scale=1):
                # Scenario selector
                roi_scenario_dropdown = gr.Dropdown(
                    choices=[],
                    value="",
                    label="Select scenario for ROI calculation:",
                    interactive=True
                )
                
                monthly_slider = gr.Slider(
                    1, 100, value=15, step=1,
                    label="Monthly similar incidents",
                    interactive=True
                )
                
                team_slider = gr.Slider(
                    1, 20, value=5, step=1,
                    label="Reliability team size",
                    interactive=True
                )
                
                calculate_btn = gr.Button(
                    "Calculate ROI",
                    variant="primary",
                    size="lg"
                )
            
            with gr.Column(scale=2):
                roi_output = gr.JSON(
                    label="ROI Analysis Results",
                    value={}
                )
                
                roi_chart = gr.Plot(label="Cost Comparison", show_label=False)
    
    return (dashboard_output, roi_scenario_dropdown, monthly_slider, team_slider,
            calculate_btn, roi_output, roi_chart)


def create_tab3_enterprise_features() -> Tuple:
    """Create Tab 3: Enterprise Features"""
    with gr.Row():
        # Left Column
        with gr.Column(scale=1):
            gr.Markdown("### 🔐 License Management")
            
            license_display = gr.JSON(
                value={
                    "status": "Active",
                    "tier": "Enterprise",
                    "expires": "2024-12-31",
                    "features": ["autonomous_healing", "compliance", "audit_trail"]
                },
                label="Current License"
            )
            
            with gr.Row():
                validate_btn = gr.Button("🔍 Validate", variant="secondary")
                trial_btn = gr.Button("🆓 Start Trial", variant="primary")
                upgrade_btn = gr.Button("🚀 Upgrade", variant="secondary")
            
            gr.Markdown("### ⚡ MCP Execution Modes")
            
            mcp_mode = gr.Radio(
                choices=["advisory", "approval", "autonomous"],
                value="advisory",
                label="Execution Mode",
                interactive=True,
                info="advisory = OSS only, approval = human review, autonomous = AI-driven"
            )
            
            mcp_mode_info = gr.JSON(
                value={
                    "current_mode": "advisory",
                    "description": "OSS Edition - Analysis only, no execution",
                    "features": ["Incident analysis", "RAG similarity", "HealingIntent creation"]
                },
                label="Mode Details"
            )
        
        # Right Column
        with gr.Column(scale=1):
            gr.Markdown("### 📋 Feature Comparison")
            
            features_table = gr.Dataframe(
                headers=["Feature", "OSS", "Enterprise"],
                value=[
                    ["Autonomous Healing", "❌", "✅"],
                    ["Compliance Automation", "❌", "✅"],
                    ["Predictive Analytics", "❌", "✅"],
                    ["Multi-Cloud Support", "❌", "✅"],
                    ["Audit Trail", "Basic", "Comprehensive"],
                    ["Role-Based Access", "❌", "✅"],
                ],
                label="",
                interactive=False
            )
            
            gr.Markdown("### 🔗 Integrations")
            
            integrations_table = gr.Dataframe(
                headers=["Platform", "Status"],
                value=[
                    ["AWS", "✅ Connected"],
                    ["Azure", "✅ Connected"],
                    ["GCP", "✅ Connected"],
                    ["Datadog", "✅ Connected"],
                    ["PagerDuty", "✅ Connected"],
                    ["ServiceNow", "✅ Connected"],
                ],
                label="",
                interactive=False
            )
    
    return (license_display, validate_btn, trial_btn, upgrade_btn,
            mcp_mode, mcp_mode_info, features_table, integrations_table)


def create_tab4_audit_trail() -> Tuple:
    """Create Tab 4: Audit Trail & History"""
    with gr.Row():
        # Left Column
        with gr.Column(scale=1):
            gr.Markdown("### 📋 Execution History")
            
            with gr.Row():
                refresh_btn = gr.Button("🔄 Refresh", variant="secondary", size="sm")
                clear_btn = gr.Button("🗑️ Clear", variant="stop", size="sm")
                export_btn = gr.Button("📥 Export", variant="secondary", size="sm")
            
            execution_table = gr.Dataframe(
                headers=["Time", "Scenario", "Mode", "Status", "Savings", "Details"],
                value=[],
                label="",
                interactive=False
            )
        
        # Right Column
        with gr.Column(scale=1):
            gr.Markdown("### 📊 Incident History")
            
            incident_table = gr.Dataframe(
                headers=["Time", "Component", "Scenario", "Severity", "Status"],
                value=[],
                label="",
                interactive=False
            )
            
            gr.Markdown("### 📤 Export")
            export_text = gr.Textbox(
                label="Audit Trail (JSON)",
                lines=6,
                interactive=False
            )
    
    return (refresh_btn, clear_btn, export_btn, execution_table,
            incident_table, export_text)


def create_tab5_learning_engine() -> Tuple:
    """Create Tab 5: Learning Engine"""
    with gr.Row():
        # Left Column
        with gr.Column(scale=2):
            gr.Markdown("### 🧠 Incident Memory Graph")
            
            learning_graph = gr.Plot(label="", show_label=False)
            
            with gr.Row():
                graph_type = gr.Radio(
                    choices=["Force", "Hierarchical", "Circular"],
                    value="Force",
                    label="Layout",
                    interactive=True
                )
                show_labels = gr.Checkbox(label="Show Labels", value=True, interactive=True)
            
            gr.Markdown("### 🔍 Similarity Search")
            
            search_query = gr.Textbox(
                label="Describe incident or paste metrics",
                placeholder="e.g., 'Redis cache miss causing database overload'",
                lines=2,
                interactive=True
            )
            
            with gr.Row():
                search_btn = gr.Button("🔍 Search", variant="primary")
                clear_btn = gr.Button("Clear", variant="secondary")
            
            search_results = gr.Dataframe(
                headers=["Incident", "Similarity", "Resolution", "Actions"],
                value=[],
                label="",
                interactive=False
            )
        
        # Right Column
        with gr.Column(scale=1):
            gr.Markdown("### 📊 Learning Stats")
            
            stats_display = gr.JSON(
                value={
                    "total_incidents": 0,
                    "patterns_detected": 0,
                    "similarity_searches": 0,
                    "confidence_threshold": 0.85
                },
                label="Statistics"
            )
            
            gr.Markdown("### 🎯 Pattern Detection")
            
            patterns_display = gr.JSON(
                value={},
                label="Detected Patterns"
            )
            
            gr.Markdown("### 📈 Performance")
            
            performance_display = gr.JSON(
                value={
                    "avg_resolution_time": "0 min",
                    "success_rate": "0%",
                    "auto_heal_rate": "0%"
                },
                label="Performance Metrics"
            )
    
    return (learning_graph, graph_type, show_labels, search_query, search_btn,
            clear_btn, search_results, stats_display, patterns_display, performance_display)


def create_footer() -> gr.HTML:  # CHANGED from gr.Markdown to gr.HTML
    """Create the demo footer - UPDATED FOR 2026"""
    return gr.HTML("""  # CHANGED from gr.Markdown to gr.HTML
    <div style="margin-top: 40px; padding: 30px; background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%); border-radius: 20px; color: white;">
        <div style="border-top: 1px solid #4a5568; padding-top: 20px; text-align: center; color: #a0aec0; font-size: 0.9rem;">
            <p style="margin: 0;">© 2026 Agentic Reliability Framework. Demo v3.8.0 Enterprise Edition.</p>
            <p style="margin: 10px 0 0 0; font-size: 0.85rem; color: #cbd5e0;">
                This is a demonstration environment showcasing ARF capabilities.<br>
                Actual implementation results may vary based on specific use cases and configurations.
            </p>
            <p style="margin: 15px 0 0 0; font-size: 0.8rem; color: #718096;">
                For production inquiries or enterprise licensing, visit 
                <a href="https://arf.dev/enterprise" style="color: #4ECDC4; text-decoration: none; font-weight: 600;">
                    arf.dev/enterprise
                </a>
            </p>
        </div>
    </div>
    """)