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

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

  <div style="margin-top: 2rem; padding: 1rem; background: #f8f9fa; border-radius: 8px;">
    <h2>🖼️ Add Images</h2>
    <p style="color:#666;">Pick a section and an image type, then drag your pictures in. Gallery and Additional images can hold as many as you like — other types replace whatever is already there.</p>

    {% if sections %}
      <div style="display:flex; gap:1rem; flex-wrap:wrap; margin-bottom: 1rem;">
        <div>
          <label for="section_selector"><strong>Section:</strong></label><br>
          <select id="section_selector" style="margin-top:0.3rem; padding: 0.4rem; min-width:260px;">
            <option value="">-- Choose a section --</option>
            {% for section in sections %}
              <option value="{{ section.id }}">
                {{ section.page.title }} → {{ section.title|default:section.get_section_type_display }}
              </option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label for="media_type_selector"><strong>Image type:</strong></label><br>
          <select id="media_type_selector" style="margin-top:0.3rem; padding: 0.4rem; min-width:200px;">
            {% for value, label in media_types %}
              <option value="{{ value }}" {% if value == "gallery" %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </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 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 sections found. Add a Page and at least one Section 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 sectionSelector = document.getElementById('section_selector');
      const mediaTypeSelector = document.getElementById('media_type_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');

      if (!sectionSelector) { return; }

      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(); }; })(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 || !sectionSelector.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 sectionId = sectionSelector.value;
        if (!sectionId) { messageDiv.innerHTML = '<div style="background:#f8d7da; padding:0.75rem;">❌ Select a section first.</div>'; return; }
        if (selectedFiles.length === 0) return;

        const formData = new FormData();
        selectedFiles.forEach(f => formData.append('file', f));
        formData.append('section_id', sectionId);
        formData.append('media_type', mediaTypeSelector.value);

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

        try {
          const response = await fetch('{% url "upload_gallery" %}', {
            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);
      sectionSelector.addEventListener('change', updateUploadButton);
      updateUploadButton();
    });
  </script>
{% endblock %}