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

{% block title %}Bulk Video Management - Video Help Admin{% endblock %}
{% block page_title %}Bulk Video Management{% endblock %}

{% block extra_css %}
<style>
    .video-row {
        background: #fff;
        border: 1px solid #e3e6f0;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        transition: all 0.2s;
    }
    .video-row:hover {
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .video-row.new-video {
        border-left: 4px solid var(--success-color);
        background: #f0fff4;
    }
    .video-row.existing-video {
        border-left: 4px solid var(--primary-color);
    }
    .video-row.deleted {
        opacity: 0.5;
        background: #fff5f5;
        border-left-color: var(--danger-color);
    }
    .video-thumbnail-small {
        width: 120px;
        height: 68px;
        object-fit: cover;
        border-radius: 6px;
    }
    .btn-extract {
        white-space: nowrap;
    }
    .loading-spinner {
        display: none;
    }
    .video-row.loading .loading-spinner {
        display: inline-block;
    }
    .video-row.loading .btn-extract-text {
        display: none;
    }
    .status-badge {
        font-size: 0.75rem;
        padding: 3px 8px;
        border-radius: 20px;
    }
    .drag-handle {
        cursor: grab;
        color: #aaa;
        padding: 10px;
    }
    .drag-handle:hover {
        color: #666;
    }
    #videos-container {
        min-height: 200px;
    }
    .empty-state {
        text-align: center;
        padding: 50px;
        color: #888;
    }
    .empty-state i {
        font-size: 4rem;
        margin-bottom: 20px;
        opacity: 0.5;
    }
    .form-control-sm {
        font-size: 0.9rem;
    }
    .extracted-info {
        background: #e8f4fd;
        border-radius: 6px;
        padding: 8px 12px;
        margin-top: 8px;
        font-size: 0.85rem;
    }
    .action-buttons .btn {
        padding: 5px 10px;
    }
