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

{% block title %}
    {% if object %}
        Edit Notification Rule - {{ object.name }}
    {% else %}
        Create Notification Rule
    {% endif %}
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                {% if object %}
                    Edit Notification Rule
                {% else %}
                    Create Notification Rule
                {% endif %}
            </h1>
            <p class="mb-0 text-muted">
                {% if object %}
                    Update the notification rule "{{ object.name }}"
                {% else %}
                    Create a new automatic notification rule
                {% endif %}
            </p>
        </div>
        <div>
            <a href="{% url 'notifications:rule_list' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Rules
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Main Form -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Rule Information</h6>
                </div>
                <div class="card-body">
                    <form method="post" id="ruleForm">
                        {% csrf_token %}
                        
                        <!-- Basic Information -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">Basic Information</h6>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="{{ form.name.id_for_label }}" class="form-label">
                                        {{ form.name.label }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    {{ form.name }}
                                    {% if form.name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.name.errors.0 }}
                                        </div>
                                    {% endif %}
                                    <small class="form-text text-muted">{{ form.name.help_text }}</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="{{ form.event_type.id_for_label }}" class="form-label">
                                        {{ form.event_type.label }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    {{ form.event_type }}
                                    {% if form.event_type.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.event_type.errors.0 }}
                                        </div>
                                    {% endif %}
                                    <small class="form-text text-muted">{{ form.event_type.help_text }}</small>
                                </div>
                            </div>
                        </div>

                        <!-- Notification Configuration -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">Notification Configuration</h6>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="{{ form.channel.id_for_label }}" class="form-label">
                                        {{ form.channel.label }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    {{ form.channel }}
                                    {% if form.channel.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.channel.errors.0 }}
                                        </div>
                                    {% endif %}
                                    <small class="form-text text-muted">{{ form.channel.help_text }}</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="{{ form.template.id_for_label }}" class="form-label">
                                        {{ form.template.label }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    {{ form.template }}
                                    {% if form.template.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.template.errors.0 }}
                                        </div>
                                    {% endif %}
                                    <small class="form-text text-muted">{{ form.template.help_text }}</small>
                                </div>
                            </div>
                        </div>

                        <!-- Rule Behavior -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">Rule Behavior</h6>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="{{ form.priority.id_for_label }}" class="form-label">
                                        {{ form.priority.label }}
                                    </label>
                                    {{ form.priority }}
                                    {% if form.priority.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.priority.errors.0 }}
                                        </div>
                                    {% endif %}
                                    <small class="form-text text-muted">{{ form.priority.help_text }}</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="{{ form.throttle_minutes.id_for_label }}" class="form-label">
                                        {{ form.throttle_minutes.label }}
                                    </label>
                                    {{ form.throttle_minutes }}
                                    {% if form.throttle_minutes.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.throttle_minutes.errors.0 }}
                                        </div>
                                    {% endif %}
                                    <small class="form-text text-muted">{{ form.throttle_minutes.help_text }}</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <div class="form-check mt-4">
                                        {{ form.is_active }}
                                        <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                            {{ form.is_active.label }}
                                        </label>
                                    </div>
                                    {% if form.is_active.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.is_active.errors.0 }}
                                        </div>
                                    {% endif %}
                                    <small class="form-text text-muted">{{ form.is_active.help_text }}</small>
                                </div>
                            </div>
                        </div>

                        <!-- Conditions -->
                        {% if form.conditions %}
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">Advanced Conditions</h6>
                                <div class="form-group">
                                    <label for="{{ form.conditions.id_for_label }}" class="form-label">
                                        {{ form.conditions.label }}
                                    </label>
                                    {{ form.conditions }}
                                    {% if form.conditions.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.conditions.errors.0 }}
                                        </div>
                                    {% endif %}
                                    <small class="form-text text-muted">{{ form.conditions.help_text }}</small>
                                </div>
                            </div>
                        </div>
                        {% endif %}

                        <!-- Form Actions -->
                        <div class="row">
                            <div class="col-12">
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <div>
                                        {% if object %}
                                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
                                                <i class="fas fa-trash"></i> Delete Rule
                                            </button>
                                        {% endif %}
                                    </div>
                                    <div>
                                        <a href="{% url 'notifications:rule_list' %}" class="btn btn-secondary me-2">
                                            Cancel
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save"></i>
                                            {% if object %}
                                                Update Rule
                                            {% else %}
                                                Create Rule
                                            {% endif %}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Help Card -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Help & Tips</h6>
                </div>
                <div class="card-body">
                    <h6 class="text-primary">Event Types</h6>
                    <ul class="list-unstyled small mb-3">
                        <li><strong>Jingle Detected:</strong> When a jingle is identified in the stream</li>
                        <li><strong>Ad Break Started:</strong> When an advertisement break begins</li>
                        <li><strong>Ad Break Ended:</strong> When an advertisement break ends</li>
                        <li><strong>Stream Started:</strong> When a stream begins broadcasting</li>
                        <li><strong>Stream Stopped:</strong> When a stream stops broadcasting</li>
                        <li><strong>Stream Error:</strong> When a stream encounters an error</li>
                        <li><strong>High Error Rate:</strong> When error rate exceeds threshold</li>
                        <li><strong>System Startup:</strong> When the system starts up</li>
                        <li><strong>System Shutdown:</strong> When the system shuts down</li>
                    </ul>

                    <h6 class="text-primary">Priority Levels</h6>
                    <ul class="list-unstyled small mb-3">
                        <li><strong>0:</strong> Normal priority (default)</li>
                        <li><strong>1-5:</strong> Medium priority</li>
                        <li><strong>6-10:</strong> High priority</li>
                        <li><strong>10+:</strong> Critical priority</li>
                    </ul>

                    <h6 class="text-primary">Throttling</h6>
                    <p class="small mb-0">
                        Throttling prevents spam by limiting how often the same rule can trigger. 
                        Set to 0 for no throttling, or specify minutes between notifications.
                    </p>
                </div>
            </div>

            <!-- Event Type Examples -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Example Conditions</h6>
                </div>
                <div class="card-body">
                    <div class="small">
                        <h6>Jingle Detection:</h6>
                        <pre class="bg-light p-2 rounded">{"confidence": 0.8}</pre>
                        
                        <h6>Stream Error:</h6>
                        <pre class="bg-light p-2 rounded">{"error_type": "connection"}</pre>
                        
                        <h6>High Error Rate:</h6>
                        <pre class="bg-light p-2 rounded">{"threshold": 10}</pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
{% if object %}
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Delete Notification Rule</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the notification rule "<strong>{{ object.name }}</strong>"?</p>
                <p class="text-danger"><strong>This action cannot be undone.</strong></p>
                <p>This will permanently remove the rule and stop all automatic notifications for this event type.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <form method="post" action="{% url 'notifications:rule_delete' object.pk %}" style="display: inline;">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">Delete Rule</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}

<script>
// Add form validation and dynamic behavior
document.addEventListener('DOMContentLoaded', function() {
    // Add Bootstrap classes to form fields
    const formFields = document.querySelectorAll('#ruleForm select, #ruleForm input[type="text"], #ruleForm input[type="number"], #ruleForm textarea');
    formFields.forEach(field => {
        if (!field.classList.contains('form-control') && !field.classList.contains('form-select')) {
            field.classList.add('form-control');
        }
    });
    
    // Event type change handler for dynamic help
    const eventTypeField = document.querySelector('#id_event_type');
    if (eventTypeField) {
        eventTypeField.addEventListener('change', function() {
            // You can add dynamic help text or condition examples based on event type
            console.log('Event type changed to:', this.value);
        });
    }
    
    // Form validation
    const form = document.querySelector('#ruleForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            // Add any custom validation here
            const requiredFields = form.querySelectorAll('[required]');
            let isValid = true;
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    field.classList.add('is-invalid');
                    isValid = false;
                } else {
                    field.classList.remove('is-invalid');
                }
            });
            
            if (!isValid) {
                e.preventDefault();
                alert('Please fill in all required fields.');
            }
        });
    }
});
</script>
{% endblock %}