{% extends "base.html" %}

{% block extra_head %}
<style>
  .video-player {
    max-height: calc(100vh - 156px);
    object-fit: contain;
  }

  .video-stage {
    min-height: min(calc(100vh - 136px), 820px);
    overflow: hidden;
  }

  .material-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(55 65 81);
    transition: background-color 0.16s ease, color 0.16s ease;
  }

  .material-icon-btn:hover {
    background: rgba(229, 231, 235, 0.86);
    color: rgb(17 24 39);
  }

  [data-theme="dark"] .material-icon-btn {
    color: rgb(209 213 219);
  }

  [data-theme="dark"] .material-icon-btn:hover {
    background: rgba(55, 65, 81, 0.78);
    color: white;
  }

  .favorite-btn.active {
    background: rgb(254 226 226);
    color: rgb(220 38 38);
  }

  [data-theme="dark"] .favorite-btn.active {
    background: rgba(127, 29, 29, 0.72);
    color: rgb(252 165 165);
  }

  .video-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
  }

  .speed-btn {
    height: 32px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: rgb(75 85 99);
    transition: background-color 0.16s ease, color 0.16s ease;
  }

  .speed-btn:hover {
    background: rgb(243 244 246);
    color: rgb(17 24 39);
  }

  .speed-btn.is-active {
    background: rgb(17 24 39);
    color: white;
  }

  [data-theme="dark"] .speed-btn {
    color: rgb(209 213 219);
  }

  [data-theme="dark"] .speed-btn:hover {
    background: rgb(55 65 81);
    color: white;
  }

  [data-theme="dark"] .speed-btn.is-active {
    background: rgb(229 231 235);
    color: rgb(17 24 39);
  }

  @media (max-width: 1023px) {
    .video-detail-grid {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .video-stage {
      min-height: auto;
    }

    .video-player {
      max-height: 72vh;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-neutral-50 py-3 dark:bg-neutral-950">
  <div class="container mx-auto max-w-7xl px-3">
    <header class="mb-3 flex h-12 items-center justify-between gap-3">
      <button onclick="history.back()" class="material-icon-btn shrink-0" aria-label="返回" type="button">
        <i data-feather="arrow-left" class="w-5 h-5"></i>
      </button>

      <div class="relative flex min-w-0 items-center gap-1">
        {% if previous_item %}
        <a href="/detail/{{ previous_item_path_encoded }}" class="material-icon-btn" aria-label="上一个视频">
          <i data-feather="chevron-left" class="w-5 h-5"></i>
        </a>
        {% endif %}

        {% if next_item %}
        <a href="/detail/{{ next_item_path_encoded }}" class="material-icon-btn" aria-label="下一个视频">
          <i data-feather="chevron-right" class="w-5 h-5"></i>
        </a>
        {% endif %}

        <button
          id="favorite-btn"
          class="favorite-btn material-icon-btn"
          aria-label="收藏"
          type="button"
        >
          <i data-feather="heart" class="w-5 h-5"></i>
          <span id="favorite-text" class="sr-only">添加收藏</span>
        </button>

        <button id="pip-btn" class="material-icon-btn" aria-label="画中画" type="button">
          <i data-feather="minimize-2" class="w-5 h-5"></i>
        </button>

        <button id="fullscreen-btn" class="material-icon-btn" aria-label="全屏播放" type="button">
          <i data-feather="maximize" class="w-5 h-5"></i>
        </button>

        <button id="more-menu-btn" class="material-icon-btn" aria-label="更多操作" type="button" aria-haspopup="menu" aria-controls="detail-action-menu" aria-expanded="false">
          <i data-feather="more-vertical" class="w-5 h-5"></i>
        </button>

        <div id="detail-action-menu" class="detail-action-menu" role="menu" aria-label="视频操作" hidden>
          <button id="set-thumb-btn" class="detail-action-item" type="button" role="menuitem">
            <i data-feather="camera" class="w-4 h-4"></i>
            <span>设当前帧为封面</span>
          </button>
          <button id="copy-link-btn" class="detail-action-item" type="button" role="menuitem">
            <i data-feather="link" class="w-4 h-4"></i>
            <span>复制链接</span>
          </button>
          {% if source_meta and source_meta.url %}
          <a href="{{ source_meta.url }}" target="_blank" rel="noopener noreferrer" class="detail-action-item" role="menuitem">
            <i data-feather="external-link" class="w-4 h-4"></i>
            <span>查看来源</span>
          </a>
          {% endif %}
          <div class="detail-action-divider" role="separator"></div>
          <button onclick="confirmDelete()" class="detail-action-item is-danger" type="button" role="menuitem">
            <i data-feather="trash-2" class="w-4 h-4"></i>
            <span>删除视频</span>
          </button>
        </div>
      </div>
    </header>

    <div class="video-detail-grid">
      <main>
        <div class="video-stage relative flex items-center justify-center rounded-xl bg-neutral-100 p-2 dark:bg-black" id="video-container">
          <video
            controls
            preload="metadata"
            class="video-player w-full rounded-lg"
            id="main-video"
            src="/media/{{ file_path_encoded }}"
            poster="/thumb?uri={{ file_query_encoded }}"
          >
            您的浏览器不支持视频播放。
          </video>
        </div>
      </main>

      <aside class="min-w-0 space-y-6 lg:border-l lg:border-gray-200 lg:pl-6 dark:lg:border-gray-800">
        <section>
          <h1 class="detail-wrap-anywhere text-xl font-semibold leading-snug text-gray-950 dark:text-white">
            {{ file.rsplit('/', 1)[-1].rsplit('.', 1)[0] }}
          </h1>
        </section>

        {% if source_meta and source_meta.url %}
        <section>
          <div class="mb-1 text-xs text-gray-500 dark:text-gray-400">来源</div>
          <a
            href="{{ source_meta.url }}"
            target="_blank"
            rel="noopener noreferrer"
            class="detail-source-link inline-flex items-center gap-2 text-sm font-medium text-gray-800 hover:text-gray-950 dark:text-gray-200 dark:hover:text-white"
          >
            <i data-feather="external-link" class="w-4 h-4"></i>
            <span>{{ source_meta.source_domain or '查看来源' }}</span>
          </a>
        </section>
        {% endif %}

        <section>
          <div class="mb-2 text-xs text-gray-500 dark:text-gray-400">文件</div>
          <div class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
            <div class="break-all font-medium text-gray-900 dark:text-white">{{ file }}</div>
            <div>{{ size | filesizeformat }}</div>
            <div>{{ mtime }}</div>
          </div>
        </section>

        <section>
          <div class="mb-2 text-xs text-gray-500 dark:text-gray-400">速度</div>
          <div class="flex flex-wrap gap-1 rounded-full bg-white p-1 dark:bg-gray-900">
            <button class="speed-btn" data-speed="0.5" type="button">0.5x</button>
            <button class="speed-btn is-active" data-speed="1" type="button">1x</button>
            <button class="speed-btn" data-speed="1.5" type="button">1.5x</button>
            <button class="speed-btn" data-speed="2" type="button">2x</button>
          </div>
        </section>

        {% if previous_item or next_item %}
        <section class="grid grid-cols-2 gap-2">
          {% if previous_item %}
          <a
            href="/detail/{{ previous_item_path_encoded }}"
            class="inline-flex h-10 items-center justify-center gap-2 rounded-full bg-white px-3 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
          >
            <i data-feather="chevron-left" class="w-4 h-4"></i>
            上一个
          </a>
          {% endif %}
          {% if next_item %}
          <a
            href="/detail/{{ next_item_path_encoded }}"
            class="inline-flex h-10 items-center justify-center gap-2 rounded-full bg-white px-3 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800 {% if not previous_item %}col-start-2{% endif %}"
          >
            下一个
            <i data-feather="chevron-right" class="w-4 h-4"></i>
          </a>
          {% endif %}
        </section>
        {% endif %}
      </aside>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_body %}
<script>
document.addEventListener('DOMContentLoaded', () => {
  const mainVideo = document.getElementById('main-video');
  const fullscreenBtn = document.getElementById('fullscreen-btn');
  const pipBtn = document.getElementById('pip-btn');
  const favoriteBtn = document.getElementById('favorite-btn');
  const favoriteText = document.getElementById('favorite-text');
  const copyLinkBtn = document.getElementById('copy-link-btn');
  const speedBtns = document.querySelectorAll('.speed-btn');
  const setThumbBtn = document.getElementById('set-thumb-btn');
  const moreMenuBtn = document.getElementById('more-menu-btn');
  const moreMenu = document.getElementById('detail-action-menu');
  
  const fileName = {{ file|tojson }};
  let isFavorited = false;

  const closeMoreMenu = () => {
    if (!moreMenu || !moreMenuBtn) return;
    moreMenu.hidden = true;
    moreMenuBtn.setAttribute('aria-expanded', 'false');
  };

  const toggleMoreMenu = () => {
    if (!moreMenu || !moreMenuBtn) return;
    const nextOpen = moreMenu.hidden;
    moreMenu.hidden = !nextOpen;
    moreMenuBtn.setAttribute('aria-expanded', nextOpen ? 'true' : 'false');
  };

  moreMenuBtn?.addEventListener('click', (event) => {
    event.preventDefault();
    event.stopPropagation();
    toggleMoreMenu();
  });

  document.addEventListener('click', (event) => {
    if (!moreMenu || moreMenu.hidden) return;
    const target = event.target;
    if (moreMenu.contains(target) || moreMenuBtn?.contains(target)) return;
    closeMoreMenu();
  });

  // 初始化收藏状态
  async function initFavoriteStatus() {
    try {
      const response = await fetch(`/api/favorite/${encodeURIComponent(fileName)}`);
      const data = await response.json();
      isFavorited = data.favorite;
      updateFavoriteUI();
    } catch (error) {
      console.error('获取收藏状态失败:', error);
    }
  }

  // 更新收藏按钮UI
  function updateFavoriteUI() {
    if (isFavorited) {
      favoriteBtn?.classList.add('active');
      favoriteBtn?.setAttribute('aria-label', '取消收藏');
      if (favoriteText) favoriteText.textContent = '取消收藏';
      if (typeof feather !== 'undefined' && feather.icons && feather.icons.heart) {
        const icon = favoriteBtn?.querySelector('svg');
        if (icon) icon.innerHTML = feather.icons.heart.toSvg();
      }
    } else {
      favoriteBtn?.classList.remove('active');
      favoriteBtn?.setAttribute('aria-label', '收藏');
      if (favoriteText) favoriteText.textContent = '添加收藏';
      if (typeof feather !== 'undefined' && feather.icons && feather.icons.heart) {
        const icon = favoriteBtn?.querySelector('svg');
        if (icon) icon.innerHTML = feather.icons.heart.toSvg();
      }
    }
  }

  // 收藏功能
  favoriteBtn?.addEventListener('click', async (e) => {
    e.preventDefault();
    try {
      const response = await fetch(`/api/favorite/${encodeURIComponent(fileName)}`, {
        method: 'POST'
      });
      if (response.ok) {
        isFavorited = !isFavorited;
        updateFavoriteUI();
        showNotification(isFavorited ? '已添加到收藏' : '已取消收藏', 'success');
      }
    } catch (error) {
      console.error('收藏操作失败:', error);
      showNotification('操作失败，请重试', 'error');
    }
  });

  const togglePlayback = () => {
    if (!mainVideo) return;
    if (mainVideo.paused) {
      mainVideo.play();
    } else {
      mainVideo.pause();
    }
  };

  // 全屏功能
  fullscreenBtn?.addEventListener('click', () => {
    if (!mainVideo) return;
    if (mainVideo.requestFullscreen) {
      mainVideo.requestFullscreen();
    } else if (mainVideo.webkitRequestFullscreen) {
      mainVideo.webkitRequestFullscreen();
    } else if (mainVideo.msRequestFullscreen) {
      mainVideo.msRequestFullscreen();
    }
  });

  // 画中画功能
  pipBtn?.addEventListener('click', async () => {
    if (!mainVideo) return;
    try {
      if (document.pictureInPictureElement) {
        await document.exitPictureInPicture();
      } else {
        await mainVideo.requestPictureInPicture();
      }
    } catch (error) {
      showNotification('画中画功能不支持', 'error');
    }
  });

  // 播放速度控制
  speedBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      if (!mainVideo) return;
      const speed = parseFloat(btn.dataset.speed);
      mainVideo.playbackRate = speed;
      speedBtns.forEach(b => b.classList.toggle('is-active', b === btn));
      showNotification(`播放速度已设为 ${speed}x`, 'info');
    });
  });

  // 复制链接功能
  copyLinkBtn?.addEventListener('click', async () => {
    closeMoreMenu();
    try {
      const url = window.location.origin + '/media?uri=' + encodeURIComponent(fileName);
      await navigator.clipboard.writeText(url);
      showNotification('链接已复制到剪贴板', 'success');
    } catch (err) {
      showNotification('复制失败，请手动复制', 'error');
    }
  });

  // 键盘快捷键
  document.addEventListener('keydown', (e) => {
    if (e.target.tagName.toLowerCase() === 'input') return;
    
    switch(e.key) {
      case 'Escape':
        if (moreMenu && !moreMenu.hidden) {
          e.preventDefault();
          closeMoreMenu();
          moreMenuBtn?.focus();
        }
        break;
      case ' ':
        e.preventDefault();
        togglePlayback();
        break;
      case 'f':
      case 'F':
        e.preventDefault();
        fullscreenBtn?.click();
        break;
      case 'p':
      case 'P':
        e.preventDefault();
        pipBtn?.click();
        break;
      case 'ArrowLeft':
        e.preventDefault();
        if (!mainVideo) break;
        mainVideo.currentTime = Math.max(0, mainVideo.currentTime - 10);
        break;
      case 'ArrowRight':
        e.preventDefault();
        if (!mainVideo) break;
        mainVideo.currentTime = Math.min(mainVideo.duration, mainVideo.currentTime + 10);
        break;
      case 'ArrowUp':
        e.preventDefault();
        if (!mainVideo) break;
        mainVideo.volume = Math.min(1, mainVideo.volume + 0.1);
        break;
      case 'ArrowDown':
        e.preventDefault();
        if (!mainVideo) break;
        mainVideo.volume = Math.max(0, mainVideo.volume - 0.1);
        break;
    }
  });

  // 初始化
  initFavoriteStatus();

  // 设为缩略图（取当前暂停帧）
  setThumbBtn?.addEventListener('click', async () => {
    closeMoreMenu();
    if (!mainVideo) return;
    try {
      const ts = Math.max(0, mainVideo.currentTime || 0);
      const resp = await fetch(`/api/thumbnail/${encodeURIComponent(fileName)}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ time: ts })
      });
      const data = await resp.json();
      if (resp.ok && data.success) {
        // 强制刷新 poster 缓存
        mainVideo.setAttribute('poster', `/thumb?uri=${encodeURIComponent(fileName)}&v=${Date.now()}`);
        showNotification('缩略图已更新', 'success');
      } else {
        showNotification(data.error || '缩略图生成失败', 'error');
      }
    } catch (e) {
      showNotification('发生错误，请稍后重试', 'error');
    }
  });
});

// 删除确认
function confirmDelete() {
  showModal(
    '确定要删除这个视频吗？', 
    '此操作不可撤销，视频将被永久删除。', 
    async () => {
      try {
        const response = await fetch('/delete/{{ file_path_encoded }}', { method: 'POST' });
        if (response.ok || response.redirected) {
          window.location.href = '/library';
          return;
        }
        showNotification('删除失败，请重试', 'error');
      } catch (error) {
        showNotification('删除失败，请重试', 'error');
      }
    }
  );
}

// 通知函数
function showNotification(message, type = 'info') {
  const iconMap = {
    success: 'check-circle',
    info: 'info',
    error: 'alert-circle'
  };
  const colorMap = {
    success: 'bg-green-500',
    info: 'bg-blue-500',
    error: 'bg-red-500'
  };

  const notification = document.createElement('div');
  notification.className = `fixed bottom-20 right-5 flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg text-white ${colorMap[type]} transform translate-y-20 opacity-0 transition-all duration-300 ease-out z-50`;
  notification.innerHTML = `
    <i data-feather="${iconMap[type]}" class="w-6 h-6"></i>
    <span class="font-medium">${message}</span>
  `;
  
  document.body.appendChild(notification);
  feather.replace();
  
  setTimeout(() => {
    notification.classList.remove('translate-y-20', 'opacity-0');
  }, 10);

  setTimeout(() => {
    notification.classList.add('opacity-0');
    setTimeout(() => {
      notification.remove();
    }, 300);
  }, 3000);
}

// 模态框函数
function showModal(title, text, onConfirm) {
  const existingModal = document.getElementById('confirmation-modal');
  if (existingModal) existingModal.remove();

  const modalHTML = `
    <div id="confirmation-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm" aria-labelledby="modal-title" role="dialog" aria-modal="true">
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-md m-4 transform transition-all" role="document">
        <div class="p-6">
          <div class="flex items-start gap-4">
            <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900/30 sm:mx-0 sm:h-10 sm:w-10">
              <i data-feather="alert-triangle" class="h-6 w-6 text-red-600 dark:text-red-400"></i>
            </div>
            <div class="mt-0 text-center sm:text-left">
              <h3 class="text-lg leading-6 font-bold text-gray-900 dark:text-white" id="modal-title">${title}</h3>
              <div class="mt-2">
                <p class="text-sm text-gray-500 dark:text-gray-400">${text}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-800/50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse rounded-b-2xl">
          <button type="button" id="confirm-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
            确认删除
          </button>
          <button type="button" id="cancel-btn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:mt-0 sm:w-auto sm:text-sm">
            取消
          </button>
        </div>
      </div>
    </div>
  `;
  
  document.body.insertAdjacentHTML('beforeend', modalHTML);
  feather.replace();

  const modal = document.getElementById('confirmation-modal');
  const confirmBtn = document.getElementById('confirm-btn');
  const cancelBtn = document.getElementById('cancel-btn');

  function closeModal() {
    modal.remove();
  }

  confirmBtn.onclick = () => {
    onConfirm();
    closeModal();
  };
  cancelBtn.onclick = closeModal;
  modal.onclick = (e) => {
    if (e.target === modal) {
      closeModal();
    }
  }
}
</script>
{% endblock %}