import gradio as gr
import json
from datetime import datetime

# Sample data for the blog entries
blog_entries = [
    {
        "id": 1,
        "title": "Talk to your AI like a 'bro'",
        "content": "Because talking like a 'bro' to ya ai make yo ai tawk likka bro",
        "date": "2025-07-01",
        "category": "Romance & Relationships"
    },
    {
        "id": 2,
        "title": "Have AI Explain Quantum Physics Using Only Emojis",
        "content": "🔬⚛️🤔 = 🧠💥. Challenge your AI to break down the most complex scientific concepts using nothing but tiny pictures. Results may vary from enlightening to completely incomprehensible.",
        "date": "2025-07-02",
        "category": "Science & Education"
    },
    {
        "id": 3,
        "title": "Ask AI to bust a dad joke about itself",
        "content": "Ask your ai to bust a dad joke about itself, because, why not?",
        "date": "2025-07-03",
        "category": "Fashion & Style"
    },
    {
        "id": 4,
        "title": "Have AI Write a Serious Business Email About Your Pet's Demands",
        "content": "Transform your cat's 3 AM zoomies into a professional complaint letter. Your AI secretary will help draft the most formal correspondence about treats and belly rubs.",
        "date": "2025-07-04",
        "category": "Pets & Animals"
    },
    {
        "id": 5,
        "title": "Insult AI when it get 'how many r's are in strawberry' wrong",
        "content": "Because it is a good way to let out some anger on something without feelings",
        "date": "2025-06-30",
        "category": "Health & Fitness"
    },
    {
        "id": 6,
        "title": "Have AI Write a Yelp Review for Your Own House",
        "content": "Rate your living space like a disappointed customer. '2 stars - bathroom has no room service, kitchen staff (me) is terrible, would not recommend.'",
        "date": "2025-06-29",
        "category": "Home & Living"
    },
    {
        "id": 7,
        "title": "Ask AI to Translate Your Grocery List into Shakespearean English",
        "content": "Transform mundane shopping into an epic quest. 'Wherefore art thou, organic kale?' becomes the battle cry of your noble supermarket adventure.",
        "date": "2025-06-28",
        "category": "Food & Cooking"
    },
    {
        "id": 8,
        "title": "Have AI Create a LinkedIn Profile for Your Favorite Fictional Character",
        "content": "Help Sherlock Holmes network professionally or give Batman the corporate presence he deserves. Watch AI struggle with employment gaps and unconventional work experiences.",
        "date": "2025-06-27",
        "category": "Career & Professional"
    },
    {
        "id": 9,
        "title": "Get AI to write a Sherlock Holmes style story about all the toilet paper finishing",
        "content": "Toilet paper finishing is a serious business, and serious business is what Sherlock Holmes is all about",
        "date": "2025-07-05",
        "category": "Missing TP & Sherlock Holmes"
    }
]

def create_blog_entry_html(entry):
    """Create HTML for a single blog entry"""
    return f"""
    <div style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin: 10px 0; background: white;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
            <h3 style="margin: 0; color: #2c3e50;">#{entry['id']}: {entry['title']}</h3>
            <span style="background: #3498db; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                {entry['category']}
            </span>
        </div>
        <p style="color: #666; margin: 10px 0; line-height: 1.6;">{entry['content']}</p>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 15px;">
            <div style="color: #999; font-size: 12px;">
                📅 {entry['date']}
            </div>
            <a href="https://huggingface.co/spaces/ReallyFloppyPenguin/AstonishingSuperIntel" 
               target="_blank" 
               style="background: #ff6b6b; color: white; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: bold; transition: background-color 0.3s;">
                🚀 Try it here
            </a>
        </div>
    </div>
    """

def get_all_entries():
    """Return all blog entries as HTML"""
    html_content = """
    <div style="max-width: 800px; margin: 0 auto; padding: 20px;">
        <div style="text-align: center; margin-bottom: 30px;">
            <h1 style="color: #2c3e50; margin-bottom: 10px;">🐧 101 Dumb And Stupid Things To Do With An AI 🤖</h1>
            <p style="color: #666; font-size: 16px;">A collection of hilariously pointless AI experiments for your entertainment</p>
            <p style="color: #999; font-size: 14px;">Total entries: {}/101</p>
        </div>
    """.format(len(blog_entries))
    
    # Sort entries by ID (newest first)
    sorted_entries = sorted(blog_entries, key=lambda x: x['id'], reverse=True)
    
    for entry in sorted_entries:
        html_content += create_blog_entry_html(entry)
    
    html_content += "</div>"
    return html_content

