import gradio as gr
import joblib
import numpy as np
import warnings

# Suppress warnings
warnings.filterwarnings("ignore")

# Load model and encoders
emotion_model = joblib.load("emotion_model.pkl")
song_encoder = joblib.load("song_encoder.pkl")
emotion_decoder = joblib.load("emotion_decoder.pkl")

# CSS for funky retro aesthetic
css = """
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/850d5888-f262-47d0-bb7b-34d03cd8d3ee/dbk7ro6-e704fd42-1159-4a30-9231-324475986be8.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzg1MGQ1ODg4LWYyNjItNDdkMC1iYjdiLTM0ZDAzY2Q4ZDNlZVwvZGJrN3JvNi1lNzA0ZmQ0Mi0xMTU5LTRhMzAtOTIzMS0zMjQ0NzU5ODZiZTguanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.s1rQVnmRdqtBL5Qe0IfTM59F3Z0d5Nh97HEpRS7XZdw');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Press Start 2P', cursive;
    color: #00ffff;
}

.gradio-container, .gradio-interface, .gradio-box, .title-box {
    background-color: rgba(0, 0, 0, 0.75) !important;
    border-radius: 15px !important;
    padding: 25px !important;
    box-shadow: 0 0 20px #00ffff;
    font-family: 'Press Start 2P', cursive !important;
    color: #00ffff;
}

input, textarea, .gr-textbox, .gr-input {
    background-color: #111 !important;
    color: #00ffff !important;
    border: 2px solid #00ffff !important;
    font-family: 'Press Start 2P', cursive !important;
}

.track-btn {
    background: linear-gradient(135deg, #ff00cc, #3333ff) !important;
    border: none !important;
    color: white !important;
    font-weight: bold !important;
    border-radius: 10px !important;
    padding: 10px 25px !important;
    font-size: 12px !important;
    font-family: 'Press Start 2P', cursive !important;
    box-shadow: 0 0 10px #ff00cc;
    transition: all 0.3s ease !important;
    margin-top: 20px !important;
}
.track-btn:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #3333ff, #ff00cc) !important;
}
"""

def predict_emotion(song_name):
    try:
        encoded_song = song_encoder.transform([song_name])
        emotion_label = emotion_model.predict(np.array(encoded_song).reshape(1, -1))[0]
        emotion = emotion_decoder.inverse_transform([emotion_label])[0]
    except Exception as e:
        return f"<p style='color: #ff4444;'>Error: {str(e)}</p>", gr.update(visible=False)

    return f"""
    <div style='text-align: center; font-family: "Press Start 2P", cursive;'>
        <h2 style="color: #ff00cc;">💽 Mood Tracker Results 💽</h2>
        <p>Your current pixel-powered emotion is:</p>
        <h1 style='font-size: 2.2em; color: #00ffff;'>{emotion.upper()}</h1>
    </div>
    """, gr.update(visible=True)

def clear_form():
    return "", "", gr.update(visible=False)

# Gradio interface
with gr.Blocks(title="🎮 8-Bit Song2Mood Tracker", theme=gr.themes.Soft(), css=css) as app:
    with gr.Column(elem_classes="title-box"):
        gr.Markdown("""
        <div style="text-align: center;">
            <h1 style="color: #ff00cc;">🎮 SONG2MOOD TRACKER 🎧</h1>
            <p>Type a song. Get the vibe. Unlock the emotion.</p>
        </div>
        """)

    song_input = gr.Textbox(
        label="🎵 Type your song below:",
        placeholder="e.g., Blinding Lights by The Weeknd"
    )

    submit_btn = gr.Button("🎚️ Decode My Mood", elem_classes="track-btn")
    output_html = gr.HTML()
    clear_btn = gr.Button("🔁 Try Another Track", visible=False, elem_classes="track-btn")

    submit_btn.click(predict_emotion, inputs=song_input, outputs=[output_html, clear_btn])
    clear_btn.click(clear_form, inputs=None, outputs=[output_html, song_input, clear_btn])

app.launch()