<div class="max-w-6xl mx-auto">
  <%= render 'header' %>
  <div class="bg-white rounded-lg shadow overflow-hidden">
    <%= render 'navigation', current_tab: 'photos' %>
    <div class="p-6">
      <div class="mb-6">
        <p class="text-sm text-gray-600">Manage photos for this property. Drag and drop to reorder. Click on a photo to edit its alt text for SEO.</p>
      </div>
      <!-- Current Photos -->
      <% if @prop.respond_to?(:prop_photos) && @prop.prop_photos.any? %>
        <div class="mb-8">
          <h3 class="text-lg font-semibold text-gray-900 mb-4">Current Photos (<%= @prop.prop_photos.count %>)</h3>

          <!-- Alt-text warning banner if missing -->
          <% missing_alt_count = @prop.prop_photos.where(description: [nil, '']).count %>
          <% if missing_alt_count > 0 %>
            <div class="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg flex items-start gap-3">
              <svg class="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
              </svg>
              <div>
                <p class="text-sm font-medium text-yellow-800">
                  <%= missing_alt_count %> photo<%= missing_alt_count > 1 ? 's are' : ' is' %> missing alt text
                </p>
                <p class="text-xs text-yellow-700 mt-1">Alt text improves accessibility and SEO. Click on a photo to add descriptive text.</p>
              </div>
            </div>
          <% end %>

          <div id="sortable-photos" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            <% @prop.prop_photos.order(:sort_order).each_with_index do |photo, index| %>
              <div class="relative group photo-item bg-gray-50 rounded-lg p-2" data-photo-id="<%= photo.id %>">
                <div class="relative">
                  <% if photo_has_image?(photo) %>
                    <%= photo_image_tag photo, variant_options: { resize_to_limit: [200, 200] }, class: "w-full h-32 object-cover rounded cursor-move", alt: photo.description.presence || "Photo #{index + 1}" %>
                    <% if photo.external? %>
                      <div class="absolute top-1 right-1 bg-blue-500 bg-opacity-75 text-white text-xs px-1.5 py-0.5 rounded" title="External URL">
                        ext
                      </div>
                    <% end %>
                  <% else %>
                    <div class="w-full h-32 bg-gray-200 rounded flex items-center justify-center">
                      <span class="text-gray-400 text-sm">No image</span>
                    </div>
                  <% end %>
                  <div class="absolute top-1 left-1 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
                    #<%= index + 1 %>
                  </div>
                  <!-- Alt text status indicator -->
                  <div class="absolute bottom-1 right-1">
                    <% if photo.description.present? %>
                      <span class="bg-green-500 bg-opacity-75 text-white text-xs px-1.5 py-0.5 rounded" title="Has alt text">
                        <svg class="w-3 h-3 inline" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        ALT
                      </span>
                    <% else %>
                      <span class="bg-yellow-500 bg-opacity-75 text-white text-xs px-1.5 py-0.5 rounded" title="Missing alt text">
                        <svg class="w-3 h-3 inline" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                      </span>
                    <% end %>
                  </div>
                  <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity rounded flex items-center justify-center gap-2">
                    <button type="button"
                            onclick="openAltTextModal('<%= photo.id %>', '<%= j(photo.description.to_s) %>')"
                            class="text-white text-xs hover:underline bg-blue-600 px-2 py-1 rounded">
                      Edit Alt
                    </button>
                    <%= button_to 'Remove',
                        remove_photo_site_admin_prop_path(@prop, photo_id: photo.id),
                        method: :delete,
                        class: 'text-white text-xs hover:underline bg-red-600 px-2 py-1 rounded',
                        data: { turbo_confirm: 'Are you sure you want to remove this photo?' } %>
                  </div>
                </div>
                <!-- Inline alt text display -->
                <div class="mt-2">
                  <p class="text-xs text-gray-500 truncate" title="<%= photo.description %>">
                    <span class="font-medium">Alt:</span>
                    <span class="alt-text-display" data-photo-id="<%= photo.id %>">
                      <%= photo.description.present? ? photo.description : '<em class="text-yellow-600">Not set</em>'.html_safe %>
                    </span>
                  </p>
                </div>
              </div>
            <% end %>
          </div>
          
          <!-- Reorder Form -->
          <%= form_with url: reorder_photos_site_admin_prop_path(@prop), method: :patch, local: true, id: "reorder-form", class: "mt-4" do |f| %>
            <%= f.hidden_field :photo_order, id: "photo-order-input", value: @prop.prop_photos.order(:sort_order).pluck(:id).join(',') %>
            <button type="submit" id="save-order-btn" class="hidden px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
              Save New Order
            </button>
          <% end %>
        </div>
      <% else %>
        <div class="mb-8 p-8 bg-gray-50 rounded-lg text-center">
          <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
          <p class="mt-2 text-sm text-gray-600">No photos uploaded yet</p>
        </div>
      <% end %>
      <!-- Upload Form -->
      <% if current_website&.external_image_mode %>
        <!-- External URL Mode - Add photos via URL -->
        <div class="border-2 border-dashed border-blue-300 rounded-lg p-8 hover:border-blue-500 transition-colors bg-blue-50">
          <div class="flex items-center justify-center mb-4">
            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
              <svg class="w-4 h-4 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path>
              </svg>
              External Image Mode
            </span>
          </div>
          <%= form_with url: upload_photos_site_admin_prop_path(@prop), method: :post, local: true, id: "external-url-form" do |f| %>
            <div class="text-center mb-4">
              <svg class="mx-auto h-12 w-12 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
              </svg>
              <p class="mt-2 text-sm text-gray-700">Add photos by entering image URLs</p>
              <p class="mt-1 text-xs text-gray-500">Enter one URL per line. Images must be publicly accessible.</p>
            </div>
            <div class="max-w-xl mx-auto">
              <%= f.text_area :external_urls,
                  rows: 4,
                  class: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm",
                  placeholder: "https://example.com/image1.jpg\nhttps://example.com/image2.jpg" %>
              <div class="mt-4 text-center">
                <%= f.submit 'Add Photos from URLs', class: 'px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 cursor-pointer' %>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <!-- Normal Upload Mode - Upload files -->
        <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-500 transition-colors">
          <%= form_with url: upload_photos_site_admin_prop_path(@prop), method: :post, local: true, multipart: true, id: "photo-upload-form" do |f| %>
            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
            </svg>
            <p class="mt-2 text-sm text-gray-600">Drag and drop photos here, or click to select</p>
            <p class="mt-1 text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
            <div class="mt-4">
              <%= f.file_field :photos, multiple: true, class: "hidden", id: "photo-upload", accept: "image/*" %>
              <label for="photo-upload" class="cursor-pointer px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 inline-block">
                Select Photos
              </label>
            </div>
            <div id="selected-files" class="mt-4 text-sm text-gray-600 hidden">
              <p>Selected: <span id="file-count">0</span> file(s)</p>
              <%= f.submit 'Upload Photos', class: 'mt-2 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700' %>
            </div>
          <% end %>
        </div>
      <% end %>
      <script>
        // File upload handling (only in non-external mode)
        const photoUploadInput = document.getElementById('photo-upload');
        if (photoUploadInput) {
          photoUploadInput.addEventListener('change', function(e) {
            const fileCount = e.target.files.length;
            const selectedFilesDiv = document.getElementById('selected-files');
            const fileCountSpan = document.getElementById('file-count');

            if (fileCount > 0) {
              selectedFilesDiv.classList.remove('hidden');
              fileCountSpan.textContent = fileCount;
            } else {
              selectedFilesDiv.classList.add('hidden');
            }
          });
        }

        // Drag and drop reordering
        const sortableContainer = document.getElementById('sortable-photos');
        if (sortableContainer) {
          let draggedItem = null;
          
          sortableContainer.querySelectorAll('.photo-item').forEach(item => {
            item.setAttribute('draggable', 'true');
            
            item.addEventListener('dragstart', function(e) {
              draggedItem = this;
              this.style.opacity = '0.5';
            });
            
            item.addEventListener('dragend', function(e) {
              this.style.opacity = '1';
              draggedItem = null;
              updatePhotoOrder();
            });
            
            item.addEventListener('dragover', function(e) {
              e.preventDefault();
            });
            
            item.addEventListener('dragenter', function(e) {
              e.preventDefault();
              if (this !== draggedItem) {
                this.style.border = '2px dashed #3b82f6';
              }
            });
            
            item.addEventListener('dragleave', function(e) {
              this.style.border = '';
            });
            
            item.addEventListener('drop', function(e) {
              e.preventDefault();
              this.style.border = '';
              if (this !== draggedItem) {
                const allItems = [...sortableContainer.querySelectorAll('.photo-item')];
                const draggedIndex = allItems.indexOf(draggedItem);
                const targetIndex = allItems.indexOf(this);
                
                if (draggedIndex < targetIndex) {
                  this.parentNode.insertBefore(draggedItem, this.nextSibling);
                } else {
                  this.parentNode.insertBefore(draggedItem, this);
                }
              }
            });
          });
          
          function updatePhotoOrder() {
            const items = sortableContainer.querySelectorAll('.photo-item');
            const order = [...items].map(item => item.dataset.photoId);
            document.getElementById('photo-order-input').value = order.join(',');
            document.getElementById('save-order-btn').classList.remove('hidden');
            
            // Update the position numbers
            items.forEach((item, index) => {
              const badge = item.querySelector('.absolute.top-1');
              if (badge) {
                badge.textContent = '#' + (index + 1);
              }
            });
          }
        }
      </script>
      <!-- Form Actions -->
      <div class="flex justify-end items-center mt-8 pt-6 border-t border-gray-200">
        <div class="flex space-x-3">
          <%= link_to 'Back to Property', site_admin_prop_path(@prop), class: 'px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50' %>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Alt Text Edit Modal -->
