ui/ui_generators.py

"""
Generates HTML content and Matplotlib plots for the Gradio UI tabs,
and UI components for the Analytics tab.
"""
import pandas as pd
import logging
import matplotlib.pyplot as plt
import matplotlib # To ensure backend is switched before any plt import from other modules if app structure changes
import gradio as gr # Added for UI components

# Switch backend for Matplotlib to Agg for Gradio compatibility
matplotlib.use('Agg')


# Assuming config.py contains all necessary constants
from config import (
    BUBBLE_POST_DATE_COLUMN_NAME, BUBBLE_MENTIONS_DATE_COLUMN_NAME, BUBBLE_MENTIONS_ID_COLUMN_NAME,
    FOLLOWER_STATS_TYPE_COLUMN, FOLLOWER_STATS_CATEGORY_COLUMN, FOLLOWER_STATS_ORGANIC_COLUMN,
    FOLLOWER_STATS_PAID_COLUMN, FOLLOWER_STATS_CATEGORY_COLUMN_DT, UI_DATE_FORMAT, UI_MONTH_FORMAT
)

# Configure logging for this module if not already configured at app level
# logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(module)s - %(module)s - %(message)s')

# --- Constants for Button Icons/Text ---
# These are also defined/imported in app.py, ensure consistency
BOMB_ICON = "💣"
EXPLORE_ICON = "🧭"
FORMULA_ICON = "ƒ"
ACTIVE_ICON = "❌ Close" # Ensure this matches app.py


