{% extends "base.html" %}

{% block extra_head %}
<style>
  .collections-shell {
    display: block;
  }
  .collections-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }
  .collections-topbar h1 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #0f172a;
  }
  [data-theme="dark"] .collections-topbar h1 {
    color: #f8fafc;
  }
  .ghost-chip {
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(255, 255, 255, 0.86);
    color: #334155;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
  }
  [data-theme="dark"] .ghost-chip {
    background: rgba(30, 41, 59, 0.8);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.2);
  }
  .collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
    gap: 10px;
  }
  @media (min-width: 768px) {
    .collection-grid {
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 12px;
    }
  }
  .collection-item {
    position: relative;
  }
  .collection-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.2);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
  }
  [data-theme="dark"] .collection-card {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.18);
  }
  .collection-cover {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    position: relative;
    overflow: hidden;
  }
  [data-theme="dark"] .collection-cover {
    background: linear-gradient(135deg, #1e293b, #334155);
  }
  .collection-cover img,
  .collection-cover video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .collection-cover-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.88);
  }
  .collection-meta {
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .collection-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-theme="dark"] .collection-name {
    color: #f8fafc;
  }
  .collection-sub {
    font-size: 12px;
    color: #64748b;
  }
  [data-theme="dark"] .collection-sub {
    color: #94a3b8;
  }
  .collection-menu {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
  }
  .collection-menu-btn {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    background: rgba(15, 23, 42, 0.56);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .collection-menu-btn svg {
    width: 14px;
    height: 14px;
  }
  .collection-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 116px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.22);
    display: none;
    overflow: hidden;
  }
  .collection-menu.open .collection-menu-panel {
    display: block;
  }
  .collection-menu-item {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: transparent;
    color: #334155;
    text-align: left;
    padding: 8px 10px;
    font-size: 12px;
  }
  .collection-menu-item:last-child {
    border-bottom: 0;
  }
  .collection-menu-item:hover {
    background: rgba(148, 163, 184, 0.12);
  }
  .collection-menu-item.danger {
    color: #dc2626;
  }
  [data-theme="dark"] .collection-menu-panel {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(148, 163, 184, 0.2);
  }
  [data-theme="dark"] .collection-menu-item {
    color: #cbd5e1;
    border-bottom-color: rgba(148, 163, 184, 0.16);
  }
  [data-theme="dark"] .collection-menu-item:hover {
    background: rgba(148, 163, 184, 0.14);
  }
  [data-theme="dark"] .collection-menu-item.danger {
    color: #f87171;
  }
  .collections-empty {
    margin-top: 30px;
    text-align: center;
    font-size: 13px;
    color: #64748b;
  }
  .modal-mask {
    position: fixed;
    inset: 0;
    z-index: 260;
    background: rgba(15, 23, 42, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .modal-mask.active {
    display: flex;
  }
  .modal-card {
    width: min(460px, 100%);
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: #fff;
    padding: 14px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.25);
  }
  [data-theme="dark"] .modal-card {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.18);
  }
  .field {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(248, 250, 252, 0.75);
    color: #0f172a;
    padding: 9px 11px;
    font-size: 13px;
  }
  [data-theme="dark"] .field {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.8);
    color: #e2e8f0;
  }
  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
  }
  .create-collection-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(35, 34, 30, 0.09);
    border-radius: 999px;
    color: #f8f7f2;
    background: #292822;
    box-shadow: 0 1px 2px rgba(32, 30, 24, 0.16), 0 7px 18px rgba(32, 30, 24, 0.1);
    font-size: 12px;
    font-weight: 620;
    transition: transform 120ms ease, background-color 140ms ease, box-shadow 160ms ease;
  }
  .create-collection-btn svg { width: 15px; height: 15px; }
  .create-collection-btn:hover { background: #151512; box-shadow: 0 2px 3px rgba(32, 30, 24, 0.16), 0 9px 24px rgba(32, 30, 24, 0.14); }
  .create-collection-btn:active { transform: scale(0.97); }
  .create-collection-btn:focus-visible { outline: 2px solid #292822; outline-offset: 3px; }
  [data-theme="dark"] .create-collection-btn {
    border-color: rgba(255, 255, 255, 0.16);
    color: #22211d;
    background: #e9e5da;
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.22);
  }
  [data-theme="dark"] .create-collection-btn:hover { background: #fffdf5; }
  [data-theme="dark"] .create-collection-btn:focus-visible { outline-color: #e9e5da; }
  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 10px;
  }
  .collection-card {
    border: 0;
    border-radius: 19px;
    background: transparent;
    overflow: visible;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-theme="dark"] .collection-card { border: 0; background: transparent; }
  .collection-card:hover { transform: translateY(-2px); }
  .collection-card:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
  .collection-cover {
    aspect-ratio: 4 / 5;
    border-radius: 19px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.54), transparent 38%),
      #dedbd1;
    box-shadow: inset 0 0 0 1px rgba(35, 34, 30, 0.045), 0 1px 2px rgba(35, 34, 30, 0.04);
  }
  [data-theme="dark"] .collection-cover {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 38%),
      #292925;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055), 0 1px 2px rgba(0, 0, 0, 0.14);
  }
  .collection-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(to top, rgba(16, 15, 12, 0.12), transparent 32%);
  }
  .collection-cover-collage {
    position: absolute;
    inset: 0;
    display: grid;
    gap: 2px;
    background: rgba(248, 247, 242, 0.82);
  }
  [data-theme="dark"] .collection-cover-collage { background: rgba(25, 25, 22, 0.9); }
  .collection-cover-collage[data-count="1"] { grid-template-columns: 1fr; }
  .collection-cover-collage[data-count="2"] { grid-template-columns: 1.62fr 1fr; }
  .collection-cover-collage[data-count="3"] {
    grid-template-columns: 1.62fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .collection-cover-collage[data-count="3"] .collection-cover-tile:first-child { grid-row: 1 / 3; }
  .collection-cover-collage[data-count="4"] {
    grid-template-columns: 1.18fr 1fr;
    grid-template-rows: 1.12fr 1fr;
  }
  .collection-cover-tile {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #d7d3c9;
  }
  [data-theme="dark"] .collection-cover-tile { background: #32322e; }
  .collection-cover-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.002);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 240ms ease;
  }
  .collection-card:hover .collection-cover-tile:first-child img,
  .collection-card:focus-visible .collection-cover-tile:first-child img { transform: scale(1.035); }
  .collection-card:hover .collection-cover-tile:not(:first-child) img,
  .collection-card:focus-visible .collection-cover-tile:not(:first-child) img { transform: scale(1.018); }
  .collection-card:active .collection-cover-tile img { transform: scale(1.002); filter: brightness(0.96); }
  .collection-cover-video-mark {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 1;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.94);
    background: rgba(20, 19, 17, 0.48);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }
  .collection-cover-video-mark svg { width: 11px; height: 11px; fill: currentColor; stroke-width: 1.5; }
  .collection-meta { padding: 9px 2px 0; gap: 1px; }
  .collection-name { color: #292822; font-size: 14px; font-weight: 630; letter-spacing: -0.015em; }
  [data-theme="dark"] .collection-name { color: rgba(255, 255, 255, 0.92); }
  .collection-sub { color: rgba(35, 34, 30, 0.42); font-size: 11px; }
  [data-theme="dark"] .collection-sub { color: rgba(255, 255, 255, 0.38); }
  .collection-menu { top: 9px; right: 9px; }
  .collection-menu-btn {
    width: 34px;
    height: 34px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(24, 23, 20, 0.5);
    transition: background-color 140ms ease, transform 120ms ease;
  }
  .collection-menu-btn:hover, .collection-menu.open .collection-menu-btn { background: rgba(24, 23, 20, 0.76); }
  .collection-menu-btn:active { transform: scale(0.94); }
  .collection-menu-btn:focus-visible { outline: 2px solid white; outline-offset: 2px; }
  .collection-menu-panel { min-width: 132px; padding: 5px; border-radius: 13px; }
  .collection-menu-item { min-height: 38px; padding: 8px 10px; border: 0; border-radius: 9px; }
  .collections-state {
    min-height: 38vh;
    display: grid;
    place-items: center;
    padding: 48px 20px;
    color: rgba(35, 34, 30, 0.44);
    text-align: center;
  }
  .collections-state[hidden] { display: none; }
  .collections-state-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin: 0 auto 13px;
    border: 1px solid rgba(35, 34, 30, 0.07);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.48);
  }
  .collections-state-icon svg { width: 21px; height: 21px; stroke-width: 1.7; }
  .collections-state-title { color: #34332e; font-size: 14px; font-weight: 620; }
  .collections-state-copy { max-width: 260px; margin: 4px auto 0; font-size: 12px; line-height: 1.55; }
  .collections-state-action { margin-top: 14px; }
  [data-theme="dark"] .collections-state { color: rgba(255, 255, 255, 0.4); }
  [data-theme="dark"] .collections-state-icon { border-color: rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.04); }
  [data-theme="dark"] .collections-state-title { color: rgba(255, 255, 255, 0.86); }
  .modal-mask { background: rgba(18, 18, 16, 0.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .modal-card { border-radius: 20px; padding: 18px; background: #f8f7f3; }
  [data-theme="dark"] .modal-card { background: #22221f; }
  .modal-title { margin: 0 0 14px; color: #292822; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
  [data-theme="dark"] .modal-title { color: rgba(255, 255, 255, 0.94); }
  .field { border-radius: 12px; background: rgba(255, 255, 255, 0.72); }
  .modal-primary { color: white; background: #292822; border-color: #292822; }
  [data-theme="dark"] .modal-primary { color: #22211d; background: #e9e5da; border-color: #e9e5da; }
  @media (min-width: 640px) {
    .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 14px; }
  }
  @media (min-width: 900px) {
    .collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .collection-card, .create-collection-btn, .collection-menu-btn, .collection-cover-tile img { transition-duration: 0.01ms !important; }
  }
</style>
{% endblock %}

{% block content %}
<main class="saved-page collections-shell">
  {% set saved_active = 'collections' %}
  {% include '_saved_header.html' %}
  <section id="collections-grid" class="saved-content collection-grid"></section>
  <section id="collections-state" class="collections-state" aria-live="polite">
    <div>
      <div class="collections-state-icon"><i data-feather="loader"></i></div>
      <div id="collections-state-title" class="collections-state-title">正在读取集合</div>
      <p id="collections-state-copy" class="collections-state-copy">你的整理会保留在这台设备上。</p>
      <button id="collections-state-action" class="ghost-chip collections-state-action" type="button" hidden></button>
    </div>
  </section>
</main>

<div id="create-modal" class="modal-mask" aria-hidden="true">
  <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="create-modal-title">
    <h2 id="create-modal-title" class="modal-title">新建集合</h2>
    <input id="create-name" class="field mb-2" type="text" maxlength="80" placeholder="例如：灵感片段" />
    <textarea id="create-description" class="field" rows="3" maxlength="280" placeholder="可选描述"></textarea>
    <div class="modal-actions">
      <button id="cancel-create" class="ghost-chip" type="button">取消</button>
      <button id="submit-create" class="ghost-chip modal-primary" type="button">创建</button>
    </div>
  </div>
</div>

<div id="rename-modal" class="modal-mask" aria-hidden="true">
  <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="rename-modal-title">
    <h2 id="rename-modal-title" class="modal-title">重命名集合</h2>
    <input id="rename-name" class="field" type="text" maxlength="80" placeholder="输入新名称" />
    <div class="modal-actions">
      <button id="cancel-rename" class="ghost-chip" type="button">取消</button>
      <button id="submit-rename" class="ghost-chip modal-primary" type="button">保存</button>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_body %}
<script>
  (() => {
    const grid = document.getElementById('collections-grid');
    const stateEl = document.getElementById('collections-state');
    const stateTitle = document.getElementById('collections-state-title');
    const stateCopy = document.getElementById('collections-state-copy');
    const stateAction = document.getElementById('collections-state-action');
    const openBtn = document.getElementById('open-create-collection');
    const modal = document.getElementById('create-modal');
    const cancelBtn = document.getElementById('cancel-create');
    const submitBtn = document.getElementById('submit-create');
    const nameInput = document.getElementById('create-name');
    const descInput = document.getElementById('create-description');
    const renameModal = document.getElementById('rename-modal');
    const renameCancelBtn = document.getElementById('cancel-rename');
    const renameSubmitBtn = document.getElementById('submit-rename');
    const renameInput = document.getElementById('rename-name');
    const collectionsById = new Map();
    let renamingCollectionId = '';

    function showState(kind) {
      const states = {
        loading: ['正在读取集合', '你的整理会保留在这台设备上。', '', 'loader'],
        empty: ['还没有集合', '建立一个集合，把想再次看到的媒体放在一起。', '新建第一个集合', 'layers'],
        error: ['暂时无法读取集合', '请检查连接后重新尝试。', '重新加载', 'wifi-off'],
      };
      const [title, copy, action, icon] = states[kind] || states.loading;
      stateTitle.textContent = title;
      stateCopy.textContent = copy;
      stateAction.textContent = action;
      stateAction.hidden = !action;
      const iconWrap = stateEl.querySelector('.collections-state-icon');
      iconWrap.innerHTML = `<i data-feather="${icon}"></i>`;
      stateEl.hidden = false;
      feather.replace();
    }

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

    function openCreateModal() {
      modal.classList.add('active');
      modal.setAttribute('aria-hidden', 'false');
      nameInput.focus();
    }

    function closeCreateModal() {
      modal.classList.remove('active');
      modal.setAttribute('aria-hidden', 'true');
      nameInput.value = '';
      descInput.value = '';
    }

    function openRenameModal(collectionId) {
      const id = String(collectionId || '').trim();
      const item = collectionsById.get(id);
      if (!id || !item) return;
      renamingCollectionId = id;
      renameInput.value = String(item.name || '').trim();
      renameModal.classList.add('active');
      renameModal.setAttribute('aria-hidden', 'false');
      requestAnimationFrame(() => {
        renameInput.focus();
        renameInput.select();
      });
    }

    function closeRenameModal() {
      renameModal.classList.remove('active');
      renameModal.setAttribute('aria-hidden', 'true');
      renameInput.value = '';
      renamingCollectionId = '';
    }

    function renderCards(items) {
      if (!Array.isArray(items) || !items.length) {
        grid.innerHTML = '';
        showState('empty');
        return;
      }
      stateEl.hidden = true;
      collectionsById.clear();
      grid.innerHTML = items.map((item) => {
        const id = String(item.id || '');
        collectionsById.set(id, item);
        const count = Number(item.item_count || 0);
        const detail = String(item.detail_url || '#');
        const name = escapeHtml(item.name || '未命名集合');
        const previewItems = Array.isArray(item.preview_items) ? item.preview_items.slice(0, 4) : [];
        let coverHtml;
        if (!previewItems.length) {
          coverHtml = `<div class="collection-cover-empty"><i data-feather="folder"></i></div>`;
        } else {
          const tiles = previewItems.map((preview, index) => {
            const thumbUrl = escapeHtml(String(preview.thumb_url || ''));
            const isMainVideo = index === 0 && String(preview.type || '') === 'video';
            const videoMark = isMainVideo
              ? `<span class="collection-cover-video-mark" aria-hidden="true"><i data-feather="play"></i></span>`
              : '';
            return `<span class="collection-cover-tile"><img src="${thumbUrl}" alt="" loading="lazy" decoding="async" />${videoMark}</span>`;
          }).join('');
          coverHtml = `<div class="collection-cover-collage" data-count="${previewItems.length}">${tiles}</div>`;
        }
        return `
          <article class="collection-item" data-collection-id="${id}">
            <a class="collection-card" href="${detail}">
              <div class="collection-cover">${coverHtml}</div>
              <div class="collection-meta">
                <div class="collection-name">${name}</div>
                <div class="collection-sub">${count} 个媒体</div>
              </div>
            </a>
            <div class="collection-menu" data-menu-id="${id}">
              <button class="collection-menu-btn" type="button" data-menu-toggle="1" data-id="${id}" aria-label="${name}的更多操作" aria-expanded="false">
                <i data-feather="more-horizontal"></i>
              </button>
              <div class="collection-menu-panel">
                <button class="collection-menu-item" type="button" data-action="rename" data-id="${id}">重命名</button>
                <button class="collection-menu-item danger" type="button" data-action="delete" data-id="${id}">删除</button>
              </div>
            </div>
          </article>
        `;
      }).join('');
      feather.replace();
    }

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

    async function loadCollections() {
      showState('loading');
      const data = await api('/api/collections');
      renderCards(data.items || []);
    }

    function closeMenus(exceptId = '') {
      grid.querySelectorAll('.collection-menu.open').forEach((node) => {
        if (exceptId && node.getAttribute('data-menu-id') === exceptId) return;
        node.classList.remove('open');
        node.querySelector('[data-menu-toggle]')?.setAttribute('aria-expanded', 'false');
      });
    }

    function toggleMenu(collectionId) {
      const id = String(collectionId || '').trim();
      if (!id) return;
      const target = grid.querySelector(`.collection-menu[data-menu-id="${id}"]`);
      if (!target) return;
      const shouldOpen = !target.classList.contains('open');
      closeMenus(id);
      target.classList.toggle('open', shouldOpen);
      target.querySelector('[data-menu-toggle]')?.setAttribute('aria-expanded', String(shouldOpen));
    }

    async function createCollection() {
      const name = String(nameInput.value || '').trim();
      const description = String(descInput.value || '').trim();
      if (!name) return;
      submitBtn.disabled = true;
      submitBtn.textContent = '正在创建…';
      try {
        await api('/api/collections', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name, description }),
        });
        closeCreateModal();
        await loadCollections();
      } catch (error) {
        alert(error.message || '创建失败');
      } finally {
        submitBtn.disabled = false;
        submitBtn.textContent = '创建';
      }
    }

    async function submitRenameCollection() {
      const collectionId = String(renamingCollectionId || '').trim();
      const name = String(renameInput.value || '').trim();
      if (!collectionId || !name) return;
      renameSubmitBtn.disabled = true;
      renameSubmitBtn.textContent = '正在保存…';
      try {
        await api(`/api/collections/${encodeURIComponent(collectionId)}`, {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name }),
        });
        closeRenameModal();
        await loadCollections();
      } catch (error) {
        alert(error.message || '重命名失败');
      } finally {
        renameSubmitBtn.disabled = false;
        renameSubmitBtn.textContent = '保存';
      }
    }

    async function deleteCollection(collectionId) {
      const item = collectionsById.get(collectionId);
      if (!item) return;
      const ok = window.confirm(`确认删除集合“${String(item.name || '未命名集合')}”？`);
      if (!ok) return;
      try {
        await api(`/api/collections/${encodeURIComponent(collectionId)}`, { method: 'DELETE' });
        await loadCollections();
      } catch (error) {
        alert(error.message || '删除失败');
      }
    }

    openBtn.addEventListener('click', openCreateModal);
    stateAction.addEventListener('click', () => {
      if (stateTitle.textContent === '还没有集合') {
        openCreateModal();
        return;
      }
      loadCollections().catch(() => showState('error'));
    });
    cancelBtn.addEventListener('click', closeCreateModal);
    modal.addEventListener('click', (event) => {
      if (event.target === modal) closeCreateModal();
    });
    submitBtn.addEventListener('click', createCollection);
    nameInput.addEventListener('keydown', (event) => {
      if (event.key === 'Enter') {
        event.preventDefault();
        createCollection();
      }
    });
    grid.addEventListener('click', async (event) => {
      const menuToggle = event.target.closest('[data-menu-toggle][data-id]');
      if (menuToggle) {
        event.preventDefault();
        event.stopPropagation();
        const collectionId = String(menuToggle.getAttribute('data-id') || '').trim();
        toggleMenu(collectionId);
        return;
      }

      const button = event.target.closest('[data-action][data-id]');
      if (!button) return;
      event.preventDefault();
      event.stopPropagation();
      closeMenus();
      const action = String(button.getAttribute('data-action') || '').trim();
      const collectionId = String(button.getAttribute('data-id') || '').trim();
      if (!action || !collectionId) return;
      if (action === 'rename') {
        openRenameModal(collectionId);
        return;
      }
      if (action === 'delete') {
        await deleteCollection(collectionId);
      }
    });

    document.addEventListener('click', (event) => {
      if (event.target.closest('.collection-menu')) return;
      closeMenus();
    });
    document.addEventListener('keydown', (event) => {
      if (event.key !== 'Escape') return;
      if (renameModal.classList.contains('active')) {
        closeRenameModal();
        return;
      }
      if (modal.classList.contains('active')) {
        closeCreateModal();
        return;
      }
      closeMenus();
    });
    renameCancelBtn.addEventListener('click', closeRenameModal);
    renameModal.addEventListener('click', (event) => {
      if (event.target === renameModal) closeRenameModal();
    });
    renameSubmitBtn.addEventListener('click', submitRenameCollection);
    renameInput.addEventListener('keydown', (event) => {
      if (event.key !== 'Enter') return;
      event.preventDefault();
      submitRenameCollection();
    });

    loadCollections().catch(() => showState('error'));
  })();
</script>
{% endblock %}