components/progress_tracker.py

"""
Progress tracker component for SkillSync
"""

import gradio as gr

def create_progress_tracker(progress_manager, total_lessons=25):
    """Create a progress tracking display"""
    
    # Get progress data
    progress_data = progress_manager.get_overall_progress(total_lessons)
    
    completed = progress_data['completed_lessons']
    percentage = progress_data['percentage']
    quizzes_passed = progress_data['quizzes_passed']
    avg_score = 0
    
    if progress_manager.progress.get('quiz_scores'):
        scores = [s.get('score', 0) for s in progress_manager.progress['quiz_scores'].values()]
        avg_score = int(sum(scores) / len(scores)) if scores else 0
    
    # Progress display
    gr.Markdown("### 📊 Your Progress")
    
    with gr.Row():
        with gr.Column(scale=1):
            gr.HTML(f"""
            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
                        color: white; padding: 20px; border-radius: 15px; text-align: center;">
                <div style="font-size: 36px; font-weight: bold;">{percentage}%</div>
                <div style="font-size: 14px;">Overall Completion</div>
            </div>
            """)
        
        with gr.Column(scale=1):
            gr.HTML(f"""
            <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); 
                        color: white; padding: 20px; border-radius: 15px; text-align: center;">
                <div style="font-size: 36px; font-weight: bold;">{completed}/{total_lessons}</div>
                <div style="font-size: 14px;">Lessons Completed</div>
            </div>
            """)
        
        with gr.Column(scale=1):
            gr.HTML(f"""
            <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); 
                        color: white; padding: 20px; border-radius: 15px; text-align: center;">
                <div style="font-size: 36px; font-weight: bold;">{quizzes_passed}/5</div>
                <div style="font-size: 14px;">Quizzes Passed</div>
            </div>
            """)
        
        with gr.Column(scale=1):
            gr.HTML(f"""
            <div style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); 
                        color: white; padding: 20px; border-radius: 15px; text-align: center;">
                <div style="font-size: 36px; font-weight: bold;">{avg_score}%</div>
                <div style="font-size: 14px;">Avg Quiz Score</div>
            </div>
            """)
    
    # Progress bar
    gr.HTML(f"""
    <div style="margin: 20px 0;">
        <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
            <span style="font-weight: 600;">Course Progress</span>
            <span>{percentage}%</span>
        </div>
        <div style="background: #e0e0e0; border-radius: 10px; height: 20px; width: 100%;">
            <div style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); 
                        border-radius: 10px; height: 100%; width: {percentage}%; 
                        transition: width 0.5s ease;"></div>
        </div>
    </div>
    """)
    
    return progress_data