ui/ui_main_page_enhancements.py

#ui_main_page_enhancements.py
import gradio as gr
import pandas as pd # Needed for state variables that hold DataFrames

# Custom CSS for professional, modern UI
CUSTOM_CSS = """
/* === ROOT VARIABLES === */
:root {
    --primary-color: #0A66C2;
    --primary-hover: #004182;
    --secondary-color: #5E9ED6;
    --accent-color: #F3F2EF;
    --success-color: #57C4A3;
    --warning-color: #F5B800;
    --error-color: #CC1016;
    --text-primary: #000000DE;
    --text-secondary: #00000099;
    --text-tertiary: #00000061;
    --background-primary: #FFFFFF;
    --background-secondary: #F8F9FA;
    --background-tertiary: #F3F2EF;
    --border-color: #E5E5E5;
    --border-radius: 12px;
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.16);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === GLOBAL STYLES === */
.gradio-container {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.gradio-container .main {
    background: transparent;
    padding: 0;
    max-width: none !important;
}

/* === MAIN HEADER === */
.main-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 2rem 0;
    margin: -1rem -1rem 2rem -1rem;
    text-align: center;
    box-shadow: var(--shadow-medium);
    position: relative;
    overflow: hidden;
}

.main-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.main-header h1 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.main-header .subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-top: 0.5rem;
    position: relative;
    z-index: 1;
}

/* === STATUS BAR === */
.status-container {
    background: var(--background-primary);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-light);
    border-left: 4px solid var(--primary-color);
}

/* === TAB CONTAINER === */
.tab-nav {
    background: var(--background-primary);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    box-shadow: var(--shadow-light);
    margin-bottom: 1.5rem;
    border: none;
}

.tab-nav button {
    background: transparent !important;
    border: none !important;
    padding: 1rem 1.5rem !important;
    margin: 0 0.25rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: var(--transition) !important;
    color: var(--text-secondary) !important;
    position: relative;
}

.tab-nav button:hover {
    background: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    transform: translateY(-2px);
}

.tab-nav button.selected {
    background: var(--primary-color) !important;
    color: white !important;
    box-shadow: var(--shadow-medium);
}

/* === TAB CONTENT === */
.tabitem {
    background: var(--background-primary);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    margin-top: 0;
}

/* === FORM ELEMENTS === */
.gr-form {
    background: var(--background-primary);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
}

input, textarea, select {
    border: 2px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    transition: var(--transition) !important;
    background: var(--background-primary) !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.1) !important;
    outline: none !important;
}

/* === BUTTONS === */
.gr-button {
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: var(--transition) !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-light);
}

.gr-button:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.gr-button.secondary {
    background: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-color) !important;
}

.gr-button.secondary:hover {
    background: var(--background-tertiary) !important;
    border-color: var(--primary-color) !important;
}

/* === CARDS === */
.card {
    background: var(--background-primary);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    margin-bottom: 1rem;
}

.card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

.card-header {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-content {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* === CHARTS AND PLOTS === */
.plot-container {
    background: var(--background-primary);
    border-radius: var(--border-radius);
    padding: 1rem;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    margin: 1rem 0;
}

/* === MARKDOWN CONTENT === */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    color: var(--text-primary);
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.markdown-content h1 {
    font-size: 2rem;
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: 0.5rem;
}

.markdown-content h2 {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.markdown-content h3 {
    font-size: 1.25rem;
    color: var(--secondary-color);
}

.markdown-content p {
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.markdown-content ul, .markdown-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.markdown-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.markdown-content code {
    background: var(--background-tertiary);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
}

.markdown-content pre {
    background: var(--background-tertiary);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
}

/* === LOADING STATES === */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(10, 102, 194, 0.3);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s ease-in-out infinite;
}

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

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .main-header h1 {
        font-size: 2rem !important;
    }
    
    .tabitem {
        padding: 1rem;
    }
    
    .tab-nav button {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* === ACCESSIBILITY === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === GRADIO SPECIFIC OVERRIDES === */
.gradio-container .wrap {
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--border-color) !important;
}

.gradio-container .panel {
    background: var(--background-primary) !important;
    border-radius: var(--border-radius) !important;
}

.gradio-container .form {
    background: transparent !important;
}

/* === STATUS INDICATORS === */
.status-success {
    color: var(--success-color) !important;
    background: rgba(87, 196, 163, 0.1) !important;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border-left: 4px solid var(--success-color);
}

.status-warning {
    color: var(--warning-color) !important;
    background: rgba(245, 184, 0, 0.1) !important;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border-left: 4px solid var(--warning-color);
}

.status-error {
    color: var(--error-color) !important;
    background: rgba(204, 16, 22, 0.1) !important;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border-left: 4px solid var(--error-color);
}

/* === HIDE GRADIO FOOTER === */
footer {
    display: none !important;
}

.footer {
    display: none !important;
}

/* === IMPROVE SPACING === */
.block {
    margin-bottom: 1.5rem !important;
}

/* === CUSTOM COMPONENTS === */
.metric-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow-medium);
    margin: 0.5rem;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.metric-label {
    font-size: 0.9rem;
    opacity: 0.9;
}
"""

