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

{% block title %}Media Library - CMS Dashboard{% endblock %}

{% block content %}
<div class="container-fluid p-0">

    <!-- Header Block -->
    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-3 mb-5">
        <div>
            <h4 class="mb-1" style="font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--heading-color);">Media Library</h4>
            <p class="text-muted mb-0" style="font-size: 13.5px;">Upload, search, preview, and manage static assets to reuse across your site.</p>
        </div>
        <!-- Trigger Upload Modal -->
        <button type="button" class="btn btn-primary px-4 py-2.5 fw-semibold d-inline-flex align-items-center gap-2" style="border-radius: 10px; font-size: 14px;" data-bs-toggle="modal" data-bs-target="#uploadModal">
            <i class="fa-solid fa-cloud-arrow-up" style="font-size: 16px;"></i> Upload Image
        </button>
    </div>

    <!-- Alert Messages -->
    {% if messages %}
        <div class="row mb-4">
            <div class="col-12">
                {% for message in messages %}
                    <div class="alert alert-dismissible fade show alert-custom-glass d-flex align-items-center justify-content-between {% if message.tags == 'error' %}alert-error{% elif message.tags == 'info' %}alert-info{% else %}alert-default{% endif %}" role="alert">
                        <div class="d-flex align-items-center gap-3">
                            <i class="fa-solid {% if message.tags == 'error' %}fa-triangle-exclamation text-danger{% else %}fa-circle-check text-success{% endif %}" style="font-size: 18px;"></i>
                            <span>{{ message }}</span>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="position: static; padding: 0;"></button>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

    <!-- Filter and Search -->
    <div class="card-custom mb-4 p-4">
        <form method="get" class="row g-3 align-items-center">
            <div class="col-12 col-md-6">
                <div class="input-group">
                    <span class="input-group-text bg-transparent text-muted" style="border-color: var(--border-color);"><i class="fa-solid fa-magnifying-glass"></i></span>
                    <input type="text" name="q" value="{{ query }}" class="form-control border-start-0 bg-transparent" placeholder="Search images by filename..." style="font-size: 14px; border-color: var(--border-color); color: var(--text-main) !important;">
                </div>
            </div>
            <div class="col-12 col-md-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary fw-semibold px-4" style="border-radius: 10px; font-size: 14px;">Search</button>
                {% if query %}
                <a href="{% url 'media_list' %}" class="btn btn-outline-secondary px-3" style="border-radius: 10px; font-size: 14px;">Reset</a>
                {% endif %}
            </div>
        </form>
    </div>

    <!-- Media Library Grid -->
    <div class="row g-4 mb-4">
        {% for asset in page_obj %}
        <div class="col-6 col-md-4 col-lg-3">
            <div class="card-custom h-100 p-0 overflow-hidden d-flex flex-column position-relative" style="border-color: var(--border-color);">
                <!-- Thumbnail Box -->
                <div class="p-2 bg-light d-flex align-items-center justify-content-center position-relative cursor-pointer" 
                     style="height: 180px; overflow: hidden; border-bottom: 1px solid var(--border-color); cursor: pointer;"
                     onclick="showPreview('{{ asset.file.url }}', '{{ asset.original_filename|escapejs }}', '{{ asset.alt_text|escapejs }}', '{{ asset.file_size|filesizeformat }}', '{% if asset.width and asset.height %}{{ asset.width }} × {{ asset.height }}px{% else %}SVG Vector{% endif %}')">
                    <img src="{{ asset.file.url }}" alt="{{ asset.alt_text|default:asset.original_filename }}" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                </div>
                <!-- Details Card Body -->
                <div class="p-3 d-flex flex-column flex-grow-1">
                    <h6 class="text-truncate fw-bold mb-1 text-dark" title="{{ asset.original_filename }}" style="font-size: 13.5px;">{{ asset.original_filename }}</h6>
                    <div class="d-flex flex-wrap gap-2 mb-3" style="font-size: 11px;">
                        <span class="badge bg-light text-secondary border px-2 py-1" style="font-weight: 500;">
                            {{ asset.file_size|filesizeformat }}
                        </span>
                        <span class="badge bg-light text-secondary border px-2 py-1" style="font-weight: 500;">
                            {% if asset.width and asset.height %}
                                {{ asset.width }} × {{ asset.height }}px
                            {% else %}
                                SVG Vector
                            {% endif %}
                        </span>
                    </div>
                    <!-- Actions -->
                    <div class="d-flex gap-2 mt-auto">
                        <button type="button" class="btn btn-outline-secondary btn-sm flex-grow-1 fw-semibold d-inline-flex align-items-center justify-content-center gap-1.5" style="font-size: 12px; border-radius: 8px;" onclick="copyMediaUrl(this, '{{ asset.file.url }}')">
                            <i class="fa-solid fa-link"></i> Copy URL
                        </button>
                        <form method="post" action="{% url 'media_delete' asset.pk %}" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this media file? This cannot be undone.');">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-outline-danger btn-sm px-2.5" style="border-radius: 8px;" title="Delete Asset">
                                <i class="fa-solid fa-trash-can" style="font-size: 12.5px;"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <!-- Empty State -->
        <div class="col-12">
            <div class="card-custom text-center py-5 text-muted">
                <i class="fa-solid fa-folder-open mb-3 text-muted d-block" style="font-size: 54px; opacity: 0.4;"></i>
                <h5 class="fw-bold mb-1 text-dark">No Media Assets Found</h5>
                <p class="small text-muted mb-0">Upload dynamic images to populate your CMS Media Library.</p>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination Footer -->
    {% if page_obj.has_other_pages %}
    <div class="card-custom p-4 d-flex align-items-center justify-content-between" style="border-color: var(--border-color);">
        <span class="text-muted" style="font-size: 13px;">
            Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} entries
        </span>
        <nav>
            <ul class="pagination pagination-sm mb-0 gap-1">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link bg-transparent border-0 text-muted px-3 py-2" href="?page={{ page_obj.previous_page_number }}{% if query %}&q={{ query }}{% endif %}" style="font-weight: 600;">Previous</a>
                </li>
                {% endif %}
                
                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                    <li class="page-item"><span class="page-link border-0 text-white px-3 py-2" style="background: var(--primary); border-radius: 8px; font-weight: 700; box-shadow: 0 4px 10px rgba(107, 46, 136, 0.2);">{{ num }}</span></li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <li class="page-item"><a class="page-link bg-transparent border-0 text-muted px-3 py-2" href="?page={{ num }}{% if query %}&q={{ query }}{% endif %}" style="border-radius: 8px; font-weight: 600;">{{ num }}</a></li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link bg-transparent border-0 text-muted px-3 py-2" href="?page={{ page_obj.next_page_number }}{% if query %}&q={{ query }}{% endif %}" style="font-weight: 600;">Next</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}

