import requests
import gradio as gr
from datetime import datetime

USERNAME = "openfree"

def format_timestamp(timestamp):
    if timestamp:
        dt = datetime.fromisoformat(timestamp.replace('Z', '+00:00'))
        return dt.strftime('%Y-%m-%d %H:%M')
    return 'N/A'

def get_space_card(space):
    """Generate HTML card for a space"""
    space_id = space.get('id', '')
    space_name = space_id.split('/')[-1]
    likes = space.get('likes', 0)
    created_at = format_timestamp(space.get('createdAt'))
    sdk = space.get('sdk', 'N/A')
    
    return f"""
    <div style='border: 1px solid #ddd; padding: 20px; margin: 10px; border-radius: 12px; 
                background-color: white; box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
                transition: transform 0.2s ease-in-out;'
         onmouseover='this.style.transform="scale(1.02)"'
         onmouseout='this.style.transform="scale(1)"'>
        <h3 style='color: #2d2d2d; margin: 0 0 15px 0; font-size: 1.3em;'>
            <a href='https://huggingface.co/spaces/{space_id}' target='_blank' 
               style='text-decoration: none; color: #2d2d2d;'>
                {space_name}
            </a>
        </h3>
        <div style='margin: 10px 0; color: #666;'>
            <p style='margin: 5px 0;'><strong>SDK:</strong> {sdk}</p>
            <p style='margin: 5px 0;'><strong>Created:</strong> {created_at}</p>
            <p style='margin: 5px 0;'><strong>Likes:</strong> {likes} ❤️</p>
        </div>
        <div style='margin-top: 15px; display: flex; justify-content: space-between; align-items: center;'>
            <a href='https://huggingface.co/spaces/{space_id}' target='_blank' 
               style='background-color: #0084ff; color: white; padding: 8px 16px; 
                      border-radius: 6px; text-decoration: none; display: inline-block;
                      font-weight: 500; transition: background-color 0.2s;'
               onmouseover='this.style.backgroundColor="#0066cc"'
               onmouseout='this.style.backgroundColor="#0084ff"'>
                View Space
            </a>
            <span style='color: #666; font-size: 0.9em;'>
                ID: {space_id}
            </span>
        </div>
    </div>
    """

def get_user_spaces():
    url = "https://huggingface.co/api/spaces"
    headers = {
        "Accept": "application/json",
        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
    }

    try:
        response = requests.get(url, headers=headers)
        print(f"Status Code: {response.status_code}")

        if response.status_code != 200:
            return f"Error: Failed to fetch spaces (Status Code: {response.status_code})"

        spaces_data = response.json()
        
        # Filter spaces for the specific user
        user_spaces = [space for space in spaces_data if space.get('id', '').startswith(f"{USERNAME}/")]

        if not user_spaces:
            return f"""
            <div style='padding: 20px; text-align: center; color: #666;'>
                <h2>No public Spaces found for user: {USERNAME}</h2>
                <p>Try visiting: <a href='https://huggingface.co/{USERNAME}' target='_blank'>
                    https://huggingface.co/{USERNAME}</a></p>
            </div>
            """

        # Sort spaces by likes (most liked first)
        user_spaces.sort(key=lambda x: x.get('likes', 0), reverse=True)

        # Create HTML grid layout
        html_content = f"""
        <div style='padding: 20px; background-color: #f5f5f5;'>
            <div style='margin-bottom: 20px;'>
                <h2 style='color: #333; margin: 0 0 10px 0;'>Spaces by {USERNAME}</h2>
                <p style='color: #666; margin: 0;'>Found {len(user_spaces)} public spaces</p>
            </div>
            <div style='
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 20px;
            '>
                {"".join(get_space_card(space) for space in user_spaces)}
            </div>
        </div>
        """

        return html_content

    except Exception as e:
        print(f"Error: {str(e)}")
        return f"""
        <div style='padding: 20px; text-align: center; color: #666;'>
            <h2>Error occurred while fetching spaces</h2>
            <p>Error details: {str(e)}</p>
            <p>Please try again later.</p>
        </div>
        """

# Creating the Gradio interface
app = gr.Interface(
    fn=get_user_spaces,
    inputs=None,
    outputs=gr.HTML(),
    title=f"Hugging Face Spaces Dashboard - {USERNAME}",
    description=f"Displays public Spaces from {USERNAME}",
    theme=gr.themes.Soft(),
    css="""
    .gradio-container {
        max-width: 100% !important;
    }
    """
)

# Launch the Gradio app
if __name__ == "__main__":
    app.launch()