import streamlit as st
from joblib import load

# Load model
Model = load('svm.joblib')

def predict_note_authentication(values):
    prediction = Model.predict([values])
    return prediction[0]

def main():
    st.set_page_config(page_title='Mobile Price Classification', layout='wide')
    
    # Custom CSS
    st.markdown("""
        <style>
        .main {background-color: #f4f4f4;}
        .title {color: white; text-align: center; font-size: 26px; font-weight: bold;}
        .result {background-color: #4CAF50; padding: 10px; color: white; text-align: center; font-size: 22px; font-weight: bold; border-radius: 10px;}
        .predict-button {display: flex; justify-content: center; margin-top: 20px;}
        .stButton>button {background-color: #ff5733; color: white; font-size: 18px; font-weight: bold; padding: 10px 20px; border-radius: 10px;}
        .stButton>button:hover {background-color: #e64a19;}
        </style>
    """, unsafe_allow_html=True)
    
    # Title Section
    st.markdown("""
        <div style="background-color:#ff5733;padding:15px;border-radius:10px;">
        <h2 class="title">Predict the Price Range of a Mobile</h2>
        </div>
    """, unsafe_allow_html=True)
    
    # Input Fields in 3 Columns
    col1, col2, col3 = st.columns(3)
    
    with col1:
        battery_power = st.number_input('Battery Power (mAh)', min_value=500, max_value=2000, step=10)
        colour = st.selectbox('Colour', ['Blue', 'Other'])
        clock_speed = st.number_input('Clock Speed (GHz)', min_value=0.5, max_value=3.0, step=0.1)
        sim = st.selectbox('SIM Option', ['Dual', 'Single'])
        front_camera = st.number_input('Front Camera (MP)', min_value=0, max_value=20, step=1)
        network_4G = st.selectbox('Network (4G)', ['Yes', 'No'])
        network_3G = st.selectbox('Network (3G)', ['Yes', 'No'])
    
    with col2:
        int_memory = st.number_input('Internal Memory (GB)', min_value=2, max_value=64, step=1)
        mobile_depth = st.selectbox('Mobile Depth (cm)', [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0])
        mobile_wt = st.number_input('Mobile Weight (grams)', min_value=80, max_value=200, step=1)
        n_cores = st.selectbox('Number of Cores', [1, 2, 3, 4, 5, 6, 7, 8])
        primary_camera = st.number_input('Primary Camera (MP)', min_value=0, max_value=20, step=1)
        px_height = st.number_input('Screen Pixel Height', min_value=0, max_value=2000, step=10)
        px_width = st.number_input('Screen Pixel Width', min_value=100, max_value=2000, step=10)
    
    with col3:
        ram = st.number_input('RAM (MB)', min_value=256, max_value=4000, step=10)
        screen_height = st.number_input('Screen Height (cm)', min_value=0, max_value=20, step=1)
        screen_width = st.number_input('Screen Width (cm)', min_value=0, max_value=20, step=1)
        talk_time = st.number_input('Talk Time (hours)', min_value=1, max_value=20, step=1)
        touch_screen = st.selectbox('Touch Screen', ['Yes', 'No'])
        wifi = st.selectbox('Wi-Fi Support', ['Yes', 'No'])
    
    # Processing Inputs
    colour = 1 if colour == 'Blue' else 0
    sim = 1 if sim == 'Dual' else 0
    four_g = 1 if network_4G == 'Yes' else 0
    three_g = 1 if network_3G == 'Yes' else 0
    touch_screen = 1 if touch_screen == 'Yes' else 0
    wifi = 1 if wifi == 'Yes' else 0
    
    values = [
        battery_power, colour, clock_speed, sim, front_camera, four_g, int_memory, mobile_depth, mobile_wt,
        n_cores, primary_camera, px_height, px_width, ram, screen_height, screen_width, talk_time, three_g,
        touch_screen, wifi
    ]
    
    # Predict and Display Result
    st.markdown("<div class='predict-button'>", unsafe_allow_html=True)
    if st.button("Predict", help="Click to predict the mobile price range"):
        result = predict_note_authentication(values)
        st.markdown(f'<div class="result">Predicted Price Class: {result}</div>', unsafe_allow_html=True)
    st.markdown("</div>", unsafe_allow_html=True)

if __name__ == "__main__":
    main()