frontend_modern.py

#!/usr/bin/env python3
"""
Modern LinkedIn Profile Analyzer - Web Interface
A sleek, responsive web application for LinkedIn profile analysis.
Built with Dash and modern UI components.
"""

import os
import dash
from dash import dcc, html, Input, Output, State, callback_context
import dash_bootstrap_components as dbc
import json
from datetime import datetime
from dotenv import load_dotenv

# Load environment variables
load_dotenv()

# Import our modern agent
from agent_modern import generate_profile_summary_and_facts_single_step

# Initialize the Dash app with Bootstrap theme and Font Awesome
app = dash.Dash(
    __name__, 
    external_stylesheets=[
        dbc.themes.BOOTSTRAP,
        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    ]
)
app.title = "Modern LinkedIn Analyzer"

# Custom CSS styles with better spacing and modern design
CUSTOM_STYLE = {
    "fontFamily": "'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif",
    "backgroundColor": "#f8f9fa",
    "minHeight": "100vh"
}

# Enhanced color scheme
COLORS = {
    "primary": "#0077B5",      # LinkedIn blue
    "secondary": "#6c757d",
    "success": "#28a745",
    "info": "#17a2b8",
    "warning": "#ffc107",
    "danger": "#dc3545",
    "light": "#f8f9fa",
    "dark": "#343a40"
}

# Header component with improved styling
def create_header():
    return dbc.Container([
        dbc.Row([
            dbc.Col([
                html.Div([
                    html.H1([
                        html.I(className="fas fa-robot me-3"),
                        "Modern LinkedIn Analyzer"
                    ], className="display-4 text-white mb-2 fw-bold"),
                    html.P("AI-Powered Profile Analysis & Insights", 
                          className="lead text-white-75 mb-0")
                ], className="text-center")
            ], width=12)
        ], className="justify-content-center")
    ], fluid=True, className="bg-primary py-5 mb-5", style={
        "background": "linear-gradient(135deg, #0077B5 0%, #005885 100%)",
        "boxShadow": "0 4px 6px rgba(0, 0, 0, 0.1)"
    })

# Enhanced search component with better spacing
def create_search_section():
    return dbc.Container([
        dbc.Row([
            dbc.Col([
                dbc.Card([
                    dbc.CardBody([
                        html.Div([
                            html.H4([
                                html.I(className="fas fa-search me-2 text-primary"),
                                "Profile Search"
                            ], className="card-title mb-4 text-center"),
                            
                            # Input type selector
                            dbc.Row([
                                dbc.Col([
                                    dbc.ButtonGroup([
                                        dbc.Button("👤 Name", id="input-type-name", 
                                                 color="primary", size="sm", active=True),
                                        dbc.Button("🔗 LinkedIn URL", id="input-type-url", 
                                                 color="outline-primary", size="sm")
                                    ], className="mb-3 d-flex justify-content-center")
                                ], width=12)
                            ]),
                            
                            # Dynamic input field
                            dbc.Row([
                                dbc.Col([
                                    dbc.Input(
                                        id="name-input",
                                        placeholder="Enter full name (e.g., Satya Nadella)",
                                        type="text",
                                        size="lg",
                                        className="mb-3"
                                    )
                                ], width=12)
                            ]),
                            
                            dbc.Row([
                                dbc.Col([
                                    dbc.Button([
                                        html.I(className="fas fa-search me-2"),
                                        "Analyze Profile"
                                    ],
                                        id="search-button",
                                        color="primary",
                                        size="lg",
                                        className="w-100 py-3"
                                    )
                                ], width=12)
                            ]),
                            
                            html.Hr(className="my-4"),
                            
                            html.Div([
                                html.Small([
                                    html.I(className="fas fa-info-circle me-2"),
                                    "Enter a person's full name to analyze their LinkedIn profile using advanced AI"
                                ], className="text-muted d-block text-center"),
                                
                                html.Div([
                                    html.Small("Quick examples: ", className="text-muted me-2"),
                                    dbc.Button("Satya Nadella", size="sm", outline=True, 
                                             color="secondary", className="me-2 mb-2", 
                                             id="example-1"),
                                    dbc.Button("Elon Musk", size="sm", outline=True, 
                                             color="secondary", className="me-2 mb-2", 
                                             id="example-2"),
                                    dbc.Button("Tim Cook", size="sm", outline=True, 
                                             color="secondary", className="me-2 mb-2", 
                                             id="example-3")
                                ], className="text-center mt-3")
                            ])
                        ])
                    ], className="p-4")
                ], className="shadow border-0", style={"borderRadius": "15px"})
            ], width=12, lg=10, xl=8, className="mx-auto")
        ])
    ], fluid=True, className="px-3")