def build_home_tab_ui():
    """
    Costruisce l'intera interfaccia utente per la scheda Home, inclusi l'intestazione,
    la panoramica, le schede delle funzionalità e i pulsanti di navigazione.

    Returns:
        tuple: Una tupla contenente i componenti Gradio Button per
               Grafici, Report e Tabella OKR, consentendo ad app.py di
               associare gestori di click per la navigazione tra le schede.
    """
    # CSS personalizzato per uno stile migliorato
    css_styles = """
    <style>
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 60px 40px;
            border-radius: 24px;
            margin-bottom: 40px;
            box-shadow: 0 20px 60px rgba(102, 126, 234, 0.25);
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .hero-section::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="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.1;
        }
        
        .hero-content {
            position: relative;
            z-index: 1;
        }
        
        .hero-title {
            font-size: 3.2em;
            font-weight: 800;
            margin-bottom: 24px;
            /* Applica gradiente e riempimento del testo al testo, ma non all'emoji */
            background: linear-gradient(45deg, #ffffff, #e0e7ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            line-height: 1.2;
        }

        /* NUOVO CSS: Stile per l'emoji del razzo */
        .hero-title .rocket-emoji {
            background: none; /* Rimuovi effetto di sfondo */
            -webkit-background-clip: unset; /* Ripristina il ritaglio dello sfondo */
            background-clip: unset;
            -webkit-text-fill-color: initial; /* Ripristina il colore di riempimento del testo al valore predefinito */
            color: initial; /* Assicurati che il colore dell'emoji sia quello predefinito (spesso colorato) */
            text-shadow: none; /* Rimuovi l'ombra del testo per l'emoji se la influisce negativamente */
            display: inline-block; /* Assicurati che rispetti l'allineamento verticale */
            vertical-align: middle; /* Regola l'allineamento verticale se necessario */
        }
        
        .hero-subtitle {
            font-size: 1.4em;
            line-height: 1.6;
            margin-bottom: 16px;
            opacity: 0.95;
            font-weight: 300;
        }
        
        .hero-description {
            font-size: 1.1em;
            opacity: 0.85;
            font-weight: 300;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .overview-section {
            background: #ffffff;
            padding: 40px;
            border-radius: 20px;
            margin-bottom: 40px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            border: 1px solid rgba(0,0,0,0.05);
        }
        
        .overview-header {
            color: #1a202c;
            margin-bottom: 24px;
            font-size: 2.2em;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .overview-text {
            font-size: 1.15em;
            color: #4a5568;
            line-height: 1.7;
            margin-bottom: 32px;
            font-weight: 400;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            margin-top: 32px;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            padding: 20px;
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            border-radius: 16px;
            border: 1px solid rgba(0,0,0,0.06);
            transition: all 0.3s ease;
        }
        
        .feature-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        
        .feature-icon {
            font-size: 2em;
            margin-right: 16px;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }
        
        .feature-text {
            color: #2d3748;
            font-weight: 500;
            font-size: 1.05em;
        }
        
        .nav-cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .nav-card {
            padding: 36px;
            border-radius: 20px;
            min-height: 280px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 15px 45px rgba(0,0,0,0.12);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .nav-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .nav-card:hover::before {
            opacity: 1;
        }
        
        .nav-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 25px 60px rgba(0,0,0,0.15);
        }
        
        .nav-card-graphs {
            background: linear-gradient(135deg, #4CAF50, #2E7D32);
        }
        
        .nav-card-reports {
            background: linear-gradient(135deg, #2196F3, #1565C0);
        }
        
        .nav-card-okr {
            background: linear-gradient(135deg, #FF9800, #E65100);
        }
        
        .nav-card-help {
            background: linear-gradient(135deg, #9C27B0, #4A148C);
        }
        
        .nav-card-header {
            color: white;
            margin-bottom: 20px;
            font-size: 1.5em;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .nav-card-icon {
            font-size: 2.2em;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }
        
        .nav-card-description {
            color: rgba(255,255,255,0.95);
            line-height: 1.7;
            font-size: 1.08em;
            margin-bottom: 24px;
            font-weight: 300;
        }
        
        .nav-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            position: relative;
            z-index: 1;
        }
        
        .nav-card-features {
            color: rgba(255,255,255,0.85);
            font-size: 0.95em;
            line-height: 1.6;
        }
        
        .nav-card-badge {
            background: rgba(255,255,255,0.2);
            padding: 12px;
            border-radius: 12px;
            backdrop-filter: blur(10px);
        }
        
        .nav-card-badge-icon {
            font-size: 2.2em;
        }
        
        .how-it-works-section {
            background: linear-gradient(135deg, #f8fafc, #e2e8f0);
            padding: 40px;
            border-radius: 20px;
            margin-top: 40px;
            border: 1px solid rgba(0,0,0,0.06);
        }
        
        .how-it-works-header {
            color: #1a202c;
            margin-bottom: 32px;
            font-size: 2em;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .steps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 32px;
        }
        
        .step-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
        }
        
        .step-number {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-weight: 700;
            font-size: 1.2em;
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
        }
        
        .step-content {
            flex: 1;
        }
        
        .step-title {
            color: #1a202c;
            font-weight: 700;
            font-size: 1.2em;
            margin-bottom: 8px;
        }
        
        .step-description {
            color: #4a5568;
            font-size: 1em;
            line-height: 1.6;
        }
        
        .button-container {
            margin-top: 24px;
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.4em;
            }
            
            .nav-cards-container {
                grid-template-columns: 1fr;
            }
            
            .nav-card {
                min-height: 240px;
                padding: 28px;
            }
            
            .hero-section {
                padding: 40px 24px;
            }
            
            .overview-section, .how-it-works-section {
                padding: 28px;
            }
        }
    </style>
    """
    
    with gr.Column(scale=1, elem_classes="home-page-container"):
        # Inietta CSS personalizzato
        gr.HTML(css_styles)
        
        # Sezione principale "hero"
        # MODIFICATO: Racchiuso l'emoji del razzo in uno <span> con la classe "rocket-emoji"
        gr.HTML("""
            <div class="hero-section">
                <div class="hero-content">
                    <h1 class="hero-title">
                        <span class="rocket-emoji">🚀</span> LinkedIn Employer Brand Analytics
                    </h1>
                    <p class="hero-subtitle">
                        Trasforma la tua presenza su LinkedIn con approfondimenti basati sui dati e strategie attuabili
                    </p>
                    <p class="hero-description">
                        Misura, analizza e migliora il tuo marchio del datore di lavoro per attrarre i migliori talenti e costruire una presenza digitale più forte
                    </p>
                </div>
            </div>
        """)

        # Sezione di panoramica con spaziatura migliorata
        gr.HTML("""
            <div class="overview-section">
                <h2 class="overview-header">
                    <span>📊</span> Cosa Offre Questa Dashboard
                </h2>
                <p class="overview-text">
                    La nostra piattaforma di analisi completa ti aiuta a comprendere e ottimizzare le prestazioni del tuo marchio del datore di lavoro su LinkedIn con approfondimenti in tempo reale, report automatizzati e raccomandazioni basate sull'intelligenza artificiale.
                </p>
                <div class="features-grid">
                    <div class="feature-item">
                        <span class="feature-icon">📈</span>
                        <span class="feature-text">Visualizzazione dei dati in tempo reale e analisi delle tendenze</span>
                    </div>
                    <div class="feature-item">
                        <span class="feature-icon">📋</span>
                        <span class="feature-text">Report automatici trimestrali e settimanali sulle prestazioni</span>
                    </div>
                    <div class="feature-item">
                        <span class="feature-icon">🎯</span>
                        <span class="feature-text">OKR basati sull'IA e raccomandazioni attuabili</span>
                    </div>
                    <div class="feature-item">
                        <span class="feature-icon">🚀</span>
                        <span class="feature-text">Approfondimenti strategici per migliorare il marchio del datore di lavoro</span>
                    </div>
                </div>
            </div>
        """)

        # Schede di navigazione con layout migliorato
        gr.HTML("""
            <div class="nav-cards-container">
                <div class="nav-card nav-card-graphs">
                    <div>
                        <h3 class="nav-card-header">
                            <span class="nav-card-icon">📈</span> Grafici Interattivi
                        </h3>
                        <p class="nav-card-description">
                            Esplora visualizzazioni dinamiche delle tue metriche di performance su LinkedIn. Tieni traccia del coinvolgimento dei post, 
                            della crescita dei follower, del sentiment delle menzioni e identifica le tendenze nel tempo con grafici interattivi 
                            e opzioni di filtro avanzate.
                        </p>
                    </div>
                    <div class="nav-card-footer">
                        <div class="nav-card-features">
                            ✨ Analisi in tempo reale<br/>
                            📊 Tipi di grafici multipli<br/>
                            🔍 Filtri avanzati
                        </div>
                        <div class="nav-card-badge">
                            <span class="nav-card-badge-icon">📊</span>
                        </div>
                    </div>
                </div>
                
                <div class="nav-card nav-card-reports">
                    <div>
                        <h3 class="nav-card-header">
                            <span class="nav-card-icon">📊</span> Report di Analisi
                        </h3>
                        <p class="nav-card-description">
                            Accedi a report trimestrali e settimanali completi basati sull'analisi dell'IA. Ottieni approfondimenti dettagliati 
                            sulle prestazioni del tuo marchio del datore di lavoro, analisi della concorrenza e posizionamento di mercato 
                            con la generazione automatica di report.
                        </p>
                    </div>
                    <div class="nav-card-footer">
                        <div class="nav-card-features">
                            📋 Report automatizzati<br/>
                            🤖 Approfondimenti basati sull'IA<br/>
                            📅 Settimanali e trimestrali
                        </div>
                        <div class="nav-card-badge">
                            <span class="nav-card-badge-icon">📄</span>
                        </div>
                    </div>
                </div>
                
                <div class="nav-card nav-card-okr">
                    <div>
                        <h3 class="nav-card-header">
                            <span class="nav-card-icon">🎯</span> Piano d'Azione OKR
                        </h3>
                        <p class="nav-card-description">
                            Scopri Obiettivi e Risultati Chiave (OKR) generati dall'IA con azioni concrete. 
                            Trasforma gli approfondimenti dei dati in obiettivi misurabili e iniziative strategiche per migliorare 
                            efficacemente il tuo marchio del datore di lavoro.
                        </p>
                    </div>
                    <div class="nav-card-footer">
                        <div class="nav-card-features">
                            🎯 Obiettivi strategici<br/>
                            ✅ Compiti attuabili<br/>
                            📈 Risultati misurabili
                        </div>
                        <div class="nav-card-badge">
                            <span class="nav-card-badge-icon">🎯</span>
                        </div>
                    </div>
                </div>
                
                <div class="nav-card nav-card-help">
                    <div>
                        <h3 class="nav-card-header">
                            <span class="nav-card-icon">💡</span> Per Iniziare
                        </h3>
                        <p class="nav-card-description">
                            Nuovo all'analisi del marchio del datore di lavoro? Inizia con la sezione Grafici per 
                            comprendere le tue prestazioni attuali, quindi controlla i Report per un'analisi dettagliata 
                            e infine esplora gli OKR per i prossimi passi attuabili.
                        </p>
                    </div>
                    <div class="nav-card-footer">
                        <div style="background: rgba(255,255,255,0.15); padding: 16px; border-radius: 12px; width: 100%; text-align: center;">
                            <div style="color: rgba(255,255,255,0.95); font-size: 1em;">
                                <strong>💪 Consiglio Pro:</strong><br/>
                                <span style="font-size: 0.9em;">Il monitoraggio regolare porta a un miglioramento del 40% nelle prestazioni del marchio del datore di lavoro</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        """)
        
        # Crea pulsanti con una migliore spaziatura
        with gr.Row(equal_height=True):
            with gr.Column():
                btn_graphs = gr.Button("🚀 Esplora Grafici", variant="primary", size="lg", 
                                       elem_classes="nav-button", scale=1)
                
            with gr.Column():
                btn_reports = gr.Button("📊 Visualizza Report", variant="primary", size="lg", 
                                        elem_classes="nav-button", scale=1)

        with gr.Row(equal_height=True):
            with gr.Column():
                btn_okr = gr.Button("🎯 Accedi agli OKR", variant="primary", size="lg", 
                                      elem_classes="nav-button", scale=1)
                
            with gr.Column():
                btn_help = gr.Button("📚 Documentazione", variant="secondary", size="lg", 
                                         elem_classes="nav-button", scale=1)

        # Sezione "Come funziona" con stile migliorato
        gr.HTML("""
            <div class="how-it-works-section">
                <h3 class="how-it-works-header">
                    <span>ℹ️</span> Come Funziona
                </h3>
                <div class="steps-grid">
                    <div class="step-item">
                        <div class="step-number">1</div>
                        <div class="step-content">
                            <div class="step-title">Raccolta Dati</div>
                            <div class="step-description">Si sincronizza automaticamente con i dati della tua organizzazione LinkedIn ed elabora le metriche di coinvolgimento in tempo reale</div>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-number">2</div>
                        <div class="step-content">
                            <div class="step-title">Analisi IA</div>
                            <div class="step-description">Algoritmi avanzati analizzano tendenze, sentiment e modelli di performance per generare approfondimenti attuabili</div>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-number">3</div>
                        <div class="step-content">
                            <div class="step-title">Risultati Attuabili</div>
                            <div class="step-description">Ricevi raccomandazioni specifiche, obiettivi misurabili e piani d'azione strategici per migliorare il tuo marchio del datore di lavoro</div>
                        </div>
                    </div>
                </div>
            </div>
        """)
    
    return btn_graphs, btn_reports, btn_okr, btn_help



