import altair as alt
import numpy as np
import pandas as pd
import streamlit as st

# 1. Force the page configuration to a clean wide layout
st.set_page_config(
    page_title="Interactive Spiral Visualizer", 
    page_icon="📊",
    layout="wide"
)

# 2. Custom CSS to absolutely force white backgrounds, blue headings, and crisp black text
st.markdown(
    """
    <style>
    /* Force main app background to pure white and text to solid black */
    .stApp {
        background-color: #FFFFFF !important;
        color: #000000 !important;
    }
    
    /* Style all main text, body markdown, and labels to crisp black */
    p, span, label, .stSlider p, .stMarkdown p {
        color: #000000 !important;
        font-weight: 500 !important;
    }
    
    /* Force headings to a brilliant, clean blue */
    h1, h2, h3, .blue-heading {
        color: #1E3A8A !important; /* Premium Navy/Corporate Blue */
        font-weight: 700 !important;
    }
    
    /* Clean styling for links */
    a {
        color: #2563EB !important;
        text-decoration: underline !important;
    }
    </style>
    """,
    unsafe_transform=True,
)

# 3. Clean Header Section (Inherits Blue Headings and Black Text)
st.markdown("<h1>✨ Welcome to Streamlit!</h1>", unsafe_html=True)
st.markdown(
    """
    Edit `/streamlit_app.py` to customize this app to your heart's desire ❤️.  
    If you have any questions, check out our [documentation](https://docs.streamlit.io) 
    and [community forums](https://discuss.streamlit.io).
    
    ---
    ### **Example Simulation**
    *Adjust the controls on the left to watch the spiral update in real-time.*
    """
)

# 4. Two-Column Layout (Controls on the left, Chart on the right)
col1, col2 = st.columns([1, 2], gap="large")

with col1:
    st.markdown("### **🎛️ Control Panel**")
    with st.container(border=True):  
        num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
        num_turns = st.slider("Number of turns in spiral", 1, 300, 31)

# --- EXACTLY UNCHANGED DATA LOGIC ---
indices = np.linspace(0, 1, num_points)
theta = 2 * np.pi * num_turns * indices
radius = indices
x = radius * np.cos(theta)
y = radius * np.sin(theta)

df = pd.DataFrame({
    "x": x,
    "y": y,
    "idx": indices,
    "rand": np.random.randn(num_points),
})
# -----------------------------------

with col2:
    st.markdown("### **📊 Generated Visualization**")
    
    # 5. Styled Altair Chart matching the White & Blue aesthetic
    chart = (
        alt.Chart(df, height=600, width=600)
        .mark_point(
            filled=True, 
            opacity=0.85
        )
        .encode(
            x=alt.X("x", axis=None),
            y=alt.Y("y", axis=None),
            # CHANGED: 'blues' scheme creates a premium transition from soft light blue to deep royal blue
            color=alt.Color("idx", legend=None, scale=alt.Scale(scheme="blues")),
            size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
        )
        .configure_view(
            strokeWidth=0 # Removes any unnecessary dark bounding boxes around the chart
        )
    )
    
    # Render the chart responsively
    st.altair_chart(chart, use_container_width=True)