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

{% block title %}
  {% if object %}Edit Notification Channel{% else %}Create Notification Channel{% endif %} - Stream Processor
{% endblock %}

{% block content %}
<div class="container-fluid" style="max-width: 900px;">
  <!-- Header -->
  <div class="d-flex align-items-start justify-content-between my-4">
    <div>
      <h1 class="h3 fw-bold mb-1">
        {% if object %}
          <i class="fas fa-edit me-2 text-primary"></i>Edit Notification Channel
        {% else %}
          <i class="fas fa-plus me-2 text-success"></i>Create Notification Channel
        {% endif %}
      </h1>
      <p class="text-muted mb-0">
        {% if object %}
          Update the notification channel configuration and settings.
        {% else %}
          Configure a new notification channel for receiving alerts and updates.
        {% endif %}
      </p>
    </div>
    <div>
      <a href="{% url 'notifications:channel_list' %}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-2"></i>Back to Channels
      </a>
    </div>
  </div>

  <form id="channelForm" method="post">
    {% csrf_token %}

    <!-- Basic Information -->
    <div class="card shadow-sm mb-4">
      <div class="card-header bg-white">
        <h6 class="mb-0">
          <i class="fas fa-info-circle me-2 text-primary"></i>Basic Information
        </h6>
      </div>
      <div class="card-body">
        <!-- Name -->
        <div class="mb-3">
          <label for="{{ form.name.id_for_label }}" class="form-label">
            Channel Name <span class="text-danger">*</span>
          </label>
          {{ form.name }}
          {% if form.name.errors %}
            <div class="invalid-feedback d-block">
              {{ form.name.errors.0 }}
            </div>
          {% endif %}
          <div class="form-text">
            A descriptive name for this notification channel.
          </div>
        </div>

        <!-- Channel Type -->
        <div class="mb-3">
          <label for="{{ form.channel_type.id_for_label }}" class="form-label">
            Channel Type <span class="text-danger">*</span>
          </label>
          {{ form.channel_type }}
          {% if form.channel_type.errors %}
            <div class="invalid-feedback d-block">
              {{ form.channel_type.errors.0 }}
            </div>
          {% endif %}
          <div class="form-text">
            Select the type of notification delivery method.
          </div>
        </div>

        <!-- Active Status -->
        <div class="mb-3">
          <div class="form-check">
            {{ form.is_active }}
            <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
              Active Channel
            </label>
          </div>
          {% if form.is_active.errors %}
            <div class="invalid-feedback d-block">
              {{ form.is_active.errors.0 }}
            </div>
          {% endif %}
          <div class="form-text">
            Enable this channel to receive notifications.
          </div>
        </div>
      </div>
    </div>

    <!-- Configuration -->
    <div class="card shadow-sm mb-4">
      <div class="card-header bg-white">
        <h6 class="mb-0">
          <i class="fas fa-cog me-2 text-primary"></i>Channel Configuration
        </h6>
      </div>
      <div class="card-body">
        <!-- Configuration JSON -->
        <div class="mb-3">
          <label for="{{ form.configuration.id_for_label }}" class="form-label">
            Configuration
          </label>
          {{ form.configuration }}
          {% if form.configuration.errors %}
            <div class="invalid-feedback d-block">
              {{ form.configuration.errors.0 }}
            </div>
          {% endif %}
          <div class="form-text">
            {{ form.configuration.help_text }}
          </div>
        </div>

        <!-- Configuration Examples -->
        <div class="alert alert-info">
          <h6 class="mb-2"><i class="fas fa-lightbulb me-2"></i>Configuration Examples</h6>
          <div class="small">
            <strong>Email:</strong> <code>{"email": "admin@example.com"}</code><br>
            <strong>Webhook:</strong> <code>{"url": "https://api.example.com/webhook", "headers": {"Authorization": "Bearer token"}}</code><br>
            <strong>Slack:</strong> <code>{"webhook_url": "https://hooks.slack.com/services/...", "channel": "#alerts"}</code>
          </div>
        </div>
      </div>
    </div>

    <!-- Advanced Settings -->
    <div class="card shadow-sm mb-4">
      <div class="card-header bg-white">
        <h6 class="mb-0">
          <i class="fas fa-sliders-h me-2 text-primary"></i>Advanced Settings
        </h6>
      </div>
      <div class="card-body">
        <div class="row">
          <!-- Rate Limit -->
          <div class="col-md-4 mb-3">
            <label for="{{ form.rate_limit.id_for_label }}" class="form-label">
              Rate Limit (per minute)
            </label>
            {{ form.rate_limit }}
            {% if form.rate_limit.errors %}
              <div class="invalid-feedback d-block">
                {{ form.rate_limit.errors.0 }}
              </div>
            {% endif %}
            <div class="form-text">
              Maximum notifications per minute.
            </div>
          </div>

          <!-- Retry Attempts -->
          <div class="col-md-4 mb-3">
            <label for="{{ form.retry_attempts.id_for_label }}" class="form-label">
              Retry Attempts
            </label>
            {{ form.retry_attempts }}
            {% if form.retry_attempts.errors %}
              <div class="invalid-feedback d-block">
                {{ form.retry_attempts.errors.0 }}
              </div>
            {% endif %}
            <div class="form-text">
              Number of retry attempts on failure.
            </div>
          </div>

          <!-- Timeout -->
          <div class="col-md-4 mb-3">
            <label for="{{ form.timeout_seconds.id_for_label }}" class="form-label">
              Timeout (seconds)
            </label>
            {{ form.timeout_seconds }}
            {% if form.timeout_seconds.errors %}
              <div class="invalid-feedback d-block">
                {{ form.timeout_seconds.errors.0 }}
              </div>
            {% endif %}
            <div class="form-text">
              Request timeout in seconds.
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Form Actions -->
    <div class="card shadow-sm">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            {% if object %}
              <button type="submit" class="btn btn-primary me-2">
                <i class="fas fa-save me-2"></i>Update Channel
              </button>
            {% else %}
              <button type="submit" class="btn btn-success me-2">
                <i class="fas fa-plus me-2"></i>Create Channel
              </button>
            {% endif %}
            <a href="{% url 'notifications:channel_list' %}" class="btn btn-outline-secondary">
              <i class="fas fa-times me-2"></i>Cancel
            </a>
          </div>
          {% if object %}
            <div>
              <a href="#" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
                <i class="fas fa-trash me-2"></i>Delete Channel
              </a>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </form>

  {% if object %}
    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="deleteModalLabel">
              <i class="fas fa-exclamation-triangle text-danger me-2"></i>Confirm Deletion
            </h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>Are you sure you want to delete the notification channel <strong>"{{ object.name }}"</strong>?</p>
            <p class="text-muted small mb-0">
              This action cannot be undone. All associated notification rules will be affected.
            </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
              <i class="fas fa-times me-2"></i>Cancel
            </button>
            <form method="post" action="{% url 'notifications:channel_delete' object.pk %}" class="d-inline">
              {% csrf_token %}
              <button type="submit" class="btn btn-danger">
                <i class="fas fa-trash me-2"></i>Delete Channel
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
</div>

<script>
// Form validation and dynamic configuration examples
document.addEventListener('DOMContentLoaded', function() {
    const channelTypeSelect = document.getElementById('{{ form.channel_type.id_for_label }}');
    const configTextarea = document.getElementById('{{ form.configuration.id_for_label }}');
    
    if (channelTypeSelect && configTextarea) {
        channelTypeSelect.addEventListener('change', function() {
            const selectedType = this.value;
            let placeholder = 'Enter JSON configuration';
            
            switch(selectedType) {
                case 'email':
                    placeholder = '{"email": "admin@example.com"}';
                    break;
                case 'webhook':
                    placeholder = '{"url": "https://api.example.com/webhook", "headers": {"Authorization": "Bearer token"}}';
                    break;
                case 'slack':
                    placeholder = '{"webhook_url": "https://hooks.slack.com/services/...", "channel": "#alerts"}';
                    break;
            }
            
            configTextarea.placeholder = placeholder;
        });
    }
});
</script>
{% endblock %}