import streamlit as st
import plotly.graph_objects as go

# Title
st.title("Interactive Equation Plotter")

# Sidebar sliders
st.sidebar.header("Controls")
w = st.sidebar.slider('W (slope)', min_value=-10.0, max_value=10.0, value=1.0, step=0.1)
b = st.sidebar.slider('B (intercept)', min_value=-100.0, max_value=100.0, value=0.0, step=1.0)

# Initial x position
x = st.slider('X position', min_value=-100.0, max_value=100.0, value=0.0, step=1.0)

# Calculate y based on the equation y = w * x + b
y = w * x + b

# Create the plot
fig = go.Figure()

# Plot for the y-axis (top line)
fig.add_shape(type="line", x0=-100, x1=100, y0=1, y1=1,
              line=dict(color="blue", width=2, dash="dash"))

# Plot for the x-axis (bottom line)
fig.add_shape(type="line", x0=-100, x1=100, y0=-1, y1=-1,
              line=dict(color="blue", width=2, dash="dash"))

# Plot the x point
fig.add_trace(go.Scatter(x=[x], y=[-1], mode='markers', marker=dict(color='red', size=10), name="X point"))

# Plot the y point
fig.add_trace(go.Scatter(x=[y], y=[1], mode='markers', marker=dict(color='red', size=10), name="Y point"))

# Update the layout
fig.update_layout(
    title=f'y = {w} * x + {b}',
    xaxis=dict(range=[-100, 100]),
    yaxis=dict(range=[-2, 2], showticklabels=False),
    showlegend=False,
    height=400,
    margin=dict(t=50, b=10)
)

# Display the plot in Streamlit
st.plotly_chart(fig)

# Add instruction to click and drag the point on x-axis
st.write("Drag the red dot on the x-axis to change the x position.")