</style>
{% 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>

<!-- Category Selection -->
<div class="card mb-4">
    <div class="card-header">
        <i class="fas fa-folder me-2"></i>Select Category
    </div>
    <div class="card-body">
        <div class="row align-items-end">
            <div class="col-md-6">
                <label for="category-select" class="form-label fw-bold">Category</label>
                <select id="category-select" class="form-select form-select-lg">
                    <option value="">-- Select a Category --</option>
                    {% for cat in categories %}
                        <option value="{{ cat.id }}" data-slug="{{ cat.slug }}">{{ cat.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-6">
                <div id="category-stats" class="text-muted" style="display:none;">
                    <i class="fas fa-video me-1"></i>
                    <span id="video-count">0</span> videos in this category
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Videos Container -->
<div id="main-container" style="display:none;">
    <!-- Action Bar -->
    <div class="card mb-3">
        <div class="card-body py-2">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <button type="button" class="btn btn-success" onclick="addNewRow()">
                        <i class="fas fa-plus me-1"></i> Add New Video
                    </button>
                    <button type="button" class="btn btn-outline-primary ms-2" onclick="extractAllNew()">
                        <i class="fas fa-magic me-1"></i> Extract All New
                    </button>
                </div>
                <div>
                    <button type="button" class="btn btn-primary" onclick="saveAllChanges()">
                        <i class="fas fa-save me-1"></i> Save All Changes
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Videos List -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span><i class="fas fa-list me-2"></i>Videos</span>
            <div>
                <button type="button" class="btn btn-sm btn-outline-success" onclick="bulkActivate()">
                    <i class="fas fa-check me-1"></i> Activate All
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="bulkDeactivate()">
                    <i class="fas fa-times me-1"></i> Deactivate All
                </button>
            </div>
        </div>
        <div class="card-body">
            <div id="videos-container">
                <div class="empty-state">
                    <i class="fas fa-hand-pointer d-block"></i>
                    <p>Select a category above to manage videos</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Row Template -->
<template id="video-row-template">
    <div class="video-row" data-video-id="" data-status="new">
        <div class="row align-items-center">
            <!-- Drag Handle & Thumbnail -->
            <div class="col-auto">
                <div class="d-flex align-items-center">
                    <span class="drag-handle me-2">
                        <i class="fas fa-grip-vertical"></i>
                    </span>
                    <img src="https://via.placeholder.com/120x68?text=No+Video" 
                         class="video-thumbnail-small" 
                         alt="Thumbnail">
                </div>
            </div>
            
            <!-- YouTube URL Input -->
            <div class="col-md-4">
                <label class="form-label small text-muted mb-1">YouTube URL / ID</label>
                <div class="input-group input-group-sm">
                    <input type="text" class="form-control youtube-url" 
                           placeholder="Paste YouTube URL or ID">
                    <button type="button" class="btn btn-outline-primary btn-extract" onclick="extractVideoInfo(this)">
                        <span class="btn-extract-text"><i class="fas fa-search"></i></span>
                        <span class="loading-spinner spinner-border spinner-border-sm"></span>
                    </button>
                </div>
                <input type="hidden" class="youtube-id">
            </div>
            
            <!-- Title -->
            <div class="col-md-3">
                <label class="form-label small text-muted mb-1">Title</label>
                <input type="text" class="form-control form-control-sm video-title" 
                       placeholder="Video title (auto-extracted)">
            </div>
            
            <!-- Duration -->
            <div class="col-md-1">
                <label class="form-label small text-muted mb-1">Duration</label>
                <input type="text" class="form-control form-control-sm video-duration" 
                       placeholder="0:00">
            </div>
            
            <!-- Status Toggle -->
            <div class="col-auto">
                <label class="form-label small text-muted mb-1 d-block">Active</label>
                <label class="toggle-switch">
                    <input type="checkbox" class="video-active" checked>
                    <span class="toggle-slider"></span>
                </label>
            </div>
            
            <!-- Actions -->
            <div class="col-auto action-buttons">
                <label class="form-label small text-muted mb-1 d-block">&nbsp;</label>
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRow(this)" title="Remove">
                    <i class="fas fa-trash"></i>
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-undo" onclick="undoRemove(this)" title="Undo" style="display:none;">
                    <i class="fas fa-undo"></i>
                </button>
            </div>
        </div>
        
        <!-- Description (collapsible) -->
        <div class="row mt-2">
            <div class="col-12">
                <textarea class="form-control form-control-sm video-description" 
                          rows="2" 
                          placeholder="Description (optional)"></textarea>
            </div>
        </div>
    </div>
</template>

{% endblock %}

{% block extra_js %}
<script>
const csrfToken = '{{ csrf_token }}';
let currentCategoryId = null;
let originalData = [];
let sortable = null;

// Category Selection
document.getElementById('category-select').addEventListener('change', function() {
    const categoryId = this.value;
    
    if (!categoryId) {
        document.getElementById('main-container').style.display = 'none';
        document.getElementById('category-stats').style.display = 'none';
        return;
    }
    
    currentCategoryId = categoryId;
    loadCategoryVideos(categoryId);
});

// Load videos for selected category
function loadCategoryVideos(categoryId) {
    document.getElementById('main-container').style.display = 'block';
    document.getElementById('videos-container').innerHTML = `
        <div class="text-center py-5">
            <div class="spinner-border text-primary"></div>
            <p class="mt-2 text-muted">Loading videos...</p>
        </div>
    `;
    
    fetch(`/video-help/api/category/${categoryId}/videos/`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                originalData = data.videos;
                renderVideos(data.videos);
                document.getElementById('video-count').textContent = data.videos.length;
                document.getElementById('category-stats').style.display = 'block';
            } else {
                showToast('Error loading videos', 'danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Error loading videos', 'danger');
        });
}

// Render videos
function renderVideos(videos) {
    const container = document.getElementById('videos-container');
    
    if (videos.length === 0) {
        container.innerHTML = `
            <div class="empty-state">
                <i class="fas fa-video-slash d-block"></i>
                <p>No videos in this category yet</p>
                <button class="btn btn-success" onclick="addNewRow()">
                    <i class="fas fa-plus me-1"></i> Add First Video
                </button>
            </div>
        `;
        return;
    }
    
    container.innerHTML = '';
    
    videos.forEach((video, index) => {
        const row = createVideoRow(video, false);
        container.appendChild(row);
    });
    
    initSortable();
}

// Create video row
function createVideoRow(video = null, isNew = true) {
    const template = document.getElementById('video-row-template');
    const row = template.content.cloneNode(true).querySelector('.video-row');
    
    if (video) {
        row.dataset.videoId = video.id;
        row.dataset.status = 'existing';
        row.classList.add('existing-video');
        row.classList.remove('new-video');
        
        row.querySelector('.youtube-url').value = video.youtube_id ? `https://youtube.com/watch?v=${video.youtube_id}` : '';
        row.querySelector('.youtube-id').value = video.youtube_id || '';
        row.querySelector('.video-title').value = video.title || '';
        row.querySelector('.video-duration').value = video.duration || '';
        row.querySelector('.video-description').value = video.description || '';
        row.querySelector('.video-active').checked = video.is_active;
        
        if (video.thumbnail_url) {
            row.querySelector('.video-thumbnail-small').src = video.thumbnail_url;
        }
    } else {
        row.dataset.status = 'new';
        row.classList.add('new-video');
    }
    
    return row;
}

// Add new row
function addNewRow() {
    const container = document.getElementById('videos-container');
    
    // Remove empty state if exists
    const emptyState = container.querySelector('.empty-state');
    if (emptyState) {
        emptyState.remove();
    }
    
    const row = createVideoRow(null, true);
    container.appendChild(row);
    
    // Focus on URL input
    row.querySelector('.youtube-url').focus();
    
    // Scroll to new row
    row.scrollIntoView({ behavior: 'smooth', block: 'center' });
    
    initSortable();
}

// Extract video info from YouTube
function extractVideoInfo(button) {
    const row = button.closest('.video-row');
    const urlInput = row.querySelector('.youtube-url');
    const url = urlInput.value.trim();
    
    if (!url) {
        showToast('Please enter a YouTube URL', 'warning');
        return;
    }
    
    row.classList.add('loading');
    
    fetch('/video-help/api/extract-youtube-full/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken
        },
        body: JSON.stringify({ url: url })
    })
    .then(response => response.json())
    .then(data => {
        row.classList.remove('loading');
        
        if (data.success) {
            row.querySelector('.youtube-id').value = data.youtube_id;
            row.querySelector('.video-title').value = data.title || '';
            row.querySelector('.video-duration').value = data.duration || '';
            row.querySelector('.video-thumbnail-small').src = data.thumbnail_url;
            
            showToast('Video info extracted successfully!', 'success');
        } else {
            showToast(data.message || 'Failed to extract video info', 'danger');
        }
    })
    .catch(error => {
        row.classList.remove('loading');
        console.error('Error:', error);
        showToast('Error extracting video info', 'danger');
    });
}

