app.py

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
import numpy as np
import os
from model import (
    calculate_student_metrics,
    identify_strengths_weaknesses,
    calculate_average_performance,
    evaluate_model,
    generate_specific_recommendations,
    analyze_topic_performance,
    generate_topic_based_recommendations
)
from utils import visualize_student_performance, visualize_student_vs_average, visualize_topic_performance
from resources import get_learning_resources
from chat_buddy import render_chat_interface, set_student_context
from dotenv import load_dotenv

# Load environment variables from .env file
load_dotenv()

# Create data directory if it doesn't exist
os.makedirs('data', exist_ok=True)

# Get API key from environment variables or Streamlit secrets
try:
    OPENROUTER_API_KEY = st.secrets.get("OPENROUTER_API_KEY", os.getenv("OPENROUTER_API_KEY"))
except:
    OPENROUTER_API_KEY = os.getenv("OPENROUTER_API_KEY")

# Debug: Check if API key is loaded (only show first/last few chars for security)
if OPENROUTER_API_KEY:
    key_preview = f"{OPENROUTER_API_KEY[:6]}...{OPENROUTER_API_KEY[-4:]}" if len(OPENROUTER_API_KEY) > 10 else "***"
    print(f"✓ API Key loaded: {key_preview}")
else:
    print("✗ WARNING: No API key found - using fallback responses")

def display_week_card(week_title, week_items):
    """Helper function to display a sleek and elegant week card"""
    # Week accent colors (subtle)
    week_colors = {
        'Week 1': '#667eea',
        'Week 2': '#4facfe',
        'Week 3': '#43e97b',
        'Week 4': '#fa709a'
    }
    
    accent_color = week_colors.get(week_title, '#667eea')
    
    st.markdown(f"""
        <div style='background: white; 
                    padding: 18px; margin: 12px 0; border-radius: 8px; 
                    border-left: 4px solid {accent_color};
                    box-shadow: 0 2px 8px rgba(0,0,0,0.06);'>
            <h4 style='color: #2c3e50; margin: 0 0 12px 0; font-size: 18px; font-weight: 600;'>
                📅 {week_title}
            </h4>
    """, unsafe_allow_html=True)
    
    for item in week_items:
        item_text = item.strip()
        if item_text.startswith('•'):
            item_text = item_text[1:].strip()
        if item_text:
            st.markdown(f"""
                <div style='margin: 8px 0; padding-left: 18px; 
                            position: relative;'>
                    <span style='position: absolute; left: 0; color: {accent_color};'>✓</span>
                    <p style='margin: 0; color: #555; line-height: 1.6; font-size: 14px;'>
                        {item_text}
                    </p>
                </div>
            """, unsafe_allow_html=True)
    
    st.markdown("</div>", unsafe_allow_html=True)

