{% extends 'video_help/admin/base.html' %}

{% block title %}{{ action }} Video - Video Help Admin{% endblock %}
{% block page_title %}{{ action }} Video{% endblock %}

{% block content %}
<a href="{% url 'video_help:video_list' %}" class="back-btn">
    <i class="fas fa-arrow-left me-2"></i> Back to Videos
</a>

<div class="row">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-{% if action == 'Add' %}plus{% else %}edit{% endif %} me-2"></i>
                {{ action }} Video
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label for="category" class="form-label">Category <span class="text-danger">*</span></label>
                        <select class="form-select" id="category" name="category" required>
                            <option value="">Select Category</option>
                            {% for cat in categories %}
                                <option value="{{ cat.id }}" 
                                        {% if video.category_id == cat.id %}selected{% endif %}>
                                    {{ cat.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="title" class="form-label">Video Title <span class="text-danger">*</span></label>
                        <input type="text" 
                               class="form-control" 
                               id="title" 
                               name="title" 
                               value="{{ video.title|default:'' }}"
                               placeholder="e.g., How to Add a Product"
                               required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="youtube_input" class="form-label">YouTube Link or ID <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fab fa-youtube text-danger"></i></span>
                            <input type="text" 
                                   class="form-control" 
                                   id="youtube_input" 
                                   name="youtube_input" 
                                   value="{% if video.youtube_id %}https://youtube.com/watch?v={{ video.youtube_id }}{% endif %}"
                                   placeholder="Paste YouTube URL or Video ID"
                                   required>
                            <button type="button" class="btn btn-outline-primary" onclick="extractYouTubeInfo()">
                                <i class="fas fa-search"></i> Extract
                            </button>
                        </div>
                        <div class="form-text">
                            Supports: youtube.com/watch?v=ID, youtu.be/ID, or just the video ID
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" 
                                  id="description" 
                                  name="description" 
                                  rows="3"
                                  placeholder="Brief description of what this video covers (optional)">{{ video.description|default:'' }}</textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label for="duration" class="form-label">Duration</label>
                        <input type="text" 
                               class="form-control" 
                               id="duration" 
                               name="duration" 
                               value="{{ video.duration|default:'' }}"
                               placeholder="e.g., 5:30 or 1:02:45"
                               style="max-width: 150px;">
                    </div>
                    
                    <div class="mb-4">
                        <div class="form-check form-switch">
                            <input class="form-check-input" 
                                   type="checkbox" 
                                   id="is_active" 
                                   name="is_active"
                                   {% if action == 'Add' or video.is_active %}checked{% endif %}>
                            <label class="form-check-label" for="is_active">Active</label>
                        </div>
                        <div class="form-text">Inactive videos won't show to users.</div>
                    </div>
                    
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save me-1"></i>
                            {% if action == 'Add' %}Add Video{% else %}Update Video{% endif %}
                        </button>
                        <a href="{% url 'video_help:video_list' %}" class="btn btn-outline-secondary">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-5">
        <!-- Preview Card -->
        <div class="card">
            <div class="card-header">
                <i class="fas fa-eye me-2"></i>Video Preview
            </div>
            <div class="card-body">
                <div id="video-preview" class="youtube-preview mb-3">
                    {% if video.youtube_id %}
                        <iframe width="100%" 
                                height="250" 
                                src="https://www.youtube.com/embed/{{ video.youtube_id }}" 
                                frameborder="0" 
                                allowfullscreen
                                id="preview-iframe"></iframe>
                    {% else %}
                        <div class="bg-light d-flex align-items-center justify-content-center" 
                             style="height: 250px;"
                             id="preview-placeholder">
                            <div class="text-center text-muted">
                                <i class="fab fa-youtube fa-4x mb-2"></i>
                                <p>Enter a YouTube URL to preview</p>
                            </div>
                        </div>
                    {% endif %}
                </div>
                
                <div id="video-info" class="{% if not video.youtube_id %}d-none{% endif %}">
                    <div class="mb-2">
                        <small class="text-muted">YouTube ID:</small>
                        <code id="extracted-id">{{ video.youtube_id|default:'' }}</code>
                    </div>
                    <div>
                        <small class="text-muted">Thumbnail:</small><br>
                        <img id="thumbnail-preview" 
                             src="{{ video.thumbnail_url|default:'' }}" 
                             alt="Thumbnail" 
                             class="img-fluid rounded mt-1"
                             style="max-height: 100px;">
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Tips Card -->
        <div class="card mt-3">
            <div class="card-header">
                <i class="fas fa-lightbulb me-2"></i>Tips
            </div>
            <div class="card-body">
                <ul class="mb-0 small">
                    <li class="mb-2">Just paste the YouTube link and click "Extract" to auto-fill video details</li>
                    <li class="mb-2">Thumbnails are automatically fetched from YouTube</li>
                    <li class="mb-2">Duration is optional but helps users know video length</li>
                    <li>Videos will appear in the order you set in the list</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function extractYouTubeInfo() {
        const url = document.getElementById('youtube_input').value.trim();
        
        if (!url) {
            showToast('Please enter a YouTube URL or ID', 'warning');
            return;
        }
        
        fetch('{% url "video_help:extract_youtube_info" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrftoken
            },
            body: JSON.stringify({ url: url })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update preview
                const previewDiv = document.getElementById('video-preview');
                previewDiv.innerHTML = `
                    <iframe width="100%" 
                            height="250" 
                            src="${data.embed_url}" 
                            frameborder="0" 
                            allowfullscreen></iframe>
                `;
                
                // Update info
                document.getElementById('extracted-id').textContent = data.youtube_id;
                document.getElementById('thumbnail-preview').src = data.thumbnail_url;
                document.getElementById('video-info').classList.remove('d-none');
                
                showToast('YouTube video info extracted successfully!', 'success');
            } else {
                showToast(data.message || 'Invalid YouTube URL', 'danger');
            }
        })
        .catch(error => {
            showToast('Error extracting video info', 'danger');
        });
    }
    
    // Auto-extract on paste
    document.getElementById('youtube_input').addEventListener('paste', function() {
        setTimeout(extractYouTubeInfo, 100);
    });
</script>
{% endblock %}