{% extends "base.html" %}
{% block extra_head %}
<style>
/* Immersive Media Feed Layout */
body {
  padding-bottom: 0 !important;
  overscroll-behavior-y: none;
  background-color: #000;
}
html, body {
  height: 100%;
  overflow: hidden;
}

#container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: #000;
}

#feed-container {
  position: absolute;
  inset: 0;
}

.feed-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.feed-media.active {
  display: block;
}

#overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
}

#play-status-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
#play-status-icon.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

#custom-controls {
  position: absolute;
  bottom: calc(90px + env(safe-area-inset-bottom));
  left: 12px;
  right: 12px;
  height: 20px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-container {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

input[type=range] {
  -webkit-appearance: none;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  margin: 0;
}
input[type=range]:disabled {
  cursor: default;
}

.progress-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  transition: all 0.2s ease;
  pointer-events: none;
}

.progress-fill {
  position: absolute;
  left: 0;
  height: 4px;
  background: #fff;
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear, height 0.2s ease;
  pointer-events: none;
  z-index: 1;
}

.progress-fill::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.time-display {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-family: system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  width: 35px;
  text-align: center;
  opacity: 1;
  transition: opacity 0.2s;
}

body.immersive-mode #custom-controls {
  bottom: calc(0px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  padding: 0;
  gap: 0;
}

body.immersive-mode .progress-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 0;
}

body.immersive-mode .progress-fill {
  height: 2px;
  border-radius: 0;
}

body.immersive-mode .time-display {
  opacity: 0;
  width: 0;
  overflow: hidden;
  margin: 0;
}

body:not(.immersive-mode) .progress-fill::after {
  transform: translateY(-50%) scale(1);
}

body.immersive-mode .controls-sidebar {
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
}
body.immersive-mode .floating-dock {
  transform: translate(-50%, 150%) !important;
}
body.immersive-mode #quick-theme-toggle {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
}

.controls-sidebar {
  position: absolute;
  right: 16px;
  bottom: calc(140px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 20;
  align-items: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.action-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s;
  cursor: pointer;
  position: relative;
}
.action-btn:active {
  transform: scale(0.9);
}
.action-btn svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.speed-btn {
  font-size: 14px;
  font-weight: 700;
  font-family: system-ui, -apple-system, sans-serif;
}

@keyframes heart-burst {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.action-btn.is-active .heart-filled {
  display: block;
  color: #fe2c55;
  animation: heart-burst 0.3s forwards;
}
.action-btn.is-active .heart-outline {
  display: none;
}
.heart-filled {
  display: none;
}
.action-btn .collection-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.action-btn.has-collection {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.72);
}
.action-btn.has-collection .collection-count {
  display: inline-flex;
}

/* Image overlay controls */
.image-tool-wrap {
  position: relative;
}
.zoom-options {
  position: absolute;
  right: 58px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: all 0.2s ease;
}
.zoom-options.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.zoom-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
}
.zoom-btn.active {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-color: white;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.magnifier {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  background-color: #000;
  cursor: grab;
  z-index: 210;
  display: none;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.3s ease, height 0.3s ease;
}
.magnifier.magnifier-large {
  width: 300px;
  height: 300px;
}
.magnifier.active {
  display: block;
  transform: translate(-50%, -50%) scale(1);
}
.magnifier:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.02);
}
.mag-badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.magnifier.active .mag-badge {
  opacity: 1;
}

.caption-panel {
  position: fixed;
  left: 20px;
  bottom: 90px;
  max-width: min(72vw, 420px);
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: white;
  backdrop-filter: blur(10px);
  z-index: 215;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.caption-title {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.caption-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.caption-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.86);
}
.caption-panel.is-hidden {
  display: none;
}
body.immersive-mode .caption-panel:not(.is-hidden) {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

#caption-btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-top-color: transparent;
  animation: caption-spin 0.9s linear infinite;
}
#caption-btn {
  position: relative;
}
#caption-btn.is-loading i {
  opacity: 0.35;
}
#caption-btn.is-error::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  border: 1.5px solid rgba(248, 113, 113, 0.9);
}
@keyframes caption-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .caption-panel {
    max-width: min(82vw, 320px);
    left: 12px;
  }
}