def filter_by_category(category):
    """Filter entries by category"""
    if category == "All Categories":
        return get_all_entries()
    
    filtered_entries = [entry for entry in blog_entries if entry['category'] == category]
    
    html_content = f"""
    <div style="max-width: 800px; margin: 0 auto; padding: 20px;">
        <div style="text-align: center; margin-bottom: 30px;">
            <h1 style="color: #2c3e50; margin-bottom: 10px;">🐧 101 Dumb And Stupid Things To Do With An AI 🤖</h1>
            <p style="color: #666; font-size: 16px;">Category: {category}</p>
            <p style="color: #999; font-size: 14px;">Showing {len(filtered_entries)} entries</p>
        </div>
    """
    
    sorted_entries = sorted(filtered_entries, key=lambda x: x['id'], reverse=True)
    
    for entry in sorted_entries:
        html_content += create_blog_entry_html(entry)
    
    html_content += "</div>"
    return html_content

def search_entries(query):
    """Search entries by title or content"""
    if not query.strip():
        return get_all_entries()
    
    query_lower = query.lower()
    filtered_entries = [
        entry for entry in blog_entries 
        if query_lower in entry['title'].lower() or query_lower in entry['content'].lower()
    ]
    
    html_content = f"""
    <div style="max-width: 800px; margin: 0 auto; padding: 20px;">
        <div style="text-align: center; margin-bottom: 30px;">
            <h1 style="color: #2c3e50; margin-bottom: 10px;">🐧 101 Dumb And Stupid Things To Do With An AI 🤖</h1>
            <p style="color: #666; font-size: 16px;">Search results for: "{query}"</p>
            <p style="color: #999; font-size: 14px;">Found {len(filtered_entries)} entries</p>
        </div>
    """
    
    if not filtered_entries:
        html_content += """
        <div style="text-align: center; padding: 40px; color: #666;">
            <h3>No entries found 😅</h3>
            <p>Try searching for something else or browse all categories!</p>
        </div>
        """
    else:
        sorted_entries = sorted(filtered_entries, key=lambda x: x['id'], reverse=True)
        for entry in sorted_entries:
            html_content += create_blog_entry_html(entry)
    
    html_content += "</div>"
    return html_content

# Get unique categories for the dropdown
categories = ["All Categories"] + sorted(list(set(entry['category'] for entry in blog_entries)))

# Create the Gradio interface
with gr.Blocks(title="101 Dumb And Stupid Things To Do With An AI", theme=gr.themes.Soft()) as demo:
    gr.HTML("""
    <div style="text-align: center; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; margin-bottom: 20px;">
        <h1 style="margin: 0; font-size: 2.5em;">🐧 ReallyFloppyPenguin's AI Shenanigans 🤖</h1>
        <p style="margin: 10px 0 0 0; font-size: 1.2em;">101 Dumb And Stupid Things To Do With An AI</p>
    </div>
    """)
    
    with gr.Row():
        with gr.Column(scale=1):
            category_dropdown = gr.Dropdown(
                choices=categories,
                value="All Categories",
                label="Filter by Category",
                interactive=True
            )
        with gr.Column(scale=2):
            search_box = gr.Textbox(
                placeholder="Search entries...",
                label="Search",
                interactive=True
            )
        with gr.Column(scale=1):
            search_btn = gr.Button("Search", variant="primary")
    
    blog_display = gr.HTML(value=get_all_entries())
    
    # Event handlers
    category_dropdown.change(
        fn=filter_by_category,
        inputs=[category_dropdown],
        outputs=[blog_display]
    )
    
    search_btn.click(
        fn=search_entries,
        inputs=[search_box],
        outputs=[blog_display]
    )
    
    search_box.submit(
        fn=search_entries,
        inputs=[search_box],
        outputs=[blog_display]
    )
    
    gr.HTML("""
    <div style="text-align: center; padding: 20px; margin-top: 30px; color: #666; border-top: 1px solid #eee;">
        <p>🚀 More ridiculous AI experiments coming soon! Currently at {}/101 entries.</p>
        <p>Have a dumb AI idea? Share it in the discussions!</p>
    </div>
    """.format(len(blog_entries)))

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