{% extends 'administration/base.html.twig' %}

{% block title %}{{ 'admin.media_management'|trans }}{% endblock %}

{% block body %}
    <div class="container-fluid">
        <!-- Header: Titel + Aktionen (Upload, Neuer Ordner) -->
        <div class="row">
            <div class="col-12">
                <div class="admin-card p-4">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
                        <div>
                            <h2 class="gradient-text fw-bold mb-1">
                                <i class="bi bi-images me-2"></i>
                                {{ currentFolder ? currentFolder.name : 'admin.media_management'|trans }}
                            </h2>
                            <p class="text-muted mb-0 small">{{ currentFolder ? 'Inhalt dieses Ordners' : 'admin.manage_media_description'|trans }}</p>
                        </div>
                        <div class="d-flex gap-2 flex-wrap">
                            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#newFolderModal" aria-label="{{ 'admin.media.new_folder'|trans }}">
                                <i class="bi bi-folder-plus me-2"></i>{{ 'admin.media.new_folder'|trans }}
                            </button>
                            <a href="{{ path('admin_media_upload', currentFolder ? { folder_id: currentFolder.id } : {}) }}" class="btn btn-primary">
                                <i class="bi bi-cloud-upload me-2"></i>
                                {{ 'admin.upload_new_media'|trans }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal: Neuer Ordner -->
        <div class="modal fade" id="newFolderModal" tabindex="-1" aria-labelledby="newFolderModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="newFolderModalLabel">
                            <i class="bi bi-folder-plus me-2"></i>{{ 'admin.media.new_folder'|trans }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'admin.modal.close'|trans }}"></button>
                    </div>
                    <form method="post" action="{{ path('admin_media_folder_create') }}" id="newFolderForm">
                        <div class="modal-body">
                            <input type="hidden" name="_token" value="{{ csrf_token('media_folder_create') }}">
                            <input type="hidden" name="parent_id" value="{{ currentFolder ? currentFolder.id : 0 }}">
                            <div class="mb-0">
                                <label for="newFolderName" class="form-label">{{ 'admin.media.folder_name'|trans }}</label>
                                <input type="text" name="name" id="newFolderName" class="form-control" placeholder="{{ 'admin.media.new_folder_placeholder'|trans }}" required autofocus>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ 'admin.custom_fields.cancel'|trans }}</button>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-2"></i>{{ 'admin.media.create_folder'|trans }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Search -->
        <div class="row">
            <div class="col-12">
                <div class="admin-card p-3">
                    <form id="searchForm" method="get" action="{{ path('admin_media') }}" class="row g-2 align-items-center">
                        {% if currentFolder %}<input type="hidden" name="folder_id" value="{{ currentFolder.id }}">{% endif %}
                        <input type="hidden" name="page" value="1">
                        <div class="col-12 col-md-8">
                            <div class="input-group">
                                <span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
                                <input type="text" name="search" class="form-control" placeholder="{{ 'admin.search_placeholder'|trans }}" value="{{ search }}">
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <button type="submit" class="btn btn-outline-primary w-100 w-md-auto">
                                <i class="bi bi-search me-1"></i>
                                {{ 'admin.search_button'|trans }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Drop-Zone: Root (nur anzeigen wenn wir in einem Unterordner sind) -->
        {% if currentFolder %}
            <div class="row g-2 mb-3">
                <div class="col-12">
                    <div class="media-drop-target admin-card p-2 border border-secondary border-2 border-dashed" data-folder-id="0" title="Dateien hier ablegen → in Root verschieben">
                        <i class="bi bi-folder2-open text-muted me-2"></i>
                        <span class="text-muted">{{ 'admin.media.move_to_root'|trans }}</span>
                    </div>
                </div>
            </div>
        {% endif %}

        <!-- Subfolders -->
        {% if subfolders is defined and subfolders|length > 0 %}
            <div class="row g-2 mb-3">
                {% for sub in subfolders %}
                    <div class="col-6 col-md-4 col-lg-3 col-xl-2">
                        <div class="admin-card p-2 d-flex align-items-center gap-2 media-drop-target" data-folder-id="{{ sub.id }}" title="Dateien hier ablegen → in diesen Ordner verschieben">
                            <a href="{{ path('admin_media', { folder_id: sub.id }) }}" class="d-flex align-items-center gap-2 text-decoration-none text-dark flex-grow-1 min-width-0">
                                <i class="bi bi-folder-fill text-warning flex-shrink-0"></i>
                                <span class="text-truncate">{{ sub.name }}</span>
                            </a>
                            <div class="dropdown flex-shrink-0">
                                <button class="btn btn-sm btn-link text-muted py-0 px-1" type="button" data-bs-toggle="dropdown" aria-label="Ordner-Aktionen">
                                    <i class="bi bi-three-dots-vertical"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li>
                                        <form id="rename-form-{{ sub.id }}" method="post" action="{{ path('admin_media_folder_edit', { id: sub.id }) }}" class="d-none">
                                            <input type="hidden" name="_token" value="{{ csrf_token('media_folder_edit') }}">
                                            <input type="hidden" name="name" value="">
                                        </form>
                                        <button type="button" class="dropdown-item" onclick="var n=prompt('Neuer Name','{{ sub.name|e('js') }}'); if(n!==null && n.trim()!=='') { var f=document.getElementById('rename-form-{{ sub.id }}'); f.querySelector('input[name=name]').value=n.trim(); f.requestSubmit(); }"><i class="bi bi-pencil me-2"></i>Umbenennen</button>
                                    </li>
                                    <li>
                                        <form method="post" action="{{ path('admin_media_folder_delete', { id: sub.id }) }}" class="d-inline" onsubmit="return confirm('Ordner wirklich löschen? Medien werden in den übergeordneten Ordner verschoben.');">
                                            <input type="hidden" name="_token" value="{{ csrf_token('media_folder_delete') }}">
                                            <button type="submit" class="dropdown-item text-danger"><i class="bi bi-trash me-2"></i>Löschen</button>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}

        <!-- Media Grid -->
        <div class="row g-3">
            {% for media in mediaFiles %}
                {% set ext = media.path|split('.')|last|lower %}
                {% set isImage = ext in ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'avif'] %}
                {% set isVideo = ext in ['mp4', 'webm', 'mov', 'avi', 'ogv'] %}
                {% set isAudio = ext in ['mp3', 'wav', 'ogg', 'm4a', 'flac'] %}
                {% set isPdf = ext == 'pdf' %}
                <div class="col-6 col-md-4 col-lg-3 col-xl-2">
                    <div class="admin-card media-card h-100 d-flex flex-column overflow-hidden media-draggable" draggable="true" data-media-id="{{ media.id }}" title="{{ 'admin.media.drag_to_move'|trans }}">
                        <a href="{{ path('admin_media_show', { id: media.id }) }}" class="media-preview-link text-decoration-none">
                            <div class="media-preview-wrapper bg-light position-relative">
                                {% if isImage %}
                                    <img src="/uploads/media/{{ media.path }}" alt="{{ media.name }}" class="media-thumb img-fluid" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                                    <div class="media-fallback-icon text-muted" style="display: none;">
                                        <i class="bi bi-file-earmark-image"></i>
                                    </div>
                                {% else %}
                                    <div class="media-fallback-icon text-muted">
                                        {% if isVideo %}
                                            <i class="bi bi-file-earmark-play-fill"></i>
                                        {% elseif isAudio %}
                                            <i class="bi bi-file-earmark-music-fill"></i>
                                        {% elseif isPdf %}
                                            <i class="bi bi-file-earmark-pdf-fill"></i>
                                        {% else %}
                                            <i class="bi bi-file-earmark-fill"></i>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            </div>
                        </a>
                        <div class="p-2 flex-grow-1 d-flex flex-column min-height-0">
                            <h6 class="media-name mb-1 text-truncate" title="{{ media.name }}">{{ media.name }}</h6>
                            <small class="text-muted mb-2">{{ media.createdAt|date('d.m.Y H:i') }}</small>
                            <div class="mt-auto d-flex align-items-center justify-content-between gap-1">
                                <small class="text-muted text-truncate flex-grow-1" title="{{ media.path }}">{{ media.path }}</small>
                                <div class="dropdown flex-shrink-0">
                                    <button class="btn btn-sm btn-outline-secondary py-0 px-1" type="button" data-bs-toggle="dropdown" aria-label="Aktionen"">
                                        <i class="bi bi-three-dots-vertical"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li>
                                            <a class="dropdown-item" href="{{ path('admin_media_show', { id: media.id }) }}">
                                                <i class="bi bi-eye me-2"></i>{{ 'admin.view'|trans }}
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="/uploads/media/{{ media.path }}" target="_blank">
                                                <i class="bi bi-download me-2"></i>Direkt öffnen
                                            </a>
                                        </li>
                                        <li>
                                            <button type="button" class="dropdown-item" onclick="copyToClipboard('{{ media_url(media.id) }}')">
                                                <i class="bi bi-clipboard me-2"></i>{{ 'admin.copy_reference'|trans }}
                                            </button>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <button type="button" class="dropdown-item text-danger" onclick="handleDeleteMedia('{{ media.id }}', '{{ media.name|e('js') }}')">
                                                <i class="bi bi-trash me-2"></i>{{ 'admin.delete'|trans }}
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="col-12">
                    <div class="admin-card empty-state text-center py-5 px-4">
                        <div class="mb-3 opacity-50">
                            <i class="bi bi-images" style="font-size: 4rem;"></i>
                        </div>
                        <h4 class="text-muted mb-2">{{ 'admin.no_media_found'|trans }}</h4>
                        <p class="text-muted mb-4">{{ 'admin.upload_first_media_description'|trans }}</p>
                        <a href="{{ path('admin_media_upload') }}" class="btn btn-primary">
                            <i class="bi bi-cloud-upload me-2"></i>
                            {{ 'admin.upload_first_media_button'|trans }}
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% if mediaFiles|length > 0 and totalPages > 1 %}
            <div class="row mt-3">
                <div class="col-12">
                    {% include 'administration/pagination.html.twig' with {
                        paginationPath: 'admin_media',
                        totalPages: totalPages,
                        currentPage: currentPage,
                        search: search,
                        folder_id: currentFolder ? currentFolder.id : null
                    } %}
                </div>
            </div>
        {% endif %}
    </div>

    <style>
        .media-card { transition: box-shadow 0.2s ease; }
        .media-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
        .media-preview-wrapper {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .media-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .media-fallback-icon {
            font-size: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
        .media-preview-link:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
        .media-name { font-size: 0.95rem; }
        .media-draggable { cursor: grab; }
        .media-draggable:active { cursor: grabbing; }
        .media-draggable.dragging { opacity: 0.6; }
        .media-drop-target.drag-over { background: rgba(var(--bs-primary-rgb), 0.15); border-color: var(--primary-color) !important; }
    </style>

    <script>
        (function() {
            var moveUrlPattern = '{{ path('admin_media_move', { id: 'MEDIA_ID' }) }}';
            var moveToken = '{{ csrf_token('media_move') }}';

            document.querySelectorAll('.media-draggable').forEach(function(el) {
                el.addEventListener('dragstart', function(e) {
                    e.dataTransfer.setData('text/plain', el.getAttribute('data-media-id'));
                    e.dataTransfer.effectAllowed = 'move';
                    el.classList.add('dragging');
                });
                el.addEventListener('dragend', function() { el.classList.remove('dragging'); });
            });

            document.querySelectorAll('.media-drop-target').forEach(function(target) {
                target.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    e.dataTransfer.dropEffect = 'move';
                    target.classList.add('drag-over');
                });
                target.addEventListener('dragleave', function() { target.classList.remove('drag-over'); });
                target.addEventListener('drop', function(e) {
                    e.preventDefault();
                    target.classList.remove('drag-over');
                    var mediaId = e.dataTransfer.getData('text/plain');
                    var folderId = target.getAttribute('data-folder-id');
                    if (!mediaId) return;
                    var url = moveUrlPattern.replace('MEDIA_ID', mediaId);
                    var form = new FormData();
                    form.append('_token', moveToken);
                    form.append('folder_id', folderId === null ? '0' : folderId);
                    fetch(url, { method: 'POST', body: form, headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(function(r) { return r.json().then(function(d) { return { ok: r.ok, data: d }; }); })
                        .then(function(result) {
                            if (result.ok && result.data.success) { window.location.reload(); }
                            else { alert(result.data && result.data.error ? result.data.error : 'Verschieben fehlgeschlagen.'); }
                        })
                        .catch(function() { alert('Verschieben fehlgeschlagen.'); });
                });
            });
        })();

        (function() {
            var modal = document.getElementById('newFolderModal');
            var input = document.getElementById('newFolderName');
            if (modal && input) {
                modal.addEventListener('shown.bs.modal', function() { input.value = ''; input.focus(); });
                modal.addEventListener('hidden.bs.modal', function() { input.value = ''; });
            }
        })();

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function() {
                if (window.adminNotifications && window.adminNotifications.success) {
                    window.adminNotifications.success(typeof t === 'function' ? t('admin.reference_codes.copied') : 'Kopiert', typeof t === 'function' ? t('admin.reference_codes.copied_message') : '');
                } else { alert('URL kopiert'); }
            }).catch(function() {
                if (window.adminNotifications && window.adminNotifications.error) {
                    window.adminNotifications.error(typeof t === 'function' ? t('admin.reference_codes.copy_error') : 'Fehler', '');
                } else { alert('Kopieren fehlgeschlagen'); }
            });
        }

        async function handleDeleteMedia(mediaId, mediaName) {
            var confirmed = false;
            if (typeof showDeleteConfirm === 'function') {
                confirmed = await showDeleteConfirm('{{ 'admin.media.delete_confirm_prefix'|trans }} "' + mediaName + '"', { warning: '{{ 'admin.media.delete_warning'|trans }}' });
            } else {
                confirmed = confirm('{{ 'admin.media.delete_confirm_prefix'|trans }} "' + mediaName + '" wirklich löschen?');
            }
            if (!confirmed) return;
            var loading = null;
            if (typeof showLoading === 'function') loading = showLoading(window.adminModals && window.adminModals.t ? window.adminModals.t('deleting') : 'Löschen...');
            try {
                var response = await fetch('{{ path('admin_media_delete', {id: '__ID__'}) }}'.replace('__ID__', mediaId), { method: 'GET' });
                if (loading && loading.close) loading.close();
                if (response.ok) {
                    if (window.adminNotifications && window.adminNotifications.success) {
                        window.adminNotifications.success('{{ 'success.media_deleted'|trans }}', '');
                    }
                    setTimeout(function() { window.location.reload(); }, 800);
                } else {
                    if (window.adminNotifications && window.adminNotifications.error) {
                        window.adminNotifications.error('{{ 'admin.modal.delete_error'|trans }}', '');
                    }
                }
            } catch (err) {
                if (loading && loading.close) loading.close();
                if (window.adminNotifications && window.adminNotifications.error) {
                    window.adminNotifications.error('{{ 'admin.modal.unexpected_error'|trans }}', '');
                }
            }
        }
    </script>
{% endblock %}