from flask import Flask, render_template, request, jsonify
import requests
import os
import json
import time

app = Flask(__name__)

# Function to fetch spaces from Huggingface
def fetch_spaces(limit=100):
    try:
        # Get trending spaces sorted by likes count (since trending API is giving 400 error)
        url = "https://huggingface.co/api/spaces"
        params = {
            "limit": limit,
            "sort": "likes",
            "order": "desc"
        }
        response = requests.get(url, params=params, timeout=10)
        
        if response.status_code == 200:
            return response.json()
        else:
            print(f"Error fetching spaces: {response.status_code}")
            # Fallback to hardcoded list if API fails
            return get_fallback_spaces()
    except Exception as e:
        print(f"Exception when fetching spaces: {e}")
        # Fallback to hardcoded list if API fails
        return get_fallback_spaces()

# Fallback function to provide some spaces if the API call fails
def get_fallback_spaces():
    return [
        {
            "id": "stabilityai/stable-diffusion-xl-base-1.0",
            "owner": "stabilityai",
            "title": "Stable Diffusion XL Base 1.0",
            "likes": 4857
        },
        {
            "id": "meta-llama/Llama-2-7b-chat-hf",
            "owner": "meta-llama",
            "title": "Llama 2 7B Chat",
            "likes": 3821
        },
        {
            "id": "mistralai/Mistral-7B-Instruct-v0.2",
            "owner": "mistralai",
            "title": "Mistral 7B Instruct v0.2",
            "likes": 2953
        },
        {
            "id": "runwayml/stable-diffusion-v1-5",
            "owner": "runwayml",
            "title": "Stable Diffusion v1.5",
            "likes": 2649
        },
        {
            "id": "microsoft/phi-2",
            "owner": "microsoft",
            "title": "Phi-2",
            "likes": 2134
        }
    ]

# Transform Huggingface URL to direct space URL
def transform_url(owner, name):
    return f"https://{owner}-{name}.hf.space"

# Get space details
def get_space_details(space_data):
    try:
        # Basic info
        owner = space_data.get('owner')
        name = space_data.get('id')
        title = space_data.get('title') or name
        
        # URL construction
        original_url = f"https://huggingface.co/spaces/{owner}/{name}"
        embed_url = transform_url(owner, name)
        
        # Get likes count
        likes_count = space_data.get('likes', 0)
        
        # Tags
        tags = space_data.get('tags', [])
        
        return {
            'url': original_url,
            'embedUrl': embed_url,
            'title': title,
            'owner': owner,
            'likes_count': likes_count,
            'tags': tags
        }
    except Exception as e:
        print(f"Error processing space data: {e}")
        return None

# Homepage route
@app.route('/')
def home():
    return render_template('index.html')

# Spaces API
@app.route('/api/trending-spaces', methods=['GET'])
def trending_spaces():
    search_query = request.args.get('search', '').lower()
    limit = int(request.args.get('limit', 100))
    
    # Fetch spaces
    spaces_data = fetch_spaces(limit)
    
    # Process and filter spaces
    results = []
    for space_data in spaces_data:
        space_info = get_space_details(space_data)
        
        if not space_info:
            continue
            
        # Apply search filter if needed
        if search_query:
            title = space_info['title'].lower()
            owner = space_info['owner'].lower()
            url = space_info['url'].lower()
            tags = ' '.join([str(tag) for tag in space_info.get('tags', [])]).lower()
            
            if (search_query not in title and 
                search_query not in owner and 
                search_query not in url and 
                search_query not in tags):
                continue
        
        results.append(space_info)
    
    return jsonify(results)

