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

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

{% block page_title %}
<i class="fas fa-broadcast-tower text-primary me-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">
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
<style>
    @keyframes dashboard-fade-in {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .dashboard-fade-in {
        animation: dashboard-fade-in 0.6s ease-out forwards;
    }
    
    .config-card {
        background: linear-gradient(135deg, #e3f2fd 0%, #e8eaf6 100%);
        border: 1px solid #bbdefb;
        transition: all 0.2s ease;
    }
    
    .config-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .config-card-alt {
        background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
        border: 1px solid #c8e6c9;
        transition: all 0.2s ease;
    }
    
    .config-card-alt:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .field-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #6c757d;
        font-size: 0.875rem;
    }
    
    .input-with-icon {
        padding-left: 2.5rem;
    }
</style>
{% endblock %}

{% block content %} 
<div class="container-fluid">
    <!-- Enhanced Header -->
    <div class="mb-4">
        <div class="card shadow-sm border-0 dashboard-fade-in">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <div class="p-3 bg-primary bg-opacity-10 rounded me-3">
                            <i class="fas fa-broadcast-tower text-primary fs-4"></i>
                        </div>
                        <div>
                            <h1 class="h3 fw-bold text-dark mb-1">
                                {% if form.instance.pk %}
                                    <i class="fas fa-edit text-primary me-2"></i>Edit Channel
                                {% else %}
                                    <i class="fas fa-plus-circle text-success me-2"></i>Create Channel
                                {% endif %}
                            </h1>
                            <p class="text-muted mb-0">
                                {% if form.instance.pk %}
                                    Update channel configuration and streaming parameters
                                {% else %}
                                    Configure a new streaming channel for HLS capture
                                {% endif %}
                            </p>
                        </div>
                    </div>
                    <div>
                        <a href="{% url 'streams:channel_list' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>
                            Back to Channels
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Info Panel -->
    <div class="alert alert-info border-0 shadow-sm mb-4 dashboard-fade-in" style="animation-delay: 0.1s; background: linear-gradient(135deg, #e3f2fd 0%, #e8eaf6 100%);">
        <div class="d-flex align-items-start">
            <div class="flex-shrink-0">
                <div class="p-2 bg-primary bg-opacity-25 rounded me-3">
                    <i class="fas fa-info-circle text-primary"></i>
                </div>
            </div>
            <div>
                <h5 class="fw-semibold text-primary mb-2">Channel Configuration Guidelines</h5>
                <div class="text-primary">
                    <p class="d-flex align-items-center mb-2"><i class="fas fa-check-circle text-success me-2"></i>Configure your streaming channel with HLS source URL and capture parameters</p>
                    <p class="d-flex align-items-center mb-2"><i class="fas fa-check-circle text-success me-2"></i>Ensure the HLS URL is accessible and ends with .m3u8</p>
                    <p class="d-flex align-items-center mb-0"><i class="fas fa-check-circle text-success me-2"></i>Test your configuration before saving to avoid streaming issues</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Form -->
    <div class="card shadow border-0 dashboard-fade-in" style="animation-delay: 0.2s;">
        <div class="card-header bg-light border-bottom">
            <h3 class="h5 fw-semibold text-dark d-flex align-items-center mb-1">
                <i class="fas fa-cogs text-primary me-3"></i>
                Channel Settings
            </h3>
            <p class="text-muted mb-0 small">Configure your streaming channel parameters</p>
        </div>
        
        <form method="post" class="card-body p-4">
            {% csrf_token %}
            
            <!-- Basic Information Section -->
            <div class="bg-light rounded p-4 mb-4">
                <h4 class="h6 fw-semibold text-dark mb-3 d-flex align-items-center">
                    <i class="fas fa-info-circle text-primary me-3"></i>
                    Basic Information
                </h4>
                
                <div class="row g-3">
                    <!-- Channel Name -->
                    <div class="col-lg-6">
                        <label for="{{ form.name.id_for_label }}" class="form-label fw-medium">
                            <i class="fas fa-tag text-primary me-2"></i>
                            Channel Name
                            <span class="text-danger ms-1">*</span>
                        </label>
                        <div class="position-relative">
                            <div class="field-icon">
                                <i class="fas fa-broadcast-tower"></i>
                            </div>
                            {{ form.name|add_class:"form-control input-with-icon" }}
                        </div>
                        {% if form.name.errors %}
                            <div class="mt-2 d-flex align-items-center small text-danger">
                                <i class="fas fa-exclamation-circle me-1"></i>
                                {{ form.name.errors.0 }}
                            </div>
                        {% endif %}
                        <div class="form-text d-flex align-items-center">
                            <i class="fas fa-magic text-primary me-2"></i>
                            URL slug will be automatically generated from the channel name
                        </div>
                    </div>

                    <!-- HLS URL -->
                    <div class="col-lg-6">
                        <label for="{{ form.hls_url.id_for_label }}" class="form-label fw-medium">
                            <i class="fas fa-link text-success me-2"></i>
                            HLS Stream URL
                            <span class="text-danger ms-1">*</span>
                        </label>
                        <div class="position-relative">
                            <div class="field-icon">
                                <i class="fas fa-globe"></i>
                            </div>
                            {{ form.hls_url|add_class:"form-control input-with-icon" }}
                        </div>
                        {% if form.hls_url.errors %}
                            <div class="mt-2 d-flex align-items-center small text-danger">
                                <i class="fas fa-exclamation-circle me-1"></i>
                                {{ form.hls_url.errors.0 }}
                            </div>
                        {% endif %}
                        <div class="form-text">{{ form.hls_url.help_text }}</div>
                    </div>
                </div>

                <!-- Description -->
                <div class="mt-3">
                    <label for="{{ form.description.id_for_label }}" class="form-label fw-medium">
                        <i class="fas fa-align-left text-info me-2"></i>
                        Description
                    </label>
                    {{ form.description|add_class:"form-control" }}
                    {% if form.description.errors %}
                        <div class="mt-2 d-flex align-items-center small text-danger">
                            <i class="fas fa-exclamation-circle me-1"></i>
                            {{ form.description.errors.0 }}
                        </div>
                    {% endif %}
                    <div class="form-text">Optional description of the channel content</div>
                </div>
            </div>

            <!-- Channel Status Section -->
            <div class="border-top pt-4 mt-4">
                <h4 class="h6 fw-semibold text-dark mb-3 d-flex align-items-center">
                    <i class="fas fa-toggle-on text-success me-3"></i>
                    Channel Status
                </h4>
                
                <div class="config-card-alt rounded p-4">
                    <div class="d-flex align-items-center">
                        <div class="form-check">
                            {{ form.is_active|add_class:"form-check-input" }}
                        </div>
                        <div class="ms-3">
                            <label for="{{ form.is_active.id_for_label }}" class="form-check-label fw-medium d-flex align-items-center">
                                <i class="fas fa-power-off text-success me-2"></i>
                                Active Channel
                            </label>
                            <div class="form-text">Enable this channel for streaming and processing</div>
                            {% if form.is_active.errors %}
                                <div class="mt-2 d-flex align-items-center small text-danger">
                                    <i class="fas fa-exclamation-circle me-1"></i>
                                    {{ form.is_active.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <!-- Hidden output directory field -->
                {{ form.output_directory }}
            </div>

            <!-- HLS Configuration Section -->
            <div class="border-top pt-4 mt-4">
                <h4 class="h6 fw-semibold text-dark mb-3 d-flex align-items-center">
                    <i class="fas fa-video text-danger me-3"></i>
                    HLS Configuration
                </h4>
                
                <div class="config-card rounded p-4">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="{{ form.segment_duration.id_for_label }}" class="form-label fw-medium">
                                <i class="fas fa-clock text-primary me-2"></i>
                                Segment Duration (seconds)
                            </label>
                            <div class="position-relative">
                                <div class="field-icon">
                                    <i class="fas fa-stopwatch"></i>
                                </div>
                                {{ form.segment_duration|add_class:"form-control input-with-icon" }}
                            </div>
                            {% if form.segment_duration.errors %}
                                <div class="mt-2 d-flex align-items-center small text-danger">
                                    <i class="fas fa-exclamation-circle me-1"></i>
                                    {{ form.segment_duration.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text">{{ form.segment_duration.help_text }}</div>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="{{ form.max_segments.id_for_label }}" class="form-label fw-medium">
                                <i class="fas fa-list-ol text-info me-2"></i>
                                Maximum Segments
                            </label>
                            <div class="position-relative">
                                <div class="field-icon">
                                    <i class="fas fa-hashtag"></i>
                                </div>
                                {{ form.max_segments|add_class:"form-control input-with-icon" }}
                            </div>
                            {% if form.max_segments.errors %}
                                <div class="mt-2 d-flex align-items-center small text-danger">
                                    <i class="fas fa-exclamation-circle me-1"></i>
                                    {{ form.max_segments.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text">{{ form.max_segments.help_text }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Retry Configuration Section -->
            <div class="border-top pt-4 mt-4">
                <h4 class="h6 fw-semibold text-dark mb-3 d-flex align-items-center">
                    <i class="fas fa-sync-alt text-warning me-3"></i>
                    Retry Configuration
                </h4>
                
                <div class="config-card rounded p-4">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="{{ form.retry_attempts.id_for_label }}" class="form-label fw-medium">
                                <i class="fas fa-repeat text-success me-2"></i>
                                Retry Attempts
                            </label>
                            <div class="position-relative">
                                <div class="field-icon">
                                    <i class="fas fa-redo-alt"></i>
                                </div>
                                {{ form.retry_attempts|add_class:"form-control input-with-icon" }}
                            </div>
                            {% if form.retry_attempts.errors %}
                                <div class="mt-2 d-flex align-items-center small text-danger">
                                    <i class="fas fa-exclamation-circle me-1"></i>
                                    {{ form.retry_attempts.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text">{{ form.retry_attempts.help_text }}</div>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="{{ form.retry_interval.id_for_label }}" class="form-label fw-medium">
                                <i class="fas fa-hourglass-half text-primary me-2"></i>
                                Retry Interval (seconds)
                            </label>
                            <div class="position-relative">
                                <div class="field-icon">
                                    <i class="fas fa-clock"></i>
                                </div>
                                {{ form.retry_interval|add_class:"form-control input-with-icon" }}
                            </div>
                            {% if form.retry_interval.errors %}
                                <div class="mt-2 d-flex align-items-center small text-danger">
                                    <i class="fas fa-exclamation-circle me-1"></i>
                                    {{ form.retry_interval.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text">{{ form.retry_interval.help_text }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Enhanced Form Actions -->
            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-3 pt-4 border-top mt-4">
                <div class="d-flex gap-2">
                    {% if form.instance.pk %} 
                        <button type="button" onclick="testChannel()" class="btn btn-outline-warning d-flex align-items-center">
                            <i class="fas fa-flask me-2"></i>
                            Test Channel
                        </button>
                    {% endif %}
                </div>
                
                <div class="d-flex gap-2">
                    <a href="{% url 'streams:channel_list' %}" class="btn btn-outline-secondary d-flex align-items-center">
                        <i class="fas fa-times me-2"></i>
                        Cancel
                    </a>
                    <button type="submit" class="btn btn-primary d-flex align-items-center">
                        <i class="fas fa-save me-2"></i>
                        {% if form.instance.pk %}Update Channel{% else %}Create Channel{% endif %}
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Enhanced Configuration Examples -->
    <div class="mt-4 card shadow border-0 dashboard-fade-in" style="animation-delay: 0.3s;">
        <div class="card-header bg-light border-bottom">
            <h3 class="h5 fw-semibold text-dark d-flex align-items-center mb-1">
                <i class="fas fa-lightbulb text-warning me-3"></i>
                Configuration Examples
            </h3>
            <p class="text-muted mb-0 small">Pre-configured settings for common use cases</p>
        </div>
        <div class="card-body p-4">
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="config-card rounded p-4">
                        <div class="d-flex align-items-center mb-3">
                            <div class="p-2 bg-primary bg-opacity-10 rounded me-3">
                                <i class="fas fa-cog text-primary"></i>
                            </div>
                            <h4 class="h6 fw-semibold text-dark mb-0">Standard Configuration</h4>
                        </div>
                        <div class="row g-2">
                            <div class="col-6">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="small text-muted">Segment Duration:</span>
                                    <span class="small fw-medium text-primary">6 seconds</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="small text-muted">Max Segments:</span>
                                    <span class="small fw-medium text-primary">10</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="small text-muted">Retry Attempts:</span>
                                    <span class="small fw-medium text-primary">5</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="small text-muted">Retry Interval:</span>
                                    <span class="small fw-medium text-primary">10 seconds</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3 p-3 bg-primary bg-opacity-10 rounded">
                            <p class="small text-primary mb-0">
                                <i class="fas fa-info-circle me-2"></i>
                                Balanced configuration for most streams
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="config-card-alt rounded p-4">
                        <div class="d-flex align-items-center mb-3">
                            <div class="p-2 bg-success bg-opacity-10 rounded me-3">
                                <i class="fas fa-tachometer-alt text-success"></i>
                            </div>
                            <h4 class="h6 fw-semibold text-dark mb-0">Low Latency Configuration</h4>
                        </div>
                        <div class="row g-2">
                            <div class="col-6">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="small text-muted">Segment Duration:</span>
                                    <span class="small fw-medium text-success">2 seconds</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="small text-muted">Max Segments:</span>
                                    <span class="small fw-medium text-success">5</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="small text-muted">Retry Attempts:</span>
                                    <span class="small fw-medium text-success">3</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="small text-muted">Retry Interval:</span>
                                    <span class="small fw-medium text-success">5 seconds</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3 p-3 bg-success bg-opacity-10 rounded">
                            <p class="small text-success mb-0">
                                <i class="fas fa-rocket me-2"></i>
                                Optimized for minimal delay
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-4 p-4 bg-warning bg-opacity-10 border border-warning rounded">
                <div class="d-flex align-items-start">
                    <div class="flex-shrink-0">
                        <div class="p-2 bg-warning bg-opacity-25 rounded me-3">
                            <i class="fas fa-exclamation-triangle text-warning"></i>
                        </div>
                    </div>
                    <div>
                        <h4 class="h6 fw-semibold text-warning mb-3">Important Notes</h4>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="d-flex flex-column gap-2">
                                    <p class="small text-warning d-flex align-items-center mb-0">
                                        <i class="fas fa-check-circle text-success me-2"></i>
                                        HLS URL must be accessible and return a valid .m3u8 playlist
                                    </p>
                                    <p class="small text-warning d-flex align-items-center mb-0">
                                        <i class="fas fa-check-circle text-success me-2"></i>
                                        Lower segment duration reduces latency but increases processing overhead
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex flex-column gap-2">
                                    <p class="small text-warning d-flex align-items-center mb-0">
                                        <i class="fas fa-check-circle text-success me-2"></i>
                                        Higher retry attempts improve reliability but may delay error detection
                                    </p>
                                    <p class="small text-warning d-flex align-items-center mb-0">
                                        <i class="fas fa-check-circle text-success me-2"></i>
                                        Output directory must be writable by the application
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 

<script>
// Ensure output directory field has a value on form load
document.addEventListener('DOMContentLoaded', function() {
    const outputDirField = document.querySelector('input[name="output_directory"]');
    if (outputDirField && !outputDirField.value) {
        outputDirField.value = '/app/media/streams/temp';
    }
});

// Delete confirmation
function confirmDelete() {
    if (confirm('Are you sure you want to delete this channel? This action cannot be undone.')) {
        // Add delete logic here - URL pattern needs to be implemented
        alert('Delete functionality will be implemented soon.');
    }
}

// Test channel functionality
function testChannel() {
    const hlsUrl = document.querySelector('input[name="hls_url"]').value;
    if (!hlsUrl) {
        alert('Please enter an HLS URL first.');
        return;
    }
    
    // Add test logic here
    alert('Testing channel connectivity... (Feature coming soon)');
}

// Form validation enhancement
const form = document.querySelector('form');
if (form) {
    form.addEventListener('submit', function(e) {
        const requiredFields = form.querySelectorAll('input[required], select[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 %}