def main():
    st.set_page_config(
        page_title="Student Performance Analysis",
        page_icon="📊",
        layout="wide",
    )
    
    # Custom CSS for premium look
    st.markdown("""
        <style>
        /* Main title styling */
        h1 {
            color: #1f77b4;
            font-family: 'Helvetica Neue', sans-serif;
            font-weight: 700;
        }
        
        /* Section headers */
        h2 {
            color: #2c3e50;
            font-weight: 600;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            margin-top: 30px;
        }
        
        /* Metric cards */
        [data-testid="stMetricValue"] {
            font-size: 28px;
            font-weight: 700;
        }
        
        /* Expander styling */
        .streamlit-expanderHeader {
            background-color: #f8f9fa;
            border-radius: 8px;
            font-weight: 600;
        }
        
        /* Tab styling */
        .stTabs [data-baseweb="tab-list"] {
            gap: 8px;
        }
        
        .stTabs [data-baseweb="tab"] {
            height: 50px;
            background-color: #f0f2f6;
            border-radius: 8px 8px 0 0;
            padding: 10px 20px;
            font-weight: 500;
        }
        
        .stTabs [aria-selected="true"] {
            background-color: #3498db;
            color: white;
        }
        
        /* Container styling */
        .element-container {
            margin-bottom: 10px;
        }
        
        /* Dataframe styling */
        .dataframe {
            font-size: 14px;
        }
        
        /* Success/Info/Warning boxes */
        .stAlert {
            border-radius: 8px;
            padding: 15px;
        }
        
        /* Links */
        a {
            color: #3498db;
            text-decoration: none;
            font-weight: 500;
        }
        
        a:hover {
            color: #2980b9;
            text-decoration: underline;
        }
        
        /* Premium content boxes */
        .premium-box {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            border-radius: 12px;
            color: white;
            margin: 15px 0;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .info-card {
            background-color: #f8f9fa;
            border-left: 4px solid #3498db;
            padding: 15px 20px;
            margin: 10px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .recommendation-item {
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        
        .recommendation-item:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        
        .week-card {
            background: linear-gradient(to right, #f0f4ff, #ffffff);
            border-left: 4px solid #3498db;
            padding: 15px;
            margin: 12px 0;
            border-radius: 8px;
        }
        
        .highlight-text {
            background-color: #fff3cd;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
        }
        
        /* Sidebar */
        .css-1d391kg {
            background-color: #f8f9fa;
        }
        
        /* Hover effects for cards */
        div[style*='cursor: pointer']:hover {
            transform: translateX(5px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important;
        }
        
        /* Smooth animations */
        * {
            transition: all 0.3s ease;
        }
        
        /* Beautiful scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }
        </style>
    """, unsafe_allow_html=True)
    
    st.title("📊 Student Performance Analysis & Recommendations")
    st.markdown("*AI-Powered Personalized Learning Insights*")
    st.markdown("---")
    
    upload_mode = st.radio("Select upload mode:", ["Existing database", "New student data"])
    
    if upload_mode == "Existing database":
        try:
            data = pd.read_csv('data/student_data.csv')
            st.success("Using existing student database")
        except FileNotFoundError:
            st.error("Database file not found. Please upload a CSV file.")
            data = None
    else:
        uploaded_file = st.file_uploader("Upload new student data", type=["csv"])
        if uploaded_file is not None:
            new_student_data = pd.read_csv(uploaded_file)
            try:
                # Save uploaded data
                os.makedirs('data', exist_ok=True)
                new_student_data.to_csv('data/student_data.csv', index=False)
                data = new_student_data
                st.success(f"Created new database with {len(new_student_data['student_id'].unique())} students")
            except Exception as e:
                st.error(f"Error saving data: {e}")
                data = new_student_data
        else:
            st.warning("Please upload student data")
            data = None
    
    if data is not None:
        # Student selector
        student_ids = data['student_id'].unique()
        selected_student = st.selectbox("Select a student to analyze:", student_ids)
        
        # Display raw data for selected student
        if st.checkbox("Show raw data for selected student"):
            st.subheader("Raw Data Preview")
            st.dataframe(data[data['student_id'] == selected_student], use_container_width=True)
        
        # Process data
        student_section_performance, student_overall = calculate_student_metrics(data)
        
        # Calculate average performance
        avg_section_performance, avg_overall_performance = calculate_average_performance(student_section_performance, student_overall)
        
        # Analyze topic performance
        topic_performance = analyze_topic_performance(data, selected_student)
        
        # Display class averages
        st.subheader("Class Performance Averages")
        col1, col2 = st.columns(2)
        
        with col1:
            st.metric("Overall Class Average", f"{avg_overall_performance:.2f}%")
        
        with col2:
            # Display section averages
            section_mapping = {'A': 'Math', 'B': 'Verbal', 'C': 'Non-verbal', 'D': 'Comprehension'}
            
            section_avg_data = pd.DataFrame({
                'Section': [f"{section_mapping[row['section']]} ({row['section']})" for _, row in avg_section_performance.iterrows()],
                'Average Score': [f"{row['avg_score_percentage']:.2f}%" for _, row in avg_section_performance.iterrows()]
            })
            st.dataframe(section_avg_data, hide_index=True, use_container_width=True)
        
        # Model evaluation
        with st.expander("Model Evaluation Metrics"):
            accuracy, precision = evaluate_model(data)
            st.write(f"Model Accuracy: {accuracy:.2f}%")
            st.write(f"Model Precision: {precision:.2f}%")
            st.write("Model accuracy measures how often our prediction model correctly identifies whether a student is performing above or below average.")
        
        # Visualize overall performance
        st.subheader("Overall Performance Analysis")
        fig = visualize_student_performance(
            student_section_performance, student_overall,
            avg_section_performance, avg_overall_performance, selected_student
        )
        st.pyplot(fig)
        
        # Identify strengths and weaknesses
        strengths_weaknesses = identify_strengths_weaknesses(student_section_performance, avg_section_performance)
        
        # Individual student analysis
        st.subheader(f"Detailed Analysis for Student ID: {selected_student}")
        
        # Performance metrics
        student_data = student_section_performance[student_section_performance['student_id'] == selected_student]
        
        # Section performance
        st.markdown("### Section Performance:")
        section_data = student_data[['section', 'sum', 'count', 'score_percentage']]
        section_data.columns = ['Section', 'Correct Answers', 'Total Questions', 'Score (%)']
        
        # Map section codes to subject names
        section_mapping = {'A': 'Math', 'B': 'Verbal', 'C': 'Non-verbal', 'D': 'Comprehension'}
        section_data['Subject'] = section_data['Section'].map(section_mapping)
        
        # Add the class average for comparison
        section_data['Class Average (%)'] = section_data['Section'].apply(
            lambda x: avg_section_performance[avg_section_performance['section'] == x]['avg_score_percentage'].values[0]
        )
        
        # Add difference from average
        section_data['Difference from Average'] = section_data['Score (%)'] - section_data['Class Average (%)']
        
        # Reorder columns for better presentation
        section_data = section_data[['Subject', 'Section', 'Correct Answers', 'Total Questions', 
                                    'Score (%)', 'Class Average (%)', 'Difference from Average']]
        
        st.dataframe(section_data, hide_index=True, use_container_width=True)
        
        # Overall score comparison
        overall = student_overall[student_overall['student_id'] == selected_student]['overall_score'].values[0]
        
        col1, col2, col3 = st.columns(3)
        
        with col1:
            st.metric("Student's Overall Score", f"{overall:.2f}%")
        
        with col2:
            st.metric("Class Average", f"{avg_overall_performance:.2f}%")
        
        with col3:
            difference = overall - avg_overall_performance
            st.metric("Difference from Average", f"{difference:.2f}%", 
                     delta=f"{difference:.2f}%", delta_color="normal")
        
        # Strengths and weaknesses
        st.markdown("### Performance Summary:")
        col1, col2 = st.columns(2)
        
        with col1:
            st.write("**Strengths:**", ', '.join(f"{section_mapping[s]} (Section {s})" for s in strengths_weaknesses[selected_student]['strengths']))
        
        with col2:
            st.write("**Areas for Improvement:**", ', '.join(f"{section_mapping[w]} (Section {w})" for w in strengths_weaknesses[selected_student]['weaknesses']))
        
        # AI Study Buddy Chat - NEW FEATURE!
        st.markdown("---")
        st.markdown("## 💬 AI Study Buddy")
        st.markdown("*Ask questions, get personalized advice, and stay motivated!*")
        
        # Set context for the chat
        set_student_context(
            student_id=selected_student,
            student_data=student_data,
            topic_performance=topic_performance,
            strengths=strengths_weaknesses[selected_student]['strengths'],
            weaknesses=strengths_weaknesses[selected_student]['weaknesses'],
            overall_score=overall,
            class_avg=avg_overall_performance
        )
        
        # Render the chat interface
        with st.expander("💬 Chat with Your Study Buddy", expanded=False):
            render_chat_interface(OPENROUTER_API_KEY)
        
        st.markdown("---")
        
        # Topic-level performance visualization
        if not topic_performance.empty:
            st.subheader("Topic-Level Performance Analysis")
            topic_fig = visualize_topic_performance(topic_performance, section_mapping)
            st.pyplot(topic_fig)
            
            # Display topic performance table for all sections
            st.markdown("### Topic Performance Details:")
            
            # Create tabs for each section
            tabs = st.tabs([f"{section_mapping[section]} (Section {section})" for section in ['A', 'B', 'C', 'D']])
            
            # Display topic performance for each section in its respective tab
            for i, section in enumerate(['A', 'B', 'C', 'D']):
                with tabs[i]:
                    section_topic_data = topic_performance[topic_performance['section'] == section].copy()
                    
                    if not section_topic_data.empty:
                        # Add subject name
                        section_topic_data['Subject'] = section_mapping[section]
                        
                        # Format the table
                        display_data = section_topic_data[['Subject', 'topic', 'total_questions', 'correct_answers', 'accuracy', 'is_weak']]
                        display_data.columns = ['Subject', 'Topic', 'Total Questions', 'Correct Answers', 'Accuracy (%)', 'Needs Focus']
                        
                        # Sort by accuracy (ascending) to show weakest topics first
                        display_data = display_data.sort_values('Accuracy (%)', ascending=True)
                        
                        # Format accuracy as percentage with 1 decimal place
                        display_data['Accuracy (%)'] = display_data['Accuracy (%)'].apply(lambda x: f"{x:.1f}%")
                        
                        # Display the dataframe
                        st.dataframe(display_data, hide_index=True, use_container_width=True)
                    else:
                        st.info(f"No topic data available for {section_mapping[section]} (Section {section})")
        
        # Topic-based recommendations
        with st.spinner("Generating topic-based recommendations..."):
            topic_recommendations = generate_topic_based_recommendations(
                data, selected_student, OPENROUTER_API_KEY
            )
        
        if topic_recommendations:
            st.markdown("---")
            st.markdown("## 🎯 Topic-Based Learning Insights")
            st.markdown("*Detailed analysis and personalized study plans based on your performance*")
            st.markdown("")
            
            for section, content in topic_recommendations.items():
                section_name = section_mapping.get(section, f"Section {section}")
                
                # Determine if this is a weak area to auto-expand
                is_weak = section in strengths_weaknesses[selected_student]['weaknesses']
                
                # Create a colored container based on performance
                if is_weak:
                    badge = "🔴 **Priority Focus Area**"
                else:
                    badge = "🟢 **Strong Performance**"
                
                with st.expander(f"**{section_name}** (Section {section}) {badge}", expanded=is_weak):
                    # Create tabs for better organization
                    tab1, tab2, tab3, tab4 = st.tabs(["📊 Performance Analysis", "💡 Recommendations", "📅 Study Plan", "📚 Learning Resources"])
                    
                    with tab1:
                        st.markdown("### 🔍 Performance Insights")
                        if 'analysis' in content:
                            # Create a sleek card container for analysis
                            st.markdown("""
                                <div style='background: linear-gradient(120deg, #f6f9fc 0%, #eef2f7 100%); 
                                            padding: 20px; border-radius: 10px;
                                            border-left: 4px solid #667eea;
                                            box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin: 15px 0;'>
                            """, unsafe_allow_html=True)
                            
                            # Format the analysis text with better spacing
                            analysis_text = content['analysis'].replace('\n', '<br><br>')
                            st.markdown(f"<p style='line-height: 1.8; font-size: 15px; color: #2c3e50; margin: 0;'>{analysis_text}</p>", unsafe_allow_html=True)
                            
                            st.markdown("</div>", unsafe_allow_html=True)
                        elif 'full_response' in content:
                            st.info(content['full_response'])
                    
                    with tab2:
                        st.markdown("### 💎 Actionable Recommendations")
                        if 'recommendations' in content:
                            # Parse and display recommendations as elegant cards
                            recs = content['recommendations'].strip().split('\n')
                            rec_counter = 1
                            
                            for rec in recs:
                                rec_text = rec.strip()
                                if rec_text and rec_text.startswith('•'):
                                    rec_text = rec_text[1:].strip()
                                
                                if rec_text and not rec_text.startswith('#'):
                                    # Create gradient card for each recommendation
                                    gradient_colors = [
                                        ('linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', '#fff'),
                                        ('linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', '#fff'),
                                        ('linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', '#fff'),
                                        ('linear-gradient(135deg, #fa709a 0%, #fee140 100%)', '#333'),
                                        ('linear-gradient(135deg, #30cfd0 0%, #330867 100%)', '#fff')
                                    ]
                                    
                                    color_idx = (rec_counter - 1) % len(gradient_colors)
                                    bg_gradient, text_color = gradient_colors[color_idx]
                                    
                                    st.markdown(f"""
                                        <div style='background: {bg_gradient}; 
                                                    padding: 20px; margin: 15px 0; 
                                                    border-radius: 12px; 
                                                    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
                                                    transition: transform 0.3s;'>
                                            <div style='display: flex; align-items: start;'>
                                                <div style='background: rgba(255,255,255,0.3); 
                                                            color: {text_color}; 
                                                            font-weight: bold; 
                                                            padding: 8px 15px; 
                                                            border-radius: 50%; 
                                                            margin-right: 15px;
                                                            font-size: 18px;
                                                            min-width: 40px;
                                                            text-align: center;'>
                                                    {rec_counter}
                                                </div>
                                                <p style='color: {text_color}; 
                                                          margin: 0; 
                                                          line-height: 1.7; 
                                                          font-size: 15px; 
                                                          font-weight: 500;'>
                                                    {rec_text}
                                                </p>
                                            </div>
                                        </div>
                                    """, unsafe_allow_html=True)
                                    rec_counter += 1
                    
                    with tab3:
                        st.markdown("### 📆 Personalized Study Schedule")
                        if 'study_plan' in content:
                            # Format study plan with sleek timeline design
                            st.markdown("""
                                <div style='background: linear-gradient(120deg, #f6f9fc 0%, #eef2f7 100%); 
                                            padding: 20px; border-radius: 10px; 
                                            border-left: 4px solid #667eea;
                                            box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin: 15px 0;'>
                            """, unsafe_allow_html=True)
                            
                            # Parse study plan into weeks
                            plan_lines = content['study_plan'].strip().split('\n')
                            current_week = None
                            week_content = []
                            
                            for line in plan_lines:
                                if 'Week' in line and ':' in line:
                                    # Display previous week if exists
                                    if current_week:
                                        display_week_card(current_week, week_content)
                                    
                                    current_week = line.split(':')[0].strip()
                                    week_content = []
                                elif line.strip() and current_week:
                                    week_content.append(line.strip())
                            
                            # Display last week
                            if current_week:
                                display_week_card(current_week, week_content)
                            
                            # Fallback if no week structure found
                            if not any('Week' in line for line in plan_lines):
                                plan_text = content['study_plan'].replace('\n', '<br>')
                                st.markdown(f"""
                                    <div style='background: white; 
                                                padding: 18px; border-radius: 8px; 
                                                color: #2c3e50; line-height: 1.8;'>
                                        {plan_text}
                                    </div>
                                """, unsafe_allow_html=True)
                            
                            st.markdown("</div>", unsafe_allow_html=True)
                    
                    with tab4:
                        # Add learning resources
                        resources = get_learning_resources(section_name, topic_performance, section)
                        
                        if resources:
                            st.markdown("### 🎥 Video Tutorials")
                            for video in resources['videos']:
                                st.markdown(f"- 📺 [{video['title']}]({video['url']})")
                            
                            st.markdown("### 📖 Practice Resources")
                            for resource in resources['practice']:
                                st.markdown(f"- 📝 [{resource['title']}]({resource['url']})")
                            
                            st.markdown("### 🌐 Interactive Learning")
                            for tool in resources['interactive']:
                                st.markdown(f"- 🎮 [{tool['title']}]({tool['url']})")
        
        # Generate highly specific recommendations
        with st.spinner("Generating personalized recommendations..."):
            specific_recommendations = generate_specific_recommendations(
                data, selected_student, student_section_performance, 
                avg_section_performance, OPENROUTER_API_KEY
            )
        
        # Display personalized recommendations with enhanced UI
        st.markdown("---")
        st.markdown("## 🎓 Personalized Action Plan")
        st.markdown("*Customized recommendations based on your unique learning profile*")
        st.markdown("")
        
        for section, section_name in section_mapping.items():
            is_weak = section in strengths_weaknesses[selected_student]['weaknesses']
            
            # Style based on performance
            if is_weak:
                header_icon = "🔴"
                priority = "**HIGH PRIORITY**"
            elif section in strengths_weaknesses[selected_student]['strengths']:
                header_icon = "🟢"
                priority = "**Continue Excellence**"
            else:
                header_icon = "🟡"
                priority = "**Maintain & Improve**"
            
            with st.expander(f"{header_icon} **{section_name}** (Section {section}) - {priority}", expanded=is_weak):
                if section in specific_recommendations and specific_recommendations[section]:
                    # Create a nice card layout
                    st.markdown("### 🎯 Strategic Action Items")
                    
                    # Create gradient colors for different action items
                    action_gradients = [
                        ('linear-gradient(135deg, #667eea 0%, #764ba2 100%)', '#fff'),
                        ('linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', '#fff'),
                        ('linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', '#fff'),
                        ('linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', '#fff'),
                        ('linear-gradient(135deg, #fa709a 0%, #fee140 100%)', '#333')
                    ]
                    
                    for idx, recommendation in enumerate(specific_recommendations[section], 1):
                        color_idx = (idx - 1) % len(action_gradients)
                        bg_gradient, text_color = action_gradients[color_idx]
                        
                        st.markdown(f"""
                            <div style='background: {bg_gradient}; 
                                        padding: 20px; margin: 15px 0; 
                                        border-radius: 12px; 
                                        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
                                        transition: all 0.3s ease;'>
                                <div style='display: flex; align-items: start;'>
                                    <div style='background: rgba(255,255,255,0.3); 
                                                color: {text_color}; 
                                                font-weight: bold; 
                                                padding: 10px 18px; 
                                                border-radius: 50%; 
                                                margin-right: 15px;
                                                font-size: 20px;
                                                min-width: 45px;
                                                text-align: center;
                                                box-shadow: 0 4px 10px rgba(0,0,0,0.2);'>
                                        {idx}
                                    </div>
                                    <div style='flex: 1;'>
                                        <p style='color: {text_color}; 
                                                  margin: 0; 
                                                  line-height: 1.8; 
                                                  font-size: 15px; 
                                                  font-weight: 500;'>
                                            {recommendation}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        """, unsafe_allow_html=True)
                    
                    # Add resources for this section
                    st.markdown("---")
                    st.markdown("### 📚 Curated Learning Resources")
                    
                    resources = get_learning_resources(section_name, topic_performance, section)
                    
                    if resources:
                        # Create a beautiful resource display with cards
                        st.markdown("""
                            <div style='background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); 
                                        padding: 25px; border-radius: 15px; margin: 20px 0;
                                        box-shadow: 0 10px 25px rgba(0,0,0,0.1);'>
                        """, unsafe_allow_html=True)
                        
                        # Video Tutorials Section
                        st.markdown("""
                            <h4 style='color: #667eea; margin: 20px 0 15px 0; font-size: 20px;'>
                                🎥 Video Tutorials
                            </h4>
                        """, unsafe_allow_html=True)
                        
                        for video in resources['videos'][:3]:
                            st.markdown(f"""
                                <a href="{video['url']}" target="_blank" style='text-decoration: none;'>
                                    <div style='background: white; padding: 15px; margin: 10px 0; 
                                                border-radius: 10px; border-left: 4px solid #667eea;
                                                box-shadow: 0 4px 10px rgba(0,0,0,0.05);
                                                transition: all 0.3s ease;
                                                cursor: pointer;'>
                                        <p style='margin: 0; color: #333; font-weight: 500;'>
                                            📺 {video['title']}
                                        </p>
                                    </div>
                                </a>
                            """, unsafe_allow_html=True)
                        
                        # Practice Resources Section
                        st.markdown("""
                            <h4 style='color: #43e97b; margin: 25px 0 15px 0; font-size: 20px;'>
                                📝 Practice Resources
                            </h4>
                        """, unsafe_allow_html=True)
                        
                        for resource in resources['practice'][:3]:
                            st.markdown(f"""
                                <a href="{resource['url']}" target="_blank" style='text-decoration: none;'>
                                    <div style='background: white; padding: 15px; margin: 10px 0; 
                                                border-radius: 10px; border-left: 4px solid #43e97b;
                                                box-shadow: 0 4px 10px rgba(0,0,0,0.05);
                                                transition: all 0.3s ease;
                                                cursor: pointer;'>
                                        <p style='margin: 0; color: #333; font-weight: 500;'>
                                            ✍️ {resource['title']}
                                        </p>
                                    </div>
                                </a>
                            """, unsafe_allow_html=True)
                        
                        # Interactive Tools Section
                        if resources.get('interactive'):
                            st.markdown("""
                                <h4 style='color: #f093fb; margin: 25px 0 15px 0; font-size: 20px;'>
                                    🎮 Interactive Tools
                                </h4>
                            """, unsafe_allow_html=True)
                            
                            for tool in resources['interactive'][:3]:
                                st.markdown(f"""
                                    <a href="{tool['url']}" target="_blank" style='text-decoration: none;'>
                                        <div style='background: white; padding: 15px; margin: 10px 0; 
                                                    border-radius: 10px; border-left: 4px solid #f093fb;
                                                    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
                                                    transition: all 0.3s ease;
                                                    cursor: pointer;'>
                                            <p style='margin: 0; color: #333; font-weight: 500;'>
                                                🎯 {tool['title']}
                                            </p>
                                        </div>
                                    </a>
                                """, unsafe_allow_html=True)
                        
                        st.markdown("</div>", unsafe_allow_html=True)
                else:
                    st.info(f"✅ Great job! Your {section_name} performance is solid. Keep up the good work!")
        
        # Comparison with average
        #final
        st.subheader("Comparison with Average Performance")
        fig_comp = visualize_student_vs_average(student_data, avg_section_performance, section_mapping)
        st.pyplot(fig_comp)

if __name__ == "__main__":
    main()