if __name__ == '__main__':
    # Create templates folder
    os.makedirs('templates', exist_ok=True)
    
    # Create index.html file
    with open('templates/index.html', 'w', encoding='utf-8') as f:
        f.write('''
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>인기 허깅페이스 스페이스</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 0;
      color: #333;
      background-color: #f5f8fa;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 1rem;
    }
    
    .header {
      background-color: #ffffff;
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1rem;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      text-align: center;
    }
    
    .header h1 {
      margin: 0;
      color: #2c3e50;
      font-size: 1.8rem;
    }
    
    .filter-controls {
      background-color: #ffffff;
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1rem;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }
    
    input[type="text"] {
      padding: 0.7rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 1rem;
      width: 300px;
    }
    
    button.refresh-btn {
      padding: 0.7rem 1.2rem;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1rem;
      transition: background-color 0.2s;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    button.refresh-btn:hover {
      background-color: #45a049;
    }
    
    .refresh-icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid white;
      border-top-color: transparent;
      border-radius: 50%;
      animation: none;
    }
    
    .refreshing .refresh-icon {
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
      gap: 1.5rem;
    }
    
    .grid-item {
      background-color: #ffffff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      height: 600px;
      position: relative;
    }
    
    .grid-header {
      padding: 0.8rem;
      border-bottom: 1px solid #eee;
      background-color: #f9f9f9;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 2;
    }
    
    .grid-header-left {
      display: flex;
      flex-direction: column;
      max-width: 70%;
    }
    
    .grid-header h3 {
      margin: 0;
      padding: 0;
      font-size: 1.1rem;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .owner-info {
      font-size: 0.85rem;
      color: #666;
      margin-top: 3px;
    }
    
    .grid-actions {
      display: flex;
      align-items: center;
    }
    
    .open-link {
      color: #4CAF50;
      text-decoration: none;
      font-size: 0.9rem;
      margin-left: 10px;
    }
    
    .likes-counter {
      display: flex;
      align-items: center;
      font-size: 0.9rem;
      color: #e91e63;
    }
    
    .likes-counter span {
      margin-left: 4px;
    }
    
    .grid-content {
      flex: 1;
      position: relative;
      overflow: hidden;
    }
    
    .grid-content iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    
    .loading {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      font-size: 1.5rem;
    }
    
    .loading-spinner {
      border: 5px solid #f3f3f3;
      border-top: 5px solid #4CAF50;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
    }
    
    @media (max-width: 768px) {
      .filter-controls {
        flex-direction: column;
        align-items: flex-start;
      }
      
      .filter-controls > * {
        margin-bottom: 0.5rem;
        width: 100%;
      }
      
      .grid-container {
        grid-template-columns: 1fr;
      }
      
      input[type="text"] {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>인기 허깅페이스 스페이스 Top 100</h1>
    </div>
    
    <div class="filter-controls">
      <input type="text" id="searchInput" placeholder="이름, 태그 등으로 검색" />
      <button id="refreshButton" class="refresh-btn">
        <span class="refresh-icon"></span>
        새로고침
      </button>
    </div>
    
    <div id="gridContainer" class="grid-container"></div>
  </div>
  
  <div id="loadingIndicator" class="loading">
    <div class="loading-spinner"></div>
  </div>
  
  <script>
    // DOM element references
    const elements = {
      gridContainer: document.getElementById('gridContainer'),
      loadingIndicator: document.getElementById('loadingIndicator'),
      searchInput: document.getElementById('searchInput'),
      refreshButton: document.getElementById('refreshButton')
    };
    
    // Application state
    const state = {
      isLoading: false,
      spaces: []
    };
    
    // Display loading indicator
    function setLoading(isLoading) {
      state.isLoading = isLoading;
      elements.loadingIndicator.style.display = isLoading ? 'flex' : 'none';
      
      if (isLoading) {
        elements.refreshButton.classList.add('refreshing');
      } else {
        elements.refreshButton.classList.remove('refreshing');
      }
    }
    
    // API error handling
    async function handleApiResponse(response) {
      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(`API 오류 (${response.status}): ${errorText}`);
      }
      return response.json();
    }
    
    // Load spaces
    async function loadSpaces() {
      setLoading(true);
      
      try {
        const searchText = elements.searchInput.value;
        
        const response = await fetch(`/api/trending-spaces?search=${encodeURIComponent(searchText)}`);
        const spaces = await handleApiResponse(response);
        
        state.spaces = spaces;
        renderGrid(spaces);
      } catch (error) {
        console.error('스페이스 목록 로드 오류:', error);
        alert(`스페이스 로드 오류: ${error.message}`);
      } finally {
        setLoading(false);
      }
    }
    
    // Render grid
    function renderGrid(spaces) {
      elements.gridContainer.innerHTML = '';
      
      if (!spaces || spaces.length === 0) {
        const noResultsMsg = document.createElement('p');
        noResultsMsg.textContent = '표시할 스페이스가 없습니다.';
        noResultsMsg.style.padding = '1rem';
        noResultsMsg.style.fontStyle = 'italic';
        elements.gridContainer.appendChild(noResultsMsg);
        return;
      }
      
      spaces.forEach(item => {
        const { url, embedUrl, title, likes_count, owner } = item;
        
        // Create grid item
        const gridItem = document.createElement('div');
        gridItem.className = 'grid-item';
        
        // Header with title and actions
        const header = document.createElement('div');
        header.className = 'grid-header';
        
        // Left side of header (title and owner)
        const headerLeft = document.createElement('div');
        headerLeft.className = 'grid-header-left';
        
        const titleEl = document.createElement('h3');
        titleEl.textContent = title;
        titleEl.title = title; // For tooltip on hover
        headerLeft.appendChild(titleEl);
        
        const ownerEl = document.createElement('div');
        ownerEl.className = 'owner-info';
        ownerEl.textContent = `by: ${owner}`;
        headerLeft.appendChild(ownerEl);
        
        header.appendChild(headerLeft);
        
        // Actions container
        const actionsDiv = document.createElement('div');
        actionsDiv.className = 'grid-actions';
        
        // Likes count
        const likesCounter = document.createElement('div');
        likesCounter.className = 'likes-counter';
        likesCounter.innerHTML = '♥ <span>' + likes_count + '</span>';
        actionsDiv.appendChild(likesCounter);
        
        // Open link
        const linkEl = document.createElement('a');
        linkEl.href = url;
        linkEl.target = '_blank';
        linkEl.className = 'open-link';
        linkEl.textContent = '새 창에서 열기';
        actionsDiv.appendChild(linkEl);
        
        header.appendChild(actionsDiv);
        
        // Add header to grid item
        gridItem.appendChild(header);
        
        // Content with iframe
        const content = document.createElement('div');
        content.className = 'grid-content';
        
        // Create iframe to display the content
        const iframe = document.createElement('iframe');
        iframe.src = embedUrl;
        iframe.title = title;
        iframe.allow = 'accelerometer; camera; encrypted-media; geolocation; gyroscope; microphone; midi';
        iframe.setAttribute('allowfullscreen', '');
        iframe.setAttribute('frameborder', '0');
        iframe.loading = 'lazy'; // Lazy load iframes for better performance
        
        content.appendChild(iframe);
        
        // Add content to grid item
        gridItem.appendChild(content);
        
        // Add grid item to container
        elements.gridContainer.appendChild(gridItem);
      });
    }
    
    // Filter event listeners
    elements.searchInput.addEventListener('input', () => {
      // Debounce input to prevent API calls on every keystroke
      clearTimeout(state.searchTimeout);
      state.searchTimeout = setTimeout(loadSpaces, 300);
    });
    
    // Refresh button event listener
    elements.refreshButton.addEventListener('click', loadSpaces);
    
    // Initialize
    loadSpaces();
  </script>
</body>
</html>
''')
    
    # Use port 7860 for Huggingface Spaces
    app.run(host='0.0.0.0', port=7860)