</div>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow" style="border-radius: 16px; overflow: hidden; background: var(--bg-card);">
            <div class="modal-header border-bottom p-4" style="border-color: var(--border-color) !important;">
                <h5 class="modal-title fw-bold" id="uploadModalLabel" style="font-family: 'Outfit', sans-serif; color: var(--heading-color);"><i class="fa-solid fa-cloud-arrow-up text-primary me-2"></i>Upload New Image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" enctype="multipart/form-data" action="{% url 'media_list' %}">
                <div class="modal-body p-4">
                    {% csrf_token %}
                    
                    <div class="mb-4">
                        <label for="{{ upload_form.file.id_for_label }}" class="form-label fw-semibold text-dark">Select File <span class="text-danger">*</span></label>
                        {{ upload_form.file }}
                        <div class="form-text text-muted" style="font-size: 11.5px; margin-top: 6px;">Supported file formats: JPG, JPEG, PNG, SVG, WEBP.</div>
                    </div>
                    
                    <div class="mb-2">
                        <label for="{{ upload_form.alt_text.id_for_label }}" class="form-label fw-semibold text-dark">Alternative Text</label>
                        {{ upload_form.alt_text }}
                        <div class="form-text text-muted" style="font-size: 11.5px; margin-top: 6px;">Brief description (used for screen readers and SEO alt rankings).</div>
                    </div>
                </div>
                <div class="modal-footer border-top p-4 d-flex justify-content-between" style="border-color: var(--border-color) !important;">
                    <button type="button" class="btn btn-outline-secondary px-4 fw-semibold" style="border-radius: 8px;" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary px-4 fw-semibold" style="border-radius: 8px;">Upload Asset</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Image Lightbox Preview Modal -->
