<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ app_name }} v{{ app_version }} - Posts</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Favicon -->
    <link rel="icon" href="/static/FenLiu.png" type="image/png">
    <link rel="apple-touch-icon" href="/static/FenLiu.png">

    <style>
        .stat-card {
            @apply bg-white rounded-lg shadow-md p-6 transition-all duration-300;
        }
        .stat-card:hover {
            @apply shadow-lg transform -translate-y-1;
        }
        .water-wave {
            @apply relative overflow-hidden;
        }
        .water-wave::before {
            content: '';
            position: absolute;
            top: 0;
            left:</style> -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            animation: wave 2s infinite linear;
        }
        @keyframes wave {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        .post-content {
            @apply text-gray-700 line-clamp-3;
        }
        .post-content a {
            @apply text-blue-600 hover:text-blue-800 underline;
        }
        .post-content a:hover {
            @apply no-underline;
        }
        .spam-score-low {
            @apply bg-green-100 text-green-800;
        }
        .spam-score-medium {
            @apply bg-yellow-100 text-yellow-800;
        }
        .spam-score-high {
            @apply bg-orange-100 text-orange-800;
        }
        .spam-score-very-high {
            @apply bg-red-100 text-red-800;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- Navigation -->
    <nav class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white shadow-lg">
        <div class="container mx-auto px-4 py-4">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-4">
                    <div class="water-wave rounded-full p-2 bg-white/20">
                        <i class="fas fa-water text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold">{{ app_name }}</h1>
                        <p class="text-blue-100">分流 - Divide the Flow</p>
                    </div>
                </div>
                <div class="hidden md:flex space-x-6">
                    <a href="/" class="hover:text-blue-200 transition-colors">
                        <i class="fas fa-tachometer-alt</div> mr-2"></i>Dashboard
                    </a>
                    <a href="/streams" class="hover:text-blue-200 transition-colors">
                        <i class="fas fa-hashtag mr-2"></i>Streams
                    </a>
                    <a href="/posts" class="text-blue-200 font-semibold">
                        <i class="fas fa-stream mr-2"></i>Posts
                    </a>
                    <a href="/stats" class="hover:text-blue-200 transition-colors">
                        <i class="fas fa-chart-bar mr-2"></i>Stats
                    </a>
                </div>
                <button class="md:hidden text-2xl" onclick="toggleMobileMenu()">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
            <!-- Mobile menu -->
            <div id="mobileMenu" class="hidden md:hidden mt-4 space-y-4">
                <a href="/" class="block hover:text-blue-200 transition-colors">
                    <i class="fas fa-tachometer-alt mr-2"></i>Dashboard
                </a>
                <a href="/streams" class="block hover:text-blue-200 transition-colors">
                    <i class="fas fa-hashtag mr-2"></i>Streams
                </a>
                <a href="/posts" class="block text-blue-200 font-semibold">
                    <i class="fas fa-stream mr-2"></i>Posts
                </a>
                <a href="/stats" class="block hover:text-blue-200 transition-colors">
                    <i class="fas fa-chart-bar mr-2"></i>Stats
                </a>
            </div>
        </div>
    </nav>

    <!-- Main content -->
    <main class="container mx-auto px-4 py-8">
        <div class="mb-8">
            <h2 class="text-3xl font-bold text-gray-800">Posts</h2>
            <p class="text-gray-600 mt-2">Browse and manage Fediverse posts collected from monitored hashtags.</p>
        </div>

        <!-- Filters -->
        <div class="stat-card mb-8">
            <h3 class="text-xl font-bold text-gray-800 mb-6">
                <i class="fas fa-filter mr-2 text-purple-500"></i>Filters
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-gray-700 mb-2" for="streamFilter">Stream</label>
                    <select id="streamFilter" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                        <option value="">All Streams</option>
                        {% for stream in streams %}
                        <option value="{{ stream.id }}">#{{ stream.hashtag }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-gray-700 mb-2" for="statusFilter">Status</label>
                    <select id="statusFilter" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                        <option value="">All</option>
                        <option value="processed">Processed</option>
                        <option value="unprocessed">Unprocessed</option>
                    </select>
                </div>
                <div>
                    <label class="block text-gray-700 mb-2" for="spamScoreFilter">Spam Score</label>
                    <select id="spamScoreFilter" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                        <option value="">All</option>
                        <option value="low">Low (0-25)</option>
                        <option value="medium">Medium (26-50)</option>
                        <option value="high">High (51-75)</option>
                        <option value="very-high">Very High (76-100)</option>
                    </select>
                </div>
                <div class="flex items-end">
                    <button id="applyFilters" class="w-full bg-gradient-to-r from-purple-500 to-indigo-600 text-white py-2 px-4 rounded-lg font-semibold hover:from-purple-600 hover:to-indigo-700 transition-all">
                        <i class="fas fa-search mr-2"></i>Apply Filters
                    </button>
                </div>
            </div>
        </div>

        <!-- Posts list -->
        <div class="stat-card">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold text-gray-800">
                    <i class="fas fa-stream mr-2 text-blue-500"></i>Recent Posts
                </h3>
                <span class="bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full">
                    {{ posts|length }} posts
                </span>
            </div>

            {% if posts %}
            <div class="space-y-6">
                {% for post in posts %}
                <div class="border border-gray-200 rounded-lg p-6 hover:bg-gray-50 transition-colors">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <div class="flex items-center mb-3">
                                <div class="flex items-center">
                                    {% if post.author_avatar %}
                                    <img src="{{ post.author_avatar }}" alt="{{ post.author_username }}" class="w-10 h-10 rounded-full mr-3">
                                    {% else %}
                                    <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center mr-3">
                                        <i class="fas fa-user text-gray-600"></i>
                                    </div>
                                    {% endif %}
                                    <div>
                                        <h4 class="font-semibold text-gray-800">{{ post.author_username }}</h4>
                                        <p class="text-gray-500 text-sm">
                                            <i class="fas fa-hashtag mr-1"></i>#{{ post.stream.hashtag if post.stream else 'Unknown' }}
                                            <span class="mx-2">•</span>
                                            <i class="far fa-clock mr-1"></i>{{ post.created_at.strftime('%Y-%m-%d %H:%M') if post.created_at else 'N/A' }}
                                        </p>
                                    </div>
                                </div>
                                <div class="ml-4">
                                    {% if post.spam_score is not none %}
                                    {% set spam_class = 'spam-score-low' if post.spam_score <= 25 else 'spam-score-medium' if post.spam_score <= 50 else 'spam-score-high' if post.spam_score <= 75 else 'spam-score-very-high' %}
                                    <span class="{{ spam_class }} text-xs font-semibold px-3 py-1 rounded-full">
                                        Spam: {{ post.spam_score }}%
                                    </span>
                                    {% else %}
                                    <span class="bg-gray-100 text-gray-800 text-xs font-semibold px-3 py-1 rounded-full">
                                        Not scored
                                    </span>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="post-content mb-4">
                                {{ post.content|safe }}
                            </div>

                            <div class="flex justify-between items-center">
                                <div class="flex space-x-6 text-gray-600">
                                    <span>
                                        <i class="fas fa-heart mr-1"></i>{{ post.likes or 0 }}
                                    </span>
                                    <span>
                                        <i class="fas fa-retweet mr-1"></i>{{ post.boosts or 0 }}
                                    </span>
                                    <span>
                                        <i class="fas fa-comment mr-1"></i>{{ post.replies or 0 }}
                                    </span>
                                </div>
                                <div class="flex space-x-2">
                                    {% if not post.processed %}
                                    <button class="text-green-600 hover:text-green-800" title="Mark as processed">
                                        <i class="fas fa-check"></i>
                                    </button>
                                    {% endif %}
                                    <a href="{{ post.url }}" target="_blank" class="text-blue-600 hover:text-blue-800" title="View original">
                                        <i class="fas fa-external-link-alt"></i>
                                    </a>
                                    <button class="text-red-600 hover:text-red-800" title="Delete post">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- Pagination -->
            <div class="mt-8 flex justify-center">
                <nav class="inline-flex rounded-md shadow">
                    <a href="#" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-50">
                        Previous
                    </a>
                    <a href="#" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border-t border-b border-gray-300 hover:bg-gray-50">
                        1
                    </a>
                    <a href="#" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-50">
                        Next
                    </a>
                </nav>
            </div>
            {% else %}
            <div class="text-center py-12">
                <i class="fas fa-stream text-4xl text-gray-300 mb-4"></i>
                <p class="text-gray-500">No posts collected yet.</p>
                <p class="text-gray-400 text-sm mt-2">Posts will appear here once streams are active and fetching data.</p>
            </div>
            {% endif %}
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white mt-12">
        <div class="container mx-auto px-4 py-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center mb-4">
                        <div class="water-wave rounded-full p-2 bg-white/10 mr-4">
                            <i class="fas fa-water"></i>
                        </div>
                        <div>
                            <h2 class="text-xl font-bold">{{ app_name }}</h2>
                            <p class="text-gray-300">Fediverse Content Stream Filtering</p>
                        </div>
                    </div>
                    <p class="text-gray-400">Inspired by the ancient Dujiangyan irrigation system</p>
                </div>
                <div class="text-center md:text-right">
                    <p class="text-gray-400">Version {{ app_version }}</p>
                    <p class="text-gray-400">分流 - Divide the Flow</p>
                </div>
            </div>
        </div>
    </footer>

    <script>
        function toggleMobileMenu() {
            const menu = document.getElementById('mobileMenu');
            menu.classList.toggle('hidden');
        }

        //</script> Filter functionality
        document.getElementById('applyFilters').addEventListener('click', function() {
            const streamFilter = document.getElementById('streamFilter').value;
            const statusFilter = document.getElementById('statusFilter').value;
            const spamScoreFilter = document.getElementById('spamScoreFilter').value;

            // Build query string
            const params = new URLSearchParams();
            if (streamFilter) params.append('stream_id', streamFilter);
            if (statusFilter) params.append('processed', statusFilter === 'processed');
            if (spamScoreFilter) {
                switch(spamScoreFilter) {
                    case 'low': params.append('max_spam_score', 25); break;
                    case 'medium': params.append('min_spam_score', 26); params.append('max_spam_score', 50); break;
                    case 'high': params.append('min_spam_score', 51); params.append('max_spam_score', 75); break;
                    case 'very-high': params.append('min_spam_score', 76); break;
                }
            }

            // Reload with filters
            window.location.search = params.toString();
        });

        // Format datetime
        function formatRelativeTime(dateString) {
            const date = new Date(dateString);
            const now = new Date();
            const diffMs = now - date;
            const diffSec = Math.floor(diffMs / 1000);
            const diffMin = Math.floor(diffSec / 60);
            const diffHour = Math.floor(diffMin / 60);
            const diffDay = Math.floor(diffHour / 24);

            if (diffDay > 0) return `${diffDay}d ago`;
            if (diffHour > 0) return `${diffHour}h ago`;
            if (diffMin > 0) return `${diffMin}m ago`;
            return 'Just now';
        }

        // Update relative times on page load
        document.addEventListener('DOMContentLoaded', function() {
            const timeElements = document.querySelectorAll('[data-datetime]');
            timeElements.forEach(el => {
                const timeString = el.getAttribute('data-datetime');
                if (timeString) {
                    el.textContent = formatRelativeTime(timeString);
                }
            });
        });
    </script>
</body>
</html>
