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

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

{% block content %}
<div class="row mb-4">
    <!-- Stats Cards -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card primary">
            <div class="stat-label">Total Categories</div>
            <div class="stat-value">{{ total_categories }}</div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card success">
            <div class="stat-label">Active Categories</div>
            <div class="stat-value">{{ active_categories }}</div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card info">
            <div class="stat-label">Total Videos</div>
            <div class="stat-value">{{ total_videos }}</div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card warning">
            <div class="stat-label">Active Videos</div>
            <div class="stat-value">{{ active_videos }}</div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Quick Actions -->
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-bolt me-2"></i>Quick Actions
            </div>
            <div class="card-body">
                <a href="{% url 'video_help:category_add' %}" class="btn btn-primary me-2 mb-2">
                    <i class="fas fa-plus me-1"></i> Add Category
                </a>
                <a href="{% url 'video_help:video_add' %}" class="btn btn-success me-2 mb-2">
                    <i class="fas fa-plus me-1"></i> Add Video
                </a>
                <a href="{% url 'video_help:category_list' %}" class="btn btn-outline-primary me-2 mb-2">
                    <i class="fas fa-folder me-1"></i> Manage Categories
                </a>
                <a href="{% url 'video_help:video_list' %}" class="btn btn-outline-success mb-2">
                    <i class="fas fa-video me-1"></i> Manage Videos
                </a>
            </div>
        </div>
    </div>

    <!-- ───── Excel Export / Import Card ───── -->
    <div class="col-lg-6 mb-4">
        <div class="card border-0" style="box-shadow: 0 0.15rem 1.75rem 0 rgba(58,59,69,0.1);">
            <div class="card-header d-flex align-items-center gap-2">
                <i class="fas fa-file-excel text-success"></i>
                <span>Excel Export &amp; Import</span>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    Export all videos to Excel for bulk editing, then re-import to add or update records.
                </p>

                <!-- Export button -->
                <a href="{% url 'video_help:export_videos_excel' %}"
                   class="btn btn-success me-2 mb-2"
                   id="exportBtn">
                    <i class="fas fa-file-download me-1"></i> Export to Excel
                </a>

                <!-- Import button → opens modal -->
                <button type="button"
                        class="btn btn-outline-primary mb-2"
                        data-bs-toggle="modal"
                        data-bs-target="#importModal">
                    <i class="fas fa-file-upload me-1"></i> Import from Excel
                </button>

                <div class="mt-2">
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1 text-primary"></i>
                        Export first — the file includes an <strong>Instructions</strong> sheet explaining every column.
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Categories Overview -->
    <div class="col-lg-12 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="fas fa-folder me-2"></i>Categories Overview</span>
                <a href="{% url 'video_help:category_list' %}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Slug</th>
                            <th>Videos</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for category in categories|slice:":5" %}
                        <tr>
                            <td>
                                {% if category.icon %}<i class="{{ category.icon }} me-2"></i>{% endif %}
                                {{ category.name }}
                            </td>
                            <td><code>{{ category.slug }}</code></td>
                            <td>
                                <span class="badge bg-primary">{{ category.active_videos_count }}</span>
                                <small class="text-muted">/ {{ category.total_videos_count }}</small>
                            </td>
                            <td>
                                {% if category.is_active %}
                                    <span class="badge bg-success">Active</span>
                                {% else %}
                                    <span class="badge bg-secondary">Inactive</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="4" class="text-center text-muted py-4">
                                No categories yet.
                                <a href="{% url 'video_help:category_add' %}">Create your first category</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- How to Use Section -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-info-circle me-2"></i>How to Use Video Help System
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <h5><i class="fas fa-1 text-primary me-2"></i>Create Categories</h5>
                        <p class="text-muted">Create categories that match your app modules (e.g., products, sales, dashboard). Use the <code>slug</code> field to identify them.</p>
                    </div>
                    <div class="col-md-4 mb-3">
                        <h5><i class="fas fa-2 text-primary me-2"></i>Add Videos</h5>
                        <p class="text-muted">Add YouTube tutorial videos to each category. Just paste the YouTube link and the system will automatically extract the video ID and thumbnail.</p>
                    </div>
                    <div class="col-md-4 mb-3">
                        <h5><i class="fas fa-3 text-primary me-2"></i>Add Button to Pages</h5>
                        <p class="text-muted">Add the help button to your pages using the template tag:</p>
                        <code class="d-block bg-light p-2 rounded">
                            &#123;% load video_help_tags %&#125;<br>
                            &#123;% video_help_button 'category-slug' %&#125;
                        </code>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- ══════════════════════════════════════════════════════════════════════════
     IMPORT MODAL
