import streamlit as st
import subprocess

# Sidebar for user instructions and input
st.sidebar.title("Terminal Command Runner")
st.sidebar.write("Enter a terminal command below, and click the **Run Command** button to execute it.")

# Main page layout
st.title("🚀 Terminal Command Executor")
st.markdown("""
    This tool allows you to run terminal commands directly from the web interface. 
    Enter a command in the input field, and the output will be displayed below. 
""")

# Create a user-friendly input field with a placeholder and description
command = st.text_area("💻 Enter a terminal command:", placeholder="e.g., ls, pwd, echo Hello World")

# Create a button to execute the command
if st.button("Run Command"):
    if command:
        with st.spinner("Running the command..."):
            try:
                # Execute the terminal command and capture the output
                result = subprocess.run(command, shell=True, capture_output=True, text=True)
                
                # Display the output in the Streamlit app
                st.subheader("📜 Command Output:")
                st.code(result.stdout, language="bash")
                
                # Display errors, if any
                if result.stderr:
                    st.error(f"⚠️ Error:\n{result.stderr}")
            except Exception as e:
                st.error(f"❌ Error running command: {e}")
    else:
        st.warning("⚠️ Please enter a command to run.")

# Display additional tips in the sidebar
st.sidebar.header("Quick Tips")
st.sidebar.write("""
- To list files: `ls`
- To show current directory: `pwd`
- To display system info: `uname -a`
- To print something: `echo "Hello"`
""")

# Custom CSS for button styling
st.markdown("""
    <style>
        footer {visibility: hidden;}
        .css-18e3th9 {background-color: #34495e;}
        h1 {color: #3498db;}
        .stTextInput input {
            border: 1px solid #2980b9;
            background-color: #ecf0f1;
        }
        .stButton button {
            background-color: #27ae60;
            color: white;
            font-size: 16px;
        }
        .stButton button:hover {
            background-color: red; /* Button background color on hover */
            color: white; /* Text color remains white on hover */
        }
        .stMarkdown h2, .stMarkdown h3 {
            color: #2ecc71;
        }
        .stTextArea textarea {
            border-color: #3498db;
        }
        .css-qbe2hs {
            color: #f1c40f;
        }
    </style>
""", unsafe_allow_html=True)

# Custom footer text for a  user-friendly experience
st.markdown("💡 **Tip**: Use simple commands and see the output instantly. Happy hacking!")