// Extract all new videos
function extractAllNew() {
    const newRows = document.querySelectorAll('.video-row.new-video:not(.deleted)');
    
    if (newRows.length === 0) {
        showToast('No new videos to extract', 'info');
        return;
    }
    
    newRows.forEach(row => {
        const url = row.querySelector('.youtube-url').value.trim();
        if (url && !row.querySelector('.youtube-id').value) {
            const button = row.querySelector('.btn-extract');
            extractVideoInfo(button);
        }
    });
}

// Remove row
function removeRow(button) {
    const row = button.closest('.video-row');
    
    if (row.dataset.status === 'new') {
        row.remove();
        showToast('Row removed', 'info');
    } else {
        row.classList.add('deleted');
        row.dataset.originalStatus = row.dataset.status;
        row.dataset.status = 'deleted';
        button.style.display = 'none';
        row.querySelector('.btn-undo').style.display = 'inline-block';
        showToast('Video marked for deletion. Save to confirm.', 'warning');
    }
    
    updateVideoCount();
}

// Undo remove
function undoRemove(button) {
    const row = button.closest('.video-row');
    row.classList.remove('deleted');
    row.dataset.status = row.dataset.originalStatus || 'existing';
    button.style.display = 'none';
    row.querySelector('.btn-outline-danger').style.display = 'inline-block';
    showToast('Deletion undone', 'info');
    updateVideoCount();
}