def create_analytics_plot_panel(plot_label_str, plot_id_str):
    """
    Creates an individual plot panel with its plot component and action buttons.
    Plot title and action buttons are on the same row.
    Returns the panel (Column), plot component, and button components.
    """
    # Icons are defined globally or imported. For this function, ensure they are accessible.
    # If not using from config directly here, you might need to pass them or use fixed strings.
    # Using fixed strings as a fallback if import fails, though they should be available via app.py's import.
    local_bomb_icon, local_explore_icon, local_formula_icon = BOMB_ICON, EXPLORE_ICON, FORMULA_ICON
    
    with gr.Column(visible=True) as panel_component: # Main container for this plot
        with gr.Row(variant="compact"): 
            gr.Markdown(f"#### {plot_label_str}") # Plot title (scale might help balance)
            with gr.Row(elem_classes="plot-actions", scale=1): # Action buttons container, give it some min_width
                bomb_button = gr.Button(value=local_bomb_icon, variant="secondary", size="sm", min_width=30, elem_id=f"bomb_btn_{plot_id_str}")
                formula_button = gr.Button(value=local_formula_icon, variant="secondary", size="sm", min_width=30, elem_id=f"formula_btn_{plot_id_str}")
                explore_button = gr.Button(value=local_explore_icon, variant="secondary", size="sm", min_width=30, elem_id=f"explore_btn_{plot_id_str}")
        
        # MODIFIED: Added height to gr.Plot for consistent sizing
        plot_component = gr.Plot(label=plot_label_str, show_label=False) # Adjust height as needed

    logging.debug(f"Created analytics panel for: {plot_label_str} (ID: {plot_id_str}) with fixed plot height.")
    return panel_component, plot_component, bomb_button, explore_button, formula_button


