{% extends 'base.html' %}
{% block title %}Authentication Stats{% endblock %}

{% block content %}
<div class="stats-page">
  <h1 class="page-title">Authentication Stats</h1>

  <div class="controls-card">
    <div class="control-group">
      <label for="time_range">Time Range:</label>
      <select name="time_range" id="time_range">
        <option value="last_minute">Last 1 Minute</option>
        <option value="last_5_minutes">Last 5 Minutes</option>
        <option value="last_10_minutes">Last 10 Minutes</option>
        <option value="last_hour">Last Hour</option>
        <option value="last_6_hours">Last 6 Hours</option>
        <option value="last_12_hours">Last 12 Hours</option>
        <option value="last_day">Last Day</option>
        <option value="last_30_days">Last 30 Days</option>
        <option value="all">All Time</option>
      </select>
    </div>
  
    <div class="control-group">
      <label for="per_page">Entries per page:</label>
      <select name="per_page" id="per_page">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
    </div>
  
    <div class="control-group auto-refresh-block">
      <label>
        <input type="checkbox" id="auto-refresh-checkbox"> Auto-refresh
      </label>
      <select id="refresh-interval">
        <option value="15000">15s</option>
        <option value="30000" selected>30s</option>
        <option value="60000">1 min</option>
        <option value="300000">5 min</option>
      </select>
      <span id="refresh-status"></span>
    </div>
  
    <div class="control-group search-block">
      <input type="text" id="stats-search" placeholder="Search MAC, vendor, VLAN, description">
    </div>
  </div>

  <div id="stats-root" class="stats-container">
    {% include '_stats_cards.html' %}
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const statsRoot = document.getElementById('stats-root');
  const timeRangeSelect = document.getElementById('time_range');
  const perPageSelect = document.getElementById('per_page');
  const searchInput = document.getElementById('stats-search');
  const refreshCheckbox = document.getElementById('auto-refresh-checkbox');
  const refreshInterval = document.getElementById('refresh-interval');
  const refreshStatus = document.getElementById('refresh-status');

  let intervalId = null;
  let currentPageAccept = 1;
  let currentPageReject = 1;
  let currentPageFallback = 1;

  function setInitialSelectValuesFromURL() {
    const urlParams = new URLSearchParams(window.location.search);
    const time = urlParams.get('time_range');
    const page = urlParams.get('per_page');
    if (time) timeRangeSelect.value = time;
    if (page) perPageSelect.value = page;
  }

  async function fetchStatsData() {
    try {
      const timeRange = timeRangeSelect.value;
      const perPage = perPageSelect.value;
      const params = new URLSearchParams({
        time_range: timeRange,
        per_page: perPage,
        page_accept: currentPageAccept,
        page_reject: currentPageReject,
        page_fallback: currentPageFallback
      });

      const response = await fetch(`/stats/fetch_stats_data?${params}`);
      const html = await response.text();
      statsRoot.innerHTML = html;
      filterRows();
      attachPaginationHandlers();
    } catch (err) {
      console.error('Error fetching stats data:', err);
      refreshStatus.textContent = 'Error loading stats data.';
    }
  }

  function startAutoRefresh() {
    refreshStatus.textContent = `Refreshing every ${refreshInterval.selectedOptions[0].text}`;
    if (intervalId) clearInterval(intervalId);
    intervalId = setInterval(fetchStatsData, parseInt(refreshInterval.value));
  }

  function stopAutoRefresh() {
    refreshStatus.textContent = "Auto-refresh disabled";
    if (intervalId) clearInterval(intervalId);
  }

  function filterRows() {
    const query = searchInput.value.toLowerCase();
    document.querySelectorAll('.styled-table tbody tr').forEach(row => {
      row.style.display = row.textContent.toLowerCase().includes(query) ? '' : 'none';
    });
  }

  function attachPaginationHandlers() {
    document.querySelectorAll('.pagination').forEach(pagination => {
      const type = pagination.getAttribute('data-type');
      pagination.querySelectorAll('a[data-page]').forEach(link => {
        link.addEventListener('click', (e) => {
          e.preventDefault();
          const page = parseInt(link.getAttribute('data-page'));
          if (type === 'accept') currentPageAccept = page;
          else if (type === 'reject') currentPageReject = page;
          else if (type === 'fallback') currentPageFallback = page;
          fetchStatsData();
        });
      });
    });
  }

  // Initial setup
  setInitialSelectValuesFromURL();
  fetchStatsData();

  timeRangeSelect.addEventListener('change', () => {
    currentPageAccept = currentPageReject = currentPageFallback = 1;
    fetchStatsData();
  });

  perPageSelect.addEventListener('change', () => {
    currentPageAccept = currentPageReject = currentPageFallback = 1;
    fetchStatsData();
  });

  refreshCheckbox.addEventListener('change', () => {
    refreshCheckbox.checked ? startAutoRefresh() : stopAutoRefresh();
  });

  refreshInterval.addEventListener('change', () => {
    if (refreshCheckbox.checked) startAutoRefresh();
  });

  searchInput.addEventListener('input', filterRows);
});
</script>
{% endblock %}