import streamlit as st
import openai
import os
from io import BytesIO

# Set your API Key
openai.api_key = os.getenv("GROQ_API_KEY")

# Inject Custom CSS and JavaScript for the UI
st.markdown(
    """
    <style>
    /* Black background with animated moving balls */
    body {
        background-color: black;
        color: white;
        overflow: hidden;
    }

    /* Animation for the background */
    @keyframes move {
        0% {
            transform: translateY(0) translateX(0);
        }
        50% {
            transform: translateY(-20px) translateX(20px);
        }
        100% {
            transform: translateY(0) translateX(0);
        }
    }

    .background {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .ball {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #FF4500;
        border-radius: 50%;
        animation: move 3s infinite;
    }

    .ball:nth-child(1) {
        top: 10%;
        left: 20%;
    }
    .ball:nth-child(2) {
        top: 30%;
        left: 70%;
        animation-delay: 1s;
    }
    .ball:nth-child(3) {
        top: 50%;
        left: 40%;
        animation-delay: 2s;
    }

    /* Styled input box */
    textarea, select {
        background-color: black;
        color: white;
        border: 2px solid #FF4500;
        border-radius: 8px;
        padding: 10px;
        width: 100%;
    }

    textarea:focus, select:focus {
        outline: none;
        border-color: #FFD700;
        box-shadow: 0 0 15px #FFD700;
        transition: 0.3s ease-in-out;
    }

    /* Styled button */
    .stButton button {
        background: linear-gradient(45deg, #FF4500, #FFD700);
        color: white;
        font-size: 16px;
        font-weight: bold;
        border: none;
        border-radius: 12px;
        padding: 10px 20px;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .stButton button:hover {
        transform: scale(1.1);
        box-shadow: 0 0 15px #FFD700;
    }

    </style>
    """,
    unsafe_allow_html=True,
)

# Add moving balls to the background
st.markdown(
    """
    <div class="background">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
    </div>
    """,
    unsafe_allow_html=True,
)

# Application title
st.title("✨ Text-to-Speech Generator ✨")
st.write("Enter text and convert it to speech with OpenAI's TTS model!")

# Input text and voice options
text_input = st.text_area("🎤 Enter Text Below", "Hello world! This is a streaming test.")
voice_option = st.selectbox("🎵 Choose a Voice", ["alloy", "default"])  # Expand as needed

if st.button("Generate Speech 🎶"):
    with st.spinner("✨ Generating... Please wait ✨"):
        try:
            # API call to OpenAI
            response = openai.Audio.create(
                model="tts-1",
                voice=voice_option,
                input=text_input,
            )

            # Load audio into memory
            audio_bytes = BytesIO(response["audio"])

            # Audio playback in Streamlit
            st.audio(audio_bytes, format="audio/mp3")
            st.success("✅ Speech generated successfully!")
        except Exception as e:
            st.error(f"❌ An error occurred: {str(e)}")