.collection-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  background: rgba(15, 23, 42, 0.56);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.collection-modal.active {
  opacity: 1;
  pointer-events: auto;
}
.collection-modal-card {
  width: min(440px, 100%);
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.98);
  color: #0f172a;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.3);
  padding: 12px;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.collection-modal.active .collection-modal-card {
  transform: translateY(0);
}
[data-theme="dark"] .collection-modal-card {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(148, 163, 184, 0.2);
  color: #f8fafc;
}
.collection-modal-header {
  margin-bottom: 10px;
}
.collection-modal-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.collection-modal-header h3 {
  font-size: 14px;
  font-weight: 700;
}
.collection-modal-meta {
  margin-top: 4px;
  font-size: 11px;
  color: #64748b;
}
[data-theme="dark"] .collection-modal-meta {
  color: #94a3b8;
}
.collection-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.collection-modal-close svg {
  width: 15px;
  height: 15px;
}
.collection-modal-create {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.collection-modal-create input {
  flex: 1;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(248, 250, 252, 0.86);
  color: #0f172a;
  font-size: 13px;
  padding: 8px 10px;
}
[data-theme="dark"] .collection-modal-create input {
  background: rgba(15, 23, 42, 0.82);
  color: #f1f5f9;
  border-color: rgba(148, 163, 184, 0.2);
}
.collection-modal-create button {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
}
[data-theme="dark"] .collection-modal-create button {
  background: rgba(226, 232, 240, 0.94);
  color: #0f172a;
}
.collection-modal-list {
  max-height: min(44vh, 320px);
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(248, 250, 252, 0.78);
}
[data-theme="dark"] .collection-modal-list {
  background: rgba(15, 23, 42, 0.76);
  border-color: rgba(148, 163, 184, 0.2);
}
.collection-modal-item {
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}
.collection-modal-item:hover {
  background: rgba(148, 163, 184, 0.12);
}
.collection-modal-item.is-pending {
  opacity: 0.6;
  pointer-events: none;
}
.collection-modal-item.is-selected {
  background: rgba(99, 102, 241, 0.07);
}
.collection-modal-item input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.collection-modal-item span.coll-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
em.coll-count {
  font-style: normal;
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
}
.coll-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #64748b;
}
.coll-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(148, 163, 184, 0.45);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.coll-check svg { display: none; color: white; }
.collection-modal-item.is-selected .coll-check {
  background: #6366f1;
  border-color: #6366f1;
}
.collection-modal-item.is-selected .coll-check svg { display: block; }
.collection-modal-empty {
  text-align: center;
  font-size: 12px;
  color: #64748b;
  padding: 14px 8px;
}
[data-theme="dark"] .collection-modal-empty {
  color: #94a3b8;
}
.coll-drag-handle {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.35);
  margin: 12px auto 16px;
  display: none;
}
@media (max-width: 540px) {
  .collection-modal {
    align-items: flex-end;
    padding: 0;
  }
  .collection-modal-card {
    width: 100%;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    padding: 0 12px 24px;
  }
  .collection-modal.active .collection-modal-card {
    transform: translateY(0);
  }
  .coll-drag-handle { display: block; }
}
</style>
{% endblock %}

{% block content %}
<div id="container">
  <div id="feed-container"></div>

  <div id="overlay-layer"></div>

  <div id="play-status-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="currentColor" stroke="none">
      <polygon points="5 3 19 12 5 21 5 3"></polygon>
    </svg>
  </div>

  <div id="custom-controls">
    <span class="time-display" id="time-current">00:00</span>
    <div class="progress-container">
      <input type="range" id="video-progress" min="0" max="100" step="0.1" value="0">
      <div class="progress-track"></div>
      <div class="progress-fill" id="progress-fill"></div>
    </div>
    <span class="time-display" id="time-total">00:00</span>
  </div>

  <div class="controls-sidebar" id="controls">
    <div class="action-btn speed-btn" id="speed-btn">1x</div>

    <button type="button" class="action-btn" id="caption-btn" title="生成标题" hidden>
      <i data-feather="zap"></i>
    </button>

    <div class="image-tool-wrap" id="magnifier-tool-wrap" hidden>
      <div class="zoom-options" id="zoom-options">
        <button type="button" class="zoom-btn active" data-level="2.5">2.5x</button>
        <button type="button" class="zoom-btn" data-level="5">5x</button>
      </div>
      <button type="button" class="action-btn" id="magnifier-toggle" title="放大镜">
        <i data-feather="search"></i>
      </button>
    </div>

    <a href="#" class="action-btn" id="favorite-btn" data-value="">
      <svg class="heart-outline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
      <svg class="heart-filled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
    </a>

    <button type="button" class="action-btn" id="collection-btn" title="加入集合">
      <i data-feather="bookmark"></i>
      <span class="collection-count" id="collection-count">0</span>
    </button>

    <a href="#" class="action-btn" id="info-btn">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
    </a>
  </div>

  <div class="caption-panel is-hidden" id="caption-panel">
    <div class="caption-title hidden" id="caption-title"></div>
    <div class="caption-tags" id="caption-tags"></div>
  </div>

  <div class="magnifier" id="magnifier">
    <div class="mag-badge" id="mag-badge">2.5x</div>
  </div>
</div>

