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

{% block title %}
{% if form.instance.pk %}Edit Notification Channel{% else %}Create Notification Channel{% endif %} - Stream Processor
{% endblock %}

{% block page_title %}
<i class="fas fa-bell text-blue-600 mr-2"></i>
{% if form.instance.pk %}Edit Channel{% else %}Create Channel{% endif %}
{% endblock %}

{% block extra_css %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
    .form-card {
        @apply bg-white border rounded;
    }
    .form-section {
        @apply p-6 space-y-4;
    }
    .form-header {
        @apply px-6 py-4 bg-gray-50 border-b;
    }
    .input-group {
        @apply space-y-2;
    }
    .form-input {
        @apply w-full px-3 py-2 border rounded;
    }
    .form-select {
        @apply w-full px-3 py-2 border rounded bg-white;
    }
    .info-panel {
        @apply bg-blue-50 border rounded p-4;
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Enhanced Header -->
        <div class="mb-8 text-center">
            <div class="flex justify-center mb-4">
                <div class="w-12 h-12 bg-blue-600 rounded flex items-center justify-center">
                    <i class="fas fa-bell text-white"></i>
                </div>
            </div>
            <h1 class="text-2xl mb-3">
                {% if form.instance.pk %}
                    Edit Notification Channel
                {% else %}
                    Create New Notification Channel
                {% endif %}
            </h1>
            <p class="text-gray-600 mb-4">
                {% if form.instance.pk %}
                    Update the configuration for your notification channel to ensure optimal delivery performance
                {% else %}
                    Set up a new channel to receive real-time notifications, alerts, and system updates
                {% endif %}
            </p>
            <div class="flex justify-center">
                <a href="{% url 'notifications:channel_list' %}" class="px-4 py-2 border rounded text-sm text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Channels
                </a>
            </div>
        </div>

        <!-- Enhanced Info Panel -->
        <div class="info-panel mb-8">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-500 rounded flex items-center justify-center">
                        <i class="fas fa-lightbulb text-white"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg text-blue-900 mb-3">Channel Configuration Guidelines</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-800">
                        <div class="space-y-2">
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-blue-600 mr-2"></i>
                                <span>Choose a descriptive, memorable name</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-blue-600 mr-2"></i>
                                <span>Select the appropriate delivery method</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-blue-600 mr-2"></i>
                                <span>Configure rate limits appropriately</span>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-blue-600 mr-2"></i>
                                <span>Set optimal retry attempts</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-blue-600 mr-2"></i>
                                <span>Test configuration before activation</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-blue-600 mr-2"></i>
                                <span>Monitor delivery performance</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Enhanced Form -->
        <div class="form-card">
            <div class="form-header">
                <div class="flex items-center">
                    <i class="fas fa-cog text-gray-600 mr-3 text-xl"></i>
                    <h2 class="text-xl">Channel Configuration</h2>
                </div>
                <p class="mt-2 text-gray-600">Configure the basic settings and delivery parameters for your notification channel</p>
            </div>
            <form method="post" class="form-section">
                {% csrf_token %}
                
                <!-- Display form errors -->
                {% if form.non_field_errors %}
                    <div class="mb-6 bg-red-50 border border-red-200 rounded-xl p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-exclamation-circle text-red-400"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-red-800">Please correct the following errors:</h3>
                                <div class="mt-2 text-sm text-red-700">
                                    {{ form.non_field_errors }}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}

                <!-- Basic Information Section -->
                <div class="bg-gray-50 rounded-xl p-6 mb-6">
                    <h3 class="text-lg mb-4 flex items-center">
                        <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                        Basic Information
                    </h3>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div class="lg:col-span-2 input-group">
                            <label for="{{ form.name.id_for_label }}" class="block text-sm text-gray-700">
                                <i class="fas fa-tag mr-1 text-gray-500"></i>
                                {{ form.name.label }}
                                {% if form.name.field.required %}<span class="text-red-500 ml-1">*</span>{% endif %}
                            </label>
                            <input type="text" name="{{ form.name.name }}" id="{{ form.name.id_for_label }}" 
                                   value="{{ form.name.value|default:'' }}" 
                                   class="form-input" 
                                   placeholder="e.g., Production Alerts, System Notifications">
                            {% if form.name.errors %}
                                <p class="text-sm text-red-600 flex items-center">
                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                    {{ form.name.errors.0 }}
                                </p>
                            {% endif %}
                            <p class="text-sm text-gray-500">A descriptive name that identifies this channel's purpose</p>
                        </div>
                        
                        <div class="input-group">
                            <label for="{{ form.channel_type.id_for_label }}" class="block text-sm text-gray-700">
                                <i class="fas fa-layer-group mr-1 text-gray-500"></i>
                                {{ form.channel_type.label }}
                                {% if form.channel_type.field.required %}<span class="text-red-500 ml-1">*</span>{% endif %}
                            </label>
                            <select name="{{ form.channel_type.name }}" id="{{ form.channel_type.id_for_label }}" class="form-select">
                                <option value="">Select a channel type...</option>
                                <option value="telegram" {% if form.channel_type.value == 'telegram' %}selected{% endif %}>📱 Telegram</option>
                                <option value="email" {% if form.channel_type.value == 'email' %}selected{% endif %}>📧 Email</option>
                                <option value="webhook" {% if form.channel_type.value == 'webhook' %}selected{% endif %}>🔗 Webhook</option>
                                <option value="slack" {% if form.channel_type.value == 'slack' %}selected{% endif %}>💬 Slack</option>
                                <option value="discord" {% if form.channel_type.value == 'discord' %}selected{% endif %}>🎮 Discord</option>
                                <option value="sms" {% if form.channel_type.value == 'sms' %}selected{% endif %}>📱 SMS</option>
                            </select>
                            {% if form.channel_type.errors %}
                                <p class="text-sm text-red-600 flex items-center">
                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                    {{ form.channel_type.errors.0 }}
                                </p>
                            {% endif %}
                            <p class="text-sm text-gray-500">The delivery method for notifications sent through this channel</p>
                        </div>

                        <!-- Is Active -->
                        <div class="flex items-start">
                            <div class="flex items-center h-5 mt-1">
                                <input type="checkbox" name="{{ form.is_active.name }}" id="{{ form.is_active.id_for_label }}" 
                                       {% if form.is_active.value %}checked{% endif %}
                                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            </div>
                            <div class="ml-3">
                                <label for="{{ form.is_active.id_for_label }}" class="text-sm text-gray-700">
                                    <i class="fas fa-toggle-on mr-1 text-gray-500"></i>
                                    {{ form.is_active.label }}
                                </label>
                                <p class="text-sm text-gray-500">Enable this channel to start receiving notifications</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Configuration Section -->
                <div class="bg-gray-50 rounded-xl p-6 mb-6">
                    <h3 class="text-lg mb-4 flex items-center">
                        <i class="fas fa-cogs text-blue-600 mr-2"></i>
                        Channel Configuration
                    </h3>
                    <div class="input-group">
                        <label for="{{ form.configuration.id_for_label }}" class="block text-sm font-semibold text-gray-700">
                            <i class="fas fa-code mr-1 text-gray-500"></i>
                            {{ form.configuration.label }}
                            {% if form.configuration.field.required %}<span class="text-red-500 ml-1">*</span>{% endif %}
                        </label>
                        <textarea name="{{ form.configuration.name }}" id="{{ form.configuration.id_for_label }}" 
                                  rows="8" class="form-input font-mono text-sm" 
                                  placeholder="Enter JSON configuration...">{{ form.configuration.value|default:'' }}</textarea>
                        {% if form.configuration.errors %}
                            <p class="text-sm text-red-600 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                {{ form.configuration.errors.0 }}
                            </p>
                        {% endif %}
                        <p class="text-sm text-gray-500">JSON configuration specific to the selected channel type. See examples below.</p>
                    </div>
                </div>

                <!-- Delivery Settings Section -->
                <div class="bg-gray-50 rounded-xl p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-shipping-fast text-blue-600 mr-2"></i>
                        Delivery Settings
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <!-- Rate Limit -->
                        <div class="input-group">
                            <label for="{{ form.rate_limit.id_for_label }}" class="block text-sm font-semibold text-gray-700">
                                <i class="fas fa-tachometer-alt mr-1 text-gray-500"></i>
                                {{ form.rate_limit.label }}
                                {% if form.rate_limit.field.required %}<span class="text-red-500 ml-1">*</span>{% endif %}
                            </label>
                            <input type="number" name="{{ form.rate_limit.name }}" id="{{ form.rate_limit.id_for_label }}" 
                                   value="{{ form.rate_limit.value|default:'' }}" 
                                   class="form-input" 
                                   placeholder="10" min="1" max="1000">
                            {% if form.rate_limit.errors %}
                                <p class="text-sm text-red-600 flex items-center">
                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                    {{ form.rate_limit.errors.0 }}
                                </p>
                            {% endif %}
                            <p class="text-sm text-gray-500">Maximum notifications per minute</p>
                        </div>

                        <!-- Retry Attempts -->
                        <div class="input-group">
                            <label for="{{ form.retry_attempts.id_for_label }}" class="block text-sm font-semibold text-gray-700">
                                <i class="fas fa-redo mr-1 text-gray-500"></i>
                                {{ form.retry_attempts.label }}
                                {% if form.retry_attempts.field.required %}<span class="text-red-500 ml-1">*</span>{% endif %}
                            </label>
                            <input type="number" name="{{ form.retry_attempts.name }}" id="{{ form.retry_attempts.id_for_label }}" 
                                   value="{{ form.retry_attempts.value|default:'' }}" 
                                   class="form-input" 
                                   placeholder="3" min="0" max="10">
                            {% if form.retry_attempts.errors %}
                                <p class="text-sm text-red-600 flex items-center">
                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                    {{ form.retry_attempts.errors.0 }}
                                </p>
                            {% endif %}
                            <p class="text-sm text-gray-500">Number of retry attempts on failure</p>
                        </div>

                        <!-- Timeout Seconds -->
                        <div class="input-group">
                            <label for="{{ form.timeout_seconds.id_for_label }}" class="block text-sm font-semibold text-gray-700">
                                <i class="fas fa-clock mr-1 text-gray-500"></i>
                                {{ form.timeout_seconds.label }}
                                {% if form.timeout_seconds.field.required %}<span class="text-red-500 ml-1">*</span>{% endif %}
                            </label>
                            <input type="number" name="{{ form.timeout_seconds.name }}" id="{{ form.timeout_seconds.id_for_label }}" 
                                   value="{{ form.timeout_seconds.value|default:'' }}" 
                                   class="form-input" 
                                   placeholder="30" min="1" max="300">
                            {% if form.timeout_seconds.errors %}
                                <p class="text-sm text-red-600 flex items-center">
                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                    {{ form.timeout_seconds.errors.0 }}
                                </p>
                            {% endif %}
                            <p class="text-sm text-gray-500">Request timeout in seconds</p>
                        </div>
                    </div>
                </div>

                <!-- Enhanced Form Actions -->
                <div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4 pt-8 border-t border-gray-200">
                    <div class="flex items-center space-x-3">
                        {% if form.instance.pk %}
                            <button type="button" class="inline-flex items-center px-4 py-2 border border-red-300 rounded-lg text-sm font-medium text-red-700 bg-white hover:bg-red-50 transition-all duration-200">
                                <i class="fas fa-trash mr-2"></i>
                                Delete Channel
                            </button>
                            <button type="button" class="inline-flex items-center px-4 py-2 border border-blue-300 rounded-lg text-sm font-medium text-blue-700 bg-white hover:bg-blue-50 transition-all duration-200">
                                <i class="fas fa-paper-plane mr-2"></i>
                                Test Channel
                            </button>
                        {% endif %}
                    </div>
                    <div class="flex items-center space-x-3">
                        <a href="{% url 'notifications:channel_list' %}" class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-all duration-200 shadow-sm">
                            <i class="fas fa-times mr-2"></i>
                            Cancel
                        </a>
                        <button type="submit" class="inline-flex items-center px-8 py-3 border border-transparent rounded-lg text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-lg transition-all duration-200 transform hover:scale-105">
                            <i class="fas fa-save mr-2"></i>
                            {% if form.instance.pk %}Update Channel{% else %}Create Channel{% endif %}
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Configuration Examples -->
        <div class="mt-8 bg-white shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Configuration Examples</h3>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Telegram Configuration -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 flex items-center">
                            <i class="fab fa-telegram-plane mr-2 text-blue-500"></i>
                            Telegram Configuration
                        </h4>
                        <pre class="text-sm text-gray-600 mt-2 bg-gray-50 p-3 rounded overflow-x-auto"><code>{
  "bot_token": "123456789:ABCdefGHIjklMNOpqrsTUVwxyz",
  "chat_id": "-1001234567890"
}</code></pre>
                    </div>

                    <!-- Email Configuration -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 flex items-center">
                            <i class="fas fa-envelope mr-2 text-green-500"></i>
                            Email Configuration
                        </h4>
                        <pre class="text-sm text-gray-600 mt-2 bg-gray-50 p-3 rounded overflow-x-auto"><code>{
  "recipients": ["admin@example.com", "ops@example.com"],
  "smtp_host": "smtp.gmail.com",
  "smtp_port": 587,
  "username": "notifications@example.com",
  "password": "app_password",
  "use_tls": true
}</code></pre>
                    </div>

                    <!-- Webhook Configuration -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 flex items-center">
                            <i class="fas fa-link mr-2 text-purple-500"></i>
                            Webhook Configuration
                        </h4>
                        <pre class="text-sm text-gray-600 mt-2 bg-gray-50 p-3 rounded overflow-x-auto"><code>{
  "url": "https://api.example.com/webhook",
  "method": "POST",
  "headers": {
    "Authorization": "Bearer your-token",
    "Content-Type": "application/json"
  }
}</code></pre>
                    </div>

                    <!-- Slack Configuration -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h4 class="font-medium text-gray-900 flex items-center">
                            <i class="fab fa-slack mr-2 text-purple-600"></i>
                            Slack Configuration
                        </h4>
                        <pre class="text-sm text-gray-600 mt-2 bg-gray-50 p-3 rounded overflow-x-auto"><code>{
  "webhook_url": "https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX",
  "channel": "#alerts",
  "username": "StreamProcessor"
}</code></pre>
                    </div>
                </div>

                <!-- Configuration Tips -->
                <div class="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-lightbulb text-yellow-400"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-yellow-800">Configuration Tips</h3>
                            <div class="mt-2 text-sm text-yellow-700">
                                <ul class="list-disc list-inside space-y-1">
                                    <li>Always test your configuration after creating a channel</li>
                                    <li>Use environment variables for sensitive data like API keys</li>
                                    <li>Set appropriate rate limits to avoid overwhelming external services</li>
                                    <li>Configure retry attempts based on the reliability of your delivery method</li>
                                    <li>Monitor channel performance and adjust timeout settings as needed</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Dynamic configuration examples based on channel type
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 channelType = this.value;
            let exampleConfig = '';
            
            switch(channelType) {
                case 'telegram':
                    exampleConfig = JSON.stringify({
                        "bot_token": "123456789:ABCdefGHIjklMNOpqrsTUVwxyz",
                        "chat_id": "-1001234567890"
                    }, null, 2);
                    break;
                case 'email':
                    exampleConfig = JSON.stringify({
                        "recipients": ["admin@example.com"],
                        "smtp_host": "smtp.gmail.com",
                        "smtp_port": 587,
                        "username": "notifications@example.com",
                        "password": "app_password",
                        "use_tls": true
                    }, null, 2);
                    break;
                case 'webhook':
                    exampleConfig = JSON.stringify({
                        "url": "https://api.example.com/webhook",
                        "method": "POST",
                        "headers": {
                            "Authorization": "Bearer your-token",
                            "Content-Type": "application/json"
                        }
                    }, null, 2);
                    break;
                case 'slack':
                    exampleConfig = JSON.stringify({
                        "webhook_url": "https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX",
                        "channel": "#alerts",
                        "username": "StreamProcessor"
                    }, null, 2);
                    break;
                case 'discord':
                    exampleConfig = JSON.stringify({
                        "webhook_url": "https://discord.com/api/webhooks/123456789/abcdefghijklmnopqrstuvwxyz",
                        "username": "StreamProcessor"
                    }, null, 2);
                    break;
                case 'sms':
                    exampleConfig = JSON.stringify({
                        "api_key": "your-sms-api-key",
                        "phone_numbers": ["+1234567890"],
                        "sender_id": "StreamProcessor"
                    }, null, 2);
                    break;
            }
            
            if (exampleConfig && !configTextarea.value.trim()) {
                configTextarea.value = exampleConfig;
            }
        });
    }
});
</script>
{% endblock %}