{% extends "base.html" %}

{% block title %}Entdecken{% endblock %}

{% block content %}
<div class="min-h-screen"
     x-data="{
        activeTab: 'users',
        users: [],
        posts: [],
        trending: [],
        loading: false,
        searchQuery: '',
        searchResults: [],
        searching: false,
        
        async loadUsers() {
            this.loading = true;
            try {
                const response = await fetch('/api/discover/users');
                const data = await response.json();
                if (data.success) {
                    this.users = data.users;
                }
            } catch (error) {
                console.error('Error loading users:', error);
            } finally {
                this.loading = false;
            }
        },
        
        async loadPosts() {
            this.loading = true;
            try {
                const response = await fetch('/api/discover/posts');
                const data = await response.json();
                if (data.success) {
                    this.posts = data.posts;
                }
            } catch (error) {
                console.error('Error loading posts:', error);
            } finally {
                this.loading = false;
            }
        },
        
        async loadTrending() {
            this.loading = true;
            try {
                const response = await fetch('/api/discover/trending');
                const data = await response.json();
                if (data.success) {
                    this.trending = data.trending;
                }
            } catch (error) {
                console.error('Error loading trending:', error);
            } finally {
                this.loading = false;
            }
        },
        
        async follow(userId, index) {
            try {
                const response = await fetch(`/api/users/${userId}/follow`, {
                    method: 'POST'
                });
                const data = await response.json();
                
                if (data.success) {
                    this.users[index].is_following = data.is_following;
                    this.users[index].follower_count = data.follower_count;
                }
            } catch (error) {
                console.error('Error following user:', error);
            }
        },
        
        async searchUsers() {
            if (!this.searchQuery.trim()) {
                this.searchResults = [];
                return;
            }
            
            this.searching = true;
            try {
                const response = await fetch(`/api/search/users?q=${encodeURIComponent(this.searchQuery)}`);
                const data = await response.json();
                
                if (data.success) {
                    this.searchResults = data.users;
                }
            } catch (error) {
                console.error('Error searching users:', error);
            } finally {
                this.searching = false;
            }
        },
        
        formatNumber(num) {
            if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
            if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
            return num.toString();
        },
        
        init() {
            this.loadUsers();
        }
     }"
     x-init="init()">

    <!-- Header Section -->
    <div class="border-b"
         :class="darkMode ? 'border-gray-700 bg-gray-900/50' : 'border-gray-200 bg-white/50'">
        <div class="max-w-6xl mx-auto px-4 py-6">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-bold"
                        :class="darkMode ? 'text-white' : 'text-gray-900'">
                        Entdecken
                    </h1>
                    <p class="text-lg mt-1"
                       :class="darkMode ? 'text-gray-400' : 'text-gray-600'">
                        Finde neue Leute und interessante Inhalte
                    </p>
                </div>
                
                <!-- Search Bar -->
                <div class="flex-1 max-w-md ml-8">
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-search"
                               :class="darkMode ? 'text-gray-400' : 'text-gray-500'></i>
                        </div>
                        <input 
                            x-model="searchQuery"
                            @input.debounce.300ms="searchUsers()"
                            type="text"
                            class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-xl leading-5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500"
                            :class="darkMode 
                            ? 'bg-gray-800 border-gray-600 text-white placeholder-gray-400' 
                            : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'"
                            placeholder="Nutzer suchen...">
                    </div>
                    
                    <!-- Search Results Dropdown -->
                    <div x-show="searchQuery && searchResults.length > 0"
                         x-transition
                         class="absolute z-50 mt-2 w-full rounded-xl shadow-lg border"
                         :class="darkMode 
                         ? 'bg-gray-800 border-gray-600' 
                         : 'bg-white border-gray-200'">
                        <template x-for="user in searchResults.slice(0, 5)">
                            <div class="p-3 hover:bg-gray-50 transition-colors duration-150 cursor-pointer"
                                 :class="darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-50'"
                                 @click="window.location.href = `/profile/${user.username}`">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center text-white font-semibold">
                                        <span x-text="user.username.charAt(0).toUpperCase()"></span>
                                    </div>
                                    <div>
                                        <p class="font-medium"
                                           :class="darkMode ? 'text-white' : 'text-gray-900'"
                                           x-text="user.display_name || user.username"></p>
                                        <p class="text-sm"
                                           :class="darkMode ? 'text-gray-400' : 'text-gray-500'"
                                           x-text="`@${user.username}`"></p>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            
            <!-- Tab Navigation -->
            <div class="flex space-x-1 bg-gray-100 rounded-xl p-1"
                 :class="darkMode ? 'bg-gray-800' : 'bg-gray-100'">
                <button @click="activeTab = 'users'; loadUsers()"
                        class="flex-1 px-4 py-2 rounded-lg font-medium transition-all duration-200"
                        :class="activeTab === 'users' 
                        ? (darkMode ? 'bg-purple-600 text-white shadow-lg' : 'bg-white text-purple-600 shadow-md') 
                        : (darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900')">
                    <i class="fas fa-users mr-2"></i>
                    Nutzer
                </button>
                
                <button @click="activeTab = 'posts'; loadPosts()"
                        class="flex-1 px-4 py-2 rounded-lg font-medium transition-all duration-200"
                        :class="activeTab === 'posts' 
                        ? (darkMode ? 'bg-purple-600 text-white shadow-lg' : 'bg-white text-purple-600 shadow-md') 
                        : (darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900')">
                    <i class="fas fa-fire mr-2"></i>
                    Beliebte Posts
                </button>
                
                <button @click="activeTab = 'trending'; loadTrending()"
                        class="flex-1 px-4 py-2 rounded-lg font-medium transition-all duration-200"
                        :class="activeTab === 'trending' 
                        ? (darkMode ? 'bg-purple-600 text-white shadow-lg' : 'bg-white text-purple-600 shadow-md') 
                        : (darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900')">
                    <i class="fas fa-trending-up mr-2"></i>
                    Im Trend
                </button>
            </div>
        </div>
    </div>

    <!-- Content Section -->
    <div class="max-w-6xl mx-auto px-4 py-8">
        
        <!-- Loading State -->
        <div x-show="loading" class="text-center py-16">
            <div class="inline-flex items-center space-x-3"
                 :class="darkMode ? 'text-gray-300' : 'text-gray-600'">
                <svg class="animate-spin h-8 w-8" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span class="text-lg">Lädt...</span>
            </div>
        </div>

        <!-- Users Tab -->
        <div x-show="activeTab === 'users' && !loading">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <template x-for="(user, index) in users" :key="user.id">
                    <div class="rounded-2xl p-6 shadow-lg border transition-all duration-300 hover:shadow-xl transform hover:scale-105"
                         :class="darkMode 
                         ? 'bg-gray-800/90 border-gray-700/50 backdrop-blur-xl' 
                         : 'bg-white/80 border-gray-200/50 backdrop-blur-xl'">
                        
                        <!-- User Avatar -->
                        <div class="text-center mb-4">
                            <div class="w-20 h-20 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center text-white font-bold text-2xl mx-auto shadow-lg">
                                <span x-text="user.username.charAt(0).toUpperCase()"></span>
                            </div>
                        </div>
                        
                        <!-- User Info -->
                        <div class="text-center mb-4">
                            <h3 class="text-xl font-bold mb-1"
                                :class="darkMode ? 'text-white' : 'text-gray-900'"
                                x-text="user.display_name || user.username"></h3>
                            <p class="text-sm mb-2"
                               :class="darkMode ? 'text-gray-400' : 'text-gray-500'"
                               x-text="`@${user.username}`"></p>
                            
                            <div x-show="user.bio" class="mb-3">
                                <p class="text-sm"
                                   :class="darkMode ? 'text-gray-300' : 'text-gray-700'"
                                   x-text="user.bio"></p>
                            </div>
                        </div>
                        
                        <!-- User Stats -->
                        <div class="flex justify-center space-x-6 mb-4">
                            <div class="text-center">
                                <div class="text-lg font-bold"
                                     :class="darkMode ? 'text-white' : 'text-gray-900'"
                                     x-text="formatNumber(user.follower_count || 0)"></div>
                                <div class="text-xs"
                                     :class="darkMode ? 'text-gray-400' : 'text-gray-500'">
                                    Follower
                                </div>
                            </div>
                            <div class="text-center">
                                <div class="text-lg font-bold"
                                     :class="darkMode ? 'text-white' : 'text-gray-900'"
                                     x-text="formatNumber(user.following_count || 0)"></div>
                                <div class="text-xs"
                                     :class="darkMode ? 'text-gray-400' : 'text-gray-500'">
                                    Folge ich
                                </div>
                            </div>
                            <div class="text-center">
                                <div class="text-lg font-bold"
                                     :class="darkMode ? 'text-white' : 'text-gray-900'"
                                     x-text="formatNumber(user.post_count || 0)"></div>
                                <div class="text-xs"
                                     :class="darkMode ? 'text-gray-400' : 'text-gray-500'">
                                    Posts
                                </div>
                            </div>
                        </div>
                        
                        <!-- Action Buttons -->
                        <div class="flex space-x-2">
                            <button @click="follow(user.id, index)"
                                    class="flex-1 py-2 px-4 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105"
                                    :class="user.is_following 
                                    ? (darkMode ? 'bg-gray-700 text-white border border-gray-600 hover:bg-gray-600' : 'bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200') 
                                    : 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-md hover:shadow-lg'">
                                <span x-text="user.is_following ? 'Entfolgen' : 'Folgen'"></span>
                            </button>
                            
                            <button @click="window.location.href = `/profile/${user.username}`"
                                    class="px-4 py-2 rounded-xl transition-all duration-300 transform hover:scale-105"
                                    :class="darkMode 
                                    ? 'bg-gray-700 text-white border border-gray-600 hover:bg-gray-600' 
                                    : 'bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200'">
                                <i class="fas fa-user"></i>
                            </button>
                        </div>
                    </div>
                </template>
            </div>
            
            <!-- Empty State for Users -->
            <div x-show="!loading && users.length === 0" class="text-center py-16">
                <div class="mb-6">
                    <i class="fas fa-users text-6xl mb-4"
                       :class="darkMode ? 'text-gray-600' : 'text-gray-300'"></i>
                </div>
                <h3 class="text-2xl font-bold mb-2"
                    :class="darkMode ? 'text-white' : 'text-gray-900'">
                    Keine Nutzer gefunden
                </h3>
                <p class="text-lg"
                   :class="darkMode ? 'text-gray-400' : 'text-gray-600'">
                    Versuche es später noch einmal oder ändere deine Suchkriterien.
                </p>
            </div>
        </div>

        <!-- Popular Posts Tab -->
        <div x-show="activeTab === 'posts' && !loading">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <template x-for="post in posts" :key="post.id">
                    <article class="rounded-2xl p-6 shadow-lg border transition-all duration-300 hover:shadow-xl"
                             :class="darkMode 
                             ? 'bg-gray-800/90 border-gray-700/50 backdrop-blur-xl' 
                             : 'bg-white/80 border-gray-200/50 backdrop-blur-xl'">
                        
                        <!-- Post Header -->
                        <div class="flex items-center space-x-3 mb-4">
                            <div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center text-white font-semibold text-lg shadow-md">
                                <span x-text="post.author.username.charAt(0).toUpperCase()"></span>
                            </div>
                            
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center space-x-2">
                                    <h4 class="font-semibold truncate"
                                        :class="darkMode ? 'text-white' : 'text-gray-900'"
                                        x-text="post.author.display_name || post.author.username"></h4>
                                    <span x-show="post.author.is_verified" 
                                          class="text-blue-500">
                                        <i class="fas fa-check-circle text-sm"></i>
                                    </span>
                                </div>
                                <p class="text-sm"
                                   :class="darkMode ? 'text-gray-400' : 'text-gray-500'"
                                   x-text="formatTimeAgo(post.created_at)"></p>
                            </div>
                            
                            <div class="flex items-center space-x-2">
                                <div class="flex items-center space-x-1 text-sm px-2 py-1 rounded-full"
                                     :class="darkMode ? 'bg-red-500/20 text-red-400' : 'bg-red-50 text-red-500'">
                                    <i class="fas fa-fire"></i>
                                    <span>Trending</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Post Content -->
                        <div class="mb-4">
                            <p class="text-lg leading-relaxed"
                               :class="darkMode ? 'text-gray-100' : 'text-gray-800'"
                               x-text="post.content"></p>
                        </div>
                        
                        <!-- Post Stats -->
                        <div class="flex items-center space-x-6 text-sm"
                             :class="darkMode ? 'text-gray-400' : 'text-gray-500'">
                            <div class="flex items-center space-x-1">
                                <i class="fas fa-heart"></i>
                                <span x-text="formatNumber(post.like_count || 0)"></span>
                            </div>
                            
                            <div class="flex items-center space-x-1">
                                <i class="far fa-comment"></i>
                                <span x-text="formatNumber(post.comment_count || 0)"></span>
                            </div>
                            
                            <div class="flex items-center space-x-1">
                                <i class="fas fa-share"></i>
                                <span x-text="formatNumber(post.share_count || 0)"></span>
                            </div>
                        </div>
                    </article>
                </template>
            </div>
            
            <!-- Empty State for Posts -->
            <div x-show="!loading && posts.length === 0" class="text-center py-16">
                <div class="mb-6">
                    <i class="fas fa-fire text-6xl mb-4"
                       :class="darkMode ? 'text-gray-600' : 'text-gray-300'"></i>
                </div>
                <h3 class="text-2xl font-bold mb-2"
                    :class="darkMode ? 'text-white' : 'text-gray-900'">
                    Keine beliebten Posts
                </h3>
                <p class="text-lg"
                   :class="darkMode ? 'text-gray-400' : 'text-gray-600'">
                    Noch keine Posts sind viral gegangen. Sei der Erste!
                </p>
            </div>
        </div>

        <!-- Trending Tab -->
        <div x-show="activeTab === 'trending' && !loading">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <template x-for="item in trending" :key="item.id">
                    <div class="rounded-2xl p-6 shadow-lg border transition-all duration-300 hover:shadow-xl transform hover:scale-105"
                         :class="darkMode 
                         ? 'bg-gray-800/90 border-gray-700/50 backdrop-blur-xl' 
                         : 'bg-white/80 border-gray-200/50 backdrop-blur-xl'">
                        
                        <div class="flex items-center space-x-3 mb-4">
                            <div class="w-12 h-12 rounded-full bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center text-white shadow-md">
                                <i class="fas fa-hashtag text-lg"></i>
                            </div>
                            
                            <div class="flex-1">
                                <h3 class="font-bold text-lg"
                                    :class="darkMode ? 'text-white' : 'text-gray-900'"
                                    x-text="item.title"></h3>
                                <p class="text-sm"
                                   :class="darkMode ? 'text-gray-400' : 'text-gray-500'"
                                   x-text="`${formatNumber(item.count)} Posts`"></p>
                            </div>
                            
                            <div class="flex items-center space-x-1 text-sm px-2 py-1 rounded-full"
                                 :class="darkMode ? 'bg-orange-500/20 text-orange-400' : 'bg-orange-50 text-orange-500'">
                                <i class="fas fa-trending-up"></i>
                                <span x-text="`+${item.growth}%`"></span>
                            </div>
                        </div>
                        
                        <div x-show="item.description" class="mb-4">
                            <p class="text-sm"
                               :class="darkMode ? 'text-gray-300' : 'text-gray-700'"
                               x-text="item.description"></p>
                        </div>
                        
                        <button class="w-full py-2 px-4 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105"
                                :class="darkMode 
                                ? 'bg-gray-700 text-white border border-gray-600 hover:bg-gray-600' 
                                : 'bg-gray-100 text-gray-700 border border-gray-300 hover:bg-gray-200'">
                            Erkunden
                        </button>
                    </div>
                </template>
            </div>
            
            <!-- Empty State for Trending -->
            <div x-show="!loading && trending.length === 0" class="text-center py-16">
                <div class="mb-6">
                    <i class="fas fa-trending-up text-6xl mb-4"
                       :class="darkMode ? 'text-gray-600' : 'text-gray-300'"></i>
                </div>
                <h3 class="text-2xl font-bold mb-2"
                    :class="darkMode ? 'text-white' : 'text-gray-900'">
                    Noch nichts im Trend
                </h3>
                <p class="text-lg"
                   :class="darkMode ? 'text-gray-400' : 'text-gray-600'">
                    Sei der Erste, der etwas Trending macht!
                </p>
            </div>
        </div>
    </div>

    <!-- Quick Actions Floating Button -->
    <div class="fixed bottom-6 right-6 z-40">
        <div class="relative group">
            <!-- Main FAB -->
            <button class="w-14 h-14 rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-500/50">
                <i class="fas fa-plus text-xl"></i>
            </button>
            
            <!-- Action Menu -->
            <div class="absolute bottom-16 right-0 opacity-0 group-hover:opacity-100 transition-all duration-300 transform scale-95 group-hover:scale-100 space-y-2">
                <a href="{{ url_for('social_feed') }}" 
                   class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110"
                   title="Zum Feed">
                    <i class="fas fa-stream"></i>
                </a>
                
                <button class="flex items-center justify-center w-12 h-12 rounded-full bg-green-500 text-white shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110"
                        title="Post erstellen">
                    <i class="fas fa-edit"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Helper function for time formatting
function formatTimeAgo(dateString) {
    const date = new Date(dateString);
    const now = new Date();
    const diffInSeconds = Math.floor((now - date) / 1000);
    
    if (diffInSeconds < 60) return 'vor wenigen Sekunden';
    if (diffInSeconds < 3600) return `vor ${Math.floor(diffInSeconds / 60)} Min`;
    if (diffInSeconds < 86400) return `vor ${Math.floor(diffInSeconds / 3600)} Std`;
    return `vor ${Math.floor(diffInSeconds / 86400)} Tagen`;
}
</script>
{% endblock %}