ui/components.py

"""
Reusable UI components
"""

import gradio as gr
from typing import Dict, List, Optional, Callable

def create_metric_card(title: str, value: str, is_critical: bool = False) -> gr.HTML:
    """Create a styled metric card"""
    color = "#FF6B6B" if is_critical else "#4ECDC4"
    bg_color = "rgba(255,107,107,0.1)" if is_critical else "rgba(78,205,196,0.1)"
    
    html = f"""
    <div style='
        padding: 15px;
        background: {bg_color};
        border-radius: 8px;
        border-left: 4px solid {color};
        margin: 10px 0;
    '>
        <div style='font-size: 12px; color: #666; margin-bottom: 5px;'>{title}</div>
        <div style='font-size: 18px; font-weight: bold; color: {color};'>{value}</div>
    </div>
    """
    return gr.HTML(value=html)

def create_business_impact_section(impact_data: Dict[str, str]) -> gr.HTML:
    """Create business impact section"""
    html = "<div style='margin: 20px 0;'>"
    html += "<h4 style='margin: 0 0 15px 0; color: #2c3e50;'>💰 Business Impact</h4>"
    
    for key, value in impact_data.items():
        is_loss = any(word in key.lower() for word in ['loss', 'impact', 'violation'])
        icon = "📉" if is_loss else "📊"
        
        html += f"""
        <div style='
            display: flex;
            justify-content: space-between;
            padding: 10px 15px;
            background: {'rgba(255,107,107,0.05)' if is_loss else 'rgba(78,205,196,0.05)'};
            border-radius: 6px;
            margin: 8px 0;
            border-left: 3px solid {'#FF6B6B' if is_loss else '#4ECDC4'};
        '>
            <span>{icon} {key}</span>
            <span style='font-weight: bold; color: {'#FF6B6B' if is_loss else '#4ECDC4'};'>{value}</span>
        </div>
        """
    
    html += "</div>"
    return gr.HTML(value=html)

def create_approval_workflow(requires_approval: bool = True) -> gr.HTML:
    """Create approval workflow visualization"""
    if requires_approval:
        html = """
        <div style='
            padding: 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 10px;
            border: 2px dashed #6c757d;
            margin: 15px 0;
        '>
            <div style='display: flex; align-items: center; margin-bottom: 15px;'>
                <div style='
                    background: #007bff;
                    color: white;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 10px;
                '>1</div>
                <h4 style='margin: 0;'>🛡️ Approval Required</h4>
            </div>
            
            <div style='display: flex; justify-content: space-between; margin-bottom: 15px;'>
                <div style='text-align: center;'>
                    <div style='font-size: 24px;'>🤖</div>
                    <div style='font-size: 12px;'>ARF Analysis</div>
                </div>
                <div style='align-self: center;'>→</div>
                <div style='text-align: center;'>
                    <div style='font-size: 24px;'>👨‍💼</div>
                    <div style='font-size: 12px;'>Human Review</div>
                </div>
                <div style='align-self: center;'>→</div>
                <div style='text-align: center;'>
                    <div style='font-size: 24px;'>⚡</div>
                    <div style='font-size: 12px;'>Execution</div>
                </div>
            </div>
            
            <div style='
                background: rgba(0,123,255,0.1);
                padding: 10px;
                border-radius: 5px;
                font-size: 14px;
            '>
                <b>Status:</b> ✅ <span style='color: #28a745;'>Approved & Executed</span>
            </div>
        </div>
        """
    else:
        html = """
        <div style='
            padding: 20px;
            background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
            border-radius: 10px;
            border: 2px solid #28a745;
            margin: 15px 0;
        '>
            <div style='display: flex; align-items: center; margin-bottom: 15px;'>
                <div style='
                    background: #28a745;
                    color: white;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 10px;
                '>⚡</div>
                <h4 style='margin: 0;'>Autonomous Execution</h4>
            </div>
            
            <div style='text-align: center; margin: 20px 0;'>
                <div style='font-size: 48px; margin-bottom: 10px;'>🤖 → ⚡</div>
                <div style='color: #666;'>ARF directly executes with safety guardrails</div>
            </div>
            
            <div style='
                background: rgba(40,167,69,0.1);
                padding: 10px;
                border-radius: 5px;
                font-size: 14px;
            '>
                <b>Status:</b> ✅ <span style='color: #28a745;'>Auto-Executed Successfully</span>
            </div>
        </div>
        """
    
    return gr.HTML(value=html)

def create_roi_comparison_table() -> gr.HTML:
    """Create ROI comparison table"""
    html = """
    <div style='margin: 20px 0;'>
        <h4 style='margin: 0 0 15px 0; color: #2c3e50;'>📊 Capability Comparison</h4>
        
        <table style='
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            overflow: hidden;
        '>
            <thead>
                <tr style='background: #f8f9fa;'>
                    <th style='padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;'>Feature</th>
                    <th style='padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;'>OSS (Free)</th>
                    <th style='padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;'>Enterprise</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6;'>Execution</td>
                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #dc3545;'>❌ Advisory only</td>
                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #28a745;'>✅ Autonomous</td>
                </tr>
                <tr>
                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6;'>Learning</td>
                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #dc3545;'>❌ None</td>
                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #28a745;'>✅ Continuous</td>
                </tr>
                <tr>
                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6;'>ROI Measurement</td>
                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #dc3545;'>❌ No ROI</td>
                    <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #28a745;'>✅ 5.2× average</td>
                </tr>
                <tr>
                    <td style='padding: 10px;'>Payback Period</td>
                    <td style='padding: 10px;'>N/A</td>
                    <td style='padding: 10px; color: #28a745;'>✅ 2-3 months</td>
                </tr>
            </tbody>
        </table>
    </div>
    """
    return gr.HTML(value=html)