{% extends "base.html" %}

{% block extra_head %}
<style>
  .modal-video {
    width: auto;
    height: 100%;
    max-height: 90vh;
    max-width: 90vw;
  }

  /* 移动端瀑布流布局 */
  @media (max-width: 639px) {
    .video-grid-mobile {
      column-count: 2;
      column-gap: 8px;
      padding: 0;
    }
    .video-grid-mobile .video-item {
      break-inside: avoid;
      margin-bottom: 8px;
      border-radius: 0.375rem; /* rounded-md */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    /* 移除固定宽高比，使用原始比例 */
    .video-grid-mobile .video-item video {
      width: 100%;
      height: auto;
      display: block;
    }
    /* 调整播放图标大小 */
    .video-grid-mobile .video-item i[data-feather="play"] {
      width: 2rem;
      height: 2rem;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-5">
  <div class="flex items-center justify-start mb-4">
    <div class="inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-800 p-1">
      <a href="?page=1"
         class="px-4 py-1.5 text-sm rounded-full transition-colors duration-150 {{ 'bg-white text-gray-900 dark:bg-gray-700 dark:text-white shadow' if filter != 'big' and filter != 'favorite' else 'text-gray-600 dark:text-gray-300' }}">
        全部
      </a>
      <a href="?page=1&filter=big"
         class="ml-1 px-4 py-1.5 text-sm rounded-full transition-colors duration-150 {{ 'bg-white text-gray-900 dark:bg-gray-700 dark:text-white shadow' if filter == 'big' else 'text-gray-600 dark:text-gray-300' }}">
        大文件
      </a>
      <a href="?page=1&filter=favorite"
         class="ml-1 px-4 py-1.5 text-sm rounded-full transition-colors duration-150 {{ 'bg-white text-gray-900 dark:bg-gray-700 dark:text-white shadow' if filter == 'favorite' else 'text-gray-600 dark:text-gray-300' }}">
        收藏
      </a>
    </div>
  </div>
  {% if files %}
  <div class="video-grid-mobile sm:grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 sm:gap-4 mb-5">
    {% for row in files %}
    <div class="video-item group relative cursor-pointer sm:aspect-w-9 sm:aspect-h-16 rounded-lg overflow-hidden shadow-lg"
         data-uri="{{row}}" data-src="/media?uri={{row}}">
      <video class="w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105 sm:h-full"
             preload="metadata" playsinline muted loop
             poster="/thumb?uri={{row}}">
        <source src="/media?uri={{row}}#t=0.1" type="video/mp4">
      </video>
      <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-25 transition-all duration-300 -z-2"></div>
      <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <i data-feather="play" class="w-12 h-12 text-white"></i>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="block py-6 text-gray-500 dark:text-gray-400 text-center">Empty.</p>
  {% endif %}

  {% if has_previous or has_next %}
  <nav class="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 px-4 sm:px-0 mt-8 pt-4">
    <div class="-mt-px flex w-0 flex-1">
      {% if has_previous %}
      <a href="?page={{page-1}}{{ '&filter=' ~ filter if filter != 'all' else '' }}{{ '&min_mb=' ~ min_mb if filter == 'big' and has_min_mb else '' }}" class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-200">
        <i data-feather="arrow-left" class="mr-3 h-5 w-5"></i>
        Previous
      </a>
      {% endif %}
    </div>
    <div class="hidden md:-mt-px md:flex">
      {% if page > 2 %}
        <a href="?page=1" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">1</a>
        {% if page > 3 %}
        <span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 dark:text-gray-400">...</span>
        {% endif %}
      {% endif %}

      {% if has_previous %}
      <a href="?page={{page-1}}{{ '&filter=' ~ filter if filter != 'all' else '' }}{{ '&min_mb=' ~ min_mb if filter == 'big' and has_min_mb else '' }}" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">{{page-1}}</a>
      {% endif %}

      <a href="#" class="inline-flex items-center border-t-2 border-blue-500 px-4 pt-4 text-sm font-medium text-blue-600 dark:text-blue-400" aria-current="page">{{page}}</a>
      
      {% if has_next %}
      <a href="?page={{page+1}}{{ '&filter=' ~ filter if filter != 'all' else '' }}{{ '&min_mb=' ~ min_mb if filter == 'big' and has_min_mb else '' }}" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">{{page+1}}</a>
      {% endif %}

      {% if files|length == 24 and has_next %}
        {% if page < 99 %}
        <span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 dark:text-gray-400">...</span>
        <a href="?page={{ page + 2 }}{{ '&filter=' ~ filter if filter != 'all' else '' }}{{ '&min_mb=' ~ min_mb if filter == 'big' and has_min_mb else '' }}" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">{{ page + 2 }}</a>
        {% endif %}
      {% endif %}
    </div>
    <div class="-mt-px flex w-0 flex-1 justify-end">
      {% if has_next %}
      <a href="?page={{page+1}}{{ '&filter=' ~ filter if filter != 'all' else '' }}{{ '&min_mb=' ~ min_mb if filter == 'big' and has_min_mb else '' }}" class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-200">
        Next
        <i data-feather="arrow-right" class="ml-3 h-5 w-5"></i>
      </a>
      {% endif %}
    </div>
  </nav>
  {% endif %}
</div>

<!-- Video Modal -->
<div class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-90" id="video-modal">
  <div class="relative w-full h-full flex items-center justify-center p-4">
    <video class="modal-video" src="" controls autoplay playsinline></video>
  </div>

  <button class="previous-video absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-white/20 p-2 text-white backdrop-blur-sm hover:bg-white/30 disabled:opacity-50 disabled:cursor-not-allowed">
    <i data-feather="arrow-left"></i>
  </button>
  <button class="next-video absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-white/20 p-2 text-white backdrop-blur-sm hover:bg-white/30 disabled:opacity-50 disabled:cursor-not-allowed">
    <i data-feather="arrow-right"></i>
  </button>
  <a class="info-btn absolute top-4 right-16 rounded-full bg-white/20 p-2 text-white backdrop-blur-sm hover:bg-white/30">
    <i data-feather="info" class="w-7 h-7"></i>
  </a>
  <button class="modal-close absolute top-4 right-4 rounded-full bg-white/20 p-2 text-white backdrop-blur-sm hover:bg-white/30" aria-label="close">
    <i data-feather="x"></i>
  </button>
</div>
{% endblock %}

{% block extra_body %}
<script src="{{ url_for('static', filename='hammer.min.js') }}"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const videoItems = document.querySelectorAll('.video-item');
    const modal = document.getElementById('video-modal');
    if (!modal) return;

    const modalVideo = modal.querySelector('video');
    const infoBtn = modal.querySelector('.info-btn');
    const prevBtn = modal.querySelector('.previous-video');
    const nextBtn = modal.querySelector('.next-video');
    const closeBtn = modal.querySelector('.modal-close');
    let currentIndex = -1;

    function showModal(index) {
      if (index < 0 || index >= videoItems.length) return;
      currentIndex = index;

      const item = videoItems[currentIndex];
      modalVideo.src = item.dataset.src;
      infoBtn.href = "/detail/" + item.dataset.uri;

      prevBtn.disabled = currentIndex === 0;
      nextBtn.disabled = currentIndex === videoItems.length - 1;

      modal.classList.remove('hidden');
      modal.classList.add('flex');
      feather.replace();
    }

    function hideModal() {
      modal.classList.add('hidden');
      modal.classList.remove('flex');
      modalVideo.pause();
      modalVideo.src = "";
    }

    videoItems.forEach((item, index) => {
      item.addEventListener('click', () => showModal(index));
      // Play video on hover for desktop
      item.addEventListener('mouseenter', () => {
        item.querySelector('video').play();
      });
      item.addEventListener('mouseleave', () => {
        item.querySelector('video').pause();
      });
    });

    closeBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      hideModal();
    });

    prevBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      if (currentIndex > 0) showModal(currentIndex - 1);
    });

    nextBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      if (currentIndex < videoItems.length - 1) showModal(currentIndex + 1);
    });

    modal.addEventListener('click', (e) => {
      if (e.target === modal) hideModal();
    });

    document.addEventListener('keydown', (e) => {
      if (modal.classList.contains('hidden')) return;
      if (e.key === 'ArrowLeft') prevBtn.click();
      if (e.key === 'ArrowRight') nextBtn.click();
      if (e.key === 'Escape') hideModal();
    });

    const mc = new Hammer(modal);
    mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
    mc.on('swipeleft', () => nextBtn.click());
    mc.on('swiperight', () => prevBtn.click());
    mc.on('swipedown', () => hideModal());
  });
</script>
{% endblock %}