<div id="alt-text-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50" onclick="closeAltTextModal(event)">
  <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4" onclick="event.stopPropagation()">
    <div class="p-4 border-b border-gray-200">
      <h3 class="text-lg font-semibold text-gray-900">Edit Alt Text</h3>
      <p class="text-sm text-gray-500 mt-1">Describe this image for accessibility and SEO</p>
    </div>
    <div class="p-4">
      <label for="alt-text-input" class="block text-sm font-medium text-gray-700 mb-2">
        Alt Text (Image Description)
      </label>
      <textarea id="alt-text-input"
                rows="3"
                class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm"
                placeholder="e.g., Spacious living room with hardwood floors and large windows overlooking the garden"></textarea>
      <p class="text-xs text-gray-500 mt-2">
        <span id="alt-char-count">0</span>/125 characters recommended
      </p>
      <div class="mt-3 p-3 bg-gray-50 rounded-lg">
        <p class="text-xs text-gray-600 font-medium">Tips for good alt text:</p>
        <ul class="text-xs text-gray-500 mt-1 space-y-1">
          <li>• Be descriptive but concise</li>
          <li>• Describe what's in the image, not just "photo of..."</li>
          <li>• Include key features visible in the image</li>
          <li>• Don't repeat property title - add unique details</li>
        </ul>
      </div>
    </div>
    <div class="p-4 border-t border-gray-200 flex justify-end gap-3">
      <button type="button"
              onclick="closeAltTextModal()"
              class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
        Cancel
      </button>
      <button type="button"
              id="save-alt-text-btn"
              onclick="saveAltText()"
              class="px-4 py-2 bg-blue-600 text-white rounded-md shadow-sm text-sm font-medium hover:bg-blue-700">
        Save Alt Text
      </button>
    </div>
  </div>
