import os
import streamlit as st
from groq import Groq
from streamlit.components.v1 import html

# Load Groq API key from environment variable
groq_api_key = os.getenv('GROQ_API_KEY')
if not groq_api_key:
    st.error("GROQ_API_KEY environment variable is not set. Please set it and restart the app.")
    st.stop()

# Initialize Groq client
groq_client = Groq(api_key=groq_api_key)

# Few-shot examples for inspiration
few_shot_examples = """
🎢 **Data Scaling Showdown: Normalization vs Standardization!** 📊
...
"""

# Function to get Groq response with few-shot examples
def get_groq_response_with_few_shot(post_type, user_input):
    if not user_input:
        return "Please enter a valid query."
    
    query_content = f"Here are a few examples of fun and engaging social media posts about data science:\n{few_shot_examples}\nNow generate a {post_type} post about {user_input} in a similar style."
    
    try:
        # Make the API call with few-shot examples included
        chat_completion = groq_client.chat.completions.create(
            messages=[{"role": "user", "content": query_content}],
            model="llama-3.1-70b-versatile",
        )
        return chat_completion.choices[0].message.content
    except Exception as e:
        return f"An error occurred: {str(e)}"

# Streamlit UI
st.title("Social Media Post Maker for Data Science")

# Initialize response
response = None

# User input
post_type = st.selectbox("Select the type of post:", [
    "Template-Based Post",
    "Data Science Meme/Quote",
    "Trend Explainer",
    "Data Science Tip",
    "Hashtag Suggestion",
    "Poll/Question Maker",
    "Project Showcase",
    "Data Visual Explanation"
])

user_input = st.text_input("Enter the topic or idea for the post:")

# Generate button
if st.button("Generate Post"):
    if user_input:
        with st.spinner("Generating post..."):
            response = get_groq_response_with_few_shot(post_type, user_input)
            if "An error occurred" in response:
                st.error(response)
            else:
                st.success("Post generated successfully!")
    else:
        st.error("Please enter a topic or idea!")

# Display the result
if response:
    st.code(response)

    # Add a Copy to Clipboard button using HTML and JavaScript
    copy_button_code = f"""
    <button class="copy-btn" onclick="copyToClipboard()">Copy to Clipboard</button>
    <script>
    function copyToClipboard() {{
        var text = `{response}`;
        var tempInput = document.createElement("textarea");
        document.body.appendChild(tempInput);
        tempInput.value = text;
        tempInput.select();
        document.execCommand("copy");
        document.body.removeChild(tempInput);
        alert("Copied to clipboard!");
    }}
    </script>
    <style>
    .copy-btn {{
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 4px;
    }}
    .copy-btn:hover {{
        background-color: #0056b3;
    }}
    </style>
    """
    
    html(copy_button_code)

# Example Button
if st.button("Get Example Post"):
    example_post_type = "Data Science Tip"
    example_user_input = "importance of data preprocessing"
    example_response = get_groq_response_with_few_shot(example_post_type, example_user_input)
    st.code(example_response)

    # Add a Copy to Clipboard button for the example post
    copy_example_button_code = f"""
    <button class="copy-btn" onclick="copyToClipboard()">Copy Example Post</button>
    <script>
    function copyToClipboard() {{
        var text = `{example_response}`;
        var tempInput = document.createElement("textarea");
        document.body.appendChild(tempInput);
        tempInput.value = text;
        tempInput.select();
        document.execCommand("copy");
        document.body.removeChild(tempInput);
        alert("Copied to clipboard!");
    }}
    </script>
    <style>
    .copy-btn {{
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 4px;
    }}
    .copy-btn:hover {{
        background-color: #0056b3;
    }}
    </style>
    """
    
    html(copy_example_button_code)