ui/components.py

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

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.Markdown:
    """Create the demo header"""
    status_badge = "✅ Connected" if oss_available else "⚠️ Mock Mode"
    
    return gr.Markdown(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>.
            Experience the complete journey in 5 focused tabs.
        </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"""
    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;">5 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"""
    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("impact", {}),
                label="",
                show_label=False
            )
        
        # Right Panel
        with gr.Column(scale=2):
            gr.Markdown("### 📈 Incident Timeline")
            timeline_output = gr.Plot(label="")
            
            gr.Markdown("### ⚡ Take Action")
            with gr.Row():
                oss_btn = gr.Button(
                    "🆓 Run OSS Analysis",
                    variant="secondary",
                    size="lg",
                    min_width=150
                )
                enterprise_btn = gr.Button(
                    "🚀 Execute Enterprise Healing",
                    variant="primary",
                    size="lg",
                    min_width=150
                )
            
            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>"
            )
            
            gr.Markdown("### ⚙️ Configuration")
            config_display = gr.JSON(
                value={"mode": "approval", "safety_guardrails": "active"},
                label=""
            )
            
            gr.Markdown("### 🎯 Results")
            results_display = gr.JSON(
                value={"status": "Ready to analyze incident..."},
                label=""
            )
    
    return (scenario_dropdown, scenario_description, metrics_display, impact_display,
            timeline_output, oss_btn, enterprise_btn, approval_toggle, demo_btn,
            approval_display, config_display, results_display)


def create_tab2_business_roi() -> Tuple:
    """Create Tab 2: Business Impact & ROI"""
    with gr.Column():
        gr.Markdown("### 📊 Executive Dashboard")
        dashboard_output = gr.Plot(label="")
        
        gr.Markdown("### 🧮 ROI Calculator")
        with gr.Row():
            with gr.Column(scale=1):
                monthly_slider = gr.Slider(
                    1, 100, value=15, step=1,
                    label="Monthly incidents",
                    interactive=True
                )
                impact_slider = gr.Slider(
                    1000, 50000, value=8500, step=500,
                    label="Average cost per incident ($)",
                    interactive=True
                )
                team_slider = gr.Slider(
                    1, 20, value=5, step=1,
                    label="Reliability team size",
                    interactive=True
                )
                calculate_btn = gr.Button(
                    "Calculate My ROI",
                    variant="primary",
                    size="lg"
                )
            
            with gr.Column(scale=2):
                roi_output = gr.JSON(
                    value={},
                    label="Your Analysis"
                )
        
        with gr.Row():
            with gr.Column():
                gr.Markdown("""
                **📈 Industry Benchmarks**
                - **5.2×** Average ROI (first year)
                - **2-3 months** Payback period
                - **81.7%** Auto-heal rate
                - **85%** MTTR reduction
                - **$6.2M** Average annual savings
                """)
            
            with gr.Column():
                gr.Markdown("""
                **🎯 Business Outcomes**
                - **325+ hours** Engineer time reclaimed
                - **99.9%** SLA compliance maintained
                - **+40%** Customer satisfaction
                - **60%** Increased innovation capacity
                - **Zero** Audit findings
                """)
    
    return (dashboard_output, monthly_slider, impact_slider, team_slider, 
            calculate_btn, roi_output)


