import streamlit as st
import streamlit.components.v1 as components
import urllib.parse

# Streamlit app title and description
st.title("LoraTheExplorer Gradio App Wrapper")
st.markdown("""
    This Streamlit app embeds the MultimodalArt LoraTheExplorer Gradio app in an iframe.
    Use the controls below to interact with the app or prefill prompts (if supported).
""")

# Gradio app URL
GRADIO_URL = "https://multimodalart-loratheexplorer.hf.space"

# Function to generate iframe HTML
def render_gradio_iframe(url, width=850, height=600):
    iframe_html = f"""
    <iframe
        src="{url}"
        frameborder="0"
        width="{width}"
        height="{height}"
        style="border: none;"
    ></iframe>
    """
    return iframe_html

# Function to attempt to prefill prompt via URL parameters (if Gradio app supports it)
def generate_url_with_prompt(base_url, prompt):
    # URL-encode the prompt
    encoded_prompt = urllib.parse.quote(prompt)
    # Append as a query parameter (assumption: Gradio app might accept ?prompt=...)
    # This is speculative; adjust based on actual app behavior
    return f"{base_url}?prompt={encoded_prompt}"

# Sidebar for controls
st.sidebar.header("Controls")
prompt = st.sidebar.text_input(
    "Enter a prompt",
    placeholder="A magical forest with glowing creatures",
    help="Enter a prompt to prefill in the Gradio app (if supported)."
)
apply_prompt = st.sidebar.button("Apply Prompt")

# Handle prompt application
if apply_prompt and prompt:
    # Attempt to modify URL with prompt
    modified_url = generate_url_with_prompt(GRADIO_URL, prompt)
    st.sidebar.info(f"Attempting to load with prompt: {prompt}")
else:
    modified_url = GRADIO_URL

# Embed Gradio app
st.subheader("Gradio App")
components.html(
    render_gradio_iframe(modified_url),
    height=600,
    scrolling=True
)

# JavaScript injection to set prompt (alternative approach, may be blocked by CORS)
st.markdown("""
    <script>
    function setPrompt(prompt) {
        try {
            const iframe = document.querySelector('iframe');
            iframe.contentWindow.postMessage({
                type: 'set_prompt',
                prompt: prompt
            }, '*');
        } catch (e) {
            console.error('Error sending prompt:', e);
        }
    }
    </script>
""", unsafe_allow_html=True)

if prompt and apply_prompt:
    # Attempt to send prompt via JavaScript (requires Gradio app to listen for postMessage)
    st.markdown(f"""
        <script>
        setPrompt("{prompt}");
        </script>
    """, unsafe_allow_html=True)

# Notes and limitations
st.markdown("""
    **Notes:**
    - The Gradio app is embedded in an iframe, preserving its original interface.
    - Prefilling prompts via URL parameters or JavaScript may not work if the Gradio app doesn't support these methods.
    - If the app doesn't respond to the prompt, interact directly with the iframe below.
    - To fully control the app, the Gradio app's API or source code would need to be inspected for supported endpoints.
""")