import streamlit as st
from markdown import markdown
from bs4 import BeautifulSoup
import streamlit.components.v1 as components

# Set page config
st.set_page_config(
    page_title="Markdown Converter", 
    layout="wide", 
    initial_sidebar_state="expanded", 
    page_icon="📝"
)

def md_to_text(md_text):
    html = markdown(md_text)
    soup = BeautifulSoup(html, features='html.parser')
    return soup.get_text()

def copy_button(text_to_copy, button_id):
    # Creating a safer version of the text for JavaScript
    escaped_text = text_to_copy.replace('"', '\\"').replace('\n', '\\n').replace('\r', '\\r')
    
    html_code = f"""
    <script>
    function copyText{button_id}() {{
        const text = "{escaped_text}";
        navigator.clipboard.writeText(text).then(function() {{
            console.log('Text copied to clipboard');
            document.getElementById('copy-button-{button_id}').innerHTML = 'Copied!';
            setTimeout(function() {{
                document.getElementById('copy-button-{button_id}').innerHTML = 'Copy';
            }}, 2000);
        }})
        .catch(function(err) {{
            console.error('Failed to copy text: ', err);
        }});
    }}
    </script>
    <button id="copy-button-{button_id}" onclick="copyText{button_id}()" 
            style="background-color: #4CAF50; color: white; border: none; 
                   padding: 5px 10px; text-align: center; text-decoration: none; 
                   display: inline-block; font-size: 14px; margin: 4px 2px; 
                   cursor: pointer; border-radius: 4px;">
        Copy
    </button>
    """
    
    components.html(html_code, height=50)

st.title("Markdown to Plain Text Converter")
st.write("Paste your Markdown content below and convert it to plain text!")

# Using columns for better layout
col1, col2 = st.columns(2)

with col1:
    md_input = st.text_area(
        "Markdown Input", 
        height=300, 
        placeholder="Paste your Markdown here..."
    )

# Convert button
if st.button("Convert"):
    converted_text = md_to_text(md_input)
    st.session_state.converted_text = converted_text

# Display results
with col2:
    if 'converted_text' in st.session_state:
        st.text_area(
            "", 
            value=st.session_state.converted_text, 
            height=300,
            key="output_area"
        )
        
        # Add copy button
        if st.session_state.converted_text:
            copy_button(st.session_state.converted_text, "output")

# Preview section with proper copy functionality
with st.expander("Preview Original Markdown"):
    if md_input:
        st.markdown(md_input, unsafe_allow_html=True)
        # Convert to plain text for the copy button
        preview_plain_text = md_to_text(md_input)
        copy_button(preview_plain_text, "preview")
    else:
        st.write("No Markdown to preview")

# How to run instructions
st.sidebar.markdown("""
**How to use:**
1. Paste your Markdown in the left panel
2. Click 'Convert' 
3. Use the 'Copy' button in the right panel
4. Toggle the preview to see original formatting
5. The preview's copy button copies the plain text version
""")

# Apply light theme using CSS
st.markdown("""
<style>
    .stApp {
        background-color: white;
        color: #333333;
    }
    .stTextArea textarea {
        background-color: #f9f9f9;
        color: #333333;
    }
    .stButton button {
        background-color: #4CAF50;
        color: white;
    }
    .stExpander {
        background-color: #f9f9f9;
    }
    .sidebar .sidebar-content {
        background-color: #f0f0f0;
    }
</style>
""", unsafe_allow_html=True)