# Custom theme
custom_theme = gr.themes.Soft(
    primary_hue="blue",
    secondary_hue="sky",
    neutral_hue="slate",
    spacing_size="md",
    radius_size="md"
).set(
    body_background_fill="linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)",
    block_background_fill="white",
    block_border_width="1px",
    block_border_color="#e5e5e5",
    block_radius="12px",
    block_shadow="0 2px 8px rgba(0, 0, 0, 0.08)",
    button_primary_background_fill="#0A66C2",
    button_primary_background_fill_hover="#004182",
    button_primary_text_color="white",
    button_secondary_background_fill="#f8f9fa",
    button_secondary_background_fill_hover="#f3f2ef",
    input_border_color="#e5e5e5",
    input_border_color_focus="#0A66C2",
    input_border_width="2px"
)

def update_report_display_enhanced(selected_report_id: str, current_token_state: dict, format_report_for_display_func):
    """
    Updates the report header and body display when a new report is selected.
    This function now expects format_report_for_display to return a dict with
    'header_html' and 'body_markdown'.

    Args:
        selected_report_id (str): The ID of the selected report.
        current_token_state (dict): The current state dictionary containing data.
        format_report_for_display_func (callable): The function to format report data.

    Returns:
        tuple: A tuple of gr.update objects for the header and body displays.
    """
    # Define empty states for header and body with improved styling
    empty_header_html = """
    <div class="card">
        <div class="card-header">
            📊 Comprehensive Analysis Report
        </div>
        <div class="card-content">
            <p>AI-Generated Insights from Your LinkedIn Data</p>
            <div class="status-badge">Generated from Bubble.io</div>
        </div>
    </div>
    """
    empty_body_markdown_no_selection = """
    <div class="card" style="text-align: center; padding: 3rem;">
        <div style="font-size: 3rem; margin-bottom: 1rem;">📋</div>
        <h3 style="color: var(--text-primary); margin-bottom: 0.5rem;">Select a Report</h3>
        <p style="color: var(--text-secondary);">
            Choose a report from the dropdown above to view its detailed analysis and insights.
        </p>
    </div>
    """
    empty_body_markdown_no_data = """
    <div class="card" style="text-align: center; padding: 3rem;">
        <div style="font-size: 3rem; margin-bottom: 1rem;">⚠️</div>
        <h3 style="color: var(--warning-color); margin-bottom: 0.5rem;">Data Not Available</h3>
        <p style="color: var(--text-secondary);">
            Analysis data is not loaded or is empty. Please try refreshing the page.
        </p>
    </div>
    """
    empty_body_markdown_not_found = lambda _id: f"""
    <div class="card" style="text-align: center; padding: 3rem;">
        <div style="font-size: 3rem; margin-bottom: 1rem;">❌</div>
        <h3 style="color: var(--error-color); margin-bottom: 0.5rem;">Report Not Found</h3>
        <p style="color: var(--text-secondary);">
            Report with ID '{_id}' was not found in the database.
        </p>
    </div>
    """

    if not selected_report_id:
        return gr.update(value=empty_header_html), gr.update(value=empty_body_markdown_no_selection)

    agentic_df = current_token_state.get("bubble_agentic_analysis_data")
    if agentic_df is None or agentic_df.empty:
        return gr.update(value=empty_header_html), gr.update(value=empty_body_markdown_no_data)

    selected_report_series_df = agentic_df[agentic_df['_id'] == selected_report_id]
    if selected_report_series_df.empty:
        return gr.update(value=empty_header_html), gr.update(value=empty_body_markdown_not_found(selected_report_id))

    selected_report_series = selected_report_series_df.iloc[0]

    # Call the format_report_for_display, which now returns a dict
    formatted_content_parts = format_report_for_display_func(selected_report_series)

    # Update the two separate Gradio components
    return (
        gr.update(value=formatted_content_parts['header_html']),
        gr.update(value=formatted_content_parts['body_markdown'])
    )