# Enhanced results component with better spacing
def create_results_section():
    return dbc.Container([
        # Loading section
        html.Div(id="loading-section", className="mb-4"),
        
        # Results row with improved spacing
        dbc.Row([
            # Profile card column
            dbc.Col([
                html.Div(id="profile-card")
            ], width=12, lg=4, className="mb-4 mb-lg-0"),
            
            # Analysis results column
            dbc.Col([
                html.Div(id="analysis-results")
            ], width=12, lg=8)
        ], className="g-4")
    ], fluid=True, id="results-section", style={"display": "none"}, className="px-3")

# Enhanced app layout with better spacing
app.layout = html.Div([
    create_header(),
    
    # Main content area with proper spacing
    html.Main([
        create_search_section(),
        html.Div(style={"height": "2rem"}),  # Spacer
        create_results_section()
    ], className="flex-grow-1"),
    
    # Enhanced footer
    html.Footer([
        dbc.Container([
            html.Hr(className="my-4"),
            dbc.Row([
                dbc.Col([
                    html.P([
                        "Powered by ",
                        html.Strong("Modern AI Scraping", className="text-primary"),
                        " • No external API dependencies • Built with ",
                        html.I(className="fas fa-heart text-danger"),
                        " and ",
                        html.I(className="fab fa-python text-warning")
                    ], className="text-center text-muted mb-2"),
                    html.P([
                        html.Small([
                            "© 2024 Modern LinkedIn Analyzer • ",
                            html.A("Documentation", href="#", className="text-decoration-none"),
                            " • ",
                            html.A("GitHub", href="#", className="text-decoration-none")
                        ], className="text-muted")
                    ], className="text-center mb-0")
                ], width=12)
            ])
        ], className="py-4")
    ], className="mt-5 bg-light border-top")
], style=CUSTOM_STYLE, className="d-flex flex-column")

# Callback for input type selector
@app.callback(
    [Output("input-type-name", "active"),
     Output("input-type-url", "active"),
     Output("input-type-name", "color"),
     Output("input-type-url", "color"),
     Output("name-input", "placeholder")],
    [Input("input-type-name", "n_clicks"),
     Input("input-type-url", "n_clicks")],
    prevent_initial_call=True
)
def toggle_input_type(name_clicks, url_clicks):
    ctx = callback_context
    if not ctx.triggered:
        return True, False, "primary", "outline-primary", "Enter full name (e.g., Satya Nadella)"
    
    button_id = ctx.triggered[0]["prop_id"].split(".")[0]
    
    if button_id == "input-type-name":
        return True, False, "primary", "outline-primary", "Enter full name (e.g., Satya Nadella)"
    else:
        return False, True, "outline-primary", "primary", "Enter LinkedIn URL (e.g., https://linkedin.com/in/username)"

# Callback for example buttons
@app.callback(
    Output("name-input", "value"),
    [Input("example-1", "n_clicks"),
     Input("example-2", "n_clicks"),
     Input("example-3", "n_clicks")],
    prevent_initial_call=True
)
def set_example_name(btn1, btn2, btn3):
    ctx = callback_context
    if not ctx.triggered:
        return ""
    
    button_id = ctx.triggered[0]["prop_id"].split(".")[0]
    examples = {
        "example-1": "Satya Nadella",
        "example-2": "Elon Musk",
        "example-3": "Tim Cook"
    }
    return examples.get(button_id, "")

