{% extends "admin/change_list.html" %}

{% block content %}
  {{ block.super }}

  <div style="margin-top: 2rem; padding: 1rem; background: #f8f9fa; border-radius: 8px;">
    <h2>📸 Upload Page Gallery Images</h2>

    {% if pages %}
      <div style="margin-bottom: 1rem;">
        <label for="page_selector"><strong>Select Page:</strong></label>
        <select id="page_selector" style="margin-left: 1rem; padding: 0.3rem;">
          <option value="">-- Choose a page --</option>
          {% for page in pages %}
            <option value="{{ page.id }}" {% if page.id|stringformat:"s" == page_id %}selected{% endif %}>
              {{ page.title }}
            </option>
          {% endfor %}
        </select>
      </div>

      <!-- Drag & Drop Zone -->
      <div id="dropzone-native" style="border: 2px dashed #007bff; background: white; border-radius: 8px; padding: 2rem; text-align: center; cursor: pointer;">
        <div>📎 Drag & drop multiple images here or click to select</div>
        <input type="file" id="file-input" multiple accept="image/*" style="display: none;">
      </div>

      <div id="file-list" style="margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem;"></div>

      <button id="upload-button" class="button" style="margin-top: 1rem; background: #28a745; color: white; padding: 8px 16px; border: none; border-radius: 4px;" disabled>🚀 Upload Images</button>
      <div id="upload-message" style="margin-top: 1rem;"></div>
    {% else %}
      <div style="background: #fff3cd; padding: 1rem;">⚠️ No pages found. Create a Gallery page first.</div>
    {% endif %}
  </div>
{% endblock %}

{% block extrahead %}
  {{ block.super }}
  <style>
    #dropzone-native.drag-over { background-color: #e9f0ff; border-color: #0056b3; }
    .file-preview { position: relative; display: inline-block; margin: 0.25rem; }
    .file-preview img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid #ddd; }
    .remove-file { position: absolute; top: -8px; right: -8px; background: red; color: white; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 18px; cursor: pointer; }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const pageSelector = document.getElementById('page_selector');
      const fileInput = document.getElementById('file-input');
      const dropZone = document.getElementById('dropzone-native');
      const uploadButton = document.getElementById('upload-button');
      const messageDiv = document.getElementById('upload-message');
      const fileListDiv = document.getElementById('file-list');

      let selectedFiles = [];

      function updateFileList() {
        fileListDiv.innerHTML = '';
        for (let i = 0; i < selectedFiles.length; i++) {
          const file = selectedFiles[i];
          const reader = new FileReader();
          const previewDiv = document.createElement('div');
          previewDiv.className = 'file-preview';
          const img = document.createElement('img');
          reader.onload = function(e) { img.src = e.target.result; };
          reader.readAsDataURL(file);
          previewDiv.appendChild(img);
          const removeBtn = document.createElement('div');
          removeBtn.className = 'remove-file';
          removeBtn.textContent = '×';
          removeBtn.onclick = (function(idx) { return function() { selectedFiles.splice(idx, 1); updateFileList(); updateUploadButton(); }; })(i);
          previewDiv.appendChild(removeBtn);
          fileListDiv.appendChild(previewDiv);
        }
        updateUploadButton();
        messageDiv.innerHTML = selectedFiles.length ? `<div style="background:#cfe2ff; padding:0.75rem;">📸 ${selectedFiles.length} file(s) selected.</div>` : '';
      }

      function updateUploadButton() {
        uploadButton.disabled = (selectedFiles.length === 0 || !pageSelector.value);
      }

      function addFiles(fileList) {
        selectedFiles = selectedFiles.concat(Array.from(fileList));
        updateFileList();
      }

      dropZone.addEventListener('click', () => fileInput.click());
      fileInput.addEventListener('change', (e) => { addFiles(e.target.files); fileInput.value = ''; });
      dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); });
      dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
      dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('drag-over'); addFiles(e.dataTransfer.files); });

      async function uploadFiles() {
        const pageId = pageSelector.value;
        if (!pageId) { messageDiv.innerHTML = '<div style="background:#f8d7da; padding:0.75rem;">❌ Select a page first.</div>'; return; }
        if (selectedFiles.length === 0) return;

        const formData = new FormData();
        selectedFiles.forEach(f => formData.append('file', f));
        formData.append('page_id', pageId);

        uploadButton.disabled = true;
        uploadButton.textContent = '⏳ Uploading...';
        messageDiv.innerHTML = '<div style="background:#cfe2ff; padding:0.75rem;">Uploading...</div>';

        try {
          const response = await fetch('{% url "upload_page_gallery_images" %}', {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}' },
            body: formData
          });
          const data = await response.json();
          if (response.ok && data.status === 'success') {
            messageDiv.innerHTML = `<div style="background:#d4edda; padding:0.75rem;">✅ ${data.uploaded} image(s) uploaded! Refreshing...</div>`;
            setTimeout(() => location.reload(), 800);
          } else {
            throw new Error(data.error || 'Upload failed');
          }
        } catch (err) {
          messageDiv.innerHTML = `<div style="background:#f8d7da; padding:0.75rem;">❌ Error: ${err.message}</div>`;
          uploadButton.disabled = false;
          uploadButton.textContent = '🚀 Upload Images';
        }
      }

      uploadButton.addEventListener('click', uploadFiles);
      pageSelector.addEventListener('change', updateUploadButton);
      updateUploadButton();
    });
  </script>
{% endblock %}