{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}

  <!-- Listed Monitoring Items -->
  {% if items %}
    <section class="item-list">
      {% for item in items %}
        <div class="item-card" id="rule-{{ item.id }}">
          <a 
            href="{{ url_for('remove_item', index=item.id) }}" 
            class="remove-link" 
            onclick="return confirm('Are you sure you want to remove this item?');"
          >×</a>
          <a class="close-form" href="javascript:void(0)" onclick="toggleAddItemForm()">×</a>

          <div class="item-title-bar">
            <h3>{{ item.name }}</h3>
            <a href="{{ url_for('rule_result', rule_id=item.id) }}" class="view-entries-btn">View Entries</a>
          </div>

          <div class="item-body">
            <div class="item-info">
            <p><strong>Title:</strong> {{ item.name }}</p>
            <p><strong>Description:</strong> {{ item.description }}</p>

            {% if item.data_source == 'RSS' %}
              <p><strong>Feed Name:</strong> {{ item.feed_name }}</p>
              <p><strong>Feed URL:</strong> {{ item.url or item.url }}</p>
            {% elif item.data_source == 'webpage' %}
              <p><strong>Webpage URL:</strong> {{ item.url or item.webpage_url }}</p>
              <p><strong>XPath:</strong> {{ item.xpath }}</p>
            {% endif %}

            <p><strong>Interval:</strong>
              {% set total_seconds = item.polling_interval %}
              {% set days = total_seconds // 86400 %}
              {% set hours = (total_seconds % 86400) // 3600 %}
              {% set minutes = (total_seconds % 3600) // 60 %}
              {% set seconds = total_seconds % 60 %}
              {% if days %}{{ days }} day{% if days != 1 %}s{% endif %}{% endif %}
              {% if hours %} {{ hours }} hour{% if hours != 1 %}s{% endif %}{% endif %}
              {% if minutes %} {{ minutes }} minute{% if minutes != 1 %}s{% endif %}{% endif %}
              {% if seconds or total_seconds == 0 %} {{ seconds }} second{% if seconds != 1 %}s{% endif %}{% endif %}
            </p>
          
            <p><strong>Criteria:</strong> {{ item.instruction }}</p>
          </div>

          </div>
        </div>
      {% endfor %}
    </section>
  {% endif %}

  <!-- Add Item Form Container -->
  <section class="item-container {% if items %}collapsed{% endif %}" id="addItemContainer">
    <div class="item-title-bar">
      <h3>Add a Monitoring Item</h3>
      {% if items %}
        <a class="close-form" href="javascript:void(0)" onclick="toggleAddItemForm()">×</a>
      {% endif %}
    </div>
    <form method="post" action="{{ url_for('dashboard') }}">
      <label for="title">Title:</label>
      <input type="text" name="name" id="name" placeholder="Enter a title" required>
      <br>
      <label for="description">Description (optional):</label>
      <textarea name="description" id="description" rows="3" placeholder="Enter a description"></textarea>
      <br>
      <label for="instruction">Notification Criteria:</label>
      <textarea name="instruction" id="instruction" rows="3" placeholder="e.g. Notify me if the page mentions the new NVIDIA graphics card." required></textarea>
      <br>
      <label for="interval">Check Interval:</label>
      <div id="time_wrapper">
        <div id="time_input">
          <div class="time-section">
            <label for="days">Days</label>
            <input type="number" id="days" name="days" value="0">
          </div>
          <span class="separator">:</span>
          <div class="time-section">
            <label for="hours">Hours</label>
            <input type="number" id="hours" name="hours" value="1">
          </div>
          <span class="separator">:</span>
          <div class="time-section">
            <label for="minutes">Minutes</label>
            <input type="number" id="minutes" name="minutes" value="0">
          </div>
          <span class="separator">:</span>
          <div class="time-section">
            <label for="seconds">Seconds</label>
            <input type="number" id="seconds" name="seconds" value="0">
          </div>
        </div>
      </div>     
      
      <label for="datasource_id">Data Source:</label>
      <div class="datasource-selection">
        <select name="datasource_id" id="datasource_id" required>
          <option value="">-- Select Data Source --</option>
          {% for ds in datasources %}
            <option value="{{ ds.id }}">
              {% if ds.type == "rss" %}
                RSS: {{ ds.feed_name }} ({{ ds.url }})
              {% elif ds.type == "webpage" %}
                Webpage: {{ ds.url }} {% if ds.xpath %}(XPath: {{ ds.xpath }}){% endif %}
              {% else %}
                {{ ds.type }}: {{ ds.url }}
              {% endif %}
            </option>
          {% endfor %}
        </select>
        <button type="button" id="newDatasourceBtn" onclick="toggleNewDatasourceForm()">+ New</button>
      </div>
      <br>

      <button type="submit">Add Item</button>
    </form>
  </section>

  {% if items %}
    <div id="plusButton" class="plus-button">+</div>
  {% endif %}

  <div id="newDatasourceForm" class="modal" style="display: none;">
    <div class="modal-content">
      <div class="item-title-bar">
        <h3>Create New Data Source</h3>
        <a class="close-form" href="javascript:void(0)" onclick="toggleNewDatasourceForm()">×</a>
      </div>
      <form method="post" action="{{ url_for('create_datasource') }}">
        <label for="new_data_source">Data Source Type:</label>
        <select name="data_source" id="new_data_source" required onchange="toggleNewSourceFields()">
          <option value="">-- Select Source Type --</option>
          <option value="RSS">RSS</option>
          <option value="webpage">Webpage</option>
        </select>
        <br>

        <div id="newRssFields" style="display: none;">
          <label for="new_feed_name">Feed Name:</label>
          <input type="text" name="feed_name" id="new_feed_name" placeholder="e.g. TechCrunch">
          <br>
          <label for="new_rss_url">RSS URL:</label>
          <input type="url" name="url" id="new_rss_url" placeholder="https://example.com/rss">
          <br>
        </div>

        <div id="newWebpageFields" style="display: none;">
          <label for="new_webpage_url">Webpage URL:</label>
          <input type="url" name="url" id="new_webpage_url" placeholder="https://example.com/page">
          <br>
          <label for="new_xpath">XPath:</label>
          <input type="text" name="xpath" id="new_xpath" placeholder="//div[@id='main-content']">
          <br>
        </div>

        <button type="submit">Create Data Source</button>
      </form>
    </div>
  </div>

  <script>
    function toggleAddItemForm() {
      const container = document.getElementById('addItemContainer');
      const plusButton = document.getElementById('plusButton');
      container.classList.toggle('collapsed');
      if (container.classList.contains('collapsed')) {
        plusButton.style.display = 'flex';
      } else {
        plusButton.style.display = 'none';
        container.scrollIntoView({ behavior: "smooth" });
      }
    }
    
    const pb = document.getElementById('plusButton');
    if (pb) {
      pb.addEventListener('click', toggleAddItemForm);
    }
    
    window.onload = function(){
      const container = document.getElementById('addItemContainer');
      const plusButton = document.getElementById('plusButton');
      if(container.classList.contains('collapsed')) {
         if(plusButton) plusButton.style.display = 'flex';
      } else {
         if(plusButton) plusButton.style.display = 'none';
      }
    }

    function toggleNewDatasourceForm() {
      const modal = document.getElementById('newDatasourceForm');
      modal.style.display = modal.style.display === 'none' ? 'block' : 'none';
    }

    function toggleNewSourceFields() {
      const selected = document.getElementById('new_data_source').value;
      document.getElementById('newRssFields').style.display = selected === 'RSS' ? 'block' : 'none';
      document.getElementById('newWebpageFields').style.display = selected === 'webpage' ? 'block' : 'none';
    }

    window.addEventListener('DOMContentLoaded', function() {
      toggleNewSourceFields();
    });
  </script>

{% endblock %}