# Callback for profile analysis with proper loading handling
@app.callback(
    [Output("profile-card", "children"),
     Output("analysis-results", "children"),
     Output("results-section", "style"),
     Output("loading-section", "children")],
    [Input("search-button", "n_clicks")],
    [State("name-input", "value")]
)
def analyze_profile(n_clicks, name):
    if not n_clicks or not name:
        return "", "", {"display": "none"}, ""
    
    # Show enhanced loading with authentication status
    email = os.environ.get("LINKEDIN_EMAIL", "").split("@")[0] if os.environ.get("LINKEDIN_EMAIL") else "Not configured"
    
    loading_component = dbc.Card([
        dbc.CardBody([
            html.Div([
                dcc.Loading(
                    id="analysis-loading",
                    type="circle",
                    children=[html.Div()],
                    style={"display": "inline-block", "marginRight": "10px"}
                ),
                html.Div([
                    html.Span("🔍 Analyzing LinkedIn profile...", className="fw-bold d-block"),
                    html.Small([
                        "🔐 Auto-login enabled for: ",
                        html.Code(email, className="text-primary"),
                        " • Using advanced scraping methods"
                    ], className="text-muted")
                ], className="ms-3")
            ], className="d-flex align-items-center justify-content-center py-3")
        ])
    ], color="info", outline=True, className="mb-4")
    
    try:
        # Perform analysis
        result_json = generate_profile_summary_and_facts_single_step(name)
        
        # Parse results
        try:
            data = json.loads(result_json) if isinstance(result_json, str) else result_json
        except json.JSONDecodeError:
            data = {
                "full_name": name,
                "headline": "Analysis Error",
                "summary": "Failed to parse analysis results",
                "interesting_facts": ["Please try again"],
                "profile_pic_url": ""
            }
        
        # Create profile card
        profile_card = create_profile_card(data)
        
        # Create analysis results
        analysis_results = create_analysis_results(data)
        
        # Clear loading
        return profile_card, analysis_results, {"display": "block"}, ""
        
    except Exception as e:
        error_card = dbc.Alert([
            html.H4("⚠️ Analysis Failed", className="alert-heading"),
            html.P(f"Error: {str(e)}"),
            html.Hr(),
            html.P("Please check your input and try again.", className="mb-0")
        ], color="danger")
        
        return "", error_card, {"display": "block"}, ""

def create_profile_card(data):
    """Create enhanced profile card component with better styling"""
    
    profile_pic = data.get("profile_pic_url", "")
    full_name = data.get("full_name", "Unknown")
    headline = data.get("headline", "No headline available")
    
    # Enhanced profile picture or placeholder
    if profile_pic:
        img_component = html.Div([
            html.Img(
                src=profile_pic,
                className="rounded-circle img-fluid shadow",
                style={
                    "width": "120px", 
                    "height": "120px", 
                    "objectFit": "cover",
                    "border": "4px solid #fff"
                }
            )
        ], className="text-center mb-4")
    else:
        img_component = html.Div([
            html.Div([
                html.I(className="fas fa-user fa-3x text-primary")
            ], className="bg-light rounded-circle d-flex align-items-center justify-content-center shadow",
               style={"width": "120px", "height": "120px", "margin": "0 auto"})
        ], className="text-center mb-4")
    
    return dbc.Card([
        dbc.CardBody([
            img_component,
            html.H4(full_name, className="card-title text-center mb-3 fw-bold"),
            html.P(headline, className="card-text text-center text-muted mb-4", 
                   style={"fontSize": "0.95rem", "lineHeight": "1.4"}),
            
            # Status badges
            html.Div([
                dbc.Badge([
                    html.I(className="fas fa-check-circle me-1"),
                    "Analyzed"
                ], color="success", className="me-2 mb-2"),
                dbc.Badge([
                    html.I(className="fas fa-linkedin me-1"),
                    "LinkedIn"
                ], color="primary", className="me-2 mb-2")
            ], className="text-center mb-3"),
            
            html.Hr(className="my-3"),
            
            html.Small([
                html.I(className="fas fa-clock me-2 text-muted"),
                f"Analyzed: {datetime.now().strftime('%B %d, %Y at %H:%M')}"
            ], className="text-muted d-block text-center")
        ], className="p-4")
    ], className="shadow border-0 h-100", style={"borderRadius": "15px"})