<div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow" style="border-radius: 16px; overflow: hidden; background: var(--bg-card);">
            <div class="modal-header border-bottom p-4" style="border-color: var(--border-color) !important;">
                <h5 class="modal-title fw-bold" id="previewTitle" style="font-family: 'Outfit', sans-serif; color: var(--heading-color);"><i class="fa-solid fa-image text-primary me-2"></i>Media Asset Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 text-center">
                <div class="mb-4 bg-light rounded d-flex align-items-center justify-content-center p-3" style="height: 380px; overflow: hidden; border: 1px solid var(--border-color);">
                    <img id="previewImage" src="" alt="" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                </div>
                <div class="text-start px-1">
                    <div class="mb-3">
                        <label class="fw-bold small text-muted text-uppercase mb-1" style="font-size: 11px;">File Name</label>
                        <p id="previewFilename" class="mb-0 fw-bold text-dark" style="font-size: 14.5px;"></p>
                    </div>
                    <div class="mb-3">
                        <label class="fw-bold small text-muted text-uppercase mb-1" style="font-size: 11px;">Alt Description</label>
                        <p id="previewAltText" class="mb-0 text-secondary" style="font-size: 13.5px;"></p>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-4">
                            <label class="fw-bold small text-muted text-uppercase mb-1" style="font-size: 11px;">File Size</label>
                            <p id="previewSize" class="mb-0 text-dark font-weight-bold" style="font-size: 13.5px; font-weight: 600;"></p>
                        </div>
                        <div class="col-6 mb-4">
                            <label class="fw-bold small text-muted text-uppercase mb-1" style="font-size: 11px;">Dimensions</label>
                            <p id="previewDimensions" class="mb-0 text-dark font-weight-bold" style="font-size: 13.5px; font-weight: 600;"></p>
                        </div>
                    </div>
                    <div class="mb-2">
                        <label class="fw-bold small text-muted text-uppercase mb-1" style="font-size: 11px;">Direct File URL</label>
                        <div class="input-group">
                            <input type="text" id="previewUrlInput" class="form-control bg-light" readonly style="font-size: 13px; border-color: var(--border-color);">
                            <button class="btn btn-outline-primary px-4 fw-semibold" type="button" id="previewCopyBtn" style="font-size: 13px;">Copy URL</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Copy URL to Clipboard from image card
    function copyMediaUrl(btn, url) {
        navigator.clipboard.writeText(url).then(() => {
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fa-solid fa-check me-1.5"></i>Copied!';
            btn.classList.remove('btn-outline-secondary');
            btn.classList.add('btn-success', 'text-white');
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.classList.remove('btn-success', 'text-white');
                btn.classList.add('btn-outline-secondary');
            }, 2000);
        }).catch(err => {
            alert('Failed to copy. Manually copy: ' + url);
        });
    }

    // Open image details and lightbox preview
    function showPreview(url, filename, altText, size, dimensions) {
        document.getElementById('previewImage').src = url;
        document.getElementById('previewFilename').innerText = filename;
        document.getElementById('previewAltText').innerText = altText || 'No alternative text provided';
        document.getElementById('previewSize').innerText = size;
        document.getElementById('previewDimensions').innerText = dimensions;
        document.getElementById('previewUrlInput').value = url;
        
        const copyBtn = document.getElementById('previewCopyBtn');
        copyBtn.innerHTML = 'Copy URL';
        copyBtn.onclick = function() {
            navigator.clipboard.writeText(url).then(() => {
                copyBtn.innerHTML = '<i class="fa-solid fa-check me-1.5"></i>Copied!';
                setTimeout(() => { copyBtn.innerHTML = 'Copy URL'; }, 2000);
            });
        };

        const previewModal = new bootstrap.Modal(document.getElementById('previewModal'));
        previewModal.show();
    }
</script>
{% endblock %}