import gradio as gr
from recommend import get_genres_movies_for_user, test_users

label_value_mapping = {f"User {user_id}": user_id for user_id in test_users}

# Define a function to generate colors based on genre
def get_genre_color(movie_genres, top_genres):
    
    genre_colors = {
        'Action': '#F44336',        # Red: Energetic and intense
        'Adventure': '#FF5722',     # Deep Orange: Exciting and daring
        'Thriller': '#9C27B0',      # Purple: Suspenseful and mysterious
        'Animation': '#FFEB3B',     # Yellow: Bright and cheerful
        'Children': '#4CAF50',      # Green: Fresh, youthful, and playful
        'Fantasy': '#673AB7',       # Deep Purple: Magical and imaginative
        'Comedy': '#FFC107',        # Amber: Lighthearted and funny
        'Musical': '#E91E63',       # Pink: Romantic and artistic
        'Romance': '#FF4081',       # Light Pink: Love and tenderness
        'Crime': '#607D8B',         # Blue Grey: Gritty and dark
        'Mystery': '#8BC34A',       # Lime Green: Curious and investigative
        'Film-Noir': '#212121',     # Black: Dark and moody
        'Documentary': '#009688',   # Teal: Informative and grounded
        'Drama': '#3F51B5',         # Blue: Serious and emotional
        'Horror': '#B71C1C',        # Dark Red: Fearful and intense
        'Sci-Fi': '#00BCD4',        # Cyan: Futuristic and techy
        'War': '#795548',           # Brown: Rugged and historical
        'Western': '#D7A87E',       # Tan: Rustic and wild
    }

    # Default color if no genre matches
    default_color = '#9E9E9E'

    if not top_genres:
        return genre_colors.get(movie_genres[0], default_color)

    # Check for the first genre in movie_genres that is also in top_genres
    for genre in movie_genres:
        if genre in top_genres and genre in genre_colors:
            return genre_colors[genre]

    # Check for the first valid genre in movie_genres that has a color
    for genre in movie_genres:
        if genre in genre_colors:
            return genre_colors[genre]

    # Return the default color if no matches
    return default_color


def get_movie_recommendations(user_id):
    # Fetch the top genres and recommended movies based on user_id
    user_id = label_value_mapping[user_id]
    top_genres, movies = get_genres_movies_for_user(user_id)
    
    genre_cards = "".join([
        f"<div class='card' style='background-color:{get_genre_color([genre], None)};'>{genre}</div>" 
        for genre in top_genres
    ])
    
    movie_cards = "".join([
        f"<div class='card movie-card' style='background-color:{get_genre_color(movie['genres'], top_genres)};'>"
            f"<strong>{movie['title']}</strong><br><span>{', '.join(movie['genres'])}</span>"
        "</div>"
        for movie in movies
    ])
    
    return genre_cards, movie_cards

# Define the Gradio interface
with gr.Blocks() as demo:
    gr.HTML("""
        <style>
            .gradio-container {
                background-color: #FAFAFA;
                font-family: 'Arial', sans-serif;
                color: #333;
            }
            #center-title {
                text-align: center;
                font-size: 36px;
                margin-bottom: 20px;
                color: #2C3E50;
            }
            h1 {
                font-size: 36px;
                text-align: center;
                margin-bottom: 20px;
                color: #2C3E50;
            }
            h2 {
                font-size: 16px;
                margin-bottom: 10px;
                color: #2C3E50;
                text-align: center;
            }
            .card {
                border: 1px solid #BBDEFB;
                border-radius: 8px;
                padding: 10px 15px;
                margin: 5px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                text-align: center;
                font-size: 16px;
                color: #FFFFFF;
                width: 180px;
                display: inline-block;
            }
            .movie-card {
                
            }
        </style>
    """)
    with gr.Row():
        gr.Markdown("### Movie Recommendation System", elem_id="center-title")

    with gr.Row():
        user_id_input = gr.Dropdown(
        label="Select a User",
        choices=list(label_value_mapping.keys()),
        value=list(label_value_mapping.keys())[0],  # Default value
        interactive=True
    )
    
    with gr.Row():
        with gr.Column(scale=1):
            gr.HTML("<h2>Top Genres</h2>")
            genres_output = gr.HTML(label="Top Genres")
        with gr.Column(scale=1):
            gr.HTML("<h2>Recommended Movies</h2>")
            movies_output = gr.HTML(label="Recommended Movies")
    
    user_id_input.change(get_movie_recommendations, inputs=user_id_input, outputs=[genres_output, movies_output])

demo.launch()