{% extends "base.html" %}
{% block title %}Results Feed{% endblock %}

{% block content %}
  <main>
    <section class="item-container">
      <div class="item-title-bar">
        <h3>Live Results</h3>
      </div>

      <div id="status" class="status disconnected">
        <span class="status-icon"></span>
        <span class="status-text">Disconnected</span>
      </div>

      <div style="display:flex; gap:1em;">
        <button id="connect-btn">Connect</button>
        <button id="disconnect-btn" disabled>Disconnect</button>
      </div>
    </section>

    <div id="events"></div>
  </main>

  <style>
    .new-entry {
      background-color: #f0f8ff;
      border-left: 4px solid #46b45e;
      transition: background-color 2s ease-out;
    }
  </style>

  <script>
    let eventSource;
    let reconnectTimer;
    const reconnectInterval = 1000;
  
    const statusEl      = document.getElementById('status');
    const statusIcon    = statusEl.querySelector('.status-icon');
    const statusText    = statusEl.querySelector('.status-text');
    const eventsEl      = document.getElementById('events');
    const connectBtn    = document.getElementById('connect-btn');
    const disconnectBtn = document.getElementById('disconnect-btn');
    const clearBtn      = document.getElementById('clear-btn');
    const ruleResultUrl = "{{ url_for('rule_result', rule_id=0) }}".replace('0', '');
    const sseUrl   = "{{ SSE_URL }}";
    const sseEndpoint  = `${sseUrl}/sse/entry-notifications`;

    function formatDate(iso) {
      return new Date(iso).toLocaleString();
    }
  
    function updateStatus(state, text) {
      statusEl.className = 'status ' + state;
      statusText.textContent = text;
    }
  
    function logEvent(type, data) {
      const section = document.createElement('section');
      section.className = 'item-container';
      
      if (type === 'new_entry') {
        section.classList.add('new-entry');
      }
  
      const titleBar = document.createElement('div');
      titleBar.className = 'item-title-bar';
      titleBar.innerHTML = `<h3>${data.title}</h3>`;
      section.appendChild(titleBar);
  
      const body = document.createElement('div');
      body.className = 'item-body';
  
      const info = document.createElement('div');
      info.className = 'item-info';
      info.innerHTML = `
        <p><strong>Link:</strong> <a href="${data.link}" target="_blank">${data.link}</a></p>
        <p><strong>Published:</strong> ${formatDate(data.pub_date)}</p>
      `;
      body.appendChild(info);
  
      const btn = document.createElement('button');
      btn.textContent = `View Rule`;
      btn.className = 'check-rule-btn';
      btn.addEventListener('click', () => {
        window.location.href = ruleResultUrl + data.rule_id;
      });
      titleBar.appendChild(btn);
  
      section.appendChild(body);
      
      if (type === 'new_entry') {
        eventsEl.prepend(section);
      } else {
        eventsEl.appendChild(section);
      }
      
      if (type === 'new_entry') {
        eventsEl.scrollTop = 0;
      } else {
        eventsEl.scrollTop = eventsEl.scrollHeight;
      }
    }
  
    function fetchOldEntries() {
      fetch('/get_entries')
        .then(response => response.json())
        .then(entries => {
          if (Array.isArray(entries)) {
            entries.sort((a, b) => new Date(b.pub_date) - new Date(a.pub_date));
            entries.forEach(entry => {
              logEvent('old_entry', entry);
            });
          }
        })
        .catch(error => {
          console.error('Error fetching old entries:', error);
        });
    }
    
    function connect() {
      if (reconnectTimer) {
        clearTimeout(reconnectTimer);
        reconnectTimer = null;
      }
  
      if (eventSource) {
        eventSource.close();
      }
      updateStatus('connecting', 'Connecting…');
      connectBtn.disabled    = true;
      disconnectBtn.disabled = true;
      
      fetchOldEntries();
  
      eventSource = new EventSource(sseEndpoint);
  
      eventSource.onopen = () => {
        updateStatus('connected', 'Connected');
        connectBtn.disabled    = true;
        disconnectBtn.disabled = false;
      };
  
      eventSource.onerror = () => {
        updateStatus('disconnected', 'Not Connected');
        if (eventSource) {
          eventSource.close();
          eventSource = null;
        }
        connectBtn.disabled    = true;
        disconnectBtn.disabled = true;
        reconnectTimer = setTimeout(connect, reconnectInterval);
      };
  
      eventSource.addEventListener('new_entry', e => {
        logEvent('new_entry', JSON.parse(e.data));
      });
  
      eventSource.onmessage = e => {
        logEvent('message', JSON.parse(e.data));
      };
    }
  
    function disconnect() {
      if (reconnectTimer) {
        clearTimeout(reconnectTimer);
        reconnectTimer = null;
      }
      if (eventSource) {
        eventSource.close();
        eventSource = null;
      }
      updateStatus('disconnected', 'Disconnected');
      connectBtn.disabled    = false;
      disconnectBtn.disabled = true;
    }
  
    function clearEvents() {
      eventsEl.innerHTML = '';
    }
  
    connectBtn.addEventListener('click', connect);
    disconnectBtn.addEventListener('click', disconnect);
  
    window.addEventListener('DOMContentLoaded', connect);
  </script>  
{% endblock %}