src/streamlit_app.py

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

# Your existing Groq API key and client setup
client = Groq(api_key=os.environ.get("GROQ_API_KEY"))

def Tweet_generator(topic):
    # your existing function...
    completion = client.chat.completions.create(
        messages=[
            {
                "role": "system",
                "content": "You are a world-class copywriter who writes bold, emotionally intelligent tweets that resonate deeply and challenge the reader’s worldview. Each tweet (under 280 characters) should deliver real insight, not hype. You do NOT use generic urgency tactics like 'Warning:', 'Everyone is doing this', or exaggerated FOMO. Instead, you connect with the reader’s internal struggle, offer surprising truths, and help them see something they’ve missed. Use psychological triggers only when they amplify meaning — not as decoration. Avoid all links. Each tweet must stand alone, spark reflection, and feel personal and honest."
            },
            {
                "role": "user",
                "content": f"""Write a tweet about {topic} that speaks to a hidden belief or overlooked insight. Make the reader question something they’ve accepted too easily. Avoid FOMO clichés — make it personal, deep, and sharply resonant. Stay under 280 characters. No links. Add 3 hashtags relevant to the {topic}"""
            }
        ],
        model="llama-3.1-8b-instant",
        temperature=0.4,
        max_completion_tokens=350,
    )
    return completion.choices[0].message.content

st.set_page_config(page_title="Tweet Generator", layout="centered")

st.markdown("""
    <style>
        body {
            background-color: #0e1117;
            color: #fff;
            font-family: 'Segoe UI', sans-serif;
        }
        .tweet-box {
            background-color: #161b22;
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #30363d;
            margin-top: 20px;
        }
        .copy-button-container {
            margin-top: 15px;
        }
        .copy-button {
            background-color: #282828;
            color: white;
            padding: 0.5em 1em;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-size: 1em;
        }
        .copy-button:hover {
            background-color: #d3d3d3;
            color: #000;
        }
        .st-success {
            color: #28a745 !important;
        }
    </style>
""", unsafe_allow_html=True)

st.title(" 💭 Transform Raw Thoughts into Powerful Tweets ")
st.subheader(" 🧭 Craft Tweets That Hit Minds, Not Just Timelines.")

topic = st.text_input("Enter a topic to generate a tweet about:", placeholder="e.g. productivity, ambition, burnout")

if st.button("Generate Tweet"):
    if topic.strip() == "":
        st.warning("Please enter a topic.")
    else:
        with st.spinner("Crafting a mind-blowing tweet..."):
            tweet = Tweet_generator(topic)

        st.markdown(f'<div class="tweet-box">{tweet}</div>', unsafe_allow_html=True)

        # JavaScript for copying text to clipboard
        # Replace this part in your original code:
        
        copy_script = f"""
               <script>
            function copyToClipboard() {{
                navigator.clipboard.writeText(`{tweet}`).then(() => {{
                    const status = document.getElementById('copy-status');
                    status.innerText = 'Tweet is copied';
                    status.style.color = '#28a745';  // explicitly set green color
                }}).catch(() => {{
                    const status = document.getElementById('copy-status');
                    status.innerText = 'Failed to copy. Please copy manually.';
                    status.style.color = 'red'; // explicit red on failure
                }});
            }}
                  </script>
                <div class="copy-button-container" style="display: flex; align-items: center; gap: 10px; margin-top: 15px;">
                    <button class="copy-button" onclick="copyToClipboard()">📋 Copy Tweet</button>
                    <div id="copy-status" style="font-weight: bold; font-size: 14px;"></div>
                </div>
                """



        components.html(copy_script, height=100)

        # Fallback for manual copying
        #st.text_area("Tweet (please copy manually if needed):", tweet, height=100)