ui/okr_ui_generator.py

#okr_ui_generator.py
import gradio as gr
from typing import Dict, Any, List, Optional
import pandas as pd
import logging

logger = logging.getLogger(__name__)

def create_enhanced_okr_tab():
    """
    Creates a modern, visually appealing OKR tab with improved layout and styling.
    It returns the Gradio HTML component that will display the OKR content.
    """
    
    # Custom CSS for modern OKR styling
    okr_custom_css = """
    <style>
    /* Ensure the main container fills the available space and removes default Gradio padding */
    .okr-container {
        font-family: 'Inter', sans-serif; /* Using Inter font as per guidelines */
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh; /* Ensure it takes full viewport height */
        padding: 2rem;
        margin: -1rem; /* Adjust for Gradio's default padding */
        box-sizing: border-box; /* Include padding in element's total width and height */
    }
    
    .okr-header {
        text-align: center;
        margin-bottom: 3rem;
        color: white;
    }
    
    .okr-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        background: linear-gradient(45deg, #ffffff, #e0e7ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .okr-subtitle {
        font-size: 1.2rem;
        opacity: 0.9;
        font-weight: 300;
        letter-spacing: 0.5px;
    }
    
    .okr-stats-bar {
        display: flex;
        justify-content: center;
        gap: 2rem;
        margin: 2rem 0;
        flex-wrap: wrap;
    }
    
    .stat-card {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        padding: 1.5rem;
        text-align: center;
        color: white;
        min-width: 140px;
        transition: all 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    }
    
    .stat-number {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
        color: #fbbf24; /* Tailwind yellow-400 */
    }
    
    .stat-label {
        font-size: 0.9rem;
        opacity: 0.9;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .okr-content {
        background: white;
        border-radius: 24px;
        padding: 0;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        overflow: hidden;
        margin-top: 2rem;
    }
    
    .okr-objective {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); /* Tailwind slate-50 to slate-200 */
        border-left: 6px solid #3b82f6; /* Tailwind blue-500 */
        margin: 2rem 0;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }
    
    .okr-objective:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    }
    
    .objective-header {
        padding: 2rem;
        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); /* Tailwind blue-700 to blue-500 */
        color: white;
        position: relative;
        overflow: hidden;
    }
    
    .objective-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* Subtle background pattern */
        background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M20 20c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8zm0-20c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8z'/%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
    }
    
    .objective-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
        position: relative;
        z-index: 1;
    }
    
    .objective-meta {
        display: flex;
        gap: 2rem;
        margin-top: 1rem;
        flex-wrap: wrap;
        position: relative;
        z-index: 1;
    }
    
    .meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        opacity: 0.9;
    }
    
    .meta-icon {
        width: 16px;
        height: 16px;
        opacity: 0.8;
    }
    
    .key-results-container {
        padding: 2rem;
    }
    
    .key-result {
        background: white;
        border: 2px solid #e5e7eb; /* Tailwind neutral-200 */
        border-radius: 12px;
        margin: 1.5rem 0;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .key-result:hover {
        border-color: #3b82f6; /* Tailwind blue-500 */
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    }
    
    .kr-header {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); /* Tailwind slate-50 to slate-100 */
        padding: 1.5rem;
        border-bottom: 1px solid #e5e7eb; /* Tailwind neutral-200 */
    }
    
    .kr-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #1e293b; /* Tailwind slate-800 */
        margin-bottom: 0.75rem;
    }
    
    .kr-metrics {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
        margin-top: 1rem;
    }
    
    .kr-metric {
        background: rgba(59, 130, 246, 0.1); /* Tailwind blue-500 with opacity */
        color: #1e40af; /* Tailwind blue-700 */
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 500;
        border: 1px solid rgba(59, 130, 246, 0.2);
    }
    
    .tasks-section {
        padding: 1.5rem;
    }
    
    .tasks-title {
        font-size: 1rem;
        font-weight: 600;
        color: #374151; /* Tailwind gray-700 */
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .task-item {
        background: #f9fafb; /* Tailwind gray-50 */
        border: 1px solid #e5e7eb; /* Tailwind neutral-200 */
        border-radius: 8px;
        padding: 1.25rem;
        margin: 1rem 0;
        transition: all 0.2s ease;
    }
    
    .task-item:hover {
        background: #f3f4f6; /* Tailwind gray-100 */
        border-color: #d1d5db; /* Tailwind gray-300 */
    }
    
    .task-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
        gap: 1rem;
    }
    
    .task-title {
        font-weight: 600;
        color: #111827; /* Tailwind gray-900 */
        flex: 1;
        line-height: 1.4;
    }
    
    .task-priority {
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }
    
    .priority-high {
        background: #fef2f2; /* Tailwind red-50 */
        color: #dc2626; /* Tailwind red-600 */
        border: 1px solid #fca5a5; /* Tailwind red-300 */
    }
    
    .priority-medium {
        background: #fffbeb; /* Tailwind amber-50 */
        color: #d97706; /* Tailwind amber-700 */
        border: 1px solid #fcd34d; /* Tailwind amber-300 */
    }
    
    .priority-low {
        background: #f0fdf4; /* Tailwind green-50 */
        color: #16a34a; /* Tailwind green-600 */
        border: 1px solid #86efac; /* Tailwind green-300 */
    }
    
    .task-details {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }
    
    .task-detail-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        color: #6b7280; /* Tailwind gray-500 */
    }
    
    .task-detail-label {
        font-weight: 500;
        color: #374151; /* Tailwind gray-700 */
        min-width: 80px;
    }
    
    .task-description {
        margin-top: 1rem;
        padding: 1rem;
        background: white;
        border-radius: 6px;
        border-left: 3px solid #3b82f6; /* Tailwind blue-500 */
        font-size: 0.9rem;
        line-height: 1.5;
        color: #4b5563; /* Tailwind gray-600 */
    }
    
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #6b7280; /* Tailwind gray-500 */
    }
    
    .empty-state-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    .empty-state-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #374151; /* Tailwind gray-700 */
    }
    
    .loading-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid #f3f4f6; /* Tailwind gray-200 */
        border-radius: 50%;
        border-top-color: #3b82f6; /* Tailwind blue-500 */
        animation: spin 1s ease-in-out infinite;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    @media (max-width: 768px) {
        .okr-container {
            padding: 1rem;
        }
        
        .okr-title {
            font-size: 2rem;
        }
        
        .okr-stats-bar {
            gap: 1rem;
        }
        
        .stat-card {
            min-width: 120px;
            padding: 1rem;
        }
        
        .objective-meta {
            flex-direction: column;
            gap: 1rem;
        }
        
        .task-details {
            grid-template-columns: 1fr;
        }
        
        .task-header {
            flex-direction: column;
            align-items: flex-start;
        }
    }
    </style>
    """
    
    with gr.Column():
        # Inject custom CSS
        gr.HTML(okr_custom_css)
        
        # Main OKR display area with enhanced styling
        okr_display_html = gr.HTML(
            value=get_initial_okr_display(),
            elem_classes=["okr-display"]
        )
        
    return okr_display_html

