import streamlit as st
import os
from dotenv import load_dotenv
import google.generativeai as genai
from pathlib import Path
import json

# Load environment variables
load_dotenv()

# Configure Gemini API
genai.configure(api_key=os.getenv("Gemini_API_Key"))
model = genai.GenerativeModel('gemini-pro')

# Page config
st.set_page_config(
    page_title="MotiMeter",
    page_icon="🧊",
    layout="wide",
    initial_sidebar_state="expanded"
)

# Initialize session state variables
if 'role' not in st.session_state:
    st.session_state.role = None
if 'current_mode' not in st.session_state:
    st.session_state.current_mode = None

# Import other modules
from tutorial import show_tutorial
from live_session import show_live_session
from moti_chat import show_moti_chat
from session_analysis import show_session_analysis

def sidebar():
    with st.sidebar:
        # Role switcher at the top
        st.session_state.role = st.radio(
            "Switch Role",
            ["Consumer", "Therapist"],
            index=0 if st.session_state.role == "Consumer" else 1
        )
        
        st.title("Navigation")
        
        # Tutorial button
        if st.button("Tutorial"):
            st.session_state.current_mode = "tutorial"
            
        # Main navigation
        st.subheader("Main Features")
        if st.button("Live Session"):
            st.session_state.current_mode = "live_session"
        if st.button("Moti Chat"):
            st.session_state.current_mode = "moti_chat"
        if st.button("Session Analysis"):
            st.session_state.current_mode = "session_analysis"


def show_welcome():
    # Center align all contents
    st.markdown("""
        <style>
        .centered {
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .big-header {
            font-size: 3em;
            color: #1E88E5;
            margin-bottom: 20px;
        }
        .sub-header {
            font-size: 1.5em;
            color: #424242;
            margin-bottom: 30px;
        }
        .feature-box {
            background-color: #f5f5f5;
            border-radius: 10px;
            padding: 20px;
            margin: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        </style>
        """, unsafe_allow_html=True)

    st.markdown("""
        <div class="centered">
            <h1 class="big-header">Welcome to MotiMeter</h1>
            <p class="sub-header">MotiMeter is your AI companion that makes motivational interviewing simple and clear. It listens to therapy conversations and shows both therapists and clients exactly where they are on their change journey - just like a GPS for personal growth.</p>
        </div>
        """, unsafe_allow_html=True)
    st.write("Please select your role to continue:")
    
    col1, col2 = st.columns(2)
    # Centering the buttons using markdown
    with col1:
        st.markdown("<div style='text-align: center;'>", unsafe_allow_html=True)
        if st.button("I am a Consumer"):
            st.session_state.role = "Consumer"
            st.session_state.current_mode = "tutorial"
        st.markdown("</div>", unsafe_allow_html=True)
    
    with col2:
        st.markdown("<div style='text-align: center;'>", unsafe_allow_html=True)
        if st.button("I am a Therapist"):
            st.session_state.role = "Therapist"
            st.session_state.current_mode = "tutorial"
        st.markdown("</div>", unsafe_allow_html=True)
            
    # # Create three columns for features
    # col1, col2, col3 = st.columns(3)

    # with col1:
    #     st.markdown("""
    #         <div class="feature-box">
    #             <h3>🎯 Real-time Analysis</h3>
    #             <p>Get instant feedback on your MI sessions using advanced AI technology</p>
    #         </div>
    #         """, unsafe_allow_html=True)

    # with col2:
    #     st.markdown("""
    #         <div class="feature-box">
    #             <h3>📊 Track Progress</h3>
    #             <p>Monitor your development and improve your MI skills over time</p>
    #         </div>
    #         """, unsafe_allow_html=True)

    # with col3:
    #     st.markdown("""
    #         <div class="feature-box">
    #             <h3>🤝 Interactive Support</h3>
    #             <p>Practice and enhance your MI techniques with AI guidance</p>
    #         </div>
    #         """, unsafe_allow_html=True)

    # # Add getting started section
    # st.markdown("""
    #     <div class="centered">
    #         <h2>Getting Started</h2>
    #         <p>Upload your session recordings or practice with our AI assistant to improve your MI skills.</p>
    #     </div>
    #     """, unsafe_allow_html=True)

    # Quick start guide
    with st.expander("📚 Quick Start Guide"):
        st.markdown("""
            ### How to Use MotiMeter
            1. **Upload Sessions**: Share your recorded sessions for analysis
            2. **Get Feedback**: Receive detailed insights about your MI practice
            3. **Track Progress**: Monitor your improvement over time
            4. **Practice**: Use our AI assistant to enhance your skills
            """)

def main():
    if st.session_state.role is None:
        show_welcome()
    else:
        sidebar()
        
        if st.session_state.current_mode == "tutorial":
            show_tutorial()
        elif st.session_state.current_mode == "live_session":
            show_live_session()
        elif st.session_state.current_mode == "moti_chat":
            show_moti_chat()
        elif st.session_state.current_mode == "session_analysis":
            show_session_analysis()

if __name__ == "__main__":
    main()