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

{% block title %}{% if template %}Edit VAST Template{% else %}Create VAST Template{% endif %} - Adtlas{% endblock %}

{% block extra_css %}
<!-- INTERNAL Select2 css -->
<link href="{% static 'plugins/select2/css/select2.min.css' %}" rel="stylesheet" />

<!-- INTERNAL File Upload css -->
<link href="{% static 'plugins/fileuploads/css/fileupload.css' %}" rel="stylesheet" type="text/css" />

<!-- INTERNAL Prism css -->
<link href="{% static 'plugins/prism/prism.css' %}" rel="stylesheet" />

<style>
.form-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.form-section h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 15px;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 8px;
}
.xml-editor {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 15px;
    background-color: #f8f9fa;
    min-height: 400px;
    resize: vertical;
}
.template-preview {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
}
.variable-tag {
    display: inline-block;
    background: #e9ecef;
    color: #495057;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    margin: 0.125rem;
    cursor: pointer;
}
.variable-tag:hover {
    background: #6259ca;
    color: white;
}
.validation-result {
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
}
.validation-result.valid {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.validation-result.invalid {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
</style>
{% endblock %}

{% block content %}
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">{% if template %}Edit VAST Template{% else %}Create VAST Template{% endif %}</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
            <li class="breadcrumb-item"><a href="{% url 'vast:template_list' %}">VAST Templates</a></li>
            <li class="breadcrumb-item active" aria-current="page">{% if template %}Edit{% else %}Create{% endif %}</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<form method="post" enctype="multipart/form-data" id="template-form">
    {% csrf_token %}
    
    <div class="row">
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Template Information</h3>
                </div>
                <div class="card-body">
                    <div class="form-section">
                        <h6>Basic Details</h6>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Template Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="name" value="{{ template.name|default:'' }}" required>
                                    <small class="form-text text-muted">Unique name for this VAST template</small>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Version</label>
                                    <select class="form-control select2" name="version">
                                        <option value="2.0" {% if template.version == '2.0' %}selected{% endif %}>VAST 2.0</option>
                                        <option value="3.0" {% if template.version == '3.0' %}selected{% endif %}>VAST 3.0</option>
                                        <option value="4.0" {% if template.version == '4.0' %}selected{% endif %}>VAST 4.0</option>
                                        <option value="4.1" {% if template.version == '4.1' %}selected{% endif %}>VAST 4.1</option>
                                        <option value="4.2" {% if template.version == '4.2' %}selected{% endif %}>VAST 4.2</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Template Type</label>
                                    <select class="form-control select2" name="template_type">
                                        <option value="linear" {% if template.template_type == 'linear' %}selected{% endif %}>Linear</option>
                                        <option value="nonlinear" {% if template.template_type == 'nonlinear' %}selected{% endif %}>Non-Linear</option>
                                        <option value="companion" {% if template.template_type == 'companion' %}selected{% endif %}>Companion</option>
                                        <option value="wrapper" {% if template.template_type == 'wrapper' %}selected{% endif %}>Wrapper</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Status</label>
                                    <select class="form-control select2" name="status">
                                        <option value="active" {% if template.status == 'active' %}selected{% endif %}>Active</option>
                                        <option value="inactive" {% if template.status == 'inactive' %}selected{% endif %}>Inactive</option>
                                        <option value="draft" {% if template.status == 'draft' %}selected{% endif %}>Draft</option>
                                        <option value="testing" {% if template.status == 'testing' %}selected{% endif %}>Testing</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Description</label>
                            <textarea class="form-control" name="description" rows="3" placeholder="Describe this VAST template...">{{ template.description|default:'' }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- VAST XML Content -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">VAST XML Content</h3>
                    <div class="card-options">
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="validateXML()">
                            <i class="fa fa-check"></i> Validate
                        </button>
                        <button type="button" class="btn btn-outline-info btn-sm" onclick="formatXML()">
                            <i class="fa fa-code"></i> Format
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm" onclick="previewTemplate()">
                            <i class="fa fa-eye"></i> Preview
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">XML Content <span class="text-danger">*</span></label>
                        <textarea class="form-control xml-editor" name="xml_content" id="xml-content" required>{{ template.xml_content|default:'' }}</textarea>
                        <div id="validation-result"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <!-- Template Variables -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Available Variables</h3>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">Click on variables to insert them into your template:</p>
                    
                    <div class="mb-3">
                        <h6>Campaign Variables</h6>
                        <span class="variable-tag" onclick="insertVariable('{{CAMPAIGN_ID}}')">{{CAMPAIGN_ID}}</span>
                        <span class="variable-tag" onclick="insertVariable('{{CAMPAIGN_NAME}}')">{{CAMPAIGN_NAME}}</span>
                        <span class="variable-tag" onclick="insertVariable('{{ADVERTISER_ID}}')">{{ADVERTISER_ID}}</span>
                        <span class="variable-tag" onclick="insertVariable('{{ADVERTISER_NAME}}')">{{ADVERTISER_NAME}}</span>
                    </div>
                    
                    <div class="mb-3">
                        <h6>Creative Variables</h6>
                        <span class="variable-tag" onclick="insertVariable('{{CREATIVE_URL}}')">{{CREATIVE_URL}}</span>
                        <span class="variable-tag" onclick="insertVariable('{{CREATIVE_WIDTH}}')">{{CREATIVE_WIDTH}}</span>
                        <span class="variable-tag" onclick="insertVariable('{{CREATIVE_HEIGHT}}')">{{CREATIVE_HEIGHT}}</span>
                        <span class="variable-tag" onclick="insertVariable('{{CREATIVE_DURATION}}')">{{CREATIVE_DURATION}}</span>
                    </div>
                    
                    <div class="mb-3">
                        <h6>Tracking Variables</h6>
                        <span class="variable-tag" onclick="insertVariable('{{IMPRESSION_URL}}')">{{IMPRESSION_URL}}</span>
                        <span class="variable-tag" onclick="insertVariable('{{CLICK_URL}}')">{{CLICK_URL}}</span>
                        <span class="variable-tag" onclick="insertVariable('{{TRACKING_URL}}')">{{TRACKING_URL}}</span>
                        <span class="variable-tag" onclick="insertVariable('{{ERROR_URL}}')">{{ERROR_URL}}</span>
                    </div>
                    
                    <div class="mb-3">
                        <h6>System Variables</h6>
                        <span class="variable-tag" onclick="insertVariable('{{TIMESTAMP}}')">{{TIMESTAMP}}</span>
                        <span class="variable-tag" onclick="insertVariable('{{RANDOM}}')">{{RANDOM}}</span>
                        <span class="variable-tag" onclick="insertVariable('{{USER_IP}}')">{{USER_IP}}</span>
                        <span class="variable-tag" onclick="insertVariable('{{USER_AGENT}}')">{{USER_AGENT}}</span>
                    </div>
                </div>
            </div>
            
            <!-- Template Settings -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Template Settings</h3>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">Default Duration (seconds)</label>
                        <input type="number" class="form-control" name="default_duration" value="{{ template.default_duration|default:30 }}" min="1" max="300">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Skip Offset (seconds)</label>
                        <input type="number" class="form-control" name="skip_offset" value="{{ template.skip_offset|default:5 }}" min="0">
                        <small class="form-text text-muted">0 = no skip button</small>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Priority</label>
                        <select class="form-control" name="priority">
                            <option value="low" {% if template.priority == 'low' %}selected{% endif %}>Low</option>
                            <option value="normal" {% if template.priority == 'normal' %}selected{% endif %}>Normal</option>
                            <option value="high" {% if template.priority == 'high' %}selected{% endif %}>High</option>
                            <option value="urgent" {% if template.priority == 'urgent' %}selected{% endif %}>Urgent</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="enable_tracking" {% if template.enable_tracking %}checked{% endif %}>
                            <label class="form-check-label">Enable Tracking</label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="enable_companion" {% if template.enable_companion %}checked{% endif %}>
                            <label class="form-check-label">Enable Companion Ads</label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="auto_play" {% if template.auto_play %}checked{% endif %}>
                            <label class="form-check-label">Auto Play</label>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Template Preview -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Live Preview</h3>
                </div>
                <div class="card-body">
                    <div class="template-preview" id="template-preview">
                        <p class="text-muted">Preview will appear here when you click "Preview" button</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Form Actions -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <a href="{% url 'vast:template_list' %}" class="btn btn-secondary">
                                <i class="fa fa-arrow-left"></i> Back to Templates
                            </a>
                        </div>
                        <div>
                            <button type="button" class="btn btn-outline-primary" onclick="saveDraft()">
                                <i class="fa fa-save"></i> Save as Draft
                            </button>
                            <button type="button" class="btn btn-info" onclick="testTemplate()">
                                <i class="fa fa-play"></i> Test Template
                            </button>
                            <button type="submit" class="btn btn-success">
                                <i class="fa fa-check"></i> {% if template %}Update Template{% else %}Create Template{% endif %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
{% endblock %}

{% block extra_js %}
<!-- INTERNAL Select2 js -->
<script src="{% static 'plugins/select2/js/select2.full.min.js' %}"></script>

<!-- INTERNAL File Upload js -->
<script src="{% static 'plugins/fileuploads/js/fileupload.js' %}"></script>

<!-- INTERNAL Prism js -->
<script src="{% static 'plugins/prism/prism.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2({
        width: '100%'
    });
    
    // Initialize XML editor with syntax highlighting
    initializeXMLEditor();
    
    // Form validation
    $('#template-form').on('submit', function(e) {
        if (!validateForm()) {
            e.preventDefault();
        }
    });
    
    // Auto-save draft every 2 minutes
    setInterval(function() {
        if ($('#xml-content').val().trim() !== '') {
            saveDraft(true); // Silent save
        }
    }, 120000);
});