def build_analytics_tab_plot_area(plot_configs):
    """
    Builds the main plot area for the Analytics tab, arranging plot panels into rows of two,
    with section titles appearing before their respective plots.
    
    Returns a tuple:
        - plot_ui_objects (dict): Dictionary of plot UI objects.
        - section_titles_map (dict): Dictionary mapping section names to their gr.Markdown title components.
    """
    logging.info(f"Building plot area for {len(plot_configs)} analytics plots with interleaved section titles.")
    plot_ui_objects = {}
    section_titles_map = {} 
    
    last_rendered_section = None 
    
    idx = 0
    while idx < len(plot_configs):
        current_plot_config = plot_configs[idx]
        current_section_name = current_plot_config["section"]
        
        # Render section title if it's new for this block of plots
        if current_section_name != last_rendered_section:
            if current_section_name not in section_titles_map:
                # Create the Markdown component for the section title
                section_md_component = gr.Markdown(f"## {current_section_name}", visible=True)
                section_titles_map[current_section_name] = section_md_component
                logging.debug(f"Rendered and stored Markdown for section: {current_section_name}")
            # No 'else' needed here for visibility, as it's handled by click handlers if sections are hidden/shown.
            # The component is created once and its visibility is controlled elsewhere.
            last_rendered_section = current_section_name

        with gr.Row(equal_height=True): # Row for one or two plots. equal_height=False allows plots to define their height.
            # --- Process the first plot in the row (config1) ---
            config1 = plot_configs[idx]
            # Safety check for section consistency (should always pass if configs are ordered by section)
            if config1["section"] != current_section_name:
                logging.warning(f"Plot {config1['id']} section mismatch. Expected {current_section_name}, got {config1['section']}. This might affect layout if a new section title was expected.")
                # If a new section starts unexpectedly, ensure its title is created if missing
                if config1["section"] not in section_titles_map:
                    sec_md = gr.Markdown(f"### {config1['section']}", visible=True) # Create and make visible
                    section_titles_map[config1['section']] = sec_md
                last_rendered_section = config1["section"] # Update the current section context

            panel_col1, plot_comp1, bomb_btn1, explore_btn1, formula_btn1 = \
                create_analytics_plot_panel(config1["label"], config1["id"])
            plot_ui_objects[config1["id"]] = {
                "plot_component": plot_comp1, "bomb_button": bomb_btn1,
                "explore_button": explore_btn1, "formula_button": formula_btn1,
                "label": config1["label"], "panel_component": panel_col1, # This is the gr.Column containing the plot and its actions
                "section": config1["section"]
            }
            logging.debug(f"Created UI panel for plot_id: {config1['id']} in section {config1['section']}")
            idx += 1
            
            # --- Process the second plot in the row (config2), if applicable ---
            if idx < len(plot_configs):
                config2 = plot_configs[idx]
                # Only add to the same row if it's part of the same section
                if config2["section"] == current_section_name: 
                    panel_col2, plot_comp2, bomb_btn2, explore_btn2, formula_btn2 = \
                        create_analytics_plot_panel(config2["label"], config2["id"])
                    plot_ui_objects[config2["id"]] = {
                        "plot_component": plot_comp2, "bomb_button": bomb_btn2,
                        "explore_button": explore_btn2, "formula_button": formula_btn2,
                        "label": config2["label"], "panel_component": panel_col2,
                        "section": config2["section"]
                    }
                    logging.debug(f"Created UI panel for plot_id: {config2['id']} in same row, section {config2['section']}")
                    idx += 1
                # If the next plot is in a new section, it will be handled in the next iteration of the while loop,
                # starting with a new section title and a new gr.Row.
    
    logging.info(f"Finished building plot area. Total plot objects: {len(plot_ui_objects)}. Section titles created: {len(section_titles_map)}")
    if len(plot_ui_objects) != len(plot_configs):
        logging.error(f"MISMATCH: Expected {len(plot_configs)} plot objects, but created {len(plot_ui_objects)}.")
    
    return plot_ui_objects, section_titles_map


