import streamlit as st 
import joblib
import numpy as np
html_temp = """
    <div style="background-color:black;padding:10px">
    <h2 style="color:white;text-align:center;">Banking Churn Model App </h2>
    </div>
    """
st.markdown(html_temp, unsafe_allow_html=True)

bg_image_url = "https://wallpaperbat.com/img/11547497-download-modern-bank-interior.jpg " # Replace with your image URL

# Inject CSS with background image
st.markdown(f"""
    <style>
    .stApp {{
        background-image: url("{bg_image_url}");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }}
    </style>
""", unsafe_allow_html=True)
st.markdown(f"""
        <div style="
            padding: 15px; 
            background-color: #f7f4e9; 
            border-radius: 10px; 
            text-align: center; 
            font-size: 18px; 
            font-weight: bold; 
            color:  #e40c2b    ;">
            { "Enter the customer details:"}
        </div>
    """, unsafe_allow_html=True)

# model
bank_model=joblib.load("bank_churn_svc_model.joblib")

# Input variables

st.write("")
col1, col2 = st.columns(2)
with col1:
    ## CreditScore

    st.markdown(f"""
            <div style="
                padding: 15px; 
                background-color: #f7f4e9; 
                border-radius: 10px; 
                text-align: center; 
                font-size: 18px; 
                font-weight: bold; 
                color:  #1ba098;">
                { "Slide the Credit Score Value:"}
            </div>
        """, unsafe_allow_html=True)
    credit_score=st.slider("",min_value=350,max_value=850)
    
with col2:
    ## Geography
    option_geo=["France","Spain","Germany"]
    st.markdown(f"""
            <div style="
                padding: 15px; 
                background-color: #f7f4e9; 
                border-radius: 10px; 
                text-align: center; 
                font-size: 18px; 
                font-weight: bold; 
                color:  #1ba098;">
                { "Select the Geography:"}
            </div>
        """, unsafe_allow_html=True)
    
    geo=st.selectbox("",options=option_geo)
    geography_value=option_geo.index(geo)
    
col1, col2 = st.columns(2)
with col1:
    ## gender
    option_gen=["Female "," Male"]
    st.markdown(f"""
            <div style="
                padding: 15px; 
                background-color: #f7f4e9; 
                border-radius: 10px; 
                text-align: center; 
                font-size: 18px; 
                font-weight: bold; 
                color:  #1ba098;">
                { "Select the Gender:"}
            </div>
        """, unsafe_allow_html=True)
    gen=st.selectbox("",option_gen) 
    gender_value=option_gen.index(gen)
with col2:
    ## Age
    st.markdown(f"""
            <div style="
                padding: 15px; 
                background-color: #f7f4e9; 
                border-radius: 10px; 
                text-align: center; 
                font-size: 18px; 
                font-weight: bold; 
                color:  #1ba098;">
                { "Enter your AGE:"}
            </div>
        """, unsafe_allow_html=True)
   
    age=st.number_input("",max_value=92,min_value=18)

col1,col2=st.columns(2)
with col1:
    ## Tenure
    st.markdown(f"""
            <div style="
                padding: 15px; 
                background-color: #f7f4e9; 
                border-radius: 10px; 
                text-align: center; 
                font-size: 18px; 
                font-weight: bold; 
                color:  #1ba098;">
                { "Slide the Tenure of the Loan:"}
            </div>
        """, unsafe_allow_html=True)
    
    tenure=st.slider("",min_value=0,max_value=10)
    
with col2:
    ## Balance
    st.markdown(f"""
            <div style="
                padding: 15px; 
                background-color: #f7f4e9; 
                border-radius: 10px; 
                text-align: center; 
                font-size: 18px; 
                font-weight: bold; 
                color:  #1ba098;">
                { "Slide The Balance Of the your Account:"}
            </div>
        """, unsafe_allow_html=True)
   
    balance=st.slider("",min_value=0.0,max_value=250898.09)
    
col1,col2=st.columns(2)

with col1:
    ## IsActiveMember
    st.markdown(f"""
            <div style="
                padding: 15px; 
                background-color: #f7f4e9; 
                border-radius: 10px; 
                text-align: center; 
                font-size: 18px; 
                font-weight: bold; 
                color:  #1ba098;">
                { "Are you Active Account Holder:"}
            </div>
        """, unsafe_allow_html=True)
    
    active_holder= st.radio("", ["YES", "NO"])
    if active_holder=="YES":
        active_holder_value=1
    else:
        active_holder_value=0
        
with col2:
    ## EstimatedSalary
    st.markdown(f"""
            <div style="
                padding: 15px; 
                background-color: #f7f4e9; 
                border-radius: 10px; 
                text-align: center; 
                font-size: 18px; 
                font-weight: bold; 
                color:  #1ba098;">
                { "Silde the Salary:"}
            </div>
        """, unsafe_allow_html=True)
    
    e_salary=st.slider("",max_value=199992,min_value=11)
    


if st.button("Submit"):
     try:
        # Scaler the values
        
        credit_score=np.round(((credit_score-650.528800)/96.653299),3)
        age=np.round(((age-38.921800)/10.487806),3)
        tenure=np.round(((tenure-5.012800)/2.8921740),3)
        balance=np.round(((balance-76485.889288)/62397.405202),3)
        e_salary=np.round(((e_salary-100090.239881)/57510.492818),3)
        
        
        prediction = bank_model.predict([[credit_score, geography_value, gender_value, age, tenure, balance,  e_salary,  active_holder_value]])[0]


      # Define messages and colors
        review_status = {
            0: ("✅ The Customer is Interseted in our Bank", "#32CD32"),  # Green
            1: ("❌ The Customer is Not Interseted in our Bank", "#FF4500")   # Red-Orange
        }
    
        # Get message and color based on prediction
        message, color = review_status.get(prediction, ("❓ Unknown Prediction", "#808080"))
    
        # Display styled result
        st.markdown(f"""
            <div style="
                padding: 15px; 
                background-color: {color}; 
                border-radius: 10px; 
                text-align: center; 
                font-size: 18px; 
                font-weight: bold; 
                color: white;">
                {message}
            </div>
        """, unsafe_allow_html=True)
    
     except Exception as e:
         st.error(f"⚠️ Error in prediction: {e}")
    
# st.write("")