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

{% block title %}{{ template.name }} - VAST Template Details - Adtlas{% endblock %}

{% block extra_css %}
<!-- INTERNAL DataTables css -->
<link href="{% static 'plugins/datatable/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatable/css/buttons.bootstrap5.min.css' %}" rel="stylesheet">
<link href="{% static 'plugins/datatable/responsive.bootstrap5.css' %}" rel="stylesheet" />

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

<!-- INTERNAL ApexCharts css -->
<link href="{% static 'plugins/apexcharts/apexcharts.css' %}" rel="stylesheet" type="text/css" />

<style>
.template-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
}
.stat-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
    margin-bottom: 20px;
}
.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #6259ca;
}
.stat-label {
    color: #6c757d;
    font-size: 0.9rem;
    margin-top: 5px;
}
.xml-viewer {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 15px;
    max-height: 500px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
}
.status-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}
.status-active { background: #d4edda; color: #155724; }
.status-inactive { background: #f8d7da; color: #721c24; }
.status-draft { background: #fff3cd; color: #856404; }
.status-testing { background: #cce7ff; color: #004085; }
.version-badge {
    background: #e9ecef;
    color: #495057;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}
.performance-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.performance-metric:last-child {
    border-bottom: none;
}
.metric-label {
    font-weight: 500;
    color: #495057;
}
.metric-value {
    font-weight: bold;
    color: #6259ca;
}
</style>
{% endblock %}

{% block content %}
<!-- Template Header -->
<div class="template-header">
    <div class="row align-items-center">
        <div class="col-lg-8">
            <h1 class="mb-2">{{ template.name }}</h1>
            <p class="mb-3">{{ template.description|default:"No description available" }}</p>
            <div class="d-flex align-items-center">
                <span class="status-badge status-{{ template.status }}">{{ template.get_status_display }}</span>
                <span class="version-badge ms-3">VAST {{ template.version }}</span>
                <span class="badge bg-light text-dark ms-3">{{ template.get_template_type_display }}</span>
            </div>
        </div>
        <div class="col-lg-4 text-end">
            <div class="btn-group" role="group">
                <a href="{% url 'vast:template_edit' template.id %}" class="btn btn-light">
                    <i class="fa fa-edit"></i> Edit
                </a>
                <button type="button" class="btn btn-light" onclick="duplicateTemplate({{ template.id }})">
                    <i class="fa fa-copy"></i> Duplicate
                </button>
                <button type="button" class="btn btn-light" onclick="testTemplate({{ template.id }})">
                    <i class="fa fa-play"></i> Test
                </button>
                <button type="button" class="btn btn-light" onclick="downloadTemplate({{ template.id }})">
                    <i class="fa fa-download"></i> Download
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-number">{{ template.usage_count|default:0 }}</div>
            <div class="stat-label">Total Requests</div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-number">{{ template.success_rate|default:0 }}%</div>
            <div class="stat-label">Success Rate</div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-number">{{ template.avg_response_time|default:0 }}ms</div>
            <div class="stat-label">Avg Response Time</div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-number">{{ template.active_campaigns|default:0 }}</div>
            <div class="stat-label">Active Campaigns</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <!-- 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="copyXML()">
                        <i class="fa fa-copy"></i> Copy
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="xml-viewer" id="xml-content">
                    <pre><code class="language-xml">{{ template.xml_content }}</code></pre>
                </div>
                <div id="validation-result" class="mt-3"></div>
            </div>
        </div>
        
        <!-- Performance Charts -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Performance Trends</h3>
                <div class="card-options">
                    <select class="form-select form-select-sm" onchange="updatePerformanceChart(this.value)">
                        <option value="7">Last 7 days</option>
                        <option value="30" selected>Last 30 days</option>
                        <option value="90">Last 90 days</option>
                    </select>
                </div>
            </div>
            <div class="card-body">
                <div id="performance-chart"></div>
            </div>
        </div>
        
        <!-- Recent Requests -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Recent Requests</h3>
                <div class="card-options">
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="refreshRequests()">
                        <i class="fa fa-refresh"></i> Refresh
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="requests-table">
                        <thead>
                            <tr>
                                <th>Timestamp</th>
                                <th>Campaign</th>
                                <th>Channel</th>
                                <th>Response Time</th>
                                <th>Status</th>
                                <th>User Agent</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for request in recent_requests %}
                            <tr>
                                <td>{{ request.timestamp|date:"M d, Y H:i" }}</td>
                                <td>
                                    {% if request.campaign %}
                                        <a href="{% url 'campaigns:campaign_detail' request.campaign.id %}">{{ request.campaign.name }}</a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td>
                                    {% if request.channel %}
                                        <a href="{% url 'channels:channel_detail' request.channel.id %}">{{ request.channel.name }}</a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td>{{ request.response_time }}ms</td>
                                <td>
                                    {% if request.status == 'success' %}
                                        <span class="badge bg-success">Success</span>
                                    {% elif request.status == 'error' %}
                                        <span class="badge bg-danger">Error</span>
                                    {% else %}
                                        <span class="badge bg-warning">{{ request.status|title }}</span>
                                    {% endif %}
                                </td>
                                <td class="text-truncate" style="max-width: 200px;">{{ request.user_agent|default:"-" }}</td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-outline-info" onclick="viewRequestDetails({{ request.id }})">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="7" class="text-center text-muted">No recent requests found</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <!-- Template Information -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Template Information</h3>
            </div>
            <div class="card-body">
                <div class="performance-metric">
                    <span class="metric-label">Created</span>
                    <span class="metric-value">{{ template.created_at|date:"M d, Y" }}</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Last Modified</span>
                    <span class="metric-value">{{ template.updated_at|date:"M d, Y H:i" }}</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Version</span>
                    <span class="metric-value">VAST {{ template.version }}</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Type</span>
                    <span class="metric-value">{{ template.get_template_type_display }}</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Priority</span>
                    <span class="metric-value">{{ template.get_priority_display }}</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Default Duration</span>
                    <span class="metric-value">{{ template.default_duration }}s</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Skip Offset</span>
                    <span class="metric-value">{{ template.skip_offset }}s</span>
                </div>
            </div>
        </div>
        
        <!-- Template Settings -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Settings</h3>
            </div>
            <div class="card-body">
                <div class="performance-metric">
                    <span class="metric-label">Tracking Enabled</span>
                    <span class="metric-value">
                        {% if template.enable_tracking %}
                            <i class="fa fa-check text-success"></i> Yes
                        {% else %}
                            <i class="fa fa-times text-danger"></i> No
                        {% endif %}
                    </span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Companion Ads</span>
                    <span class="metric-value">
                        {% if template.enable_companion %}
                            <i class="fa fa-check text-success"></i> Yes
                        {% else %}
                            <i class="fa fa-times text-danger"></i> No
                        {% endif %}
                    </span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Auto Play</span>
                    <span class="metric-value">
                        {% if template.auto_play %}
                            <i class="fa fa-check text-success"></i> Yes
                        {% else %}
                            <i class="fa fa-times text-danger"></i> No
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>
        
        <!-- Performance Metrics -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Performance Metrics</h3>
            </div>
            <div class="card-body">
                <div class="performance-metric">
                    <span class="metric-label">Total Requests</span>
                    <span class="metric-value">{{ template.total_requests|default:0 }}</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Successful Requests</span>
                    <span class="metric-value">{{ template.successful_requests|default:0 }}</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Failed Requests</span>
                    <span class="metric-value">{{ template.failed_requests|default:0 }}</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Error Rate</span>
                    <span class="metric-value">{{ template.error_rate|default:0 }}%</span>
                </div>
                <div class="performance-metric">
                    <span class="metric-label">Avg File Size</span>
                    <span class="metric-value">{{ template.avg_file_size|default:0 }} KB</span>
                </div>
            </div>
        </div>
        
        <!-- Quick Actions -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Quick Actions</h3>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-outline-primary" onclick="generateVASTUrl()">
                        <i class="fa fa-link"></i> Generate VAST URL
                    </button>
                    <button type="button" class="btn btn-outline-info" onclick="previewTemplate()">
                        <i class="fa fa-eye"></i> Preview Template
                    </button>
                    <button type="button" class="btn btn-outline-success" onclick="exportTemplate()">
                        <i class="fa fa-download"></i> Export Template
                    </button>
                    <button type="button" class="btn btn-outline-warning" onclick="cloneTemplate()">
                        <i class="fa fa-clone"></i> Clone Template
                    </button>
                    {% if template.status == 'active' %}
                    <button type="button" class="btn btn-outline-secondary" onclick="deactivateTemplate()">
                        <i class="fa fa-pause"></i> Deactivate
                    </button>
                    {% else %}
                    <button type="button" class="btn btn-outline-success" onclick="activateTemplate()">
                        <i class="fa fa-play"></i> Activate
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- INTERNAL DataTables js -->
<script src="{% static 'plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/dataTables.bootstrap5.js' %}"></script>
<script src="{% static 'plugins/datatable/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/buttons.bootstrap5.min.js' %}"></script>
<script src="{% static 'plugins/datatable/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'plugins/datatable/responsive.bootstrap5.min.js' %}"></script>

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

<!-- INTERNAL ApexCharts js -->
<script src="{% static 'plugins/apexcharts/apexcharts.min.js' %}"></script>

<script>
var performanceChart;

$(document).ready(function() {
    // Initialize DataTable
    $('#requests-table').DataTable({
        responsive: true,
        pageLength: 10,
        order: [[0, 'desc']],
        columnDefs: [
            { targets: [6], orderable: false }
        ]
    });
    
    // Initialize syntax highlighting
    Prism.highlightAll();
    
    // Initialize performance chart
    initializePerformanceChart();
    
    // Auto-refresh requests every 30 seconds
    setInterval(refreshRequests, 30000);
});

function initializePerformanceChart() {
    var options = {
        series: [{
            name: 'Requests',
            data: [30, 40, 35, 50, 49, 60, 70, 91, 125, 85, 95, 110, 130, 145, 160]
        }, {
            name: 'Success Rate',
            data: [95, 97, 94, 96, 98, 95, 97, 99, 96, 98, 97, 95, 98, 99, 97]
        }],
        chart: {
            height: 350,
            type: 'line',
            toolbar: {
                show: false
            }
        },
        colors: ['#6259ca', '#28a745'],
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'smooth',
            width: 3
        },
        xaxis: {
            type: 'datetime',
            categories: generateDateCategories(15)
        },
        yaxis: [{
            title: {
                text: 'Requests'
            }
        }, {
            opposite: true,
            title: {
                text: 'Success Rate (%)'
            },
            min: 0,
            max: 100
        }],
        tooltip: {
            x: {
                format: 'dd/MM/yy HH:mm'
            }
        },
        legend: {
            position: 'top'
        }
    };
    
    performanceChart = new ApexCharts(document.querySelector("#performance-chart"), options);
    performanceChart.render();
}

function generateDateCategories(days) {
    var categories = [];
    var today = new Date();
    
    for (var i = days - 1; i >= 0; i--) {
        var date = new Date(today);
        date.setDate(date.getDate() - i);
        categories.push(date.toISOString());
    }
    
    return categories;
}

function updatePerformanceChart(days) {
    // Update chart with new data based on selected period
    var newCategories = generateDateCategories(parseInt(days));
    var newData = generateMockData(parseInt(days));
    
    performanceChart.updateOptions({
        xaxis: {
            categories: newCategories
        },
        series: newData
    });
}

function generateMockData(days) {
    var requests = [];
    var successRates = [];
    
    for (var i = 0; i < days; i++) {
        requests.push(Math.floor(Math.random() * 100) + 50);
        successRates.push(Math.floor(Math.random() * 10) + 90);
    }
    
    return [{
        name: 'Requests',
        data: requests
    }, {
        name: 'Success Rate',
        data: successRates
    }];
}

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

function formatXML() {
    var xmlContent = document.querySelector('#xml-content pre code').textContent;
    
    $.ajax({
        url: '/vast/format-xml/',
        method: 'POST',
        data: {
            'xml_content': xmlContent,
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
        },
        success: function(data) {
            if (data.success) {
                document.querySelector('#xml-content pre code').textContent = data.formatted_xml;
                Prism.highlightAll();
            }
        }
    });
}

function copyXML() {
    var xmlContent = document.querySelector('#xml-content pre code').textContent;
    navigator.clipboard.writeText(xmlContent).then(function() {
        alert('XML content copied to clipboard!');
    });
}

function duplicateTemplate(templateId) {
    if (confirm('Are you sure you want to duplicate this template?')) {
        window.location.href = '/vast/templates/' + templateId + '/duplicate/';
    }
}

function testTemplate(templateId) {
    $.ajax({
        url: '/vast/templates/' + templateId + '/test/',
        method: 'POST',
        data: {
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
        },
        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 downloadTemplate(templateId) {
    window.open('/vast/templates/' + templateId + '/download/', '_blank');
}

function refreshRequests() {
    location.reload();
}

function viewRequestDetails(requestId) {
    // Open modal or navigate to request details
    window.open('/vast/requests/' + requestId + '/', '_blank');
}

function generateVASTUrl() {
    var templateId = {{ template.id }};
    var vastUrl = window.location.origin + '/vast/serve/' + templateId + '/';
    
    prompt('VAST URL (copy to clipboard):', vastUrl);
}

function previewTemplate() {
    window.open('/vast/templates/{{ template.id }}/preview/', '_blank');
}

function exportTemplate() {
    window.open('/vast/templates/{{ template.id }}/export/', '_blank');
}

function cloneTemplate() {
    if (confirm('Are you sure you want to clone this template?')) {
        window.location.href = '/vast/templates/{{ template.id }}/clone/';
    }
}

function activateTemplate() {
    if (confirm('Are you sure you want to activate this template?')) {
        $.ajax({
            url: '/vast/templates/{{ template.id }}/activate/',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(data) {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Failed to activate template: ' + data.error);
                }
            }
        });
    }
}

function deactivateTemplate() {
    if (confirm('Are you sure you want to deactivate this template?')) {
        $.ajax({
            url: '/vast/templates/{{ template.id }}/deactivate/',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(data) {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Failed to deactivate template: ' + data.error);
                }
            }
        });
    }
}
</script>
{% endblock %}