══════════════════════════════════════════════════════════════════════════ -->
<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0" style="border-radius: 12px; overflow: hidden;">

            <!-- Header -->
            <div class="modal-header text-white"
                 style="background: linear-gradient(135deg, #1a7a4a 0%, #0d5c38 100%); border-bottom: none;">
                <div class="d-flex align-items-center gap-3">
                    <div style="background: rgba(255,255,255,0.2); border-radius: 10px; padding: 10px 12px;">
                        <i class="fas fa-file-upload fa-lg"></i>
                    </div>
                    <div>
                        <h5 class="modal-title mb-0" id="importModalLabel">Import Videos from Excel</h5>
                        <small style="opacity: 0.8;">Add new videos or update existing ones in bulk</small>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <!-- Body -->
            <div class="modal-body p-4">

                <!-- Info alert -->
                <div class="alert border-0 mb-4"
                     style="background: #EFF8F4; border-left: 4px solid #1a7a4a !important; border-radius: 8px;">
                    <div class="d-flex gap-2">
                        <i class="fas fa-lightbulb text-success mt-1"></i>
                        <div class="small">
                            <strong>Tip:</strong> Always <strong>Export</strong> first to get the correct template.
                            The exported file has an <em>Instructions</em> sheet with full details.
                            <ul class="mb-0 mt-1 ps-3">
                                <li>Row with an <strong>ID</strong> → that video will be <strong>updated</strong></li>
                                <li>Row with <strong>blank ID</strong> → a <strong>new video</strong> will be created</li>
                                <li><strong>Category Slug</strong> must match an existing category exactly</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Upload form -->
                <form method="post"
                      action="{% url 'video_help:import_videos_excel' %}"
                      enctype="multipart/form-data"
                      id="importForm">
                    {% csrf_token %}

                    <!-- Drop zone -->
                    <div id="dropZone"
                         class="border rounded-3 p-4 text-center mb-3"
                         style="border: 2px dashed #adb5bd !important;
                                border-radius: 12px !important;
                                cursor: pointer;
                                transition: all 0.2s;
                                background: #fafbfc;"
                         onclick="document.getElementById('excelFileInput').click()">
                        <i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2"></i>
                        <p class="mb-1 text-muted">Drag &amp; drop your Excel file here, or <strong class="text-primary">click to browse</strong></p>
                        <small class="text-muted">Supported formats: .xlsx, .xls</small>
                        <div id="selectedFileName" class="mt-2 d-none">
                            <span class="badge bg-success py-2 px-3">
                                <i class="fas fa-file-excel me-1"></i>
                                <span id="fileNameText"></span>
                            </span>
                        </div>
                    </div>

                    <!-- Hidden file input -->
                    <input type="file"
                           id="excelFileInput"
                           name="excel_file"
                           accept=".xlsx,.xls"
                           class="d-none"
                           required>
                </form>

                <!-- Preview of what will happen -->
                <div id="importPreview" class="d-none">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <div class="text-success"><i class="fas fa-check-circle"></i></div>
                        <strong>File ready to import</strong>
                    </div>
                    <div class="row g-2">
                        <div class="col-4">
                            <div class="rounded p-2 text-center" style="background:#f0fff4; border:1px solid #c3e6cb;">
                                <div class="fw-bold text-success" id="previewCreate">—</div>
                                <small class="text-muted">Will be created</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="rounded p-2 text-center" style="background:#fff3cd; border:1px solid #ffc107;">
                                <div class="fw-bold text-warning" id="previewUpdate">—</div>
                                <small class="text-muted">Will be updated</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="rounded p-2 text-center" style="background:#f8f9fa; border:1px solid #dee2e6;">
                                <div class="fw-bold text-secondary" id="previewSkip">—</div>
                                <small class="text-muted">Will be skipped</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Footer -->
            <div class="modal-footer border-0 px-4 pb-4 pt-0">
                <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button"
                        class="btn btn-success px-4"
                        id="importSubmitBtn"
                        onclick="submitImport()">
                    <i class="fas fa-upload me-2"></i>Import Now
                </button>
            </div>

        </div>
    </div>
</div>
{% endblock %}


{% block extra_js %}
<script>
// ── Drop-zone behaviour ───────────────────────────────────────────────────────
const dropZone   = document.getElementById('dropZone');
const fileInput  = document.getElementById('excelFileInput');
const fileNameEl = document.getElementById('selectedFileName');
const fileNameTx = document.getElementById('fileNameText');

fileInput.addEventListener('change', () => {
    if (fileInput.files.length) showFile(fileInput.files[0]);
});

dropZone.addEventListener('dragover', e => {
    e.preventDefault();
    dropZone.style.borderColor = '#1a7a4a';
    dropZone.style.background  = '#f0fff4';
});

dropZone.addEventListener('dragleave', () => {
    dropZone.style.borderColor = '#adb5bd';
    dropZone.style.background  = '#fafbfc';
});

dropZone.addEventListener('drop', e => {
    e.preventDefault();
    dropZone.style.borderColor = '#adb5bd';
    dropZone.style.background  = '#fafbfc';
    const file = e.dataTransfer.files[0];
    if (file && (file.name.endsWith('.xlsx') || file.name.endsWith('.xls'))) {
        // Assign to the file input
        const dt = new DataTransfer();
        dt.items.add(file);
        fileInput.files = dt.files;
        showFile(file);
    } else {
        showToast('Please drop a valid .xlsx or .xls file.', 'warning');
    }
});

function showFile(file) {
    fileNameTx.textContent = file.name;
    fileNameEl.classList.remove('d-none');
    dropZone.style.borderColor = '#1a7a4a';

    // Count rows client-side for a quick preview (just show row count — server does real parsing)
    // For a simple preview we just show the file name and size
    const sizeMB = (file.size / 1024 / 1024).toFixed(2);
    document.getElementById('previewCreate').textContent = '?';
    document.getElementById('previewUpdate').textContent = '?';
    document.getElementById('previewSkip').textContent   = `${sizeMB} MB`;
    document.getElementById('importPreview').classList.remove('d-none');
}

// ── Submit ────────────────────────────────────────────────────────────────────
function submitImport() {
    if (!fileInput.files.length) {
        showToast('Please select an Excel file first.', 'warning');
        return;
    }

    const btn = document.getElementById('importSubmitBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Importing…';

    document.getElementById('importForm').submit();
}

// ── Export button feedback ────────────────────────────────────────────────────
document.getElementById('exportBtn').addEventListener('click', function () {
    const orig = this.innerHTML;
    this.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Preparing…';
    setTimeout(() => { this.innerHTML = orig; }, 3000);
});
</script>
{% endblock %}