{% extends 'base.html' %}
{% load i18n %}
{% block content %}
  <div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="fw-bold">{% trans "Our Products" %}</h2>
        <!-- Live Search -->
        <div class="col-md-5">
            <form hx-get="{% url 'shop:product_list' %}" 
                  hx-trigger="keyup changed delay:500ms from:#search-input"
                  hx-target="#product-grid"
                  hx-swap="innerHTML">
                <input type="text" id="search-input" name="q" 
                       class="form-control" 
                       placeholder="Search products..." 
                       value="{{ request.GET.q }}">
            </form>
        </div>
    </div>

    <div class="row">
      <!-- Categories -->
      <div class="col-lg-3 col-md-4 mb-4">
        <h5 class="mb-3">{% trans 'Categories' %}</h5>
        <ul class="list-group">
          {% if selected_category_slug %}
            <!-- Show only selected category with option to view all -->
            {% for cat in categories %}
              <a href="?category={{ cat.slug }}" class="list-group-item list-group-item-action active">{{ cat.name }}</a>
            {% endfor %}
            <a href="{% url 'shop:product_list' %}" class="list-group-item list-group-item-action text-primary">
              <i class="fas fa-arrow-left me-2"></i>{% trans 'View All Categories' %}
            </a>
          {% else %}
            <!-- Show all categories -->
            {% for cat in categories %}
              <a href="?category={{ cat.slug }}" class="list-group-item list-group-item-action {% if request.GET.category == cat.slug %}active{% endif %}">{{ cat.name }}</a>
            {% endfor %}
          {% endif %}
        </ul>
      </div>

      <!-- Products Container -->
        <div class="col-lg-9 col-md-8">
            <div class="row g-4" id="product-grid">
                {% include "shop/partials/product_grid.html" %}
            </div>
        </div>
    </div>
  </div>

  <!-- ====================== IMAGE GALLERY MODAL ====================== -->
  <div class="modal fade" id="productGalleryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalProductName"></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body p-0 bg-light">
          <div class="text-center position-relative py-4">
            <img id="modalMainImage" class="img-fluid" style="max-height: 520px; object-fit: contain;" />
            <button onclick="prevImage()" class="btn btn-light position-absolute start-0 top-50 translate-middle-y ms-4"><i class="fas fa-chevron-left fa-2x"></i></button>
            <button onclick="nextImage()" class="btn btn-light position-absolute end-0 top-50 translate-middle-y me-4"><i class="fas fa-chevron-right fa-2x"></i></button>
          </div>
          <!-- Thumbnails -->
          <div class="d-flex justify-content-center gap-2 p-3 bg-white" id="modalThumbnails"></div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Global variables
    let currentImages = []
    let currentIndex = 0
    
    function openProductGallery(productId) {
      fetch(`/product-images/${productId}/`)
        .then((response) => {
          if (!response.ok) {
            throw new Error(`HTTP ${response.status}`)
          }
    
          return response.text() // read as text first
        })
        .then((text) => {
          try {
            const data = JSON.parse(text)
    
            currentImages = data.images || []
            currentIndex = 0
    
            if (!currentImages.length) {
              alert('No images available.')
              return
            }
    
            document.getElementById('modalProductName').textContent = data.product_name
            showImage(0)
            renderThumbnails()
    
            new bootstrap.Modal(document.getElementById('productGalleryModal')).show()
          } catch (e) {
            console.error('Invalid JSON:', text)
            alert('Server did not return valid JSON.')
          }
        })
        .catch((error) => {
          console.error('Gallery Error:', error)
          alert('Failed to load product images.')
        })
    }
    
    function showImage(index) {
      if (index < 0 || index >= currentImages.length) return
      currentIndex = index
      const mainImage = document.getElementById('modalMainImage')
      mainImage.style.opacity = 0
    
      setTimeout(() => {
        mainImage.src = currentImages[index].url
        mainImage.style.opacity = 1
        renderThumbnails()
      }, 150)
    }
    
    function prevImage() {
      showImage(currentIndex - 1)
    }
    function nextImage() {
      showImage(currentIndex + 1)
    }
    
    function renderThumbnails() {
      const container = document.getElementById('modalThumbnails')
      container.innerHTML = ''

      currentImages.forEach((img, idx) => {
        const thumb = document.createElement('img')
        thumb.src = img.url
        thumb.className = `img-thumbnail mx-1 ${idx === currentIndex ? 'border-primary border-3' : ''}`
        thumb.style.height = '70px'
        thumb.style.objectFit = 'cover'
        thumb.style.cursor = 'pointer'
        thumb.setAttribute('aria-selected', idx === currentIndex ? 'true' : 'false')
        thumb.addEventListener('click', () => showImage(idx))
        container.appendChild(thumb)
      })
    }

    // Keyboard support for modal image navigation
    document.addEventListener('keydown', function (e) {
      const modal = document.getElementById('productGalleryModal')
      if (modal && modal.classList.contains('show')) {
        if (e.key === 'ArrowLeft') prevImage()
        if (e.key === 'ArrowRight') nextImage()
        if (e.key === 'Escape') {
          const bsModal = bootstrap.Modal.getInstance(modal)
          if (bsModal) bsModal.hide()
        }
      }
    })

    // Toggle Like
    function toggleLike(productId, btn) {
      fetch(`/product/${productId}/like/`, {
        method: 'POST',
        headers: { 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value }
      })
        .then((r) => r.json())
        .then((data) => {
          document.getElementById(`like-count-${productId}`).textContent = data.likes
          const icon = document.getElementById(`like-icon-${productId}`)
          if (data.liked) icon.classList.add('text-danger')
          else icon.classList.remove('text-danger')
        })
    }
    
    // Toggle Wishlist
    function toggleWishlist(productId, btn) {
      fetch(`/product/${productId}/wishlist/`, {
        method: 'POST',
        headers: {
          'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        }
      })
        .then((response) => response.json())
        .then((data) => {
          // Update count
          document.getElementById(`wishlist-count-${productId}`).textContent = data.wishlist_count
    
          // Update icon color
          const icon = document.getElementById(`wishlist-icon-${productId}`)
          if (data.in_wishlist) {
            icon.classList.add('text-warning')
          } else {
            icon.classList.remove('text-warning')
          }
        })
        .catch((error) => console.error('Error:', error))
    }
  </script>

  <style>
    .product-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12) !important;
    }
    .product-image {
      transition: transform 0.4s ease;
    }
    .product-card:hover .product-image {
      transform: scale(1.08);
    }
  </style>
{% endblock %}