ui/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.
    Removes the checkbox selector for a cleaner, always-visible design.

    Returns:
        gr.HTML: The Gradio HTML component that will display the formatted OKRs.
    """

    # Custom CSS for modern OKR styling
    okr_custom_css = """
    <style>
    /* Overall Container */
    .okr-container {
        font-family: 'Inter', sans-serif; /* Using Inter font */
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        padding: 2rem;
        margin: -1rem; /* Adjust margin to fill the space */
        box-sizing: border-box; /* Ensure padding is included in width/height */
        overflow-y: auto; /* Enable scrolling if content overflows */
    }

    /* Header Section */
    .okr-header {
        text-align: center;
        margin-bottom: 3rem;
        color: white; /* Keep general header text white */
    }

    .okr-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        /* Removed background-clip and text-fill-color from here */
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        display: flex; /* Use flexbox to align emoji and text */
        justify-content: center;
        align-items: center;
        gap: 0.75rem; /* Space between emoji and text */
    }

    /* New class for the text content within the title */
    .okr-title-content {
        background: linear-gradient(45deg, #ffffff, #e0e7ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Ensure emoji maintains its default color */
    .okr-title-emoji {
        font-size: 2.5rem; /* Match title font size for consistent sizing */
        color: initial; /* Reset color to browser default for emoji */
        -webkit-text-fill-color: initial; /* Reset text fill for emoji */
        background-clip: initial; /* Reset background clip for emoji */
    }


    .okr-subtitle {
        font-size: 1.2rem;
        opacity: 0.9;
        font-weight: 300;
        letter-spacing: 0.5px;
    }

    /* Stats Bar */
    .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; /* Amber color for numbers */
    }

    .stat-label {
        font-size: 0.9rem;
        opacity: 0.9;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Main Content Area */
    .okr-content {
        background: white;
        border-radius: 24px;
        padding: 0;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        overflow: hidden; /* Ensures rounded corners are applied to children */
        margin-top: 2rem;
    }

    /* Objective Card */
    .okr-objective {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border-left: 6px solid #3b82f6; /* Blue border for objectives */
        margin: 2rem; /* Add margin within the white content box */
        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 */
    .objective-header {
        padding: 2rem;
        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
        color: white;
        position: relative;
        overflow: hidden;
    }

    .objective-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        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 */
    .key-results-container {
        padding: 2rem; /* Consistent padding for content within objectives */
    }

    /* Key Result Card */
    .key-result {
        background: white;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        margin: 1.5rem 0;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .key-result:hover {
        border-color: #3b82f6;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    }

    .kr-header {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        padding: 1.5rem;
        border-bottom: 1px solid #e5e7eb;
    }

    .kr-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #1e293b;
        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);
        color: #1e40af;
        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 */
    .tasks-section {
        padding: 1.5rem;
    }

    .tasks-title {
        font-size: 1rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .task-item {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1.25rem;
        margin: 1rem 0;
        transition: all 0.2s ease;
    }

    .task-item:hover {
        background: #f3f4f6;
        border-color: #d1d5db;
    }

    .task-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
        gap: 1rem;
    }

    .task-title {
        font-weight: 600;
        color: #111827;
        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 Colors */
    .priority-high {
        background: #fef2f2;
        color: #dc2626;
        border: 1px solid #fca5a5;
    }

    .priority-medium {
        background: #fffbeb;
        color: #d97706;
        border: 1px solid #fcd34d;
    }

    .priority-low {
        background: #f0fdf4;
        color: #16a34a;
        border: 1px solid #86efac;
    }

    /* Task Details Grid */
    .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;
    }

    .task-detail-label {
        font-weight: 500;
        color: #374151;
        min-width: 80px;
    }

    /* Task Description/Rationale */
    .task-description {
        margin-top: 1rem;
        padding: 1rem;
        background: white;
        border-radius: 6px;
        border-left: 3px solid #3b82f6;
        font-size: 0.9rem;
        line-height: 1.5;
        color: #4b5563;
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #6b7280;
    }

    .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;
    }

    /* Loading Spinner */
    .loading-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid #f3f4f6;
        border-radius: 50%;
        border-top-color: #3b82f6;
        animation: spin 1s ease-in-out infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* Responsive Adjustments */
    @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(elem_classes=["okr-root-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() -> str:
    """
    Returns the initial HTML display for the OKR tab, showing a loading state.

    Returns:
        str: HTML string for the initial OKR display.
    """
    return """
    <div class="okr-container">
        <div class="okr-header">
            <div class="okr-title">
                <span class="okr-title-emoji">🎯</span>
                <span class="okr-title-content">AI-Generated OKRs & Strategic Tasks</span>
            </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(reconstruction_cache: dict) -> str:
    """
    Enhanced formatting function that creates beautiful HTML for OKR display
    from the reconstruction cache dictionary.

    Args:
        reconstruction_cache (dict): The reconstruction cache containing reconstructed data.
                                     Expected to contain report data with 'actionable_okrs' key.

    Returns:
        str: A comprehensive HTML string representing the OKRs, or an empty state HTML.
    """
    if not reconstruction_cache:
        logger.warning("No reconstruction cache found for display.")
        return get_empty_okr_state()

    # Extract actionable_okrs from the first (and typically only) report in cache
    for report_id, report_data in reconstruction_cache.items():
        if isinstance(report_data, dict) and 'actionable_okrs' in report_data:
            raw_results = {'actionable_okrs': report_data['actionable_okrs']}
            break
    else:
        logger.warning("No 'actionable_okrs' found in reconstruction cache for display.")
        return get_empty_okr_state()

    actionable_okrs = raw_results.get("actionable_okrs", {})
    okrs_list = actionable_okrs.get("okrs", [])

    if not okrs_list:
        logger.info("No OKRs found in 'actionable_okrs' list.")
        return get_empty_okr_state()

    # Calculate statistics for the stats bar
    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 structure
    html_parts = [f"""
    <div class="okr-container">
        <div class="okr-header">
            <div class="okr-title">
                <span class="okr-title-emoji">🎯</span>
                <span class="okr-title-content">AI-Generated OKRs & Strategic Tasks</span>
            </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('description', f"Unnamed Objective {okr_idx + 1}")
        timeline = okr_data.get('timeline', 'Not specified')
        owner = okr_data.get('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 isinstance(key_results, list) or 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 Objective {okr_idx+1} at index {kr_idx} is not a dictionary, skipping.")
                    continue

                kr_desc = kr_data.get('description', f"Unnamed 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 and isinstance(tasks, list):
                    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 Key Result {kr_idx+1} at index {task_idx} is not a dictionary, skipping.")
                            continue

                        task_desc = task_data.get('description', f"Unnamed Task {task_idx + 1}")
                        task_category = task_data.get('category', 'General')
                        
                        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">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('deliverable')
                        success_criteria = task_data.get('success_criteria_metrics')
                        why_proposed = task_data.get('why')
                        priority_just = task_data.get('priority_justification')
                        dependencies = task_data.get('dependencies')

                        detail_lines = []
                        if obj_deliverable:
                            detail_lines.append(f'<strong>Objective/Deliverable:</strong> {obj_deliverable}')
                        if success_criteria:
                            detail_lines.append(f'<strong>Success Metrics:</strong> {success_criteria}')
                        if why_proposed:
                            detail_lines.append(f'<strong>Rationale:</strong> {why_proposed}')
                        if priority_just:
                            detail_lines.append(f'<strong>Priority Justification:</strong> {priority_just}')
                        if dependencies:
                            detail_lines.append(f'<strong>Dependencies:</strong> {dependencies}')

                        if detail_lines:
                            html_parts.append('<div class="task-description">')
                            html_parts.append('<br>'.join(detail_lines))
                            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-small">
                                <div class="empty-state-icon">📄</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() -> str:
    """
    Returns empty state HTML for when no OKRs are available.

    Returns:
        str: HTML string for the empty OKR state.
    """
    return """
    <div class="okr-container">
        <div class="okr-header">
            <div class="okr-title">
                <span class="okr-title-emoji">🎯</span>
                <span class="okr-title-content">AI-Generated OKRs & Strategic Tasks</span>
            </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>
    """