function initializeXMLEditor() {
    var xmlContent = document.getElementById('xml-content');
    
    // Add line numbers and syntax highlighting
    xmlContent.addEventListener('input', function() {
        // Real-time validation
        clearTimeout(window.validationTimeout);
        window.validationTimeout = setTimeout(validateXML, 1000);
    });
    
    // Add tab support
    xmlContent.addEventListener('keydown', function(e) {
        if (e.key === 'Tab') {
            e.preventDefault();
            var start = this.selectionStart;
            var end = this.selectionEnd;
            this.value = this.value.substring(0, start) + '    ' + this.value.substring(end);
            this.selectionStart = this.selectionEnd = start + 4;
        }
    });
}

function insertVariable(variable) {
    var xmlContent = document.getElementById('xml-content');
    var start = xmlContent.selectionStart;
    var end = xmlContent.selectionEnd;
    var text = xmlContent.value;
    
    xmlContent.value = text.substring(0, start) + variable + text.substring(end);
    xmlContent.selectionStart = xmlContent.selectionEnd = start + variable.length;
    xmlContent.focus();
}

function validateXML() {
    var xmlContent = $('#xml-content').val();
    var resultDiv = $('#validation-result');
    
    if (!xmlContent.trim()) {
        resultDiv.html('');
        return;
    }
    
    $.ajax({
        url: '/vast/validate-xml/',
        method: 'POST',
        data: {
            'xml_content': xmlContent,
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
        },
        success: function(data) {
            if (data.valid) {
                resultDiv.html('<div class="validation-result valid"><i class="fa fa-check"></i> Valid VAST XML</div>');
            } else {
                resultDiv.html('<div class="validation-result invalid"><i class="fa fa-times"></i> ' + data.errors.join('<br>') + '</div>');
            }
        },
        error: function() {
            resultDiv.html('<div class="validation-result invalid"><i class="fa fa-times"></i> Validation failed</div>');
        }
    });
}

