{% extends 'layouts/base.html' %}
{% load static %}

{% block title %}Notification Rules - Stream Processor{% endblock %}
{% block page_title %}Notification Rules{% endblock %}

{% block content %}
<div class="d-flex flex-column gap-4">

  <!-- Header -->
  <div class="d-flex justify-content-between align-items-start align-items-md-center flex-column flex-md-row gap-3">
    <div>
      <h1 class="h4 fw-bold text-dark d-flex align-items-center mb-1">
        <i class="fas fa-bell me-2 text-primary"></i>
        Notification Rules
      </h1>
      <p class="text-muted small mb-0">Manage automatic notification rules for system events</p>
    </div>
    <div class="d-flex gap-2">
      <a href="#"
         class="btn btn-primary btn-sm d-inline-flex align-items-center">
        <i class="fas fa-plus me-2"></i>New Rule
      </a>
    </div>
  </div>

  <!-- Filters -->
  <div class="card shadow-sm">
    <div class="card-body">
      <div class="row g-3 align-items-end">
        <div class="col-12 col-md-6 col-lg-4">
          <label for="event_type" class="form-label small mb-1">Event Type</label>
          <select id="event_type" class="form-select form-select-sm">
            <option value="">All Events</option>
            <option value="jingle_detected"  {% if request.GET.event_type == "jingle_detected" %}selected{% endif %}>Jingle Detected</option>
            <option value="ad_break_started" {% if request.GET.event_type == "ad_break_started" %}selected{% endif %}>Ad Break Started</option>
            <option value="ad_break_ended"   {% if request.GET.event_type == "ad_break_ended" %}selected{% endif %}>Ad Break Ended</option>
            <option value="stream_started"   {% if request.GET.event_type == "stream_started" %}selected{% endif %}>Stream Started</option>
            <option value="stream_stopped"   {% if request.GET.event_type == "stream_stopped" %}selected{% endif %}>Stream Stopped</option>
            <option value="stream_error"     {% if request.GET.event_type == "stream_error" %}selected{% endif %}>Stream Error</option>
            <option value="high_error_rate"  {% if request.GET.event_type == "high_error_rate" %}selected{% endif %}>High Error Rate</option>
            <option value="system_startup"   {% if request.GET.event_type == "system_startup" %}selected{% endif %}>System Startup</option>
            <option value="system_shutdown"  {% if request.GET.event_type == "system_shutdown" %}selected{% endif %}>System Shutdown</option>
          </select>
        </div>

        <div class="col-12 col-md-4 col-lg-3">
          <label for="status" class="form-label small mb-1">Status</label>
          <select id="status" class="form-select form-select-sm">
            <option value="">All</option>
            <option value="active"   {% if request.GET.status == "active" %}selected{% endif %}>Active</option>
            <option value="inactive" {% if request.GET.status == "inactive" %}selected{% endif %}>Inactive</option>
          </select>
        </div>

        <div class="col-12 col-md-2 col-lg-2">
          <button id="applyFiltersBtn" class="btn btn-outline-secondary btn-sm w-100">
            <i class="fas fa-filter me-1"></i>Apply
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Rules List -->
  <div class="card shadow-sm">
    {% if rules %}
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h3 class="h6 mb-0">Notification Rules</h3>
          <span class="badge bg-primary-subtle text-primary border">
            {{ rules.count }} rule{{ rules.count|pluralize }}
          </span>
        </div>

        <div class="d-flex flex-column gap-3">
          {% for rule in rules %}
          <div class="border rounded p-3">
            <div class="d-flex flex-column flex-md-row justify-content-between gap-3">
              <!-- Left -->
              <div class="flex-grow-1">
                <div class="d-flex align-items-center flex-wrap gap-2 mb-2">
                  <h4 class="h6 mb-0">{{ rule.name }}</h4>

                  {% if rule.is_active %}
                    <span class="badge bg-success-subtle text-success border">
                      <i class="fas fa-check-circle me-1"></i>Active
                    </span>
                  {% else %}
                    <span class="badge bg-secondary-subtle text-secondary border">
                      <i class="fas fa-pause-circle me-1"></i>Inactive
                    </span>
                  {% endif %}

                  {% if rule.priority > 0 %}
                    <span class="badge bg-warning-subtle text-warning border">
                      <i class="fas fa-star me-1"></i>Priority {{ rule.priority }}
                    </span>
                  {% endif %}
                </div>

                <div class="row g-3 small text-muted mb-1">
                  <div class="col-12 col-md-6 col-lg-3">
                    <span class="text-dark">Event Type:</span>
                    <div class="mt-1">
                      <span class="badge bg-primary-subtle text-primary border">
                        {{ rule.get_event_type_display }}
                      </span>
                    </div>
                  </div>

                  <div class="col-12 col-md-6 col-lg-3">
                    <span class="text-dark">Channel:</span>
                    <div class="mt-1 d-flex align-items-center">
                      <i class="fas fa-{{ rule.channel.channel_type|default:'bell' }} me-1 text-muted"></i>
                      {{ rule.channel.name }}
                    </div>
                  </div>

                  <div class="col-12 col-md-6 col-lg-3">
                    <span class="text-dark">Template:</span>
                    <div class="mt-1">{{ rule.template.name }}</div>
                  </div>

                  <div class="col-12 col-md-6 col-lg-3">
                    <span class="text-dark">Throttle:</span>
                    <div class="mt-1">
                      {% if rule.throttle_minutes > 0 %}
                        {{ rule.throttle_minutes }} minute{{ rule.throttle_minutes|pluralize }}
                      {% else %}
                        No throttling
                      {% endif %}
                    </div>
                  </div>
                </div>

                {% if rule.last_triggered %}
                  <div class="small text-muted">
                    <i class="fas fa-clock me-1"></i>Last triggered: {{ rule.last_triggered|timesince }} ago
                  </div>
                {% else %}
                  <div class="small text-muted">
                    <i class="fas fa-clock me-1"></i>Never triggered
                  </div>
                {% endif %}

                {% if rule.conditions %}
                  <div class="mt-2">
                    <span class="small fw-semibold text-muted">Conditions:</span>
                    <div class="mt-1">
                      <code class="bg-light px-2 py-1 rounded small">{{ rule.conditions|truncatechars:100 }}</code>
                    </div>
                  </div>
                {% endif %}
              </div>

              <!-- Right actions -->
              <div class="d-flex align-items-center gap-2 ms-md-3">
                <button class="btn btn-sm btn-outline-primary" title="Edit Rule">
                  <i class="fas fa-edit"></i>
                </button>

                <button class="btn btn-sm btn-outline-success" title="Test Rule">
                  <i class="fas fa-play"></i>
                </button>

                {% if rule.is_active %}
                  <button class="btn btn-sm btn-outline-warning" title="Disable Rule" data-action="toggle" data-id="{{ rule.id }}" data-active="1">
                    <i class="fas fa-pause"></i>
                  </button>
                {% else %}
                  <button class="btn btn-sm btn-outline-success" title="Enable Rule" data-action="toggle" data-id="{{ rule.id }}" data-active="0">
                    <i class="fas fa-play"></i>
                  </button>
                {% endif %}

                <button class="btn btn-sm btn-outline-danger" title="Delete Rule" data-action="delete" data-id="{{ rule.id }}">
                  <i class="fas fa-trash"></i>
                </button>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>

      {% if is_paginated %}
      <div class="card-footer bg-white">
        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-2">
          <p class="mb-0 text-muted small">
            Showing <span class="fw-semibold">{{ page_obj.start_index }}</span> to
            <span class="fw-semibold">{{ page_obj.end_index }}</span> of
            <span class="fw-semibold">{{ paginator.count }}</span> results
          </p>
          <nav aria-label="Pagination">
            <ul class="pagination pagination-sm mb-0">
              {% if page_obj.has_previous %}
                <li class="page-item">
                  <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
              {% endif %}

              {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                  <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                {% else %}
                  <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                {% endif %}
              {% endfor %}

              {% if page_obj.has_next %}
                <li class="page-item">
                  <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              {% endif %}
            </ul>
          </nav>
        </div>
      </div>
      {% endif %}
    {% else %}
      <div class="card-body text-center py-5">
        <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-primary-subtle mb-3" style="width:48px;height:48px;">
          <i class="fas fa-bell text-primary"></i>
        </div>
        <h3 class="h6">No notification rules</h3>
        <p class="text-muted small">Create your first notification rule to get started with automated alerts</p>
        <a href="#" class="btn btn-primary btn-sm">
          <i class="fas fa-plus me-2"></i>Create Notification Rule
        </a>
      </div>
    {% endif %}
  </div>

  <!-- Information Panel -->
  <div class="alert alert-primary border d-flex gap-3 align-items-start" role="alert">
    <i class="fas fa-info-circle mt-1"></i>
    <div>
      <h6 class="alert-heading mb-1">About Notification Rules</h6>
      <p class="mb-2 small">Notification rules automatically trigger alerts when specific system events occur. Each rule defines:</p>
      <ul class="small mb-0 ps-3">
        <li><strong>Event Type</strong> – the event that triggers the notification</li>
        <li><strong>Channel</strong> – where to send it (Telegram, email, etc.)</li>
        <li><strong>Template</strong> – message format/content</li>
        <li><strong>Throttling</strong> – minimum time between alerts</li>
        <li><strong>Conditions</strong> – extra criteria to match</li>
        <li><strong>Priority</strong> – higher numbers run first</li>
      </ul>
    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
  // Optional toast helper using SweetAlert2
  function toast(icon, title, timer=2000){
    Swal.fire({toast:true, position:'bottom-end', showConfirmButton:false, timer, timerProgressBar:true, icon, title});
  }

  document.addEventListener('DOMContentLoaded', function () {
    const eventType = document.getElementById('event_type');
    const status = document.getElementById('status');
    const applyBtn = document.getElementById('applyFiltersBtn');

    function applyFilters(){
      const params = new URLSearchParams(window.location.search);
      const setOrDel = (k,v)=> v ? params.set(k,v) : params.delete(k);
      setOrDel('event_type', eventType.value);
      setOrDel('status', status.value);
      window.location.search = params.toString();
    }
    applyBtn.addEventListener('click', applyFilters);

    // Actions: enable/disable & delete (replace with real requests)
    document.querySelectorAll('[data-action="toggle"]').forEach(btn=>{
      btn.addEventListener('click', e=>{
        e.preventDefault();
        const id = btn.dataset.id;
        const currentlyActive = btn.dataset.active === '1';
        Swal.fire({
          icon: 'question',
          title: currentlyActive ? 'Disable this rule?' : 'Enable this rule?',
          showCancelButton: true,
          confirmButtonText: currentlyActive ? 'Disable' : 'Enable'
        }).then(res=>{
          if(res.isConfirmed){
            // TODO: Perform toggle via fetch/HTMX
            toast('success', currentlyActive ? 'Rule disabled' : 'Rule enabled');
          }
        });
      });
    });

    document.querySelectorAll('[data-action="delete"]').forEach(btn=>{
      btn.addEventListener('click', e=>{
        e.preventDefault();
        const id = btn.dataset.id;
        Swal.fire({
          icon: 'warning',
          title: 'Delete rule?',
          text: 'This action cannot be undone.',
          showCancelButton: true,
          confirmButtonText: 'Delete',
          confirmButtonColor: '#dc3545'
        }).then(res=>{
          if(res.isConfirmed){
            // TODO: Perform deletion request
            toast('success','Rule deleted');
          }
        });
      });
    });
  });
</script>

<style>
  /* Align Bootstrap primary with your palette */
  :root{
    --bs-primary:#3b82f6;
    --bs-primary-rgb:59,130,246;
  }
  .btn-primary:hover,.btn-primary:focus{background-color:#2563eb;border-color:#2563eb;}
  .bg-primary-subtle{background-color:#eff6ff!important;}
  .bg-success-subtle{background-color:#e9f7ef!important;}
  .bg-warning-subtle{background-color:#fff6e6!important;}
  .bg-secondary-subtle{background-color:#f2f2f2!important;}
  .bg-danger-subtle{background-color:#fde8e8!important;}
  .border{border-color:rgba(0,0,0,.08)!important;}
  .badge.border{border:1px solid rgba(var(--bs-primary-rgb), .2)!important;}
</style>
{% endblock %}