def create_tab3_audit_trail() -> Tuple:
    """Create Tab 3: 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", "Actions", "Status", "Savings", "Details"],
                value=[],
                label="",
                interactive=False
            )
            
            gr.Markdown("### 📈 Cost Savings")
            savings_chart = gr.Plot(label="")
        
        # Right Column
        with gr.Column(scale=1):
            gr.Markdown("### 📊 Incident History")
            
            incident_table = gr.Dataframe(
                headers=["Time", "Service", "Type", "Severity", "Description"],
                value=[],
                label="",
                interactive=False
            )
            
            gr.Markdown("### 🧠 Memory Graph")
            memory_graph = gr.Plot(label="")
            
            gr.Markdown("### 📤 Export")
            export_text = gr.Textbox(
                label="Audit Trail (JSON)",
                lines=6,
                interactive=False
            )
    
    return (refresh_btn, clear_btn, export_btn, execution_table, savings_chart,
            incident_table, memory_graph, export_text)


def create_tab4_enterprise_features() -> Tuple:
    """Create Tab 4: Enterprise Features"""
    with gr.Row():
        # Left Column
        with gr.Column(scale=1):
            gr.Markdown("### 🔐 License Management")
            
            license_display = gr.JSON(
                value={},
                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("### ⚡ Feature Comparison")
            
            features_table = gr.Dataframe(
                headers=["Feature", "OSS", "Starter", "Enterprise"],
                value=[
                    ["Autonomous Healing", "❌", "✅ Auto", "✅ AI-Driven"],
                    ["Compliance Automation", "❌", "✅", "✅ SOC2/GDPR"],
                    ["Predictive Analytics", "❌", "Basic", "✅ ML-Powered"],
                    ["Multi-Cloud Support", "❌", "❌", "✅ Native"],
                    ["Audit Trail", "Basic", "✅", "✅ Comprehensive"],
                    ["Role-Based Access", "❌", "✅", "✅ Granular"],
                ],
                label="",
                interactive=False
            )
        
        # Right Column
        with gr.Column(scale=1):
            gr.Markdown("### 📋 Compliance")
            
            compliance_display = gr.JSON(
                value={
                    "SOC2": "✅ Certified",
                    "GDPR": "✅ Compliant",
                    "ISO27001": "✅ Certified",
                    "CCPA": "✅ Compliant"
                },
                label="Certifications"
            )
            
            gr.Markdown("### 🔗 Integrations")
            
            integrations_table = gr.Dataframe(
                headers=["Platform", "Status", "Last Sync"],
                value=[
                    ["AWS", "✅ Connected", "5 min ago"],
                    ["Azure", "✅ Connected", "8 min ago"],
                    ["GCP", "✅ Connected", "3 min ago"],
                    ["Datadog", "✅ Connected", "Active"],
                    ["PagerDuty", "✅ Connected", "Active"],
                    ["ServiceNow", "✅ Connected", "15 min ago"],
                ],
                label="",
                interactive=False
            )
            
            gr.Markdown("### ⚙️ MCP Mode")
            mcp_mode = gr.Radio(
                choices=["advisory", "approval", "autonomous"],
                value="approval",
                label="Execution Mode",
                interactive=True
            )
    
    return (license_display, validate_btn, trial_btn, upgrade_btn, features_table,
            compliance_display, integrations_table, mcp_mode)


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="")
            
            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.Markdown:
    """Create the demo footer"""
    return gr.Markdown("""
    <div style="margin-top: 40px; padding: 30px; background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%); border-radius: 20px; color: white;">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 30px;">
            <div>
                <h4 style="color: white; margin-bottom: 15px;">🚀 User Journey</h4>
                <ol style="color: #cbd5e0; padding-left: 20px;">
                    <li style="margin-bottom: 8px;">Start with OSS Analysis</li>
                    <li style="margin-bottom: 8px;">Calculate Your ROI</li>
                    <li style="margin-bottom: 8px;">Execute Enterprise Healing</li>
                    <li style="margin-bottom: 8px;">Explore Audit Trail</li>
                    <li>Discover Learning Engine</li>
                </ol>
            </div>
            
            <div>
                <h4 style="color: white; margin-bottom: 15px;">📞 Get Started</h4>
                <ul style="color: #cbd5e0; list-style: none; padding: 0;">
                    <li style="margin-bottom: 8px;">📧 sales@arfinvestor.com</li>
                    <li style="margin-bottom: 8px;">📚 docs.arfinvestor.com</li>
                    <li style="margin-bottom: 8px;">💬 Join Slack Community</li>
                    <li>🆓 30-Day Enterprise Trial</li>
                </ul>
            </div>
            
            <div>
                <h4 style="color: white; margin-bottom: 15px;">🛡️ Enterprise Grade</h4>
                <ul style="color: #cbd5e0; list-style: none; padding: 0;">
                    <li style="margin-bottom: 8px;">✅ SOC 2 Type II</li>
                    <li style="margin-bottom: 8px;">✅ GDPR & CCPA</li>
                    <li style="margin-bottom: 8px;">✅ ISO 27001</li>
                    <li>✅ HIPAA Ready</li>
                </ul>
            </div>
        </div>
        
        <div style="border-top: 1px solid #4a5568; padding-top: 20px; text-align: center; color: #a0aec0; font-size: 0.9rem;">
            <p style="margin: 0;">© 2024 Agentic Reliability Framework. Demo v3.8.0 Enterprise Edition.</p>
            <p style="margin: 10px 0 0 0; font-size: 0.8rem;">This demonstration showcases capabilities. Actual results may vary.</p>
        </div>
    </div>
    """)