import os
import gradio as gr
from google import genai

# Initialize Gemini client
client = genai.Client(api_key=os.environ.get("GEMINI_API_KEY"))

def get_definitions(text):
    """Fetch dictionary-like definitions for multiple words using Gemini."""
    if not text.strip():
        return "⚠️ Please enter one or more words."

    words = [w.strip() for w in text.split(",") if w.strip()]
    results = []

    for word in words:
        prompt = f"""
        You are a helpful, modern dictionary assistant.
        Provide a clear, concise definition, pronunciation, part of speech, and an example
        for the word "{word}".
        Format neatly using markdown like this:

        🪶 **Word:** ...
        🔊 **Pronunciation:** ...
        📘 **Part of Speech:** ...
        💡 **Definition:** ...
        ✨ **Example:** ...
        """
        try:
            response = client.models.generate_content(
                model="gemini-2.5-flash",
                contents=prompt
            )
            results.append(response.text.strip())
        except Exception as e:
            results.append(f"❌ Error for '{word}': {str(e)}")

    return "\n\n---\n\n".join(results)

# --- Modern soft theme CSS ---
custom_css = """
body {
    background: linear-gradient(135deg, #f0f4ff, #e8f0fe);
    font-family: 'Inter', sans-serif;
}

.gradio-container {
    max-width: 800px !important;
    margin: auto;
    padding-top: 40px;
}

h1 {
    color: #2b2d42;
    font-weight: 700;
}

.gr-text-input, .gr-button, .gr-markdown {
    border-radius: 12px !important;
}

.gr-text-input {
    background-color: #ffffff !important;
    border: 1px solid #d3d9f0 !important;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.05);
    margin-bottom: 20px !important;
}

.gr-button {
    background-color: #4c6ef5 !important;
    color: white !important;
    font-weight: 600 !important;
    transition: 0.3s;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
}

.gr-button:hover {
    background-color: #364fc7 !important;
}

.output-card {
    background-color: #ffffff;
    border: 1px solid #dee2f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-top: 30px;
}
footer {display:none !important;}
"""

# --- Gradio UI ---
with gr.Blocks(css=custom_css, title="Modern AI Dictionary") as demo:
    gr.Markdown("<h1 style='text-align:center;'>📘 Modern AI Dictionary</h1>")
    gr.Markdown("<p style='text-align:center; color:#555;'>Type multiple words separated by commas to explore their meanings.</p>")
    
    with gr.Column():
        word_input = gr.Textbox(
            placeholder="e.g. serendipity, eloquent, ephemeral",
            label="Enter word(s)",
            lines=2
        )

        btn = gr.Button("🔍 Get Meanings")
        
        with gr.Column(elem_classes="output-card"):
            output = gr.Markdown()

    btn.click(fn=get_definitions, inputs=word_input, outputs=output)

if __name__ == "__main__":
    demo.launch()