function formatXML() {
    var xmlContent = $('#xml-content').val();
    
    $.ajax({
        url: '/vast/format-xml/',
        method: 'POST',
        data: {
            'xml_content': xmlContent,
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
        },
        success: function(data) {
            if (data.success) {
                $('#xml-content').val(data.formatted_xml);
            } else {
                alert('Failed to format XML: ' + data.error);
            }
        }
    });
}

function previewTemplate() {
    var formData = new FormData($('#template-form')[0]);
    
    $.ajax({
        url: '/vast/preview-template/',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
            if (data.success) {
                $('#template-preview').html('<pre><code class="language-xml">' + escapeHtml(data.preview) + '</code></pre>');
                Prism.highlightAll();
            } else {
                $('#template-preview').html('<div class="text-danger">Preview failed: ' + data.error + '</div>');
            }
        }
    });
}

function testTemplate() {
    var formData = new FormData($('#template-form')[0]);
    
    $.ajax({
        url: '/vast/test-template/',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
            if (data.success) {
                alert('Template test successful!\n\nResponse Time: ' + data.response_time + 'ms\nSize: ' + data.size + ' bytes');
            } else {
                alert('Template test failed: ' + data.error);
            }
        }
    });
}

function saveDraft(silent = false) {
    var formData = new FormData($('#template-form')[0]);
    formData.set('status', 'draft');
    
    $.ajax({
        url: window.location.href,
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
            if (!silent) {
                if (data.success) {
                    alert('Draft saved successfully!');
                } else {
                    alert('Failed to save draft: ' + data.error);
                }
            }
        }
    });
}

function validateForm() {
    var name = $('[name="name"]').val().trim();
    var xmlContent = $('#xml-content').val().trim();
    
    if (!name) {
        alert('Please enter a template name');
        $('[name="name"]').focus();
        return false;
    }
    
    if (!xmlContent) {
        alert('Please enter XML content');
        $('#xml-content').focus();
        return false;
    }
    
    return true;
}

function escapeHtml(text) {
    var map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    
    return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
</script>
{% endblock %}