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
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 = False  # Default is light mode

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

# 3️⃣ Theme settings
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️⃣ CSS
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; }}
  label[data-testid="stMarkdownContainer"] > div > div {{
      color: {TEXT} !important;
  }}
</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️⃣ 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
    )

    user_input = st.text_area(
        "📥 Input (stdin)", 
        placeholder="Enter input() values here, one per line",
        height=100
    )

    if st.button("▶️ Run"):
        out, err, exc = execute_code(code, user_input)
        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", "")
    )

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