ui/components.py

"""
UI components for the 5-tab demo - COMPLETE 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:
    """Create the demo header - FIXED VERSION"""
    status_badge = "✅ Connected" if oss_available else "⚠️ Mock Mode"
    
    return gr.HTML(f"""
    <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(scenarios: Dict) -> 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 - FIXED: Initialize with scenarios
                roi_scenario_dropdown = gr.Dropdown(
                    choices=list(scenarios.keys()),
                    value="Cache Miss Storm",
                    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 - UPDATED"""
    with gr.Row():
        # Left Column
        with gr.Column(scale=1):
            gr.Markdown("### 🔐 License Management")
            
            license_display = gr.JSON(
                value={
                    "status": "Active",
                    "tier": "Enterprise",
                    "expires": "2026-12-31",
                    "features": ["autonomous_healing", "compliance", "audit_trail", 
                               "predictive_analytics", "multi_cloud", "role_based_access"]
                },
                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", "❌", "✅"],
                    ["Custom Dashboards", "❌", "✅"],
                    ["Enterprise Support", "Community", "24/7 SLA"],
                    ["Custom Integrations", "❌", "✅"],
                    ["Advanced Analytics", "❌", "✅"]
                ],
                label="",
                interactive=False
            )
            
            gr.Markdown("### 🔗 Integrations")
            
            integrations_table = gr.Dataframe(
                headers=["Platform", "Status", "Type"],
                value=[
                    ["AWS", "✅ Connected", "Cloud"],
                    ["Azure", "✅ Connected", "Cloud"],
                    ["GCP", "✅ Connected", "Cloud"],
                    ["Datadog", "✅ Connected", "Monitoring"],
                    ["PagerDuty", "✅ Connected", "Alerting"],
                    ["ServiceNow", "✅ Connected", "ITSM"],
                    ["Slack", "✅ Connected", "Collaboration"],
                    ["Teams", "✅ Connected", "Collaboration"],
                    ["GitHub", "✅ Connected", "DevOps"],
                    ["GitLab", "✅ Connected", "DevOps"],
                    ["Jira", "✅ Connected", "Project Management"],
                    ["Splunk", "✅ Connected", "Monitoring"],
                    ["New Relic", "✅ Connected", "APM"],
                    ["Prometheus", "✅ Connected", "Metrics"],
                    ["Elasticsearch", "✅ Connected", "Logging"]
                ],
                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 DEMO DATA"""
    # Demo data
    demo_executions = [
        ["14:30", "Cache Miss Storm", "Autonomous", "✅ Success", "$7,225", "Auto-execution"],
        ["14:15", "Database Connection Pool", "Approval", "✅ Success", "$3,570", "Approved by admin"],
        ["13:45", "Memory Leak", "Advisory", "⚠️ Analysis", "$0", "OSS analysis only"],
        ["13:20", "Cache Miss Storm", "Autonomous", "✅ Success", "$7,225", "Pattern match"],
        ["12:50", "API Rate Limit", "Approval", "✅ Success", "$3,230", "Scheduled fix"],
        ["12:15", "Network Partition", "Autonomous", "✅ Success", "$10,200", "Emergency response"],
        ["11:40", "Storage I/O", "Advisory", "⚠️ Analysis", "$0", "Performance review"]
    ]
    
    demo_incidents = [
        ["14:30", "redis_cache", "Cache Miss Storm", "CRITICAL", "Resolved"],
        ["14:15", "postgresql", "Database Connection Pool", "HIGH", "Resolved"],
        ["13:45", "java_service", "Memory Leak", "HIGH", "Analyzed"],
        ["13:20", "redis_cache", "Cache Miss Storm", "CRITICAL", "Resolved"],
        ["12:50", "api_gateway", "API Rate Limit", "MEDIUM", "Resolved"],
        ["12:15", "database", "Network Partition", "CRITICAL", "Resolved"],
        ["11:40", "storage", "Storage I/O", "HIGH", "Analyzed"],
        ["11:10", "redis_cache", "Cache Performance", "LOW", "Monitoring"],
        ["10:45", "load_balancer", "Traffic Spike", "MEDIUM", "Auto-scaled"],
        ["10:20", "api_gateway", "Rate Limit", "MEDIUM", "Resolved"]
    ]
    
    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=demo_executions,
                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=demo_incidents,
                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 DEMO DATA"""
    # Demo data
    demo_search_results = [
        ["Cache Miss Storm", "92%", "Scale Redis + Circuit Breaker", "✅ Auto-healed"],
        ["Database Connection", "85%", "Increase pool + Monitoring", "✅ Approved"],
        ["Memory Leak Pattern", "78%", "Heap analysis + Restart", "⚠️ Advisory"],
        ["API Rate Limit", "72%", "Backoff + Queue", "✅ Auto-healed"],
        ["Network Partition", "65%", "Quorum + Consensus", "✅ Emergency"]
    ]
    
    # Create a simple demo graph
    fig = go.Figure(data=go.Scatter(
        x=[1, 2, 3, 4, 5],
        y=[2, 5, 3, 8, 7],
        mode='markers+text',
        marker=dict(size=[20, 30, 25, 40, 35], color=['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFE66D', '#9B59B6']),
        text=['Cache', 'DB', 'Memory', 'API', 'Network'],
        textposition="top center"
    ))
    
    fig.update_layout(
        title="Incident Pattern Relationships",
        height=400,
        paper_bgcolor="rgba(0,0,0,0)",
        plot_bgcolor="rgba(0,0,0,0)"
    )
    
    with gr.Row():
        # Left Column
        with gr.Column(scale=2):
            gr.Markdown("### 🧠 Incident Memory Graph")
            
            learning_graph = gr.Plot(value=fig, 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=demo_search_results,
                label="",
                interactive=False
            )
        
        # Right Column
        with gr.Column(scale=1):
            gr.Markdown("### 📊 Learning Stats")
            
            stats_display = gr.JSON(
                value={
                    "total_incidents": 42,
                    "patterns_detected": 6,
                    "similarity_searches": 128,
                    "confidence_threshold": 0.85,
                    "successful_predictions": 38,
                    "accuracy_rate": "90.5%"
                },
                label="Statistics"
            )
            
            gr.Markdown("### 🎯 Pattern Detection")
            
            patterns_display = gr.JSON(
                value={
                    "cache_miss_storm": {"occurrences": 12, "confidence": 0.92, "auto_heal": True},
                    "db_connection_exhaustion": {"occurrences": 8, "confidence": 0.88, "auto_heal": True},
                    "memory_leak_java": {"occurrences": 5, "confidence": 0.85, "auto_heal": False},
                    "api_rate_limit": {"occurrences": 10, "confidence": 0.91, "auto_heal": True},
                    "network_partition": {"occurrences": 3, "confidence": 0.79, "auto_heal": True},
                    "storage_io_saturation": {"occurrences": 4, "confidence": 0.86, "auto_heal": False}
                },
                label="Detected Patterns"
            )
            
            gr.Markdown("### 📈 Performance")
            
            performance_display = gr.JSON(
                value={
                    "avg_resolution_time": "8.2 min",
                    "success_rate": "95.2%",
                    "auto_heal_rate": "78.6%",
                    "mttr_reduction": "85%",
                    "cost_savings": "$1.2M",
                    "roi_multiplier": "5.2×"
                },
                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:
    """Create the demo footer - UPDATED FOR 2026"""
    return 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>
    """)