import streamlit as st
import requests

# Set page config with a custom title and layout
st.set_page_config(
    page_title="Steam Property Dashboard",
    page_icon="🔥",
    layout="centered"
)

# Apply a background GIF
def set_bg_gif(url):
    st.markdown(
        f"""
        <style>
        @keyframes fadeIn {{
            0% {{ opacity: 0; }}
            100% {{ opacity: 1; }}
        }}
        .stApp {{
            background: url("{url}") no-repeat center center fixed;
            background-size: cover;
            animation: fadeIn 2s;
        }}
        </style>
        """,
        unsafe_allow_html=True
    )

# Set background GIF (Use a direct link to a hosted GIF)
#set_bg_gif("https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExczlwcnY3ZWVndXllMngzNjh6ZTdlcHdzNmgyMWg5YXUzY3VwZmp3NyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ee934C7BCxPQi5scNl/giphy.gif")  # Water to steam GIF
 # Water to steam GIF

# Streamlit UI
st.title("🔥 Steam Property Dashboard")
st.markdown("Enter the **pressure (bar)** to get steam properties.")

# User input for pressure
pressure = st.number_input("Enter Pressure (bar):", min_value=0.1, max_value=100.0, step=0.1, value=1.0)

# Button to fetch data
if st.button("Get Properties"):
    try:
        # Call the API (Replace with your actual API URL)
        api_url = f"https://steam-properties.onrender.com/get_properties"
        params = {"pressure":pressure}
        response = requests.get(api_url,params)

        if response.status_code == 200:
            data = response.json()

            # Display results in columns
            col1, col2 = st.columns(2)

            with col1:
                st.markdown(f"<div class='metric-container'><b>🌡 Temperature (°C):</b> {data['T (°C)']} °C</div>", unsafe_allow_html=True)
                st.markdown(f"<div class='metric-container'><b>💧 Specific Volume Liquid (m³/kg):</b> {data['Specific Volume Liquid (m^3/kg)']} m³/kg</div>", unsafe_allow_html=True)
                st.markdown(f"<div class='metric-container'><b>🔥 Enthalpy Liquid (Kcal/kg):</b> {data['Saturation_Liquid(Kcal/kg)']} Kcal/kg</div>", unsafe_allow_html=True)

            with col2:
                st.markdown(f"<div class='metric-container'><b>💨 Specific Volume Vapor (m³/kg):</b> {data['Specific Volume Vapor (m^3/kg)']} m³/kg</div>", unsafe_allow_html=True)
                st.markdown(f"<div class='metric-container'><b>⚡ Enthalpy Vapor (Kcal/kg):</b> {data['Saturation_Vapour(KCal/kg)']} Kcal/kg</div>", unsafe_allow_html=True)

        else:
            st.error("❌ Pressure value not found. Try another value.")

    except Exception as e:
        st.error(f"⚠️ Error: {str(e)}")

# Footer
st.markdown("---")
st.markdown("<small>Created with ❤️ using Streamlit</small>", unsafe_allow_html=True)