</div>

<script>
  let currentPhotoId = null;
  const altTextModal = document.getElementById('alt-text-modal');
  const altTextInput = document.getElementById('alt-text-input');
  const altCharCount = document.getElementById('alt-char-count');
  const saveBtn = document.getElementById('save-alt-text-btn');

  // Character count update
  altTextInput.addEventListener('input', function() {
    const count = this.value.length;
    altCharCount.textContent = count;
    if (count > 125) {
      altCharCount.classList.add('text-yellow-600');
    } else {
      altCharCount.classList.remove('text-yellow-600');
    }
  });

  function openAltTextModal(photoId, currentAltText) {
    currentPhotoId = photoId;
    altTextInput.value = currentAltText || '';
    altCharCount.textContent = altTextInput.value.length;
    altTextModal.classList.remove('hidden');
    altTextModal.classList.add('flex');
    altTextInput.focus();
  }

  function closeAltTextModal(event) {
    if (event && event.target !== altTextModal) return;
    altTextModal.classList.add('hidden');
    altTextModal.classList.remove('flex');
    currentPhotoId = null;
  }

  // Close on Escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && !altTextModal.classList.contains('hidden')) {
      closeAltTextModal();
    }
  });

  function saveAltText() {
    if (!currentPhotoId) return;

    const description = altTextInput.value.trim();
    saveBtn.disabled = true;
    saveBtn.textContent = 'Saving...';

    fetch('<%= update_photo_alt_site_admin_prop_path(@prop) %>', {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
        'Accept': 'application/json'
      },
      body: `photo_id=${currentPhotoId}&description=${encodeURIComponent(description)}`
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        // Update the display
        const displayEl = document.querySelector(`.alt-text-display[data-photo-id="${currentPhotoId}"]`);
        if (displayEl) {
          displayEl.innerHTML = description || '<em class="text-yellow-600">Not set</em>';
        }

        // Update the status indicator
        const photoItem = document.querySelector(`.photo-item[data-photo-id="${currentPhotoId}"]`);
        if (photoItem) {
          const indicator = photoItem.querySelector('.absolute.bottom-1.right-1');
          if (indicator) {
            if (description) {
              indicator.innerHTML = `<span class="bg-green-500 bg-opacity-75 text-white text-xs px-1.5 py-0.5 rounded" title="Has alt text">
                <svg class="w-3 h-3 inline" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                ALT
              </span>`;
            } else {
              indicator.innerHTML = `<span class="bg-yellow-500 bg-opacity-75 text-white text-xs px-1.5 py-0.5 rounded" title="Missing alt text">
                <svg class="w-3 h-3 inline" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
              </span>`;
            }
          }
        }

        closeAltTextModal();
      } else {
        alert('Failed to save alt text: ' + (data.errors || ['Unknown error']).join(', '));
      }
    })
    .catch(error => {
      console.error('Error:', error);
      alert('Failed to save alt text. Please try again.');
    })
    .finally(() => {
      saveBtn.disabled = false;
      saveBtn.textContent = 'Save Alt Text';
    });
  }
</script>
