app.py

import streamlit as st
import streamlit_ace as st_ace
from utils import execute_code, export_session
from chatbot import render_chatbot
import json

# 1️⃣ Page configuration (must be first)
st.set_page_config(
    page_title="Pro Code Playground",
    page_icon="💻",
    layout="wide"
)

# 2️⃣ Dark mode toggle
if 'dark_mode' not in st.session_state:
    st.session_state.dark_mode = True

dm = st.checkbox("🌙 Dark mode", value=st.session_state.dark_mode)
st.session_state.dark_mode = dm

# 3️⃣ Theme variables
BG = "#0f1620" if dm else "#f5f5f5"
PANEL_BG = "#1c2330" if dm else "#ffffff"
TEXT = "#e3e8f1" if dm else "#1a1a1a"
ACCENT = "#ff5252"
BORDER = "#2a3240" if dm else "#dddddd"
SHADOW = "rgba(0,0,0,0.3)" if dm else "rgba(0,0,0,0.1)"
ACE_THEME = "monokai" if dm else "chrome"

# 4️⃣ Global CSS styling
st.markdown(f"""
<style>
  .stApp {{ background-color: {BG}; color: {TEXT}; }}
  [data-testid="stSidebar"] {{ background-color: {PANEL_BG} !important; }}
  .ace_editor, .ace_scroller {{
      background: {PANEL_BG} !important;
      box-shadow: 0 4px 8px {SHADOW} !important;
      border-radius: 8px !important;
  }}
  textarea, input, .stTextArea textarea {{
      background: {PANEL_BG} !important;
      color: {TEXT} !important;
      border: 1px solid {BORDER} !important;
      border-radius: 4px !important;
  }}
  button, .stDownloadButton > button {{
      background-color: {ACCENT} !important;
      color: #fff !important;
      border-radius: 6px !important;
      transition: transform 0.1s;
  }}
  button:hover {{ transform: scale(1.02) !important; }}
  .chat-container {{ background: {PANEL_BG} !important; border: 1px solid {BORDER} !important; border-radius: 8px !important; padding: 1rem; max-height: 480px; overflow-y: auto; }}
  .chat-message {{ margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 12px; }}
  .user-message {{ background: rgba(100,149,237,0.2); align-self: flex-end; }}
  .bot-message {{ background: rgba(200,200,200,0.2); align-self: flex-start; }}
  pre code {{ display: block; padding: 0.5rem; background: rgba(0,0,0,0.1); border-radius: 4px; overflow-x: auto; }}
</style>
""", unsafe_allow_html=True)

# 5️⃣ App header
st.title("Pro Code Playground")
st.markdown("Write, execute & export Python snippets, with built‑in AI assistance.")

# 6️⃣ Main layout
gen, bot = st.columns((2,1), gap="large")

with gen:
    st.subheader("Editor")
    code = st_ace.st_ace(
        placeholder="Start typing your Python code…",
        language="python",
        theme=ACE_THEME,
        keybinding="vscode",
        font_size=14,
        min_lines=20,
        show_gutter=True,
        wrap=True,
        auto_update=True
    )
    if st.button("▶️ Run"):
        out, err, exc = execute_code(code)
        st.session_state.code_output = out
        st.session_state.error_output = err or exc
    if st.session_state.get("code_output"):
        st.text_area("Output", st.session_state.code_output, height=120)
    if st.session_state.get("error_output"):
        st.error(st.session_state.error_output)

with bot:
    st.subheader("Code Assistant")
    render_chatbot(
        code,
        st.session_state.get("code_output", ""),
        st.session_state.get("error_output", "")
    )

# 7️⃣ Input section
# Allow users to specify runtime inputs (comma-separated)
st.session_state.setdefault('user_inputs', '')
user_inputs = st.text_input(
    "🔢 Enter input values (comma-separated)",
    value=st.session_state.user_inputs,
    help="E.g., 5,7 for two numbers"
)
st.session_state.user_inputs = user_inputs

# Update run button to pass inputs into code execution
if st.button("▶️ Run"):
    # If user provided inputs, inject into code via input() override
    exec_code = code
    if user_inputs:
        # Prepare input simulation
        values = user_inputs.split(',')
        input_stub = '
'.join([f"print({v.strip()})" for v in values])
        exec_code = f"{input_stub}
" + code
    out, err, exc = execute_code(exec_code)
    st.session_state.code_output = out
    st.session_state.error_output = err or exc

# Display results
if st.session_state.get("code_output"):
    st.text_area("Output", st.session_state.code_output, height=120)
if st.session_state.get("error_output"):
    st.error(st.session_state.error_output)

# 8️⃣ Footer
st.markdown(f"""
<div style='text-align:center; margin-top:1rem; color:{TEXT}66;'>
  Built with ❤️ & Streamlit
</div>
""", unsafe_allow_html=True)