<!doctype html>
<html lang="en">
  {% from "partials/header.html" import header with context %}
  <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 removed to prevent loading cycle appearance */
        opacity: 0.3;
      }

      .chart-container {
        @apply relative h-64 w-full;
      }
    </style>
  </head>
  <body class="bg-gray-50 min-h-screen">
    <!-- Navigation -->
    {{ header('stats') }}

    <!-- 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-5 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 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 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>
              <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">Delivered (All-time)</p>
              <p class="text-3xl font-bold text-gray-800 mt-2">
                {{ all_time_delivered }}
              </p>
              <p class="text-green-600 text-sm mt-1">
                <i class="fas fa-check-circle mr-1"></i>{{ delivered_posts }} active
              </p>
            </div>
            <div class="text-green-500 text-3xl">
              <i class="fas fa-check-circle"></i>
            </div>
          </div>
        </div>

        <div class="stat-card">
          <div class="flex justify-between items-start">
            <div>
              <p class="text-gray-500 text-sm">Errors (All-time)</p>
              <p class="text-3xl font-bold text-gray-800 mt-2">
                {{ all_time_errors }}
              </p>
              <p class="text-red-600 text-sm mt-1">
                <i class="fas fa-exclamation-circle mr-1"></i>{{ posts_with_errors }} active
              </p>
            </div>
            <div class="text-red-500 text-3xl">
              <i class="fas fa-bug"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- Error info section -->
      {% if posts_with_errors > 0 %}
      <div class="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
        <p class="text-red-800 text-sm">
          <i class="fas fa-info-circle mr-2"></i>
          <strong>Most Frequent Error:</strong>
          {% if most_frequent_error %} {{ most_frequent_error }} {% else %}
          Unknown error {% endif %}
        </p>
      </div>
      {% endif %}

      <!-- 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 hashtag (including untracked)
          </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-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="px-4 py-3 text-left text-xs font-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">
                      <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 is none %}
                      <span
                        class="px-3 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800"
                      >
                        Not Tracked
                      </span>
                      {% elif 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 -->
          <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-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
                class="flex justify-between items-center border-b border-gray-100 pb-3 mt-3"
              >
                <span class="text-gray-600">Posts with Errors</span>
                <span class="font-medium text-red-600"
                  >{{ posts_with_errors }}</span
                >
              </div>
              {% if most_frequent_error %}
              <div class="flex justify-between items-start">
                <span class="text-gray-600">Most Frequent Error</span>
                <span class="font-medium text-sm text-right max-w-xs"
                  >{{ most_frequent_error }}</span
                >
              </div>
              {% endif %}
            </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="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>
      // Initialize charts
      document.addEventListener("DOMContentLoaded", function () {
        // Posts over time chart
        const postsCtx = document
          .getElementById("postsOverTimeChart")
          .getContext("2d");
        new Chart(postsCtx, {
          type: "line",
          data: {
            labels: {{ posts_over_time_labels | tojson }},
            datasets: [
              {
                label: "Posts Collected",
                data: {{ posts_over_time_data | tojson }},
                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: {{ top_hashtags_chart_labels | tojson }},
            datasets: [
              {
                label: "Posts",
                data: {{ top_hashtags_chart_data | tojson }},
                backgroundColor: {{ top_hashtags_chart_data | tojson }}.map((_, i) => {
                  const colors = [
                    "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)",
                  ];
                  return colors[i % colors.length];
                }),
                borderColor: {{ top_hashtags_chart_data | tojson }}.map((_, i) => {
                  const colors = [
                    "rgb(139, 92, 246)",
                    "rgb(59, 130, 246)",
                    "rgb(16, 185, 129)",
                    "rgb(245, 158, 11)",
                    "rgb(239, 68, 68)",
                  ];
                  return colors[i % colors.length];
                }),
                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>