def build_main_app_ui(
    analytics_tab_instance,
    AGENTIC_MODULES_LOADED,
    build_home_tab_ui_func,
    create_enhanced_report_tab_func,
    create_enhanced_okr_tab_func,
    format_report_for_display_func # New argument to pass the formatting function
):
    """
    Builds the main Gradio application UI with enhanced styling and structure.

    Args:
        analytics_tab_instance (AnalyticsTab): An instance of the AnalyticsTab class.
        AGENTIC_MODULES_LOADED (bool): Flag indicating if agentic modules are loaded.
        build_home_tab_ui_func (callable): Function to build the Home tab UI.
        create_enhanced_report_tab_func (callable): Function to create the enhanced Report tab.
        create_enhanced_okr_tab_func (callable): Function to create the enhanced OKR tab.
        format_report_for_display_func (callable): Function to format report data for display.

    Returns:
        tuple: A tuple containing:
            - app (gr.Blocks): The main Gradio application object.
            - url_user_token_display (gr.Textbox): Hidden component for user token.
            - org_urn_display (gr.Textbox): Hidden component for organization URN.
            - status_box (gr.Textbox): Component for system status.
            - token_state (gr.State): Gradio state for token and data.
            - reconstruction_cache_st (gr.State): State for reconstructed OKR data cache.
            - enhanced_okr_display_html (gr.HTML): HTML component for enhanced OKR display.
            - tabs (gr.Tabs): The main tabs component.
            - report_selector_dd (gr.Dropdown): Dropdown for selecting reports.
            - agentic_display_outputs (list): List of Gradio components for agentic results.
            - analytics_tab_instance (AnalyticsTab): The analytics tab instance itself.
            - chat_histories_st (gr.State): State for chat histories.
    """
    app = gr.Blocks(
        theme=custom_theme,
        css=CUSTOM_CSS,
        title="LinkedIn Organization Dashboard",
        head="""
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        """
    )

    with app:
        # --- STATE MANAGEMENT ---
        token_state = gr.State(value={
            "token": None, "client_id": None, "org_urn": None,
            "bubble_posts_df": pd.DataFrame(), "bubble_post_stats_df": pd.DataFrame(),
            "bubble_mentions_df": pd.DataFrame(), "bubble_follower_stats_df": pd.DataFrame(),
            "bubble_agentic_analysis_data": pd.DataFrame(), # To store agentic results from Bubble
            "url_user_token_temp_storage": None,
            "config_date_col_posts": "published_at", "config_date_col_mentions": "date",
            "config_date_col_followers": "date", "config_media_type_col": "media_type",
            "config_eb_labels_col": "li_eb_label"
        })

        # States for analytics tab chatbot
        chat_histories_st = gr.State({})
        current_chat_plot_id_st = gr.State(None)
        plot_data_for_chatbot_st = gr.State({})

        # States for agentic results display
        orchestration_raw_results_st = gr.State(None)
        # KEPT for compatibility with load_and_display_agentic_results signature
        key_results_for_selection_st = gr.State([])
        selected_key_result_ids_st = gr.State([])

        # --- NEW: Session-specific cache for reconstructed OKR data ---
        reconstruction_cache_st = gr.State({})
        # NEW: State to hold the actionable_okrs dictionary explicitly
        actionable_okrs_data_st = gr.State({})

        # --- UI LAYOUT ---
        # Main Header
        with gr.Row():
            with gr.Column():
                gr.HTML("""
                <div class="main-header">
                    <h1>🚀 LinkedIn Organization Dashboard</h1>
                    <div class="subtitle">Advanced Analytics & AI-Powered Insights for LinkedIn Organizations</div>
                </div>
                """)
        
        # Hidden components for token management
        url_user_token_display = gr.Textbox(label="User Token (Hidden)", interactive=False, visible=False)
        org_urn_display = gr.Textbox(label="Org URN (Hidden)", interactive=False, visible=False)
        
        # Status section with better styling
        with gr.Row():
            with gr.Column():
                gr.HTML('<div class="status-container">')
                status_box = gr.Textbox(
                    label="🔄 System Status", 
                    interactive=False, 
                    value="🔄 Initializing dashboard...",
                    elem_classes=["status-display"]
                )
                gr.HTML('</div>')

        with gr.Tabs(elem_classes=["tab-nav"]) as tabs:
            # --- HOME TAB ---
            with gr.TabItem("🏠 Home", id="tab_home", elem_classes=["tabitem"]):
                # Call the new function from ui_generators to build the Home tab content
                btn_graphs, btn_reports, btn_okr, btn_help = build_home_tab_ui_func()

                # Link buttons to tab selection
                btn_graphs.click(fn=lambda: gr.update(selected="tab_analytics_module"), outputs=tabs)
                btn_reports.click(fn=lambda: gr.update(selected="tab_agentic_report"), outputs=tabs)
                btn_okr.click(fn=lambda: gr.update(selected="tab_agentic_okrs"), outputs=tabs)
                # btn_help.click(fn=lambda: gr.update(selected="tab_help"), outputs=tabs) # Uncomment if you add a help tab

            # Analytics Tab
            analytics_tab_instance.create_tab_ui() # This is the "Graphs" tab, assuming its ID is "tab_analytics_module"

            # --- AGENTIC ANALYSIS REPORT TAB ---
            with gr.TabItem("📊 Analysis Reports", id="tab_agentic_report", visible=AGENTIC_MODULES_LOADED, elem_classes=["tabitem"]):
                # The create_enhanced_report_tab function handles the CSS and HTML structure
                agentic_pipeline_status_md, report_selector_dd, report_header_html_display, report_body_markdown_display = \
                    create_enhanced_report_tab_func(AGENTIC_MODULES_LOADED)

            # --- AGENTIC OKRS TAB ---
            with gr.TabItem("🎯 OKRs & Tasks", id="tab_agentic_okrs", visible=AGENTIC_MODULES_LOADED, elem_classes=["tabitem"]):
                gr.HTML("""
                <div class="card">
                    <div class="card-header">
                        🎯 AI Generated OKRs and Actionable Tasks
                    </div>
                    <div class="card-content">
                        <p>Based on AI analysis, the agent has proposed the following OKRs and actionable tasks from Bubble.io data.</p>
                    </div>
                </div>
                """)

                if not AGENTIC_MODULES_LOADED:
                    gr.HTML("""
                    <div class="card" style="text-align: center; padding: 2rem;">
                        <div style="font-size: 2rem; margin-bottom: 1rem;">🔴</div>
                        <h3 style="color: var(--error-color);">Module Loading Error</h3>
                        <p>Agentic modules could not be loaded. This tab is currently unavailable.</p>
                    </div>
                    """)

                # Keep the old components but make them invisible to maintain load_and_display_agentic_results signature
                with gr.Column(visible=False):
                    gr.Markdown("### Suggested Key Results (OLD UI - HIDDEN)")
                    key_results_cbg = gr.CheckboxGroup(label="Select Key Results", choices=[], value=[], interactive=True)
                    gr.Markdown("### Detailed OKRs and Tasks (OLD UI - HIDDEN)")
                    okr_detail_display_md = gr.Markdown("I dettagli OKR appariranno qui.")

                # NEW: Add the enhanced OKR display HTML component
                enhanced_okr_display_html = create_enhanced_okr_tab_func()

        # Add footer with enhanced styling
        gr.HTML("""
        <div style="text-align: center; padding: 2rem; margin-top: 3rem; border-top: 1px solid var(--border-color); color: var(--text-tertiary);">
            <p>© 2024 LinkedIn Organization Dashboard - Powered by AI & Advanced Analytics</p>
            <p style="font-size: 0.9rem; margin-top: 0.5rem;">
                🚀 Built with Gradio • 🔗 LinkedIn API • 🤖 AI Analytics • ☁️ Bubble.io Integration
            </p>
        </div>
        """)
    
    # Ensure agentic_display_outputs correctly maps to the newly created components
    # This list must match the outputs of load_and_display_agentic_results
    agentic_display_outputs = [
        agentic_pipeline_status_md,            # 0: Status Markdown (hidden)
        report_selector_dd,                    # 1: Dropdown for selecting reports
        key_results_cbg,                       # 2: Checkbox group for OKRs (kept hidden)
        okr_detail_display_md,                 # 3: Markdown for detailed OKR display (kept hidden)
        orchestration_raw_results_st,          # 4: Raw results state
        selected_key_result_ids_st,            # 5: Selected KR IDs state (kept hidden)
        key_results_for_selection_st,          # 6: All KRs for selection state (kept hidden)
        report_header_html_display,            # 7: New HTML output for header
        report_body_markdown_display,          # 8: New Markdown output for body
        reconstruction_cache_st,               # 9: Reconstruction cache state
        enhanced_okr_display_html,             # 10: NEW: The enhanced HTML display for OKRs
        actionable_okrs_data_st                # 11: NEW: The actionable_okrs dictionary state
    ]

    return (app, url_user_token_display, org_urn_display, status_box,
            token_state, reconstruction_cache_st, enhanced_okr_display_html,
            tabs, report_selector_dd, agentic_display_outputs,
            analytics_tab_instance, chat_histories_st,
            format_report_for_display_func) # Return format_report_for_display_func as well