def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
    """
    Creates an enhanced report tab with Medium-style design for optimal readability.
    This function returns the Gradio components that will be updated.
    """

    # Custom CSS for Medium-style design
    report_css = """
    <style>
    /* Medium-style Report Container */
    .report-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 40px 20px;
        font-family: 'Georgia', 'Charter', 'Times New Roman', serif;
        line-height: 1.6;
        color: #292929;
        background: #ffffff;
    }
    
    /* Header Section */
    .report-header {
        text-align: center;
        margin-bottom: 48px;
        padding-bottom: 24px;
        border-bottom: 1px solid #e6e6e6;
    }
    
    .report-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 16px;
        letter-spacing: -0.02em;
    }
    
    .report-subtitle {
        font-size: 1.2rem;
        color: #6b6b6b;
        font-weight: 400;
        margin-bottom: 24px;
    }
    
    /* Status Badge */
    .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: 16px;
    }
    
    .status-badge::before {
        content: "📊";
        margin-right: 8px;
    }
    
    /* Report Selection Area */
    .report-selection {
        background: #f8f9fa;
        padding: 32px;
        border-radius: 12px;
        margin-bottom: 40px;
        border: 1px solid #e9ecef;
    }
    
    .selection-title {
        font-size: 1.3rem;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
    }
    
    .selection-title::before {
        content: "📚";
        margin-right: 12px;
        font-size: 1.5rem;
    }
    
    .selection-description {
        color: #6b6b6b;
        margin-bottom: 24px;
        font-size: 1.05rem;
    }
    
    /* Report Content Area */
    .report-content {
        background: white;
        padding: 0;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        border: 1px solid #e9ecef;
        min-height: 400px;
    }
    
    /* MODIFIED: Adjusted target for the report body's content */
    .report-body-content { /* New class for the Markdown content container */
        padding: 40px;
        font-size: 1.1rem;
        line-height: 1.8;
    }
    
    /* Typography Enhancements for the Markdown content */
    .report-body-content h1 {
        font-size: 2.2rem;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 24px;
        margin-top: 0;
        letter-spacing: -0.02em;
    }
    
    .report-body-content h2 {
        font-size: 1.8rem;
        font-weight: 600;
        color: #1a1a1a;
        margin-top: 48px;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 2px solid #e6e6e6;
    }
    
    .report-body-content h3 {
        font-size: 1.4rem;
        font-weight: 600;
        color: #2c2c2c;
        margin-top: 36px;
        margin-bottom: 16px;
    }
    
    .report-body-content p {
        margin-bottom: 20px;
        color: #292929;
        font-size: 1.1rem;
    }
    
    .report-body-content ul, .report-body-content ol {
        margin-bottom: 20px;
        padding-left: 24px;
    }
    
    .report-body-content li {
        margin-bottom: 8px;
        color: #292929;
    }
    
    .report-body-content strong {
        font-weight: 600;
        color: #1a1a1a;
    }
    
    .report-body-content em {
        font-style: italic;
        color: #4a4a4a;
    }
    
    /* Quote Styling */
    .report-body-content blockquote {
        border-left: 4px solid #667eea;
        padding-left: 20px;
        margin: 24px 0;
        font-style: italic;
        color: #4a4a4a;
        background: #f8f9fa;
        padding: 20px;
        border-radius: 4px;
    }
    
    /* Code Styling */
    .report-body-content code {
        background: #f1f3f4;
        padding: 2px 6px;
        border-radius: 4px;
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 0.9em;
        color: #d73a49;
    }
    
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 80px 40px;
        color: #6b6b6b;
    }
    
    .empty-state-icon {
        font-size: 4rem;
        margin-bottom: 24px;
        opacity: 0.6;
    }
    
    .empty-state-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 12px;
        color: #4a4a4a;
    }
    
    .empty-state-description {
        font-size: 1.1rem;
        line-height: 1.6;
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Responsive Design */
    @media (max-width: 768px) {
        .report-container {
            padding: 24px 16px;
        }
        
        .report-title {
            font-size: 2rem;
        }
        
        .report-selection {
            padding: 24px;
        }
        
        .report-body-content { /* Target the inner HTML component directly */
            padding: 24px;
        }
        
        .report-body-content h1 {
            font-size: 1.8rem;
        }
        
        .report-body-content h2 {
            font-size: 1.5rem;
        }
        
        .empty-state {
            padding: 60px 20px;
        }
    }
    
    /* Gradio Component Overrides */
    .report-content .gradio-container {
        background: transparent !important;
        border: none !important;
    }
    
    /* Dropdown Styling */
    .report-selection .gr-dropdown {
        background: white;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        font-size: 1.05rem;
    }
    
    .report-selection .gr-dropdown:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    /* Loading Indicator: Hidden by default */
    .loading-indicator {
        display: none !important; /* Hide the entire loading indicator block */
    }
    </style>
    """
    
    # Inject custom CSS
    gr.HTML(report_css)
    
    # Main container
    with gr.Column(elem_classes=["report-container"]):
        # Header section
        with gr.Column(elem_classes=["report-header"]):
            # This HTML component will display the dynamic title and subtitle
            report_header_html_display = gr.HTML("""
                <div class="report-title">📊 Comprehensive Analysis Report</div>
                <div class="report-subtitle">AI-Generated Insights from Your LinkedIn Data</div>
                <div class="status-badge">Generated from Bubble.io</div>
            """)
        
        # Report selection section
        with gr.Column(elem_classes=["report-selection"]):
            gr.HTML("""
                <div class="selection-title">Report Library</div>
                <div class="selection-description">
                    Select a pre-generated report from your analysis library to view detailed insights, 
                    trends, and recommendations based on your LinkedIn organization data.
                </div>
            """)
            
            # Status indicator (now hidden by default via CSS)
            agentic_pipeline_status_md = gr.Markdown(
                "🔄 **Status:** Loading report data...", 
                elem_classes=["loading-indicator"] # This class now hides the element
            )
            
            # Report selector dropdown
            with gr.Row():
                report_selector_dd = gr.Dropdown(
                    label="📋 Select Report",
                    choices=[],
                    interactive=True,
                    info="Choose from your available analysis reports",
                    elem_classes=["report-dropdown"]
                )
        
        # Report content display area
        with gr.Column(elem_classes=["report-content"]):
            # This Markdown component will display the actual report text, formatted as Markdown
            report_body_markdown_display = gr.Markdown(
                """
                <div class="empty-state">
                    <div class="empty-state-icon">📄</div>
                    <div class="empty-state-title">No Report Selected</div>
                    <div class="empty-state-description">
                        Please select a report from the library above to view its detailed analysis and insights.
                    </div>
                </div>
                """,
                # Apply styles to the content within the Markdown component using a wrapper div
                elem_classes=["report-body-content"] 
            )
    
    # Error handling for when modules are not loaded
    if not agentic_modules_loaded_status:
        gr.HTML("""
            <div style="
                background: #fee;
                border: 1px solid #fcc;
                border-radius: 8px;
                padding: 20px;
                margin-top: 20px;
                text-align: center;
            ">
                <div style="color: #c33; font-size: 1.2rem; font-weight: 600; margin-bottom: 8px;">
                    ⚠️ Module Loading Error
                </div>
                <div style="color: #666;">
                    Agentic analysis modules could not be loaded. Please check your configuration.
                </div>
            </div>
        """)
            
    # Return both header HTML and body Markdown components for app.py to update
    return agentic_pipeline_status_md, report_selector_dd, report_header_html_display, report_body_markdown_display