<div id="collection-modal" class="collection-modal" aria-hidden="true">
  <div class="collection-modal-card">
    <div class="coll-drag-handle"></div>
    <div class="collection-modal-header">
      <div class="collection-modal-title-row">
        <h3>加入集合</h3>
        <button id="collection-modal-close" type="button" class="collection-modal-close">
          <i data-feather="x"></i>
        </button>
      </div>
      <div id="collection-modal-meta" class="collection-modal-meta">当前未加入任何集合</div>
    </div>
    <div id="collection-list" class="collection-modal-list"></div>
    <div class="collection-modal-create">
      <input id="collection-name-input" type="text" maxlength="80" placeholder="新建集合名称" />
      <button id="collection-create-btn" type="button">新建</button>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_body %}
<script src="{{url_for('static', filename='flow_ui_shared.js')}}"></script>
<script src="{{url_for('static', filename='flow_state_controller.js')}}"></script>
<script src="{{url_for('static', filename='flow_session.js')}}"></script>
<script src="{{url_for('static', filename='flow_actions_shared.js')}}"></script>
<script src="{{url_for('static', filename='flow_media_actions_controller.js')}}"></script>
<script src="{{url_for('static', filename='hammer.min.js')}}"></script>
<script>
  (async () => {
    document.body.classList.add('immersive');

    const feedContainer = document.getElementById('feed-container');
    const overlayLayer = document.getElementById('overlay-layer');
    const speedBtn = document.getElementById('speed-btn');
    const captionBtn = document.getElementById('caption-btn');
    const magnifierToolWrap = document.getElementById('magnifier-tool-wrap');
    const magnifierToggle = document.getElementById('magnifier-toggle');
    const zoomOptions = document.getElementById('zoom-options');
    const magBadge = document.getElementById('mag-badge');
    const favoriteBtn = document.getElementById('favorite-btn');
    const collectionBtn = document.getElementById('collection-btn');
    const collectionCount = document.getElementById('collection-count');
    const infoBtn = document.getElementById('info-btn');
    const collectionModal = document.getElementById('collection-modal');
    const collectionModalClose = document.getElementById('collection-modal-close');
    const collectionModalMeta = document.getElementById('collection-modal-meta');

    const collectionCreateBtn = document.getElementById('collection-create-btn');
    const collectionNameInput = document.getElementById('collection-name-input');
    const collectionList = document.getElementById('collection-list');

    const playStatusIcon = document.getElementById('play-status-icon');
    const customControls = document.getElementById('custom-controls');
    const progressBar = document.getElementById('video-progress');
    const progressFill = document.getElementById('progress-fill');
    const timeCurrent = document.getElementById('time-current');
    const timeTotal = document.getElementById('time-total');

    const magnifier = document.getElementById('magnifier');
    const captionPanel = document.getElementById('caption-panel');
    const captionTitle = document.getElementById('caption-title');
    const captionTags = document.getElementById('caption-tags');
    const uiShared = window.FlowUIShared || {};
    const actionsShared = window.FlowActionsShared || {};

    const speedOptions = [0.75, 1, 1.25, 1.5, 2];

    const flowSession = window.createFlowSession({
      initialItems: [],
      initialHasMore: true,
      initialCursor: { page: 1 },
      keyOf: (item) => String(item?.name || ''),
    });
    const feedItems = flowSession.items;
    let seed = '';

    let currentSpeedIndex = 1;
    let isImmersive = false;
    let isDragging = false;
    let wasPlayingBeforeDrag = false;
    let clickTimer = null;
    let lastClickTime = 0;

    let isMagnifying = false;
    let magX = 0;
    let magY = 0;
    let zoomLevel = 2.5;
    const collectionStateCache = new Map();
    let collectionCatalog = [];
    let collectionSelectedIds = new Set();
    let collectionSelectedNames = [];
    let collectionModalOpenedAt = 0;
    const collectionModalGuardMs = 520;

    function formatTime(seconds) {
      return uiShared.formatTime(seconds);
    }

    function currentItem() {
      return flowSession.currentItem();
    }

    function getCurrentIndex() {
      return flowSession.getIndex();
    }

    function setCurrentIndex(next) {
      return flowSession.setIndex(next);
    }

    const flowState = window.createFlowStateController({
      getMediaType: () => currentItem()?.type || '',
      onImmersiveChange: (enabled) => {
        isImmersive = !!enabled;
        document.body.classList.toggle('immersive-mode', isImmersive);
      },
      onMagnifyingChange: (enabled) => {
        isMagnifying = !!enabled;
      },
    });

    function setImmersive(enabled) {
      flowState.setImmersive(enabled);
    }

    function toggleUI() {
      flowState.toggleImmersive();
    }

    function clearCaption() {
      captionTitle.textContent = '';
      captionTitle.classList.add('hidden');
      captionTags.innerHTML = '';
      captionPanel.classList.add('is-hidden');
    }

    function renderCaption(data) {
      if (!data) {
        clearCaption(false);
        return;
      }
      const title = String(data.title || '').trim();
      const tags = Array.isArray(data.tags) ? data.tags : [];
      if (!title && tags.length === 0) {
        clearCaption(false);
        return;
      }
      captionPanel.classList.remove('is-hidden');
      captionTitle.textContent = title;
      captionTitle.classList.toggle('hidden', !title);
      captionTags.innerHTML = '';
      tags.forEach((tag) => {
        const chip = document.createElement('span');
        chip.className = 'caption-tag';
        chip.textContent = String(tag || '');
        captionTags.appendChild(chip);
      });
    }

    function setCaptionLoading(loading) {
      captionBtn.disabled = !!loading;
      captionBtn.classList.toggle('is-loading', !!loading);
    }

    function flashCaptionError() {
      captionBtn.classList.add('is-error');
      setTimeout(() => captionBtn.classList.remove('is-error'), 1400);
    }

    const mediaActions = window.createFlowMediaActionsController({
      actions: actionsShared,
      onFavoriteChange: (value) => {
        favoriteBtn.classList.toggle('is-active', !!value);
      },
      onCaptionClear: () => {
        clearCaption();
      },
      onCaptionRender: (payload) => {
        renderCaption(payload);
      },
      onCaptionLoading: (loading) => {
        setCaptionLoading(loading);
      },
      onError: (kind) => {
        if (kind === 'caption_load' || kind === 'caption_generate') {
          flashCaptionError();
        }
      },
      confirmCaptionReplace: async () => window.confirm('已存在标题，是否覆盖生成？'),
    });

    async function loadCaption(uri) {
      await mediaActions.loadCaption(uri);
    }

    async function generateCaption(uri, force = false) {
      await mediaActions.generateCaption(uri, { confirmExisting: !force });
    }

    async function collectionsRequest(url, options = {}) {
      const response = await fetch(url, options);
      let payload = null;
      try {
        payload = await response.json();
      } catch (error) {
        payload = null;
      }
      if (!response.ok || !(payload && payload.success)) {
        throw new Error((payload && payload.error) || '请求失败');
      }
      return payload.data || {};
    }

    function escapeHtml(value) {
      return String(value || '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
    }

    function setCollectionMeta(names) {
      if (!collectionModalMeta) return;
      const items = Array.isArray(names) ? names.filter(Boolean) : [];
      if (!items.length) {
        collectionModalMeta.textContent = '当前未加入任何集合';
        return;
      }
      const preview = items.slice(0, 2).join('、');
      const rest = items.length - 2;
      collectionModalMeta.textContent = rest > 0 ? `已加入：${preview} +${rest}` : `已加入：${preview}`;
    }

    function setCollectionButtonState(names) {
      const items = Array.isArray(names) ? names.filter(Boolean) : [];
      const count = items.length;
      collectionBtn.classList.toggle('has-collection', count > 0);
      collectionCount.textContent = count > 99 ? '99+' : String(count);
      const preview = items.slice(0, 2).join('、');
      const suffix = items.length > 2 ? ` +${items.length - 2}` : '';
      collectionBtn.title = count > 0 ? `已加入：${preview}${suffix}` : '加入集合';
    }

    async function fetchCollectionMembership(uri, force = false) {
      const key = String(uri || '').trim();
      if (!key) return { ids: new Set(), names: [] };
      if (!force && collectionStateCache.has(key)) {
        const cached = collectionStateCache.get(key) || {};
        return {
          ids: new Set(Array.isArray(cached.ids) ? cached.ids : []),
          names: Array.isArray(cached.names) ? cached.names.slice() : [],
        };
      }
      const encoded = encodeURIComponent(key);
      const selectedData = await collectionsRequest(`/api/collections/by-media?uri=${encoded}`);
      const selectedItems = Array.isArray(selectedData.items) ? selectedData.items : [];
      const ids = [];
      const names = [];
      selectedItems.forEach((entry) => {
        const id = String(entry?.id || '').trim();
        const name = String(entry?.name || '').trim();
        if (id) ids.push(id);
        if (name) names.push(name);
      });
      collectionStateCache.set(key, { ids, names });
      return { ids: new Set(ids), names };
    }

    async function syncCollectionState(item, force = false) {
      const expectedName = String(item?.name || '');
      if (!expectedName) {
        collectionSelectedIds = new Set();
        collectionSelectedNames = [];
        setCollectionButtonState([]);
        setCollectionMeta([]);
        return;
      }
      try {
        const state = await fetchCollectionMembership(expectedName, force);
        if (String(currentItem()?.name || '') !== expectedName) return;
        collectionSelectedIds = new Set(state.ids);
        collectionSelectedNames = state.names.slice();
        setCollectionButtonState(collectionSelectedNames);
        setCollectionMeta(collectionSelectedNames);
      } catch (error) {
        if (String(currentItem()?.name || '') !== expectedName) return;
        collectionSelectedIds = new Set();
        collectionSelectedNames = [];
        setCollectionButtonState([]);
        setCollectionMeta([]);
      }
    }

    function closeCollectionModal() {
      collectionModal.classList.remove('active');
      collectionModal.setAttribute('aria-hidden', 'true');
      collectionCreateBtn.disabled = false;
      collectionModalOpenedAt = 0;
    }

    function renderCollectionList(items, selectedIds) {
      if (!Array.isArray(items) || !items.length) {
        collectionList.innerHTML = '<div class="collection-modal-empty">暂无集合，先新建一个。</div>';
        return;
      }
      collectionList.innerHTML = items.map((item) => {
        const id = String(item.id || '');
        const safeName = escapeHtml(String(item.name || '未命名集合'));
        const count = Number(item.item_count || 0);
        const checked = selectedIds.has(id) ? 'checked' : '';
        const isSelected = selectedIds.has(id) ? 'is-selected' : '';
        return `
          <label class="collection-modal-item ${isSelected}" data-id="${id}">
            <span class="coll-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
            </span>
            <span class="coll-name">${safeName}</span>
            <em class="coll-count">${count > 0 ? count : ''}</em>
            <span class="coll-check">
              <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            </span>
            <input type="checkbox" ${checked} />
          </label>
        `;
      }).join('');
    }

    async function openCollectionModal() {
      const item = currentItem();
      if (!item || !item.name) return;
      collectionModalOpenedAt = Date.now();
      collectionModal.classList.add('active');
      collectionModal.setAttribute('aria-hidden', 'false');
      collectionList.innerHTML = '<div class="collection-modal-empty">加载中...</div>';
      try {
        const [allData, selectedState] = await Promise.all([
          collectionsRequest('/api/collections'),
          fetchCollectionMembership(item.name, true),
        ]);
        const allItems = Array.isArray(allData.items) ? allData.items : [];
        collectionCatalog = allItems;
        collectionSelectedIds = new Set(selectedState.ids);
        collectionSelectedNames = selectedState.names.slice();
        setCollectionButtonState(collectionSelectedNames);
        setCollectionMeta(collectionSelectedNames);
        renderCollectionList(allItems, collectionSelectedIds);
      } catch (error) {
        collectionList.innerHTML = '<div class="collection-modal-empty">加载失败，请重试。</div>';
      }
      feather.replace();
    }

    async function createCollectionInModal() {
      const name = String(collectionNameInput.value || '').trim();
      if (!name) return;
      collectionCreateBtn.disabled = true;
      try {
        const created = await collectionsRequest('/api/collections', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name }),
        });
        const createdId = String(created?.item?.id || '').trim();
        const item = currentItem();
        if (createdId && item?.name) {
          await collectionsRequest(`/api/collections/${encodeURIComponent(createdId)}/items`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ uris: [item.name] }),
          });
          collectionStateCache.delete(item.name);
        }
        collectionNameInput.value = '';
        await openCollectionModal();
      } catch (error) {
        collectionCreateBtn.disabled = false;
        return;
      }
      collectionCreateBtn.disabled = false;
    }

    async function toggleCollectionMembership(collectionId, checked, rowEl, inputEl) {
      const item = currentItem();
      if (!item || !item.name) return;
      if (!collectionId) return;
      rowEl?.classList.add('is-pending');
      if (inputEl) inputEl.disabled = true;
      try {
        await collectionsRequest(`/api/collections/${encodeURIComponent(collectionId)}/items`, {
          method: checked ? 'POST' : 'DELETE',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ uris: [item.name] }),
        });
        await syncCollectionState(item, true);
        collectionCatalog = collectionCatalog.map((entry) => {
          if (String(entry?.id || '') !== collectionId) return entry;
          const baseCount = Number(entry?.item_count || 0);
          const nextCount = checked ? (baseCount + 1) : Math.max(0, baseCount - 1);
          return { ...entry, item_count: nextCount };
        });
        renderCollectionList(collectionCatalog, collectionSelectedIds);
      } catch (error) {
        if (inputEl) inputEl.checked = !checked;
        return;
      } finally {
        rowEl?.classList.remove('is-pending');
        if (inputEl) inputEl.disabled = false;
      }
    }

    async function goNext() {
      if (getCurrentIndex() >= feedItems.length - 1 && flowSession.hasMore()) {
        await loadFeed();
      }
      if (getCurrentIndex() < feedItems.length - 1) {
        await showItem(getCurrentIndex() + 1);
      }
    }

    async function goPrev() {
      if (getCurrentIndex() > 0) {
        await showItem(getCurrentIndex() - 1);
      }
    }

    function updateFavoriteState(name) {
      mediaActions.syncFavorite(name)
        .catch(() => favoriteBtn.classList.remove('is-active'));
    }

    function updateControls(item) {
      infoBtn.href = item.detail_url;
      favoriteBtn.dataset.value = item.name;
      updateFavoriteState(item.name);
      syncCollectionState(item);

      const isVideo = item.type === 'video';
      speedBtn.hidden = !isVideo;
      captionBtn.hidden = isVideo;
      magnifierToolWrap.hidden = isVideo;
      customControls.hidden = !isVideo;

      if (isVideo) {
        progressBar.disabled = false;
        playStatusIcon.classList.remove('hidden');
      } else {
        progressBar.disabled = true;
        progressBar.value = 0;
        progressFill.style.width = '0%';
        timeCurrent.textContent = '';
        timeTotal.textContent = '';
        playStatusIcon.classList.add('hidden');
        playStatusIcon.classList.remove('visible');
      }
    }

    function ensureVideoSrc(videoEl) {
      if (!videoEl) return;
      if (!videoEl.src) {
        videoEl.src = videoEl.dataset.src || '';
        videoEl.load();
      }
    }

    function preloadNextVideo() {
      for (let i = getCurrentIndex() + 1; i < feedItems.length; i++) {
        const item = feedItems[i];
        if (item.type !== 'video') continue;
        const v = item.el;
        if (v && !v.src) {
          ensureVideoSrc(v);
        }
        break;
      }
    }

    function updateVideoProgress(videoEl) {
      if (!videoEl || currentItem()?.el !== videoEl || isDragging) return;
      if (timeTotal.textContent === '00:00' || timeTotal.textContent === '') {
        const duration = videoEl.duration;
        if (duration && !isNaN(duration) && duration !== Infinity) {
          timeTotal.textContent = formatTime(duration);
        }
      }
      const pct = (videoEl.currentTime / videoEl.duration) * 100;
      progressBar.value = isNaN(pct) ? 0 : pct;
      progressFill.style.width = `${isNaN(pct) ? 0 : pct}%`;
      timeCurrent.textContent = formatTime(videoEl.currentTime);
    }

    function applyZoom(level) {
      zoomLevel = level;
      magBadge.textContent = `${level}x`;
      document.querySelectorAll('.zoom-btn').forEach((btn) => {
        const btnLevel = Number.parseFloat(btn.getAttribute('data-level') || '2.5');
        btn.classList.toggle('active', btnLevel === level);
      });
      if (level >= 5) {
        magnifier.classList.add('magnifier-large');
      } else {
        magnifier.classList.remove('magnifier-large');
      }
      if (isMagnifying) {
        setTimeout(updateMagnifierContent, 40);
      }
    }

    function currentImageEl() {
      const item = currentItem();
      if (!item || item.type !== 'image') return null;
      return item.el;
    }

    function getImageContainRect(imgEl) {
      return uiShared.getImageContainRect(imgEl);
    }

    function updateMagnifierPosition() {
      uiShared.setMagnifierPosition(magnifier, magX, magY);
    }

    function updateMagnifierContent() {
      const imgEl = currentImageEl();
      if (!imgEl) return;
      uiShared.updateMagnifierContent({
        imageEl: imgEl,
        lensEl: magnifier,
        centerX: magX,
        centerY: magY,
        zoomLevel,
      });
    }

    function toggleMagnifier(active) {
      isMagnifying = flowState.setMagnifying(active);
      if (isMagnifying) {
        magnifierToggle.classList.add('active');
        zoomOptions.classList.add('show');
        magnifier.classList.add('active');
        const contentRect = getImageContainRect(currentImageEl());
        if (contentRect) {
          magX = contentRect.left + contentRect.width / 2;
          magY = contentRect.top + contentRect.height / 2;
        } else {
          magX = window.innerWidth / 2;
          magY = window.innerHeight / 2;
        }
        updateMagnifierPosition();
        updateMagnifierContent();
      } else {
        magnifierToggle.classList.remove('active');
        zoomOptions.classList.remove('show');
        magnifier.classList.remove('active');
      }
    }

    function clearPreviousState(prevItem) {
      toggleMagnifier(false);

      if (!prevItem) return;
      prevItem.el.classList.remove('active');
      prevItem.el.style.display = 'none';
      if (prevItem.type === 'video') {
        prevItem.el.pause();
        prevItem.el.muted = true;
      }
    }

    async function showItem(nextIndex) {
      if (!feedItems.length) return;
      const safeIndex = Math.max(0, Math.min(nextIndex, feedItems.length - 1));
      const prevItem = currentItem();
      clearPreviousState(prevItem);

      setCurrentIndex(safeIndex);
      const item = currentItem();
      if (!item) return;
      flowState.onMediaChanged();

      item.el.style.display = 'block';
      requestAnimationFrame(() => item.el.classList.add('active'));
      updateControls(item);

      if (item.type === 'video') {
        progressBar.disabled = false;
        ensureVideoSrc(item.el);
        item.el.muted = false;
        item.el.playbackRate = speedOptions[currentSpeedIndex];
        progressBar.value = 0;
        progressFill.style.width = '0%';
        timeCurrent.textContent = '00:00';
        timeTotal.textContent = formatTime(item.el.duration);
        clearCaption();

        const playPromise = item.el.play();
        if (playPromise !== undefined) {
          playPromise
            .then(() => playStatusIcon.classList.remove('visible'))
            .catch(() => playStatusIcon.classList.add('visible'));
        }
        preloadNextVideo();
      } else {
        playStatusIcon.classList.remove('visible');
        await loadCaption(item.name);
      }

      if (getCurrentIndex() >= feedItems.length - 4 && flowSession.hasMore()) {
        loadFeed();
      }
    }

    function buildMediaElement(item) {
      if (item.type === 'video') {
        const video = document.createElement('video');
        video.className = 'feed-media feed-video';
        video.muted = true;
        video.loop = true;
        video.playsInline = true;
        video.controls = false;
        video.preload = 'metadata';
        video.poster = item.thumb_url || '';
        video.dataset.src = item.media_url;
        video.dataset.name = item.name;
        video.addEventListener('timeupdate', () => updateVideoProgress(video));
        const updateDuration = () => {
          if (currentItem()?.el !== video) return;
          const duration = video.duration;
          if (duration && !isNaN(duration) && duration !== Infinity) {
            timeTotal.textContent = formatTime(duration);
          }
        };
        video.addEventListener('loadedmetadata', updateDuration);
        video.addEventListener('durationchange', updateDuration);
        return video;
      }

      const img = document.createElement('img');
      img.className = 'feed-media feed-image';
      img.loading = 'lazy';
      img.decoding = 'async';
      img.alt = item.name;
      img.src = item.media_url;
      img.dataset.name = item.name;
      return img;
    }

    async function loadFeed() {
      if (flowSession.isLoading() || !flowSession.hasMore()) return;
      try {
        const result = await flowSession.loadMore(async (cursor) => {
          const page = Number(cursor?.page || 1);
          const query = new URLSearchParams({
            page: String(page),
            size: '24',
          });
          if (seed) query.set('seed', seed);

          const res = await fetch(`/api/feed/mix?${query.toString()}`);
          if (!res.ok) throw new Error(`HTTP ${res.status}`);
          const data = await res.json();

          if (!seed && data.seed) seed = String(data.seed);
          const incoming = Array.isArray(data.items) ? data.items : [];
          const normalized = incoming.map((item) => {
            if (!item || !item.type || !item.name || !item.media_url) return null;
            const mediaEl = buildMediaElement(item);
            return {
              type: item.type,
              name: item.name,
              media_url: item.media_url,
              detail_url: item.detail_url || '#',
              thumb_url: item.thumb_url || '',
              el: mediaEl,
            };
          }).filter(Boolean);

          return {
            items: normalized,
            hasMore: data.has_more !== false,
            cursor: { page: page + 1 },
          };
        });

        (result.appendedIndices || []).forEach((itemIndex) => {
          const entry = feedItems[itemIndex];
          if (entry?.el) feedContainer.appendChild(entry.el);
        });

        if (feedItems.length > 100) {
          const removeCount = 30;
          const removed = flowSession.dropHead(removeCount);
          removed.forEach((entry) => entry.el.remove());
          setCurrentIndex(Math.max(0, getCurrentIndex() - removeCount));
        }
      } catch (error) {
        flowSession.setHasMore(false);
      }
    }

    function togglePlay() {
      const item = currentItem();
      if (!item || item.type !== 'video') return;
      const video = item.el;
      if (video.paused) {
        video.play();
        playStatusIcon.classList.remove('visible');
      } else {
        video.pause();
        playStatusIcon.classList.add('visible');
      }
    }

    const hammer = new Hammer(overlayLayer);
    hammer.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
    hammer.on('swipeup', () => {
      if (isMagnifying) return;
      goNext();
    });
    hammer.on('swipedown', () => {
      if (isMagnifying) return;
      goPrev();
    });

    overlayLayer.addEventListener('click', () => {
      const now = Date.now();
      const delta = now - lastClickTime;

      if (delta < 250 && delta > 0) {
        if (clickTimer) clearTimeout(clickTimer);
        clickTimer = null;
        const item = currentItem();
        if (item?.type === 'video') {
          togglePlay();
        }
      } else {
        if (clickTimer) clearTimeout(clickTimer);
        clickTimer = setTimeout(() => {
          toggleUI();
          clickTimer = null;
        }, 250);
      }
      lastClickTime = now;
    });

    speedBtn.addEventListener('click', () => {
      currentSpeedIndex = (currentSpeedIndex + 1) % speedOptions.length;
      const rate = speedOptions[currentSpeedIndex];
      speedBtn.textContent = `${rate}x`;
      const item = currentItem();
      if (item?.type === 'video') {
        item.el.playbackRate = rate;
      }
    });

    favoriteBtn.addEventListener('click', async (e) => {
      e.preventDefault();
      const name = favoriteBtn.dataset.value || '';
      if (!name) return;
      try {
        await mediaActions.toggleFavorite(name);
      } catch (error) {
        updateFavoriteState(name);
      }
    });

    collectionBtn.addEventListener('click', async (event) => {
      event.preventDefault();
      event.stopPropagation();
      await openCollectionModal();
    });
    collectionBtn.addEventListener('keydown', async (event) => {
      if (event.key !== 'Enter' && event.key !== ' ') return;
      event.preventDefault();
      await openCollectionModal();
    });

    collectionModalClose.addEventListener('click', (event) => {
      event.preventDefault();
      closeCollectionModal();
    });

    collectionModal.addEventListener('click', (event) => {
      if (collectionModalOpenedAt && (Date.now() - collectionModalOpenedAt) < collectionModalGuardMs) {
        return;
      }
      if (event.target === collectionModal) closeCollectionModal();
    });
    collectionCreateBtn.addEventListener('click', async (event) => {
      event.preventDefault();
      await createCollectionInModal();
    });
    collectionNameInput.addEventListener('keydown', async (event) => {
      if (event.key !== 'Enter') return;
      event.preventDefault();
      await createCollectionInModal();
    });
    collectionList.addEventListener('change', async (event) => {
      const inputEl = event.target.closest('input[type="checkbox"]');
      if (!inputEl) return;
      const rowEl = inputEl.closest('[data-id]');
      const collectionId = String(rowEl?.getAttribute('data-id') || '').trim();
      if (!collectionId) return;
      await toggleCollectionMembership(collectionId, !!inputEl.checked, rowEl, inputEl);
    });

    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && collectionModal.classList.contains('active')) {
        closeCollectionModal();
        return;
      }
      const target = event.target;
      if (target && typeof target.closest === 'function') {
        if (target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])')) {
          return;
        }
      }
      if (event.key === 'ArrowDown' || event.key === 'ArrowRight') goNext();
      if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') goPrev();
      if (event.key === ' ') {
        event.preventDefault();
        togglePlay();
      }
    });

    progressBar.addEventListener('input', () => {
      const item = currentItem();
      if (!item || item.type !== 'video') return;
      const video = item.el;

      if (!isDragging) {
        isDragging = true;
        wasPlayingBeforeDrag = !video.paused;
        video.pause();
      }

      const seekTime = (progressBar.value / 100) * video.duration;
      timeCurrent.textContent = formatTime(seekTime);
      progressFill.style.width = `${progressBar.value}%`;
    });

    progressBar.addEventListener('change', () => {
      const item = currentItem();
      if (!item || item.type !== 'video') return;
      const video = item.el;

      const seekTime = (progressBar.value / 100) * video.duration;
      video.currentTime = seekTime;
      if (wasPlayingBeforeDrag) {
        video.play();
        playStatusIcon.classList.remove('visible');
      }
      isDragging = false;
    });

    captionBtn.addEventListener('click', (e) => {
      e.preventDefault();
      const item = currentItem();
      if (!item || item.type !== 'image') return;
      generateCaption(item.name);
    });

    magnifierToggle.addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      toggleMagnifier(!isMagnifying);
    });

    document.querySelectorAll('.zoom-btn').forEach((btn) => {
      btn.addEventListener('click', (e) => {
        e.preventDefault();
        const level = Number.parseFloat(btn.getAttribute('data-level') || '2.5');
        applyZoom(level);
      });
    });

    const magHammer = new Hammer(magnifier);
    magHammer.get('pan').set({ direction: Hammer.DIRECTION_ALL, threshold: 0 });
    let startX = 0;
    let startY = 0;

    magHammer.on('panstart', () => {
      startX = magX;
      startY = magY;
      magnifier.style.transition = 'none';
    });

    magHammer.on('panmove', (e) => {
      magX = startX + e.deltaX;
      magY = startY + e.deltaY;
      updateMagnifierPosition();
      updateMagnifierContent();
    });

    magHammer.on('panend', () => {
      magnifier.style.transition = 'transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
    });

    window.addEventListener('resize', () => {
      if (isMagnifying) updateMagnifierContent();
    });

    applyZoom(2.5);

    await loadFeed();
    if (feedItems.length > 0) {
      await showItem(0);
    }
  })();
</script>
{% endblock %}