def get_initial_okr_display():
    """Returns the initial HTML display for the OKR tab when loading."""
    return """
    <div class="okr-container">
        <div class="okr-header">
            <div class="okr-title">🎯 AI-Generated OKRs & Strategic Tasks</div>
            <div class="okr-subtitle">Intelligent objectives and key results based on your LinkedIn analytics</div>
        </div>
        
        <div class="okr-stats-bar">
            <div class="stat-card">
                <div class="stat-number">-</div>
                <div class="stat-label">Objectives</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">-</div>
                <div class="stat-label">Key Results</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">-</div>
                <div class="stat-label">Tasks</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">-</div>
                <div class="stat-label">High Priority</div>
            </div>
        </div>
        
        <div class="okr-content">
            <div class="empty-state">
                <div class="empty-state-icon">⏳</div>
                <div class="empty-state-title">Loading OKR Analysis</div>
                <div class="empty-state-description">
                    <div class="loading-spinner"></div>
                    Generating intelligent objectives and actionable tasks from your LinkedIn data...
                </div>
            </div>
        </div>
    </div>
    """

def format_okrs_for_enhanced_display(raw_results: dict) -> str:
    """
    Enhanced formatting function that creates beautiful HTML for OKR display
    based on the raw agentic analysis results.
    """
    if not raw_results or not raw_results.get("actionable_okrs"):
        logger.info("No raw_results or actionable_okrs found for formatting.")
        return get_empty_okr_state()
    
    actionable_okrs = raw_results.get("actionable_okrs", {})
    okrs_list = actionable_okrs.get("okrs", [])
    
    if not okrs_list:
        logger.info("OKR list is empty, returning empty state.")
        return get_empty_okr_state()
    
    # Calculate statistics
    total_objectives = len(okrs_list)
    total_key_results = sum(len(okr.get('key_results', [])) for okr in okrs_list)
    total_tasks = sum(
        len(kr.get('tasks', [])) 
        for okr in okrs_list 
        for kr in okr.get('key_results', [])
    )
    high_priority_tasks = sum(
        1 for okr in okrs_list 
        for kr in okr.get('key_results', [])
        for task in kr.get('tasks', [])
        if task.get('priority', '').lower() == 'high'
    )
    
    # Build the HTML
    html_parts = [f"""
    <div class="okr-container">
        <div class="okr-header">
            <div class="okr-title">🎯 AI-Generated OKRs & Strategic Tasks</div>
            <div class="okr-subtitle">Intelligent objectives and key results based on your LinkedIn analytics</div>
        </div>
        
        <div class="okr-stats-bar">
            <div class="stat-card">
                <div class="stat-number">{total_objectives}</div>
                <div class="stat-label">Objectives</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{total_key_results}</div>
                <div class="stat-label">Key Results</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{total_tasks}</div>
                <div class="stat-label">Tasks</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{high_priority_tasks}</div>
                <div class="stat-label">High Priority</div>
            </div>
        </div>
        
        <div class="okr-content">
    """]
    
    for okr_idx, okr_data in enumerate(okrs_list):
        if not isinstance(okr_data, dict):
            logger.warning(f"OKR item at index {okr_idx} is not a dictionary, skipping.")
            continue
            
        objective = okr_data.get('objective_description', f"Objective {okr_idx + 1}")
        timeline = okr_data.get('objective_timeline', 'Not specified')
        owner = okr_data.get('objective_owner', 'Not assigned')
        
        html_parts.append(f"""
        <div class="okr-objective">
            <div class="objective-header">
                <div class="objective-title">Objective {okr_idx + 1}: {objective}</div>
                <div class="objective-meta">
                    <div class="meta-item">
                        <span class="meta-icon">⏰</span>
                        <span>Timeline: {timeline}</span>
                    </div>
                    <div class="meta-item">
                        <span class="meta-icon">👤</span>
                        <span>Owner: {owner}</span>
                    </div>
                </div>
            </div>
            
            <div class="key-results-container">
        """)
        
        key_results = okr_data.get('key_results', [])
        
        if not key_results:
            html_parts.append('<div class="empty-state">No key results defined for this objective.</div>')
        else:
            for kr_idx, kr_data in enumerate(key_results):
                if not isinstance(kr_data, dict):
                    logger.warning(f"Key Result item for OKR '{objective}' at KR index {kr_idx} is not a dictionary, skipping.")
                    continue
                    
                kr_desc = kr_data.get('key_result_description', f"Key Result {kr_idx + 1}")
                target_metric = kr_data.get('target_metric', '')
                target_value = kr_data.get('target_value', '')
                kr_type = kr_data.get('key_result_type', '')
                data_subject = kr_data.get('data_subject', '')
                
                html_parts.append(f"""
                <div class="key-result">
                    <div class="kr-header">
                        <div class="kr-title">Key Result {kr_idx + 1}: {kr_desc}</div>
                        <div class="kr-metrics">
                """)
                
                if target_metric and target_value:
                    html_parts.append(f'<div class="kr-metric">Target: {target_metric} → {target_value}</div>')
                if kr_type:
                    html_parts.append(f'<div class="kr-metric">Type: {kr_type}</div>')
                if data_subject:
                    html_parts.append(f'<div class="kr-metric">Data Subject: {data_subject}</div>')
                
                html_parts.append('</div></div>')
                
                # Add tasks
                tasks = kr_data.get('tasks', [])
                if tasks:
                    html_parts.append("""
                    <div class="tasks-section">
                        <div class="tasks-title">
                            <span>📋</span>
                            <span>Associated Tasks</span>
                        </div>
                    """)
                    
                    for task_idx, task_data in enumerate(tasks):
                        if not isinstance(task_data, dict):
                            logger.warning(f"Task item for KR '{kr_desc}' at task index {task_idx} is not a dictionary, skipping.")
                            continue
                            
                        task_desc = task_data.get('task_description', f"Task {task_idx + 1}")
                        task_category = task_data.get('task_category', 'General')
                        task_type = task_data.get('task_type', 'Action')
                        priority = task_data.get('priority', 'Medium').lower()
                        effort = task_data.get('effort', 'Not specified')
                        timeline = task_data.get('timeline', 'Not specified')
                        responsible = task_data.get('responsible_party', 'Not assigned')
                        
                        priority_class = f"priority-{priority}" if priority in ['high', 'medium', 'low'] else 'priority-medium'
                        
                        html_parts.append(f"""
                        <div class="task-item">
                            <div class="task-header">
                                <div class="task-title">{task_idx + 1}. {task_desc}</div>
                                <div class="task-priority {priority_class}">{priority.upper()}</div>
                            </div>
                            
                            <div class="task-details">
                                <div class="task-detail-item">
                                    <span class="task-detail-label">Category:</span>
                                    <span>{task_category}</span>
                                </div>
                                <div class="task-detail-item">
                                    <span class="task-detail-label">Type:</span>
                                    <span>{task_type}</span>
                                </div>
                                <div class="task-detail-item">
                                    <span class="task-detail-label">Effort:</span>
                                    <span>{effort}</span>
                                </div>
                                <div class="task-detail-item">
                                    <span class="task-detail-label">Timeline:</span>
                                    <span>{timeline}</span>
                                </div>
                                <div class="task-detail-item">
                                    <span class="task-detail-label">Responsible:</span>
                                    <span>{responsible}</span>
                                </div>
                            </div>
                        """)
                        
                        # Add additional details if available
                        obj_deliverable = task_data.get('objective_deliverable')
                        success_criteria = task_data.get('success_criteria_metrics')
                        why_proposed = task_data.get('why_proposed')
                        
                        if obj_deliverable or success_criteria or why_proposed:
                            html_parts.append('<div class="task-description">')
                            if obj_deliverable:
                                html_parts.append(f'<strong>Objective/Deliverable:</strong> {obj_deliverable}<br>')
                            if success_criteria:
                                html_parts.append(f'<strong>Success Metrics:</strong> {success_criteria}<br>')
                            if why_proposed:
                                html_parts.append(f'<strong>Rationale:</strong> {why_proposed}')
                            html_parts.append('</div>')
                            
                        html_parts.append('</div>') # Close task-item
                        
                    html_parts.append('</div>') # Close tasks-section
                else:
                    html_parts.append("""
                    <div class="tasks-section">
                        <div class="empty-state" style="padding: 1rem;">
                            <div class="empty-state-icon" style="font-size: 1.5rem; margin-bottom: 0.5rem;">🤷</div>
                            <div class="empty-state-description">No tasks defined for this Key Result.</div>
                        </div>
                    </div>
                    """)
                
                html_parts.append('</div>') # Close key-result
            
        html_parts.append('</div></div>') # Close key-results-container and okr-objective
    
    html_parts.append('</div></div>') # Close okr-content and okr-container
    
    return ''.join(html_parts)

def get_empty_okr_state():
    """Returns empty state HTML for when no OKRs are available."""
    return """
    <div class="okr-container">
        <div class="okr-header">
            <div class="okr-title">🎯 AI-Generated OKRs & Strategic Tasks</div>
            <div class="okr-subtitle">Intelligent objectives and key results based on your LinkedIn analytics</div>
        </div>
        
        <div class="okr-stats-bar">
            <div class="stat-card">
                <div class="stat-number">0</div>
                <div class="stat-label">Objectives</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">0</div>
                <div class="stat-label">Key Results</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">0</div>
                <div class="stat-label">Tasks</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">0</div>
                <div class="stat-label">High Priority</div>
            </div>
        </div>
        
        <div class="okr-content">
            <div class="empty-state">
                <div class="empty-state-icon">📋</div>
                <div class="empty-state-title">No OKRs Available</div>
                <div class="empty-state-description">
                    OKR analysis has not been generated yet or no data is available.<br>
                    Please ensure your LinkedIn data has been loaded and the AI analysis has completed.
                </div>
            </div>
        </div>
    </div>
    """