<div class="mx-auto mt-4 w-full max-w-2xl flex flex-col gap-4 pb-4">
  <div class="text-center">
    <h1 class="text-2xl font-semibold mb-1">Visual Search</h1>
    <p class="text-slate-600">Find images similar to the one you provide.</p>
  </div>
  <% if flash[:error] %>
    <div class="bg-red-50 text-red-700 p-4 rounded-md border border-red-300">
      <%= flash[:error] %>
    </div>
  <% end %>
  <div class="bg-white rounded-lg border border-slate-300 shadow-sm overflow-hidden">
    <div class="p-4 sm:p-6">
      <%= form_with url: visual_results_domain_posts_path, method: :post, multipart: true, class: "flex flex-col gap-4" do |form| %>
        <div id="drag-drop-area" class="border-2 border-dashed border-slate-300 rounded-lg p-6 text-center mb-4 transition-colors duration-200">
          <div class="flex flex-col items-center justify-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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="text-slate-600 font-medium">Drag and drop an image here</p>
            <p class="text-xs text-slate-500">or use one of the options below</p>
          </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col gap-2">
            <h3 class="text-lg font-medium">Option 1: Upload an image</h3>
            <div class="flex flex-col gap-1">
              <%= form.label :image_file, "Choose an image file", class: "text-sm font-medium text-slate-700" %>
              <%= form.file_field :image_file, accept: "image/png,image/jpeg,image/jpg,image/gif,image/webp", class: "w-full rounded-md border-slate-300 text-sm", id: "image-file-input" %>
              <p class="text-xs text-slate-500">Supported formats: JPG, PNG, GIF, WebP</p>
            </div>
          </div>
          <div class="flex flex-col gap-2">
            <h3 class="text-lg font-medium">Option 2: Provide image URL</h3>
            <div class="flex flex-col gap-1">
              <%= form.label :image_url, "Image URL", class: "text-sm font-medium text-slate-700" %>
              <%= form.url_field :image_url, class: "w-full rounded-md border-slate-300 text-sm", placeholder: "https://example.com/image.jpg" %>
              <p class="text-xs text-slate-500">Enter the direct URL to an image</p>
            </div>
          </div>
        </div>
        <div class="border-t border-slate-200 my-4"></div>
        <div class="mt-4">
          <%= form.submit "Search for Similar Images", class: "w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-sm font-medium transition-colors" %>
        </div>
      <% end %>
    </div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const dragDropArea = document.getElementById('drag-drop-area');
    const fileInput = document.getElementById('image-file-input');

    // Prevent default drag behaviors
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
      dragDropArea.addEventListener(eventName, preventDefaults, false);
      document.body.addEventListener(eventName, preventDefaults, false);
    });

    // Highlight drop area when item is dragged over it
    ['dragenter', 'dragover'].forEach(eventName => {
      dragDropArea.addEventListener(eventName, highlight, false);
    });

    // Remove highlight when item is dragged out or dropped
    ['dragleave', 'drop'].forEach(eventName => {
      dragDropArea.addEventListener(eventName, unhighlight, false);
    });

    // Handle dropped files
    dragDropArea.addEventListener('drop', handleDrop, false);

    function preventDefaults(e) {
      e.preventDefault();
      e.stopPropagation();
    }

    function highlight() {
      dragDropArea.classList.add('border-blue-500');
      dragDropArea.classList.add('bg-blue-50');
    }

    function unhighlight() {
      dragDropArea.classList.remove('border-blue-500');
      dragDropArea.classList.remove('bg-blue-50');
    }

    function handleDrop(e) {
      const dt = e.dataTransfer;
      const files = dt.files;

      if (files.length) {
        // Check if the dropped file is an image
        const file = files[0];
        if (file.type.match('image.*')) {
          // Update the file input with the dropped file
          fileInput.files = files;

          // Show file name as feedback
          const fileName = document.createElement('p');
          fileName.textContent = `Selected: ${file.name}`;
          fileName.className = 'text-sm text-blue-600 mt-2';

          // Remove any previous file name
          const previousFileName = dragDropArea.querySelector('.text-blue-600');
          if (previousFileName) {
            previousFileName.remove();
          }

          dragDropArea.appendChild(fileName);
        } else {
          // Alert if file is not an image
          alert('Please drop an image file.');
        }
      }
    }
  });
</script>
