import streamlit as st
import requests
from streamlit_lottie import st_lottie
from dotenv import load_dotenv
import os

# Load environment variables from .env file
load_dotenv()

# Retrieve the password from the environment variable
APP_PASSWORD = os.getenv("APP_PASSWORD")

# Set the page title and layout
st.set_page_config(page_title="Space Birthday Exploration", page_icon="🚀", layout="centered")

def load_lottieurl(url: str):
    r = requests.get(url)
    if r.status_code != 200:
        return None
    return r.json()

# Load the Lottie animation
lottie_hello = load_lottieurl("https://lottie.host/d29edbdd-af94-402e-bb4c-b314f17897e6/n5SKHOkbYQ.json")

# Initialize session state
if 'authenticated' not in st.session_state:
    st.session_state['authenticated'] = False

# Function to handle login
def login():
    st.header("Enter Password to Continue")
    password = st.text_input("Password", type="password", key="password_input")
    if st.button("Submit"):
        if password == APP_PASSWORD:
            st.session_state['authenticated'] = True
            st.success("Authentication successful!")
            st.rerun()
        else:
            st.error("Incorrect password")

# Main app content
def main_content():
    # Custom styles with the background image and updated shadow effect
    st.markdown(
        """
        <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

        body {
            background-image: url('https://i.imghippo.com/files/nYbNv1725063923.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            color: #FFFFFF;
            margin: 0;
            font-family: 'Orbitron', sans-serif;
        }

        .stApp {
            background: transparent;
        }

        .birthday-text {
            font-size: 48px;
            font-weight: bold;
            color: #FFB6C1;
            text-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000;
            text-align: center;
            margin-top: 20px;
        }

        .custom-text {
            font-size: 20px;
            color: #FF00FF;  /* Magenta color */
            text-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000;
            text-align: center;
            margin-top: 10px;
        }

        .video-container {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
            border-radius: 10px;
            overflow: hidden;
            background-color: rgba(0,0,0,0);  /* Fully transparent background */
        }

        .space-text {
            font-size: 24px;
            font-weight: bold;
            color: #00FFFF;
            text-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        </style>
        """,
        unsafe_allow_html=True
    )

    # Add "Happy Birthday!" text at the top
    st.markdown('<div class="birthday-text">Happy Birthday!</div>', unsafe_allow_html=True)

    # Add custom text after the heading, with two paragraphs
    custom_text = """
        <p>Wishing you many wonderful years ahead, filled with love, happiness, and out-of-this-world, cosmic adventures, space girl!</p>
        <p>Now let me present to you the bday vid edit "20thChondiEdit"</p>
        <p>I hope you like it!</p>
        <p> PS: 2 decades that is old!!</p>
    """  # You can change this text
    st.markdown(f'<div class="custom-text">{custom_text}</div>', unsafe_allow_html=True)

    # Embed the YouTube video with a transparent background
    video_id = "SLBzL4f7r3k"  # Your YouTube video ID
    st.markdown(
        f"""
        <div class="video-container">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/{video_id}" frameborder="0" allowfullscreen></iframe>
        </div>
        """,
        unsafe_allow_html=True
    )

    # Add the space-themed text after the video, with two paragraphs
    space_text = """
        <p>Hey dude this last 1 year was damn crazy but it was filled with many moments.</p>
        <p>These are some of those moments that were captured.</p> 
        <p>In all these moments Ik I haven't always been the ideal best friend and I am truly sorry for those.</p>
        <p>You have been a great friend for all this time and am sorry for all those times I couldn't reciprocate it.</p>
        <p>Seriously though thank you for being there for me and for taking up all the messed up things that I do.</p>
        <p>I haven't always been the bunny that you deserve but thank you for the aditi you have been.</p>
        <p>So Happy Birthday! And I hope we stay like this for all your next bdays well just a lil bit more matured 🤓</p>
    """  # You can change this text
    st.markdown(f'<div class="space-text">{space_text}</div>', unsafe_allow_html=True)

    # Add the Lottie animation directly without an extra container
    st_lottie(
        lottie_hello,
        speed=1,
        reverse=False,
        loop=True,
        quality="low",
        height=150,
        width=150,
        key=None,
    )

# Main app logic
if not st.session_state['authenticated']:
    login()
else:
    main_content()