def create_analysis_results(data):
    """Create enhanced analysis results component with better styling"""
    
    summary = data.get("summary", "No summary available")
    facts = data.get("interesting_facts", [])
    
    # Enhanced summary section
    summary_card = dbc.Card([
        dbc.CardHeader([
            html.H5([
                html.I(className="fas fa-user-tie me-2 text-primary"),
                "Professional Summary"
            ], className="mb-0 fw-bold")
        ], className="bg-light border-0"),
        dbc.CardBody([
            html.P(summary, className="card-text mb-0", 
                   style={"fontSize": "1.05rem", "lineHeight": "1.6", "color": "#495057"})
        ], className="p-4")
    ], className="mb-4 shadow border-0", style={"borderRadius": "12px"})
    
    # Enhanced facts section
    facts_items = []
    if facts and len(facts) > 0:
        for i, fact in enumerate(facts[:2], 1):  # Limit to 2 facts
            facts_items.append(
                dbc.ListGroupItem([
                    html.Div([
                        html.Div([
                            html.I(className="fas fa-lightbulb me-2 text-warning"),
                            html.Strong(f"Key Insight #{i}", className="text-primary")
                        ], className="mb-2"),
                        html.P(fact, className="mb-0 text-dark", 
                               style={"fontSize": "0.95rem", "lineHeight": "1.5"})
                    ])
                ], className="border-0 py-3")
            )
    
    if not facts_items:
        facts_items.append(
            dbc.ListGroupItem([
                html.Div([
                    html.I(className="fas fa-info-circle me-2 text-muted"),
                    html.Span("No specific insights available for this profile", 
                             className="text-muted")
                ], className="d-flex align-items-center")
            ], className="border-0 py-3")
        )
    
    facts_card = dbc.Card([
        dbc.CardHeader([
            html.H5([
                html.I(className="fas fa-brain me-2 text-primary"),
                "AI-Generated Insights"
            ], className="mb-0 fw-bold")
        ], className="bg-light border-0"),
        dbc.CardBody([
            dbc.ListGroup(facts_items, flush=True)
        ], className="p-0")
    ], className="shadow border-0", style={"borderRadius": "12px"})
    
    # Enhanced error handling
    if data.get("error"):
        error_alert = dbc.Alert([
            html.Div([
                html.H6([
                    html.I(className="fas fa-exclamation-triangle me-2"),
                    "Analysis Limitations"
                ], className="alert-heading mb-3"),
                html.P(data.get("error", "Unknown error occurred"), className="mb-2"),
                html.Hr(className="my-3"),
                html.Small([
                    html.I(className="fas fa-info-circle me-1"),
                    "This may be due to privacy settings, network restrictions, or profile accessibility."
                ], className="text-muted")
            ])
        ], color="warning", className="mb-4 border-0", 
           style={"borderRadius": "12px", "borderLeft": "4px solid #ffc107"})
        
        return html.Div([error_alert, summary_card, facts_card])
    
    return html.Div([summary_card, facts_card])

# Run the app
if __name__ == "__main__":
    print("🚀 Starting Modern LinkedIn Analyzer...")
    print("📱 Open your browser to: http://127.0.0.1:8050")
    print("🔍 Ready to analyze LinkedIn profiles!")
    
    app.run(debug=True, host="127.0.0.1", port=8050)