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

{% block title %}Notification Channels - Stream Processor{% endblock %}

{% block page_title %}Notification Channels{% 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-broadcast-tower me-2 text-primary"></i>
        Notification Channels
      </h1>
      <p class="text-muted small mb-0">
        Manage notification delivery channels and their configurations
      </p>
    </div>
    <div class="d-flex gap-2">
      <a href="#"
         class="btn btn-primary d-inline-flex align-items-center">
        <i class="fas fa-plus me-2"></i>
        New Channel
      </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-4">
          <label for="channel_type" class="form-label small mb-1">Channel Type</label>
          <select id="channel_type" class="form-select form-select-sm">
            <option value="">All Types</option>
            <option value="telegram" {% if request.GET.channel_type == "telegram" %}selected{% endif %}>Telegram</option>
            <option value="email" {% if request.GET.channel_type == "email" %}selected{% endif %}>Email</option>
            <option value="webhook" {% if request.GET.channel_type == "webhook" %}selected{% endif %}>Webhook</option>
            <option value="slack" {% if request.GET.channel_type == "slack" %}selected{% endif %}>Slack</option>
            <option value="discord" {% if request.GET.channel_type == "discord" %}selected{% endif %}>Discord</option>
            <option value="sms" {% if request.GET.channel_type == "sms" %}selected{% endif %}>SMS</option>
          </select>
        </div>
        <div class="col-12 col-md-4">
          <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-4 d-flex gap-2">
          <button id="applyFiltersBtn" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-filter me-2"></i>Apply Filters
          </button>
          <a href="{% url 'notifications:channel_list' %}" class="btn btn-light btn-sm">
            Clear
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Statistics Cards -->
  <div class="row g-3">
    <div class="col-12 col-md-6 col-lg-3">
      <div class="card shadow-sm h-100">
        <div class="card-body d-flex">
          <div class="me-3 d-flex align-items-center">
            <i class="fas fa-broadcast-tower fs-4 text-primary"></i>
          </div>
          <div>
            <div class="text-muted small">Total Channels</div>
            <div class="fw-semibold">{{ channels|length }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-3">
      <div class="card shadow-sm h-100">
        <div class="card-body d-flex">
          <div class="me-3 d-flex align-items-center">
            <i class="fas fa-check-circle fs-4 text-success"></i>
          </div>
          <div>
            <div class="text-muted small">Active</div>
            <div class="fw-semibold">
              {% for channel in channels %}{% if channel.is_active %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-3">
      <div class="card shadow-sm h-100">
        <div class="card-body d-flex">
          <div class="me-3 d-flex align-items-center">
            <i class="fas fa-pause-circle fs-4 text-secondary"></i>
          </div>
          <div>
            <div class="text-muted small">Inactive</div>
            <div class="fw-semibold">
              {% for channel in channels %}{% if not channel.is_active %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 col-lg-3">
      <div class="card shadow-sm h-100">
        <div class="card-body d-flex">
          <div class="me-3 d-flex align-items-center">
            <i class="fas fa-chart-line fs-4 text-purple"></i>
          </div>
          <div>
            <div class="text-muted small">Types</div>
            <div class="fw-semibold">
              {% regroup channels by channel_type as channel_groups %}
              {{ channel_groups|length|default:0 }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

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

        <div class="d-flex flex-column gap-3">
          {% for channel in channels %}
          <div class="border rounded p-3 hover-shadow-sm">
            <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-start flex-wrap gap-2 mb-2">
                  <h4 class="h6 mb-0">{{ channel.name }}</h4>

                  {% if channel.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 %}

                  <span class="badge bg-primary-subtle text-primary border">
                    {% if channel.channel_type == 'telegram' %}
                      <i class="fab fa-telegram me-1"></i>
                    {% elif channel.channel_type == 'email' %}
                      <i class="fas fa-envelope me-1"></i>
                    {% elif channel.channel_type == 'webhook' %}
                      <i class="fas fa-link me-1"></i>
                    {% elif channel.channel_type == 'slack' %}
                      <i class="fab fa-slack me-1"></i>
                    {% elif channel.channel_type == 'discord' %}
                      <i class="fab fa-discord me-1"></i>
                    {% elif channel.channel_type == 'sms' %}
                      <i class="fas fa-sms me-1"></i>
                    {% else %}
                      <i class="fas fa-bell me-1"></i>
                    {% endif %}
                    {{ channel.get_channel_type_display }}
                  </span>
                </div>

                <div class="row g-3 text-muted small mb-2">
                  <div class="col-12 col-md-4">
                    <span class="text-dark">Rate Limit:</span>
                    <div class="mt-1">{{ channel.rate_limit }} msg/min</div>
                  </div>
                  <div class="col-12 col-md-4">
                    <span class="text-dark">Retry Attempts:</span>
                    <div class="mt-1">{{ channel.retry_attempts }}</div>
                  </div>
                  <div class="col-12 col-md-4">
                    <span class="text-dark">Timeout:</span>
                    <div class="mt-1">{{ channel.timeout_seconds }}s</div>
                  </div>
                </div>

                {# Channel-specific config #}
                {% if channel.channel_type == 'telegram' %}
                  {% with config=channel.get_telegram_config %}
                  {% if config.chat_id %}
                  <div class="p-2 rounded border bg-light">
                    <div class="d-flex align-items-center mb-1">
                      <i class="fab fa-telegram text-primary me-2"></i>
                      <span class="small fw-semibold">Telegram Configuration</span>
                    </div>
                    <div class="small text-muted">
                      Chat ID:
                      <code class="bg-body-tertiary px-1 rounded">{{ config.chat_id }}</code>
                    </div>
                  </div>
                  {% endif %}
                  {% endwith %}
                {% elif channel.channel_type == 'email' %}
                  {% with config=channel.get_email_config %}
                  {% if config.recipients %}
                  <div class="p-2 rounded border bg-light">
                    <div class="d-flex align-items-center mb-1">
                      <i class="fas fa-envelope text-success me-2"></i>
                      <span class="small fw-semibold">Email Configuration</span>
                    </div>
                    <div class="small text-muted">
                      Recipients: {{ config.recipients|join:", " }}
                    </div>
                  </div>
                  {% endif %}
                  {% endwith %}
                {% elif channel.channel_type == 'webhook' %}
                  {% with config=channel.get_webhook_config %}
                  {% if config.url %}
                  <div class="p-2 rounded border bg-light">
                    <div class="d-flex align-items-center mb-1">
                      <i class="fas fa-link text-purple me-2"></i>
                      <span class="small fw-semibold">Webhook Configuration</span>
                    </div>
                    <div class="small text-muted">
                      URL: <code class="bg-body-tertiary px-1 rounded">{{ config.url|truncatechars:50 }}</code><br>
                      Method: {{ config.method|default:"POST" }}
                    </div>
                  </div>
                  {% endif %}
                  {% endwith %}
                {% endif %}

                <div class="small text-muted mt-2">
                  <i class="fas fa-user me-1"></i>
                  Created by {{ channel.created_by.username }} • {{ channel.created_at|timesince }} ago
                </div>
              </div>

              <!-- Right (actions) -->
              <div class="d-flex align-items-center gap-2 ms-md-3">
                <button class="btn btn-sm btn-outline-primary"
                        title="Test Channel"
                        data-action="test" data-id="{{ channel.id }}">
                  <i class="fas fa-play"></i>
                </button>

                <a href="#" class="btn btn-sm btn-outline-primary" title="Edit Channel">
                  <i class="fas fa-edit"></i>
                </a>

                {% if channel.is_active %}
                  <button class="btn btn-sm btn-outline-warning"
                          title="Disable Channel"
                          data-action="toggle" data-id="{{ channel.id }}" data-state="disable">
                    <i class="fas fa-pause"></i>
                  </button>
                {% else %}
                  <button class="btn btn-sm btn-outline-success"
                          title="Enable Channel"
                          data-action="toggle" data-id="{{ channel.id }}" data-state="enable">
                    <i class="fas fa-play"></i>
                  </button>
                {% endif %}

                <button class="btn btn-sm btn-outline-danger"
                        title="Delete Channel"
                        data-action="delete" data-id="{{ channel.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-broadcast-tower text-primary"></i>
        </div>
        <h3 class="h6">No notification channels</h3>
        <p class="text-muted small">Create your first notification channel to start sending alerts.</p>
        <a href="#" class="btn btn-primary btn-sm">
          <i class="fas fa-plus me-2"></i>Create Notification Channel
        </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 Channels</h6>
      <p class="mb-2 small">
        Notification channels define how and where notifications are delivered. Each channel includes:
      </p>
      <ul class="small mb-0 ps-3">
        <li><strong>Channel Type</strong> – The delivery method (Telegram, email, webhook, etc.)</li>
        <li><strong>Configuration</strong> – Service-specific settings like API keys, URLs, or recipients</li>
        <li><strong>Rate Limiting</strong> – Controls to prevent overwhelming external services</li>
        <li><strong>Retry Logic</strong> – Automatic retry attempts for failed deliveries</li>
        <li><strong>Timeout Settings</strong> – Maximum time to wait for delivery confirmation</li>
        <li><strong>Status Control</strong> – Enable/disable channels without deleting them</li>
      </ul>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Filters
    const channelTypeFilter = document.getElementById('channel_type');
    const statusFilter = document.getElementById('status');
    const applyBtn = document.getElementById('applyFiltersBtn');

    function applyFilters() {
      const params = new URLSearchParams(window.location.search);
      const type = channelTypeFilter.value;
      const status = statusFilter.value;

      type ? params.set('channel_type', type) : params.delete('channel_type');
      status ? params.set('status', status) : params.delete('status');

      window.location.search = params.toString();
    }
    applyBtn.addEventListener('click', applyFilters);

    // Action handlers with SweetAlert2
    function toast(icon, title, timer=30000) {
      Swal.fire({
        toast: true,
        position: 'bottom-end',
        showConfirmButton: false,
        timer: timer,
        timerProgressBar: true,
        icon: icon,
        title: title
      });
    }

    document.querySelectorAll('[data-action="delete"]').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.preventDefault();
        const id = btn.dataset.id;

        Swal.fire({
          icon: 'warning',
          title: 'Delete channel?',
          text: 'This action cannot be undone.',
          showCancelButton: true,
          confirmButtonText: 'Delete',
          cancelButtonText: 'Cancel',
          confirmButtonColor: '#dc3545'
        }).then((res) => {
          if (res.isConfirmed) {
            // TODO: perform deletion via fetch/HTMX
            toast('success', 'Channel deleted');
          }
        });
      });
    });

    document.querySelectorAll('[data-action="toggle"]').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.preventDefault();
        const id = btn.dataset.id;
        const state = btn.dataset.state; // enable | disable
        const enable = state === 'enable';

        Swal.fire({
          icon: enable ? 'question' : 'warning',
          title: enable ? 'Enable channel?' : 'Disable channel?',
          showCancelButton: true,
          confirmButtonText: enable ? 'Enable' : 'Disable',
          cancelButtonText: 'Cancel',
          confirmButtonColor: enable ? '#198754' : '#ffc107',
          confirmButtonTextColor: '#000'
        }).then((res) => {
          if (res.isConfirmed) {
            // TODO: perform toggle via fetch/HTMX
            toast('success', enable ? 'Channel enabled' : 'Channel disabled');
          }
        });
      });
    });

    document.querySelectorAll('[data-action="test"]').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.preventDefault();
        const id = btn.dataset.id;

        // Simulate async test
        Swal.fire({
          title: 'Testing channel…',
          text: 'Sending a test notification',
          allowOutsideClick: false,
          showConfirmButton: false,
          didOpen: () => { Swal.showLoading(); }
        });

        // TODO: replace with real request
        setTimeout(() => {
          Swal.close();
          toast('success', 'Test notification sent');
        }, 1200);
      });
    });
  });
</script>
{% endblock %}