import gradio as gr


### ### ### Music ### ### ###


INSTRUCTIONS = """
### <span style="color: red;"> 💿 Basic 💿</span>
- **Specific Song:** Play Passionfruit | Play CRAZY by AXL
- **Controls:** Queue | Pause | Resume | Skip
- **More Info:** Explain this song 
- **Album:** Play album Utopia | Play album Atlantis by Lilah
- **Playlist:** Play my Late Night Drive playlist

### <span style="color: red;"> 💿 Personalized 💿</span>
- **Genre:** I'm happy, play country | Play energetic pop 
- **Artist:** Play Migos hype songs | I'm sad, play Rihanna
- **Recommendations:** Recommend songs off my love for Drake + r&b
- **Create Playlist:** Make me a relaxing playlist of SZA-like songs
"""

# TODO add an image in the greeting
GREETING = """
Hi, I'm Apollo 🤖, here to assist you with **all** your musical desires! 

✨ Type **!help** to view commands ✨

For a more personalized experience, **tell me your mood**, or what you're doing 🔮
"""


CHAT_HEADER = """
<div align='center'>
    <h1 style='font-size: 26px;'>🔮 Apollo, Your AI Music Assistant 🔮</h1>
    <br>
    <p style='font-size: 22px;'>Experience personalized, intelligent music interaction</p>
</div>

<div align='center' style='display: flex; align-items: flex-start; justify-content: center;'>
    <div style='flex: 1; text-align: center; padding-right: 10px;'>
        <h2 style='font-size: 20px;'><strong>🎧 Get Started 🎧</strong></h2>
        <p style='font-size: 18px; text-align: center; line-height: 2.25;'>Connect your <span style='color: red;'>Spotify</span></p>
        <p style='font-size: 18px; text-align: center; line-height: 2.25;'>Type <code style='font-size: 24px;'>!help</code> for list of commands</p>
        <p style='font-size: 18px; text-align: center; line-height: 2.25;'>Or see the dropdown below</p>
        <p style='font-size: 18px; text-align: center; line-height: 2.25;'>Feedback is much appreciated</p>
    </div>
    <div>
        <img src='file/mascot1.gif' style='opacity: 1.0;' width='400'/>
    </div>
    <div style='flex: 1; text-align: center; padding-left: 10px;'>
        <h2 style='font-size: 20px;'><strong>🌟 Main Features 🌟</strong></h2>
        <p style='font-size: 18px; text-align: center; line-height: 2.25;'><span style='color: red;'>Chat</span> directly with Apollo</p>
        <p style='font-size: 18px; text-align: center; line-height: 2.25;'>Apollo uses your <span style='color: red;'>mood</span> & <span style='color: red;'>preferences</span></p>
        <p style='font-size: 18px; text-align: center; line-height: 2.25;'>Unsure? Apollo <span style='color: red;'>suggests</span></p>
        <p style='font-size: 18px; text-align: center; line-height: 2.25;'>Mood shift? Apollo <span style='color: red;'>adapts</span></p>
    </div>
</div>
<div align='center' style='margin-top: 0 px;'>
    <a href='#' style='font-size: 18px;'>Blog</a> | 
    <a href='#' style='font-size: 18px;'>GitHub</a> | 
    <a href='#' style='font-size: 18px;'>Website</a> | 
    <a href='#' style='font-size: 18px;'>Cool Demo</a> | 
    <a href='#' style='font-size: 18px;'>Tutorial</a>
</div>
"""


WARNING = """
<div>
<span style="color: red; font-size: 20px;">I really want to play music for you, but please authenticate your Spotify first</span>
</div>
"""


# THEME = gr.themes.Soft(primary_hue="red").set(
#     body_background_fill="#F1F4F9",
#     block_border_width="3px",
# )


### ### ### Authorization ### ### ###


AUTH_HEADER = """
<div align='center'>
    <img src='file/mascot2.gif' style='opacity: 1.0;' width='400'/>
</div>
<div align='center' style='display: flex; justify-content: space-around; margin-top: 0px;'>
    <div style='text-align: center;'>
        <h2 style='font-size: 20px;'><strong>Local Installation</strong></h2>
        <p style='font-size: 18px; text-align: center; line-height: 2.25;'>See the dropdown below</p>
    </div>
    <div style='text-align: center;'>
        <h2 style='font-size: 20px;'><strong>🔓 How to Authenticate 🔓</strong></h2>
        <p style='font-size: 18px; line-height: 2.25;'>
            1. Go to <a href='https://developer.spotify.com/' style='font-size: 18px;'><strong>Spotify Developer</strong></a> <br>
            2. <strong>'Login'</strong> to your account, then go to <a href='https://developer.spotify.com/dashboard' style='font-size: 18px;'><strong>Dashboard</strong></a> <br>
            3. <strong>'Create app'</strong> <br>
                &nbsp;&nbsp;• Put anything for name and description <br>
                &nbsp;&nbsp;• For <strong>'Redirect URI'</strong>, put <a href='http://www.jonaswaller.com' style='font-size: 18px;'><strong>www.jonaswaller.com</strong></a> <br>
            4. Go to your app <strong>'Settings'</strong> and copy the <strong>'Client ID'</strong> <br>
        </p>
    </div>
    <div style='text-align: center;'>
        <h2 style='font-size: 20px;'><strong>Don't have Spotify?</strong></h2>
        <p style='font-size: 18px; text-align: center; line-height: 2.25;'>See the dropdown below</p>
    </div>
</div>
"""


DISCLAIMER = """
We utilize Spotify's Implicit Grant Flow which operates entirely client-side, 
eliminating the need for server-side code and storage. 
Apollo has limited permissions - we cannot delete or edit any existing content in your Spotify account; 
access is strictly confined to adding new, curated playlists for you. 
If multiple users are on Apollo simultaneously, each user is confined to their own isolated session, 
preventing any cross-access to your Spotify account. 
Your data is exclusively used for real-time music curation during your active session.
"""


LOCAL_INSTALL = """
Coming soon
"""


NEED_SPOTIFY = """
Want to test out Apollo, but don't have Spotify Premium? Email me for a free (testing) account.

stuart.j.waller@vanderbilt.edu
"""


### ### ### Feedback ### ### ###


FEED_HEADER = """
<div style='text-align: center;'>
    <h2 style='font-size: 20px;'><strong>Thank You!</strong></h2>
    <p style='font-size: 18px; line-height: 2.25;'>
        Your feedback helps improve Apollo <br>
        Or email me stuart.j.waller@vanderbilt.edu <br>
    </p>
</div>
"""