// Bulk activate
function bulkActivate() {
    document.querySelectorAll('.video-row:not(.deleted) .video-active').forEach(checkbox => {
        checkbox.checked = true;
    });
    showToast('All videos marked as active', 'success');
}

// Bulk deactivate
function bulkDeactivate() {
    document.querySelectorAll('.video-row:not(.deleted) .video-active').forEach(checkbox => {
        checkbox.checked = false;
    });
    showToast('All videos marked as inactive', 'info');
}

// Save all changes
function saveAllChanges() {
    const rows = document.querySelectorAll('.video-row');
    const videos = [];
    const deleteIds = [];
    
    let hasError = false;
    
    rows.forEach((row, index) => {
        const status = row.dataset.status;
        const videoId = row.dataset.videoId;
        
        if (status === 'deleted' && videoId) {
            deleteIds.push(parseInt(videoId));
            return;
        }
        
        const youtubeId = row.querySelector('.youtube-id').value.trim();
        const title = row.querySelector('.video-title').value.trim();
        
        if (!youtubeId) {
            const url = row.querySelector('.youtube-url').value.trim();
            if (url) {
                row.querySelector('.youtube-url').classList.add('is-invalid');
                hasError = true;
                showToast('Please extract video info before saving', 'warning');
            }
            return;
        }
        
        if (!title) {
            row.querySelector('.video-title').classList.add('is-invalid');
            hasError = true;
            return;
        }
        
        videos.push({
            id: videoId ? parseInt(videoId) : null,
            youtube_id: youtubeId,
            title: title,
            duration: row.querySelector('.video-duration').value.trim(),
            description: row.querySelector('.video-description').value.trim(),
            is_active: row.querySelector('.video-active').checked,
            sort_order: index + 1
        });
    });
    
    if (hasError) {
        showToast('Please fix errors before saving', 'danger');
        return;
    }
    
    if (videos.length === 0 && deleteIds.length === 0) {
        showToast('No changes to save', 'info');
        return;
    }
    
    // Show loading
    const saveBtn = document.querySelector('[onclick="saveAllChanges()"]');
    const originalText = saveBtn.innerHTML;
    saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Saving...';
    saveBtn.disabled = true;
    
    fetch('/video-help/api/videos/bulk-save/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken
        },
        body: JSON.stringify({
            category_id: currentCategoryId,
            videos: videos,
            delete_ids: deleteIds
        })
    })
    .then(response => response.json())
    .then(data => {
        saveBtn.innerHTML = originalText;
        saveBtn.disabled = false;
        
        if (data.success) {
            showToast(`Saved successfully! ${data.created} created, ${data.updated} updated, ${data.deleted} deleted.`, 'success');
            // Reload videos
            loadCategoryVideos(currentCategoryId);
        } else {
            showToast(data.message || 'Error saving videos', 'danger');
        }
    })
    .catch(error => {
        saveBtn.innerHTML = originalText;
        saveBtn.disabled = false;
        console.error('Error:', error);
        showToast('Error saving videos', 'danger');
    });
}

// Update video count
function updateVideoCount() {
    const count = document.querySelectorAll('.video-row:not(.deleted)').length;
    document.getElementById('video-count').textContent = count;
}

// Initialize sortable
function initSortable() {
    const container = document.getElementById('videos-container');
    
    if (sortable) {
        sortable.destroy();
    }
    
    if (container.querySelectorAll('.video-row').length > 0) {
        sortable = new Sortable(container, {
            animation: 150,
            handle: '.drag-handle',
            ghostClass: 'sortable-ghost',
            onEnd: function() {
                // Order will be saved when user clicks Save
            }
        });
    }
}

// Toast notification (reuse from base template)
function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `alert alert-${type} position-fixed shadow`;
    toast.style.cssText = 'top: 80px; right: 20px; z-index: 9999; min-width: 280px; max-width: 400px;';
    toast.innerHTML = `
        ${message}
        <button type="button" class="btn-close float-end" onclick="this.parentElement.remove()"></button>
    `;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 4000);
}
</script>
{% endblock %}