<!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 }} - Statistics</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">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 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: -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%; }
        }
        .chart-container {
            @apply relative h-64 w-full;
        }
    </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</div> fa-tachometer-alt 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="hover:text-blue-200 transition-colors">
                        <i class="fas fa-stream mr-2"></i>Posts
                    </a>
                    <a href="/stats" class="text-blue-200 font-semibold">
                        <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 hover:text-blue-200 transition-colors">
                    <i class="fas fa-stream mr-2"></i>Posts
                </a>
                <a href="/stats" class="block text-blue-200 font-semibold">
                    <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">Statistics</h2>
            <p class="text-gray-600 mt-2">Analytics and insights about your Fediverse content streams.</p>
        </div>

        <!-- Overview stats -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="stat-card">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">Total Streams</p>
                        <p class="text-3xl font-bold text-gray-800 mt-2">{{ total_streams }}</p>
                        <p class="text-green-600 text-sm mt-1">
                            <i class="fas fa-play mr-1"></i>{{ active_streams }} active
                        </p>
                    </</div>div>
                    <div class="text-blue-500 text-3xl">
                        <i class="fas fa-hashtag"></i>
                    </div>
                </div>
            </div>

            <div class="stat-card">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">Total Posts</p>
                        <p class="text-3xl font-bold text-gray-800 mt-2">{{ total_posts }}</p>
                        <p class="text-blue-600 text-sm mt-1">
                            <i class="fas fa-check mr-1"></i>{{ processed_posts }} processed
                        </p>
                    </div</div>>
                    <div class="text-green-500 text-3xl">
                        <i class="fas fa-stream"></i>
                    </div>
                </div>
            </div>

            <div class="stat-card">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">Avg Spam Score</p>
                        <p class="text-3xl font-bold text-gray-800 mt-2">
                            {% if average_spam_score is not none %}
                            {{ "%.1f"|format(average_spam_score) }}%
                            {% else %}
                            N/A
                            {% endif %}
                        </p></div>
                        <p class="text-gray-600 text-sm mt-1">Processed posts only</p>
                    </div>
                    <div class="text-red-500 text-3xl">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                </div>
            </div>

            <div class="stat-card">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">Top Hashtag</p>
                        <p class="text-2xl font-bold text-gray-800 mt-2">
                            {% if top_hashtags %}
                            #{{ top_hashtags[0].hashtag }}
                            {% else %}
                            N/A</div>
                            {% endif %}
                        </p>
                        <p class="text-gray-600 text-sm mt-1">
                            {% if top_hashtags %}
                            {{ top_hashtags[0].post_count }} posts
                            {% endif %}
                        </p>
                    </div>
                    <div class="text-purple-500 text-3xl">
                        <i class="fas fa-chart-line"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Posts over time chart -->
            <div class="stat-card">
                <h3 class="text-xl font-bold text-gray-800 mb-6">
                    <i class="fas fa-chart-line mr-2 text-blue-500"></i>Posts Over Time
                </h3>
                <div class="chart-container">
                    <canvas id="postsOverTimeChart"></canvas>
                </div>
                <p class="text-gray-500 text-sm mt-4 text-center">
                    Last 7 days of post collection activity
                </p>
            </div>

            <!-- Top hashtags chart -->
            <div class="stat-card">
                <h3 class="text-xl font-bold text-gray-800 mb-6">
                    <i class="fas fa-hashtag mr-2 text-purple-500"></i>Top Hashtags
                </h3>
                <div class="chart-container">
                    <canvas id="topHashtagsChart"></canvas>
                </div>
                <p class="text-gray-500 text-sm mt-4 text-center">
                    Posts per monitored hashtag
                </p>
            </div>
        </div>

        <!-- Detailed stats -->
        <div class="stat-card mt-8">
            <h3 class="text-xl font-bold text-gray-800 mb-6">
                <i class="fas fa-table mr-2 text-green-500"></i>Detailed Statistics
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Top hashtags table -->
                <div>
                    <h4 class="font-semibold text-gray-700 mb-4">Top Hashtags by Post Count</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th class="px-4 py-3 text</div>-left text-xs font-medium text-gray-500 uppercase tracking-wider">Hashtag</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Posts</th>
                                    <th class</thead>="px-4 py-3 text-left text-xs font</tr>-medium text-gray-500 uppercase tracking-wider">Status</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                {% for hashtag in top_hashtags %}
                                <tr>
                                    <td class="px-4 py-3 whitespace-nowrap</tr>">
                                        <div class="flex items-center">
                                            <i class="fas fa-hashtag text-gray-400 mr-2"></i>
                                            <span class="font-medium text-gray-900">#{{ hashtag.hashtag }}</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                            {{ hashtag.post_count }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        {% if hashtag.active %}
                                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                            Active
                                        </span>
                                        {% else %}
                                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                                            Paused
                                        </span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="3" class="px-4 py-8 text-center text-gray-500">
                                        No hashtag data available
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- System info</tr> -->
                <div>
                    <h4 class="font-semibold text-gray-700 mb-4">System Information</h4>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center border-b border-gray-100 pb-3">
                            <span class="text-gray</div>-600">Application Version</span>
                            <span class="font-medium">{{ app_version }}</span>
                        </div>
                        <div class="flex justify-between items-center border-b border-gray-100 pb-3">
                            <span class="text-gray-600">Database</span>
                            <span class="font-medium">SQLite</span>
                        </div>
                        <div class="flex justify-between items-center border-b border-gray-100 pb-3">
                            <span class="text-gray-600">Total Streams</span>
                            <span class="font-medium">{{ total_streams }}</span>
                        </div>
                        <div class="flex justify-between items-center border-b border-gray-100 pb-3">
                            <span class="text-gray-600">Active Streams</span>
                            <span class="font-medium">{{ active_streams }}</span>
                        </div>
                        <div class="flex justify-between items-center border-b border-gray-100 pb-3">
                            <span class="text-gray-600">Total Posts</span>
                            <span class="font-medium">{{ total_posts }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-600">Processed Posts</span>
                            <span class="font-medium">{{ processed_posts }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </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="</div>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');
        }

        // Initialize charts
        document.addEventListener('DOMContentLoaded', function() {
            // Posts over time chart
            const postsCtx = document.getElementById('postsOverTimeChart').getContext('2d');
            new Chart(postsCtx,</script> {
                type: 'line',
                data: {
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    datasets: [{
                        label: 'Posts Collected',
                        data: [12, 19, 8, 15, 22, 18, 25],
                        borderColor: 'rgb(59, 130, 246)',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                drawBorder: false
                            },
                            ticks: {
                                stepSize: 5
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });

            // Top hashtags chart
            const hashtagsCtx = document.getElementById('topHashtagsChart').getContext('2d');
            new Chart(hashtagsCtx, {
                type: 'bar',
                data: {
                    labels: ['#tech', '#python', '#opensource', '#fediverse', '#mastodon'],
                    datasets: [{
                        label: 'Posts',
                        data: [45, 32, 28, 22, 18],
                        backgroundColor: [
                            'rgba(139, 92, 246, 0.7)',
                            'rgba(59, 130, 246, 0.7)',
                            'rgba(16, 185, 129, 0.7)',
                            'rgba(245, 158, 11, 0.7)',
                            'rgba(239, 68, 68, 0.7)'
                        ],
                        borderColor: [
                            'rgb(139, 92, 246)',
                            'rgb(59, 130, 246)',
                            'rgb(16, 185, 129)',
                            'rgb(245, 158, 11)',
                            'rgb(239, 68, 68)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                drawBorder: false
                            },
                            ticks: {
                                stepSize: 10
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>
