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

# Custom CSS for professional look
def inject_custom_css():
    st.markdown("""
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
        
        * {
            font-family: 'Poppins', sans-serif;
        }
        
        .title {
            font-size: 3rem !important;
            font-weight: 700 !important;
            color: #6C63FF !important;
            text-align: center;
            margin-bottom: 0.5rem;
        }
        
        .subtitle {
            font-size: 1.2rem !important;
            text-align: center;
            color: #666 !important;
            margin-bottom: 2rem;
        }
        
        .question-box {
            background: #F8F9FA;
            border-radius: 15px;
            padding: 2rem;
            margin: 1.5rem 0;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .answer-btn {
            border-radius: 12px !important;
            padding: 0.5rem 1.5rem !important;
            font-weight: 600 !important;
            margin: 0.5rem !important;
        }
        
        .yes-btn {
            background: #6C63FF !important;
            color: white !important;
        }
        
        .no-btn {
            background: #FF6B6B !important;
            color: white !important;
        }
        
        .final-reveal {
            animation: fadeIn 2s;
            font-size: 2.5rem;
            color: #6C63FF;
            text-align: center;
            margin: 2rem 0;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .confetti {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
        }
    </style>
    """, unsafe_allow_html=True)

# Confetti animation (for final reveal)
def show_confetti():
    html("""
    <canvas id="confetti-canvas" class="confetti"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
    <script>
    const canvas = document.getElementById('confetti-canvas');
    const confetti = confetti.create(canvas, { resize: true });
    
    confetti({
        particleCount: 150,
        spread: 70,
        origin: { y: 0.6 }
    });
    
    setTimeout(() => {
        canvas.remove();
    }, 5000);
    </script>
    """)

# Game logic with fake data
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"  # Fake target for testing
    
    # Start screen
    if st.session_state.game_state == "start":
        st.image("https://via.placeholder.com/600x300?text=Think+of+Something", 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
    elif st.session_state.game_state == "gameplay":
        col1, col2 = st.columns([1, 3])
        with col1:
            st.image("https://via.placeholder.com/200?text=Question", width=150)
        with col2:
            st.markdown(f'<div class="question-box">Question {st.session_state.current_q + 1}/10:<br><br>'
                       f'<strong>{st.session_state.questions[st.session_state.current_q]}</strong></div>', 
                       unsafe_allow_html=True)
        
        answer = st.radio("Your answer:", ["Yes", "No"], horizontal=True, label_visibility="collapsed")
        
        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;">{st.session_state.target.upper()}</div>', 
                   unsafe_allow_html=True)
        
        st.image("https://via.placeholder.com/400x200?text=Congratulations", use_column_width=True)
        
        if st.button("Play Again", key="play_again"):
            st.session_state.clear()
            st.rerun()

if __name__ == "__main__":
    main()