{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1>Video Control</h1>
            <p>Manage video playback and overlay content.</p>
            
            <!-- Video Player -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5>Video Player</h5>
                </div>
                <div class="card-body">
                    <div id="video-player" class="video-container">
                        <div class="video-placeholder">
                            <p>Video player will appear here</p>
                        </div>
                    </div>
                    <div class="video-controls mt-3">
                        <button class="btn btn-primary" id="play-btn">Play</button>
                        <button class="btn btn-secondary" id="pause-btn">Pause</button>
                        <button class="btn btn-danger" id="stop-btn">Stop</button>
                    </div>
                </div>
            </div>
            
            <!-- Overlay Controls -->
            <div class="card">
                <div class="card-header">
                    <h5>Overlay Controls</h5>
                </div>
                <div class="card-body">
                    <form id="overlay-form">
                        <div class="mb-3">
                            <label for="template-select" class="form-label">Template</label>
                            <select class="form-select" id="template-select">
                                <option value="">Loading templates...</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="overlay-text" class="form-label">Overlay Text</label>
                            <input type="text" class="form-control" id="overlay-text" placeholder="Enter overlay text">
                        </div>
                        <button type="submit" class="btn btn-success">Update Overlay</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Load available templates on page load
    document.addEventListener('DOMContentLoaded', function() {
        loadAvailableTemplates();
    });
    
    function loadAvailableTemplates() {
        fetch('/api/templates')
            .then(response => response.json())
            .then(data => {
                const templateSelect = document.getElementById('template-select');
                templateSelect.innerHTML = ''; // Clear loading option
                
                if (data.templates && Array.isArray(data.templates)) {
                    data.templates.forEach(template => {
                        const option = document.createElement('option');
                        option.value = template.name;
                        option.textContent = template.display_name || template.name;
                        templateSelect.appendChild(option);
                    });
                    
                    // Select default template if available
                    const defaultOption = templateSelect.querySelector('option[value="default"]');
                    if (defaultOption) {
                        defaultOption.selected = true;
                    }
                } else {
                    // Fallback if no templates found
                    const option = document.createElement('option');
                    option.value = 'default';
                    option.textContent = 'Default';
                    templateSelect.appendChild(option);
                }
            })
            .catch(error => {
                console.error('Error loading templates:', error);
                // Fallback template option
                const templateSelect = document.getElementById('template-select');
                templateSelect.innerHTML = '<option value="default">Default</option>';
            });
    }
    
    // Video control functions
    document.getElementById('play-btn').addEventListener('click', function() {
        fetch('/api/video/control', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({action: 'play'})
        })
        .then(response => response.json())
        .then(data => {
            console.log('Play response:', data);
        })
        .catch(error => {
            console.error('Error:', error);
        });
    });
    
    document.getElementById('pause-btn').addEventListener('click', function() {
        fetch('/api/video/control', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({action: 'pause'})
        })
        .then(response => response.json())
        .then(data => {
            console.log('Pause response:', data);
        })
        .catch(error => {
            console.error('Error:', error);
        });
    });
    
    document.getElementById('stop-btn').addEventListener('click', function() {
        fetch('/api/video/control', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({action: 'stop'})
        })
        .then(response => response.json())
        .then(data => {
            console.log('Stop response:', data);
        })
        .catch(error => {
            console.error('Error:', error);
        });
    });
    
    // Overlay update function
    document.getElementById('overlay-form').addEventListener('submit', function(e) {
        e.preventDefault();
        const template = document.getElementById('template-select').value;
        const text = document.getElementById('overlay-text').value;
        
        fetch('/api/overlay', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                template: template,
                data: {text: text}
            })
        })
        .then(response => response.json())
        .then(data => {
            console.log('Overlay update response:', data);
            alert('Overlay updated successfully');
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Failed to update overlay');
        });
    });
</script>
{% endblock %}