import streamlit as st
import time
import random
from streamlit.components.v1 import html

# Custom CSS (same as before)
def inject_custom_css():
    st.markdown("""
    <style>
        /* Previous CSS styles remain the same */
    </style>
    """, unsafe_allow_html=True)

# Confetti animation (same as before)
def show_confetti():
    html("""
    <script>
    // Previous confetti code remains the same
    </script>
    """)

def main():
    inject_custom_css()
    
    st.markdown('<div class="title">KASOTI</div>', unsafe_allow_html=True)
    st.markdown('<div class="subtitle">The Ultimate Guessing Game</div>', unsafe_allow_html=True)
    
    if 'game_state' not in st.session_state:
        st.session_state.game_state = "start"
        st.session_state.questions = [
            "Is it something you can hold in your hand?",
            "Is it commonly found in households?",
            "Can it be used as a tool?",
            "Is it primarily made of metal?",
            "Does it have moving parts?",
            "Is it electronic?",
            "Is it something you would gift to someone?",
            "Can it be found in an office?",
            "Does it require electricity to function?",
            "Is it typically under $100?"
        ]
        st.session_state.current_q = 0
        st.session_state.answers = []
        st.session_state.target = "smartphone"
    
    # Start screen
    if st.session_state.game_state == "start":
        # Using direct URL instead of placeholder
        st.image("https://i.imgur.com/7vQD0fP.png", 
                caption="Think of something and we'll try to guess it!",
                use_column_width=True)
        
        with st.form("start_form"):
            category = st.radio("What are you thinking of?", 
                              ["A famous person", "An object", "A place"],
                              index=1)
            user_input = st.text_input("Type it here (we won't peek!):").strip().lower()
            
            if st.form_submit_button("Start Game"):
                if not user_input:
                    st.error("Please type something!")
                elif len(user_input) < 3:
                    st.error("Too short! Type properly.")
                else:
                    st.session_state.game_state = "gameplay"
                    st.session_state.user_input = user_input
                    st.rerun()
    
    # Gameplay screen - FIXED IMAGE DISPLAY
    elif st.session_state.game_state == "gameplay":
        col1, col2 = st.columns([1, 3])
        with col1:
            # Using a reliable image URL
            st.image("https://i.imgur.com/JnQ6Tyr.png", 
                    width=150, 
                    caption=f"Question {st.session_state.current_q + 1}")
        with col2:
            st.markdown(
                f'<div class="question-box">'
                f'<h3>Question {st.session_state.current_q + 1}/10:</h3>'
                f'<p><strong>{st.session_state.questions[st.session_state.current_q]}</strong></p>'
                f'</div>',
                unsafe_allow_html=True
            )
        
        # Answer buttons with better spacing
        answer = st.radio(
            "Your answer:",
            ["Yes", "No"],
            horizontal=True,
            label_visibility="collapsed",
            key=f"q{st.session_state.current_q}"
        )
        
        if st.button("Submit Answer", type="primary"):
            st.session_state.answers.append(answer == "Yes")
            st.session_state.current_q += 1
            
            if st.session_state.current_q >= len(st.session_state.questions):
                st.session_state.game_state = "result"
            st.rerun()
    
    # Result screen
    elif st.session_state.game_state == "result":
        show_confetti()
        st.markdown('<div class="final-reveal">🎉 I think it\'s a...</div>', unsafe_allow_html=True)
        time.sleep(1)
        st.markdown(
            f'<div class="final-reveal" style="font-size:3.5rem;color:#6C63FF;">'
            f'{st.session_state.target.upper()}'
            f'</div>',
            unsafe_allow_html=True
        )
        
        st.image("https://i.imgur.com/7vQD0fP.png", 
                caption="Congratulations!",
                use_column_width=True)
        
        if st.button("Play Again", key="play_again"):
            st.session_state.clear()
            st.rerun()

if __name__ == "__main__":
    main()