import gradio as gr
import wikipedia
import asyncio

def search_wikipedia(keyword, max_results=20):
    try:
        # Search Wikipedia for articles related to the keyword
        search_results = wikipedia.search(keyword, results=int(max_results))
        
        if not search_results:
            return """
            <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
            <div class="max-w-7xl mx-auto p-4">
                <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded-lg">
                    No results found for the keyword.
                </div>
            </div>
            """

        # Collect article details
        output = []
        for title in search_results:
            try:
                # Get page summary and URL
                page = wikipedia.page(title, auto_suggest=False)
                summary = page.summary[:300] + "..." if len(page.summary) > 300 else page.summary
                output.append({
                    "Title": title,
                    "Summary": summary,
                    "URL": page.url
                })
            except wikipedia.exceptions.DisambiguationError as e:
                output.append({
                    "Title": title,
                    "Summary": f"Disambiguation page. Possible options: {', '.join(e.options[:3])}...",
                    "URL": "N/A"
                })
            except wikipedia.exceptions.PageError:
                output.append({
                    "Title": title,
                    "Summary": "Page not found or invalid.",
                    "URL": "N/A"
                })

        # Generate HTML with Tailwind-styled cards
        html_output = """
        <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
        <div class="max-w-5xl mx-auto p-4 container">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        """
        for item in output:
            url_link = f'<a href="{item["URL"]}" target="_blank" class="text-blue-500 hover:text-blue-700 font-medium">Read on Wikipedia</a>' if item["URL"] != "N/A" else "No link available"
            html_output += f"""
            <div class="bg-white rounded-xl shadow-lg hover:shadow-2xl transition-shadow duration-300 p-4">
                <h2 class="text-xl font-bold text-gray-800 mb-3">{item["Title"]}</h2>
                <p class="text-gray-600 mb-4">{item["Summary"]}</p>
                <div class="text-sm">{url_link}</div>
            </div>
            """
        html_output += "</div></div>"
        
        return html_output

    except Exception as e:
        return """
        <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
        <div class="max-w-7xl mx-auto p-4">
            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-lg">
                An error occurred: {str(e)}
            </div>
        </div>
        """

# Define Gradio interface
def gradio_app():
    iface = gr.Interface(
        fn=search_wikipedia,
        inputs=[
            gr.Textbox(label="Enter Keyword (e.g., African History)", placeholder="Type your keyword here"),
            gr.Slider(label="Max Results", minimum=1, maximum=10, value=5, step=1)
        ],
        outputs=gr.HTML(label="Wikipedia Search Results"),
        title="Wikipedia Article Search",
        description="Enter a keyword to search for related Wikipedia articles, displayed as stylish cards with titles, summaries, and URLs."
    )
    return iface

# Launch the app (for Pyodide compatibility)
async def main():
    app = gradio_app()
    app.launch()

if __name__ == "__main__":
    import platform
    if platform.system() == "Emscripten":
        asyncio.ensure_future(main())
    else:
        asyncio.run(main())