import streamlit as st

def generate_slab_data():
    # Inject custom CSS for reducing the gap
    st.markdown(
        """
        <style>
        .stNumberInput > label, .stTextInput > label {
            margin-bottom: -20px; /* Reduce the gap between the label and input box */
        }
        </style>
        """,
        unsafe_allow_html=True,
    )

    # Initialize session state for each slab
    for i in range(1, 4):
        if f"range_{i}" not in st.session_state:
            st.session_state[f"range_{i}"] = ""
        if f"commercial_{i}" not in st.session_state:
            st.session_state[f"commercial_{i}"] = 0.0

    # Function to get input for each slab
    def get_slab_input(index):
        # Header row: Align Slab and Commercial Value headers
        col1, col2 = st.columns([3, 2])  # Adjust column width ratio for alignment
        with col1:
            slab_header = f"""
                <h1 style='
                    color: #a689f6;
                    font-size: 22px;
                    background-image: -webkit-linear-gradient(0deg, #a689f6 3%, #272191 33%, #413bb9 61%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    text-fill-color: transparent;
                    -webkit-text-fill-color: transparent;
                    margin-bottom: -5px;
                '>Slab {index}</h1>
            """
            st.markdown(slab_header, unsafe_allow_html=True)

        with col2:
            commercial_header = f"""
                <h1 style='
                    color: #a689f6;
                    font-size: 20px;
                    background-image: -webkit-linear-gradient(0deg, #a689f6 3%, #272191 33%, #413bb9 61%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    text-fill-color: transparent;
                    -webkit-text-fill-color: transparent;
                    margin-bottom: -5px;
                '>Commercial Value</h1>
            """
            st.markdown(commercial_header, unsafe_allow_html=True)

        # Input row: Align Slab range and Commercial Value input fields
        col3, col4 = st.columns([3, 2])  # Adjust column widths for alignment
        with col3:
            slab_range = st.text_input(
                f"Enter range for Slab {index} (e.g., 0-50000)",
                value=st.session_state[f"range_{index}"],
                key=f"range_input_{index}",
                on_change=lambda: update_session_state(f"range_{index}", st.session_state[f"range_input_{index}"])
            )
        with col4:
            commercial_value = st.number_input(
                f"",
                min_value=0.0,
                step=0.1,
                value=st.session_state[f"commercial_{index}"],
                key=f"commercial_input_{index}",
                on_change=lambda: update_session_state(f"commercial_{index}", round(st.session_state[f"commercial_input_{index}"], 2))
            )

        # Generate formatted slab string if inputs are valid
        return f"{index}_{slab_range.replace('-', '_')}_{round(commercial_value, 2)}" if slab_range and commercial_value > 0 else ""

    # Update session state function
    def update_session_state(key, value):
        st.session_state[key] = value

    # Generate inputs dynamically for each slab
    slabs = []
    for i in range(1, 4):
        slabs.append(get_slab_input(i))

    # Generate and display the output string
    slab_data = " | ".join(filter(None, slabs))
    if slab_data:
        plan_info_header = """
            <h1 style='
                color: #a689f6;
                font-size: 22px;
                background-image: -webkit-linear-gradient(0deg, #9b7ae1 3%, #1f1453 33%, #2e2d8f 61%);
                background-clip: text;
                -webkit-background-clip: text;
                text-fill-color: transparent;
                -webkit-text-fill-color: transparent;
            '>Slab data:</h1>
        """


    # Format slab_data with the same gradient style
        formatted_slab_data = f"""
            <p style='
                font-size: 18px;
                color: #a689f6;
                background-image: -webkit-linear-gradient(0deg, #a689f6 3%, #272191 33%, #413bb9 61%);
                background-clip: text;
                -webkit-background-clip: text;
                text-fill-color: transparent;
                -webkit-text-fill-color: transparent;
            '>{slab_data}</p>
        """

    # Display the header and formatted slab data
        st.markdown(plan_info_header, unsafe_allow_html=True)
        st.markdown(formatted_slab_data, unsafe_allow_html=True)
        return slab_data
    else:
        st.warning("Please fill in all required fields for at least one slab!")

# Call the function
generate_slab_data()