import streamlit as st
from tensorflow.keras.models import load_model
import numpy as np

# =========================================================
# PAGE CONFIG
# =========================================================
st.set_page_config(
    page_title="AI Sales Predictor",
    page_icon="📈",
    layout="wide",
    initial_sidebar_state="collapsed"
)

# =========================================================
# CUSTOM CSS
# =========================================================
st.markdown("""
<style>

html, body, [class*="css"] {
    font-family: 'Segoe UI', sans-serif;
}

.main {
    background: #f5f7fb;
}

.block-container {
    max-width: 1200px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.hero {
    background: linear-gradient(135deg,#111827,#2563eb);
    padding: 2.5rem;
    border-radius: 28px;
    color: white;
    margin-bottom: 2rem;
}

.hero h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.hero p {
    font-size: 18px;
    opacity: 0.9;
}

.card {
    background: white;
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    margin-bottom: 1rem;
}

.result-box {
    background: linear-gradient(135deg,#16a34a,#22c55e);
    padding: 2rem;
    border-radius: 24px;
    text-align: center;
    color: white;
    margin-top: 1rem;
}

.metric-card {
    background: white;
    padding: 1rem;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    text-align: center;
}

.stButton > button {
    width: 100%;
    height: 58px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(135deg,#2563eb,#1d4ed8);
    color: white;
    font-size: 20px;
    font-weight: 700;
}

.stButton > button:hover {
    background: linear-gradient(135deg,#1d4ed8,#1e40af);
}

div[data-baseweb="select"] {
    border-radius: 14px !important;
}

div[data-baseweb="slider"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (max-width: 768px){

    .hero {
        padding: 1.5rem;
    }

    .hero h1 {
        font-size: 30px;
    }

    .hero p {
        font-size: 15px;
    }

    .stButton > button {
        height: 54px;
        font-size: 18px;
    }

    .block-container {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }
}

</style>
""", unsafe_allow_html=True)

# =========================================================
# LOAD MODEL
# =========================================================
@st.cache_resource
def load_ai_model():
    return load_model("rossmann.h5")

model = load_ai_model()

# =========================================================
# HERO SECTION
# =========================================================
st.markdown("""
<div class="hero">
    <h1>📈 AI Rossmann Sales Predictor</h1>
    <p>
        Predict daily Rossmann store sales using AI-powered analytics.
        Modern responsive interface optimized for desktop and mobile devices.
    </p>
</div>
""", unsafe_allow_html=True)

# =========================================================
# INFO METRICS
# =========================================================
m1, m2, m3 = st.columns(3)

with m1:
    st.markdown("""
    <div class="metric-card">
        <h3>⚡ Fast Prediction</h3>
        <p>Instant AI analysis</p>
    </div>
    """, unsafe_allow_html=True)

with m2:
    st.markdown("""
    <div class="metric-card">
        <h3>📱 Mobile Friendly</h3>
        <p>Responsive modern design</p>
    </div>
    """, unsafe_allow_html=True)

with m3:
    st.markdown("""
    <div class="metric-card">
        <h3>🧠 Deep Learning</h3>
        <p>Neural network prediction</p>
    </div>
    """, unsafe_allow_html=True)

st.write("")

# =========================================================
# MAIN FORM
# =========================================================
st.markdown('<div class="card">', unsafe_allow_html=True)

st.subheader("Store Information")

col1, col2 = st.columns(2)

# =========================================================
# LEFT COLUMN
# =========================================================
with col1:

    customers = st.slider(
        "👥 Number of Customers",
        min_value=0,
        max_value=10000,
        value=1200,
        step=50
    )

    day_name = st.selectbox(
        "📅 Day of the Week",
        [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
            "Sunday"
        ]
    )

# =========================================================
# RIGHT COLUMN
# =========================================================
with col2:

    store_open = st.selectbox(
        "🏪 Store Status",
        [
            "Open",
            "Closed"
        ]
    )

    promo = st.selectbox(
        "🎯 Promotion Active",
        [
            "Yes",
            "No"
        ]
    )

st.write("")

predict_btn = st.button("🚀 Predict Sales")

st.markdown('</div>', unsafe_allow_html=True)

# =========================================================
# ENCODING
# =========================================================
open_value = 1 if store_open == "Open" else 0

promo_value = 1 if promo == "Yes" else 0

day_mapping = {
    "Monday": 1,
    "Tuesday": 2,
    "Wednesday": 3,
    "Thursday": 4,
    "Friday": 5,
    "Saturday": 6,
    "Sunday": 7
}

day_value = day_mapping[day_name]

# =========================================================
# PREDICTION
# =========================================================
if predict_btn:

    input_data = np.array([
        customers,
        open_value,
        day_value,
        promo_value
    ])

    if len(input_data.shape) == 1:
        input_data = np.expand_dims(input_data, axis=0)

    with st.spinner("AI is predicting sales..."):

        prediction = model.predict(input_data, verbose=0)

        predicted_sales = int(prediction[0][0])

    # =====================================================
    # RESULT CARD
    # =====================================================
    st.markdown(f"""
    <div class="result-box">
        <h2>Predicted Daily Sales</h2>
        <h1 style="font-size:72px;">€{predicted_sales:,}</h1>
        <p>AI-powered Rossmann sales estimation completed successfully</p>
    </div>
    """, unsafe_allow_html=True)

    st.write("")

    # =====================================================
    # ANALYTICS CARDS
    # =====================================================
    a1, a2, a3 = st.columns(3)

    with a1:
        st.metric(
            "Customers",
            f"{customers:,}"
        )

    with a2:
        st.metric(
            "Promotion",
            "Active" if promo_value == 1 else "Inactive"
        )

    with a3:
        st.metric(
            "Store Status",
            "Open" if open_value == 1 else "Closed"
        )

    # =====================================================
    # SALES INSIGHT
    # =====================================================
    st.write("")

    if predicted_sales > 15000:
        st.success("🔥 High sales potential detected for this store day.")

    elif predicted_sales > 7000:
        st.info("📈 Average to strong daily sales expected.")

    else:
        st.warning("⚠️ Lower sales prediction detected.")