<template>
  <div class="reference-library">
    <!-- 子 Tab 切换器：全部文献 / 文献集 -->
    <div class="library-tabs">
      <div
        class="library-tab"
        :class="{ active: librarySubTab === 'all' }"
        @click="librarySubTab = 'all'; activeCollection = null"
      >
        {{ t('referenceLibrary.allReferences') || '全部文献' }}
      </div>
      <div
        class="library-tab"
        :class="{ active: librarySubTab === 'collections' }"
        @click="librarySubTab = 'collections'; activeCollection = null"
      >
        {{ t('referenceLibrary.collections') || '文献集' }}
      </div>
    </div>

    <!-- 搜索与操作栏：全部文献 / 文献集 两种模式 -->
    <div class="library-toolbar">
      <!-- 全部文献模式 -->
      <template v-if="librarySubTab === 'all'">
        <button
          class="toolbar-btn upload-btn"
          :title="t('reference.addReference') || '上传'"
          @click="handleUploadClick"
          :disabled="!canAddReference"
        >
          <i class="fas fa-upload"></i>
        </button>
        <div class="search-wrapper">
          <i class="fas fa-search search-icon"></i>
          <input
            v-model="searchKeyword"
            type="text"
            class="search-input"
            :placeholder="t('referenceLibrary.searchPlaceholder') || '搜索文献'"
          />
        </div>
        <el-dropdown trigger="click" placement="right-start" class="filter-dropdown">
          <button
            class="toolbar-btn filter-btn"
            :title="t('referenceLibrary.filter') || '筛选'"
          >
            <i class="fas fa-bars"></i>
          </button>
          <template #dropdown>
            <div class="filter-panel" @click.stop>
              <div class="filter-panel-title">{{ t('referenceLibrary.filterTitle') || '文献筛选' }}</div>

              <div class="filter-section">
                <div class="filter-section-label">{{ t('referenceLibrary.pdfStatus') || 'PDF文件状态' }}</div>
                <div class="filter-options">
                  <button
                    v-for="opt in pdfStatusOptions"
                    :key="opt.value"
                    class="filter-opt-btn"
                    :class="{ active: filterState.pdfStatus === opt.value }"
                    @click="filterState.pdfStatus = opt.value"
                  >
                    {{ opt.label }}
                  </button>
                </div>
              </div>

              <div class="filter-section">
                <div class="filter-section-label">{{ t('referenceLibrary.pubYear') || '出版年份' }}</div>
                <div class="filter-options">
                  <button
                    v-for="opt in pubYearOptions"
                    :key="opt.value"
                    class="filter-opt-btn"
                    :class="{ active: filterState.pubYear === opt.value }"
                    @click="filterState.pubYear = opt.value"
                  >
                    {{ opt.label }}
                  </button>
                </div>
              </div>

              <div class="filter-section">
                <div class="filter-section-label">{{ t('referenceLibrary.impactFactor') || '影响因子' }}</div>
                <div class="filter-options">
                  <button
                    v-for="opt in impactFactorOptions"
                    :key="opt.value"
                    class="filter-opt-btn"
                    :class="{ active: filterState.impactFactor === opt.value }"
                    @click="filterState.impactFactor = opt.value"
                  >
                    {{ opt.label }}
                  </button>
                </div>
              </div>

              <div class="filter-section">
                <div class="filter-section-label">{{ t('referenceLibrary.openAccess') || '开放访问' }}</div>
                <div class="filter-options">
                  <button
                    v-for="opt in openAccessOptions"
                    :key="opt.value"
                    class="filter-opt-btn"
                    :class="{ active: filterState.openAccess === opt.value }"
                    @click="filterState.openAccess = opt.value"
                  >
                    {{ opt.label }}
                  </button>
                </div>
              </div>

              <div class="filter-section">
                <div class="filter-section-header">
                  <div class="filter-section-label">
                    {{ t('referenceLibrary.litType') || '文献类型' }}
                  </div>
                  <label class="filter-checkbox all-checkbox">
                    <input
                      v-model="filterState.litTypes"
                      type="checkbox"
                      value="all"
                    />
                    <span>{{ t('referenceLibrary.all') || '所有' }}</span>
                  </label>
                </div>
                <div class="filter-options filter-options-grid">
                  <label
                    v-for="opt in litTypeOptions"
                    :key="opt.value"
                    class="filter-checkbox"
                  >
                    <input
                      v-model="filterState.litTypes"
                      type="checkbox"
                      :value="opt.value"
                    />
                    <span>{{ opt.label }}</span>
                  </label>
                </div>
              </div>

              <div class="filter-section">
                <div class="filter-section-label">{{ t('referenceLibrary.personalTags') || '个性化标签' }}</div>
                <div class="filter-options">
                  <button
                    v-for="opt in tagOptions"
                    :key="opt.value"
                    class="filter-opt-btn"
                    :class="{ active: filterState.tag === opt.value }"
                    @click="filterState.tag = opt.value"
                  >
                    {{ opt.label }}
                  </button>
                </div>
              </div>
              <div class="filter-tag-input-row">
                <input
                  v-model="tagInput"
                  type="text"
                  class="filter-tag-input"
                  :placeholder="t('referenceLibrary.addTagPlaceholder') || '添加标签...'"
                />
                <button class="filter-add-btn" @click="handleAddTag">
                  {{ t('referenceLibrary.add') || '添加' }}
                </button>
              </div>
            </div>
          </template>
        </el-dropdown>
      </template>
      <!-- 文献集模式 -->
      <template v-else>
        <div class="search-wrapper search-wrapper-full">
          <i class="fas fa-search search-icon"></i>
          <input
            v-model="collectionSearchKeyword"
            type="text"
            class="search-input"
            :placeholder="t('referenceLibrary.searchCollections') || '搜索文献集....'"
          />
        </div>
        <button
          class="toolbar-btn new-collection-btn"
          :title="t('referenceLibrary.newCollection') || '新建文献集'"
          @click="handleCreateCollection"
          :disabled="collectionsCreateBusy"
        >
          <i class="fas fa-folder-plus"></i>
        </button>
      </template>
    </div>

    <!-- 内容区域 -->
    <div class="library-content">
      <!-- 文献集：当前文献集下的文献列表（样式与全部文献一致） -->
      <template v-if="librarySubTab === 'collections' && activeCollection">
        <div class="collection-detail-header">
          <button
            class="collection-back-btn"
            :title="t('common.back') || '返回'"
            @click="activeCollection = null"
          >
            <i class="fas fa-arrow-left"></i>
          </button>
          <span class="collection-detail-title">{{ activeCollection.title }}</span>
        </div>
        <div v-if="collectionDocsBusy" class="library-loading">
          <i class="fas fa-spinner fa-spin"></i>
          <span>{{ t('reference.loading') || '加载中...' }}</span>
        </div>
        <div
          v-else-if="collectionDisplayReferences.length === 0"
          class="library-empty"
        >
          <i class="fas fa-book-open empty-icon"></i>
          <span>该文献集中暂无文献</span>
        </div>
        <div v-else class="library-cards">
          <div
            v-for="ref in collectionDisplayReferences"
            :key="ref.workId"
            class="reference-card"
          >
          <!-- 添加到文献集下拉菜单 -->
          <el-dropdown
            :ref="(el) => setAddToCollectionDropdownRef(ref.workId, el)"
            trigger="click"
            placement="right-start"
            :disabled="!!(ref as any).isMock"
            @visible-change="handleAddToCollectionDropdownVisibleChange"
          >
            <button
              class="card-add-btn"
              :title="'添加到文献集'"
              @click="handleAddRef(ref)"
            >
              <i class="fas fa-plus"></i>
            </button>
            <template #dropdown>
              <div
                v-if="addToCollectionTargetWorkId === ref.workId"
                class="add-collection-panel"
              >
                <div class="add-collection-title">
                  {{ t('referenceLibrary.collections') || '文献集' }}
                </div>

                <div class="add-collection-search" @click.stop>
                  <i class="fas fa-search search-icon"></i>
                  <input
                    v-model="addToCollectionSearchKeyword"
                    type="text"
                    class="search-input"
                    :placeholder="t('referenceLibrary.searchCollections') || '搜索文献集...'"
                  />
                </div>

                <div v-if="collectionsBusy" class="library-loading">
                  <i class="fas fa-spinner fa-spin"></i>
                  <span>{{ t('reference.loading') || '加载中...' }}</span>
                </div>

                <div
                  v-else-if="addToCollectionFilteredCollections.length === 0"
                  class="add-collection-empty"
                >
                  暂无文献集
                </div>

                <div v-else class="add-collection-list">
                  <div
                    v-for="coll in addToCollectionFilteredCollections"
                    :key="coll.id"
                    class="add-collection-item"
                    :class="{ selected: addToCollectionSelectedCollectionId === coll.id }"
                    @click.stop="addToCollectionSelectedCollectionId = coll.id"
                  >
                    <div class="add-collection-item-title">{{ coll.title }}</div>
                    <div class="add-collection-item-meta">
                      {{ coll.count }} {{ t('referenceLibrary.referencesCount') || '篇' }}
                    </div>
                  </div>
                </div>

                <!-- 创建文献集入口 -->
                <div class="add-collection-create">
                  <div
                    v-if="!addToCollectionShowCreateInput"
                    class="add-collection-create-entry"
                    :class="{ disabled: addToCollectionCreateBusy }"
                    @click.stop="!addToCollectionCreateBusy && handleAddToCollectionCreateCollection()"
                  >
                    <i class="fas fa-plus"></i>
                    创建文献集
                  </div>

                  <div
                    v-else
                    class="add-collection-create-input-wrap"
                    @click.stop
                  >
                    <i class="fas fa-plus add-collection-create-input-plus"></i>
                    <input
                      ref="addToCollectionNewCollectionInputRef"
                      v-model="addToCollectionNewCollectionName"
                      class="collection-create-input"
                      type="text"
                      :disabled="addToCollectionCreateBusy"
                      placeholder="输入文献集名称，回车创建"
                      @keydown.enter.prevent="submitAddToCollectionCreateCollection"
                      @blur="submitAddToCollectionCreateCollectionOnBlur"
                      @keydown.esc.prevent="closeAddToCollectionCreateCollectionInput"
                    />

                    <div
                      class="add-collection-create-submit"
                      :class="{ disabled: addToCollectionCreateBusy }"
                      @mousedown.prevent
                      @click.stop="!addToCollectionCreateBusy && submitAddToCollectionCreateCollection()"
                    >
                      创建
                    </div>
                  </div>
                </div>

                <div class="add-collection-actions">
                  <button class="add-collection-cancel" @click="cancelAddToCollection">
                    {{ t('common.cancel') || '取消' }}
                  </button>
                  <button
                    class="add-collection-confirm"
                    :disabled="addToCollectionBusy || !addToCollectionSelectedCollectionId"
                    @click="confirmAddToCollection"
                  >
                    {{ t('common.save') || '确认' }}
                  </button>
                </div>
              </div>
            </template>
          </el-dropdown>
            <div class="card-title">{{ ref.title }}</div>
            <div class="card-author">
              {{ formatAuthorsDisplayForCard(ref.authorsText) || '—' }}
            </div>
            <div class="card-journal">{{ ref.venueName || ref.journalAbbr || getJournal(ref) }}</div>
            <div class="card-meta">
              <span v-if="ref.impactFactor">IF {{ ref.impactFactor }}</span>
              <span v-if="ref.publicationYear" class="meta-sep">·</span>
              <span v-if="ref.publicationYear">{{ ref.publicationYear }}</span>
              <span v-if="ref.citations" class="meta-sep">·</span>
              <span v-if="ref.citations">{{ ref.citations }} citations</span>
              <span v-if="ref.doi" class="meta-sep">·</span>
              <a
                v-if="ref.doi"
                :href="`https://doi.org/${ref.doi}`"
                target="_blank"
                rel="noopener noreferrer"
                class="doi-link"
                @click.stop
              >
                DOI
              </a>
            </div>
            <div class="card-actions">
              <div
                class="action-btn"
                @click="openDetail(ref)"
              >
                <i class="fas fa-info-circle"></i>
                <span>{{ t('referenceLibrary.detail') || '详情' }}</span>
              </div>
              <div
                class="action-btn"
                @click="openOriginal(ref)"
              >
                <i class="fas fa-external-link-alt"></i>
                <span>{{ t('reference.viewOriginal') || '打开原文' }}</span>
              </div>
              <div
                class="action-btn"
                @click="copyCitation(ref)"
              >
                <i class="fas fa-quote-right"></i>
                <span>{{ t('referenceLibrary.citation') || '引用' }}</span>
              </div>
              <label
                v-if="getWorkIdForCollectionDocSelect(ref) > 0"
                class="card-delete-checkbox"
                :title="
                  t('referenceLibrary.selectCollectionDocHint') ||
                  '选择以从文献库删除或移出文献集'
                "
                @click.stop
              >
                <input
                  type="checkbox"
                  :checked="
                    isCollectionDocWorkIdSelected(getWorkIdForCollectionDocSelect(ref))
                  "
                  @change="
                    toggleCollectionDocWorkIdSelection(getWorkIdForCollectionDocSelect(ref))
                  "
                />
              </label>
            </div>
          </div>
        </div>
      </template>

      <!-- 文献集：集合卡片列表 -->
      <div
        v-else-if="
          librarySubTab === 'collections' &&
          !collectionsBusy &&
          (collections.length > 0 || showCreateCollectionInput)
        "
        class="library-collections"
      >
        <div
          v-if="showCreateCollectionInput"
          class="collection-card collection-create-card"
          @click.stop
        >
          <input
            ref="newCollectionInputRef"
            v-model="newCollectionName"
            class="collection-create-input"
            type="text"
            :disabled="collectionsCreateBusy"
            placeholder="输入文献集名称，回车创建"
            @keydown.enter.prevent="submitCreateCollection"
            @blur="submitCreateCollectionOnBlur"
            @keydown.esc.prevent="closeCreateCollectionInput"
          />
        </div>
        <div
          v-for="coll in displayCollections"
          :key="coll.id"
          class="collection-card"
          @click="openCollection(coll)"
        >
          <label
            class="collection-delete-checkbox"
            :title="t('referenceLibrary.selectCollectionToDelete') || '选择以删除文献集'"
            @click.stop
          >
            <input
              type="checkbox"
              :checked="isCollectionIdSelected(coll.id)"
              @change="toggleCollectionIdSelection(coll.id)"
            />
          </label>
          <div class="collection-title-row">
            <input
              v-if="editingCollectionId === coll.id"
              ref="editCollectionInputRef"
              v-model="editingCollectionName"
              class="collection-title-input"
              type="text"
              :disabled="collectionsRenameBusy"
              :placeholder="'重命名文献集名称'"
              @click.stop
              @keydown.enter.prevent="submitRenameCollection('enter')"
              @blur="submitRenameCollection('blur')"
            />
            <div v-else class="collection-title">{{ coll.title }}</div>
            <button
              v-if="editingCollectionId !== coll.id"
              type="button"
              class="collection-edit-btn"
              :disabled="collectionsRenameBusy"
              :title="'编辑'"
              @click.stop="startRenameCollection(coll)"
            >
              <i class="fas fa-pen"></i>
            </button>
          </div>
          <div class="collection-meta">
            {{ coll.count }} {{ t('referenceLibrary.referencesCount') || '篇' }}
            <span class="meta-sep">·</span>
            {{ t('referenceLibrary.created') || '创建:' }} {{ coll.createdAt }}
          </div>
        </div>
      </div>

      <!-- 文献集：无数据提示 -->
      <div
        v-else-if="
          librarySubTab === 'collections' &&
          !collectionsBusy &&
          collections.length === 0 &&
          !!collectionSearchKeyword.trim() &&
          !showCreateCollectionInput
        "
        class="library-empty collections-empty"
      >
        <i class="fas fa-box-open collections-empty-icon"></i>
        <div class="collections-empty-text">
          {{ t('referenceLibrary.emptyCollectionsSearchHint') || '未找到匹配的文献集' }}
        </div>
      </div>

      <!-- 文献集：无数据提示 -->
      <div
        v-else-if="
          librarySubTab === 'collections' &&
          !collectionsBusy &&
          collections.length === 0 &&
          !collectionSearchKeyword.trim() &&
          !showCreateCollectionInput
        "
        class="library-empty collections-empty"
      >
        <i class="fas fa-box-open collections-empty-icon"></i>
        <div class="collections-empty-text">
          创建您的第一个文献集以开始使用。
        </div>
        <el-button
          type="primary"
          class="import-btn collections-empty-btn"
          @click="handleCreateCollection"
          :disabled="collectionsCreateBusy"
        >
          <i class="fas fa-plus"></i>添加文献集
        </el-button>
      </div>

      <!-- 文献集：加载中 -->
      <div
        v-else-if="librarySubTab === 'collections' && collectionsBusy"
        class="library-loading"
      >
        <i class="fas fa-spinner fa-spin"></i>
        <span>{{ t('reference.loading') || '加载中...' }}</span>
      </div>

      <!-- 全部文献：加载中 -->
      <div
        v-else-if="isLoading"
        class="library-loading"
      >
        <i class="fas fa-spinner fa-spin"></i>
        <span>{{ t('reference.loading') || '加载中...' }}</span>
      </div>

      <!-- 全部文献：库中无任何文献 — 引导添加来源 -->
      <div
        v-else-if="
          librarySubTab === 'all' &&
          references.length === 0 &&
          !searchKeyword.trim()
        "
        class="library-empty library-empty-cta"
      >
        <div class="library-empty-cta-visual" aria-hidden="true">
          <div class="cta-source-stack">
            <span class="cta-mini-card cta-mini-card--n">Nature</span>
            <span class="cta-mini-card cta-mini-card--s">Springer</span>
            <span class="cta-mini-card cta-mini-card--a">arXiv</span>
          </div>
        </div>
        <h3 class="library-empty-cta-title">
          {{ t('referenceLibrary.emptyCtaTitle') }}
        </h3>
        <p class="library-empty-cta-subtitle">
          {{ t('referenceLibrary.emptyCtaSubtitle') }}
        </p>
        <div class="library-empty-cta-section-label">
          {{ t('referenceLibrary.emptyCtaPopular') }}
        </div>
        <div class="library-empty-cta-actions">
          <button
            type="button"
            class="library-empty-cta-btn"
            @click="openImportDialog('pdf')"
          >
            <i class="fas fa-upload library-empty-cta-btn-icon"></i>
            <span>{{ t('referenceLibrary.emptyCtaUploadPdf') }}</span>
          </button>
          <button
            type="button"
            class="library-empty-cta-btn"
            @click="openImportDialog('zotero')"
          >
            <i class="tab-icon-z library-empty-cta-btn-zm" aria-hidden="true">Z</i>
            <span>{{ t('referenceLibrary.emptyCtaZotero') }}</span>
          </button>
          <button
            type="button"
            class="library-empty-cta-btn"
            @click="openImportDialog('mendeley')"
          >
            <i class="tab-icon-m library-empty-cta-btn-zm" aria-hidden="true">M</i>
            <span>{{ t('referenceLibrary.emptyCtaMendeley') }}</span>
          </button>
        </div>
        <div class="library-empty-cta-section-label library-empty-cta-section-label--other">
          {{ t('referenceLibrary.emptyCtaOther') }}
        </div>
        <div class="library-empty-cta-actions">
          <button
            type="button"
            class="library-empty-cta-btn"
            @click="openImportDialog('pasteId')"
          >
            <i class="fas fa-link library-empty-cta-btn-icon"></i>
            <span>{{ t('referenceLibrary.emptyCtaDoiPmid') }}</span>
          </button>
          <button
            type="button"
            class="library-empty-cta-btn"
            @click="openImportDialog('bibris')"
          >
            <i class="fas fa-file-alt library-empty-cta-btn-icon"></i>
            <span>{{ t('referenceLibrary.emptyCtaBibRis') }}</span>
          </button>
        </div>
      </div>

      <!-- 全部文献：有文献但当前筛选/搜索无匹配 -->
      <div
        v-else-if="librarySubTab === 'all' && displayReferences.length === 0"
        class="library-empty"
      >
        <i class="fas fa-book-open empty-icon"></i>
        <span>{{ t('referenceLibrary.emptySearchHint') }}</span>
      </div>

      <!-- 全部文献：文献卡片列表 -->
      <div v-else class="library-cards">
        <div
          v-for="ref in displayReferences"
          :key="ref.workId"
          class="reference-card"
        >
        <!-- 添加到文献集下拉菜单 -->
          <el-dropdown
            :ref="(el) => setAddToCollectionDropdownRef(ref.workId, el)"
            trigger="click"
            placement="right-start"
            :disabled="!!(ref as any).isMock"
            @visible-change="handleAddToCollectionDropdownVisibleChange"
          >
            <button
              class="card-add-btn"
              :title="'添加到文献集'"
              @click="handleAddRef(ref)"
            >
              <i class="fas fa-plus"></i>
            </button>
            <template #dropdown>
              <div
                v-if="addToCollectionTargetWorkId === ref.workId"
                class="add-collection-panel"
              >
                <div class="add-collection-search" @click.stop>
                  <i class="fas fa-search search-icon"></i>
                  <input
                    v-model="addToCollectionSearchKeyword"
                    type="text"
                    class="search-input"
                    :placeholder="t('referenceLibrary.searchCollections') || '搜索文献集...'"
                  />
                </div>

                <div v-if="collectionsBusy" class="library-loading">
                  <i class="fas fa-spinner fa-spin"></i>
                  <span>{{ t('reference.loading') || '加载中...' }}</span>
                </div>

                <div
                  v-else-if="addToCollectionFilteredCollections.length === 0"
                  class="add-collection-empty"
                >
                  暂无文献集
                </div>

                <div v-else class="add-collection-list">
                  <div
                    v-for="coll in addToCollectionFilteredCollections"
                    :key="coll.id"
                    class="add-collection-item"
                    :class="{ selected: addToCollectionSelectedCollectionId === coll.id }"
                    @click.stop="addToCollectionSelectedCollectionId = coll.id"
                  >
                    <div class="add-collection-item-title">{{ coll.title }}</div>
                    <div class="add-collection-item-meta">
                      {{ coll.count }} {{ t('referenceLibrary.referencesCount') || '篇' }}
                    </div>
                  </div>
                </div>

                <!-- 创建文献集入口 -->
                <div class="add-collection-create">
                  <div
                    v-if="!addToCollectionShowCreateInput"
                    class="add-collection-create-entry"
                    :class="{ disabled: addToCollectionCreateBusy }"
                    @click.stop="!addToCollectionCreateBusy && handleAddToCollectionCreateCollection()"
                  >
                    <i class="fas fa-plus"></i>
                    创建文献集
                  </div>

                  <div
                    v-else
                    class="add-collection-create-input-wrap"
                    @click.stop
                  >
                    <i class="fas fa-plus add-collection-create-input-plus"></i>
                    <input
                      ref="addToCollectionNewCollectionInputRef"
                      v-model="addToCollectionNewCollectionName"
                      class="collection-create-input"
                      type="text"
                      :disabled="addToCollectionCreateBusy"
                      placeholder="输入文献集名称"
                      @keydown.enter.prevent="submitAddToCollectionCreateCollection"
                      @blur="submitAddToCollectionCreateCollectionOnBlur"
                      @keydown.esc.prevent="closeAddToCollectionCreateCollectionInput"
                    />

                    <div
                      class="add-collection-create-submit"
                      :class="{ disabled: addToCollectionCreateBusy }"
                      @mousedown.prevent
                      @click.stop="!addToCollectionCreateBusy && submitAddToCollectionCreateCollection()"
                    >
                      创建
                    </div>
                  </div>
                </div>

                <div class="add-collection-actions">
                  <button class="add-collection-cancel" @click="cancelAddToCollection">
                    {{ t('common.cancel') || '取消' }}
                  </button>
                  <button
                    class="add-collection-confirm"
                    :disabled="addToCollectionBusy || !addToCollectionSelectedCollectionId"
                    @click="confirmAddToCollection"
                  >
                    {{ t('common.save') || '确认' }}
                  </button>
                </div>
              </div>
            </template>
          </el-dropdown>
          <div class="card-title">{{ ref.title }}</div>
          <div class="card-author">
            {{ formatAuthorsDisplayForCard(ref.authorsText) || '—' }}
          </div>
          <div class="card-journal">{{ ref.venueName || ref.journalAbbr || getJournal(ref) }}</div>
          <div class="card-meta">
            <span v-if="ref.impactFactor">IF {{ ref.impactFactor }}</span>
            <span v-if="ref.publicationYear" class="meta-sep">·</span>
            <span v-if="ref.publicationYear">{{ ref.publicationYear }}</span>
            <span v-if="ref.citations" class="meta-sep">·</span>
            <span v-if="ref.citations">{{ ref.citations }} citations</span>
            <span v-if="ref.doi" class="meta-sep">·</span>
            <a
              v-if="ref.doi"
              :href="`https://doi.org/${ref.doi}`"
              target="_blank"
              rel="noopener noreferrer"
              class="doi-link"
              @click.stop
            >
              DOI
            </a>
          </div>
          <div class="card-actions">
            <div
              class="action-btn"
              @click="openDetail(ref)"
            >
              <i class="fas fa-info-circle"></i>
              <span>{{ t('referenceLibrary.detail') || '详情' }}</span>
            </div>
            <div
              class="action-btn"
              @click="openOriginal(ref)"
            >
              <i class="fas fa-external-link-alt"></i>
              <span>{{ t('reference.viewOriginal') || '打开原文' }}</span>
            </div>
            <div
              class="action-btn"
              @click="copyCitation(ref)"
            >
              <i class="fas fa-quote-right"></i>
              <span>{{ t('referenceLibrary.citation') || '引用' }}</span>
            </div>
            <label
              v-if="getLibraryItemIdForDelete(ref) > 0"
              class="card-delete-checkbox"
              :title="t('referenceLibrary.selectToDelete') || '选择以从文献库删除'"
              @click.stop
            >
              <input
                type="checkbox"
                :checked="isLibraryItemIdSelected(getLibraryItemIdForDelete(ref))"
                @change="toggleLibraryItemIdSelection(getLibraryItemIdForDelete(ref))"
              />
            </label>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="canShowLibraryBatchDeleteBar"
      class="library-batch-delete-bar"
    >
      <span class="library-batch-delete-hint">
        {{
          t('referenceLibrary.selectedCount', {
            count: batchDeleteBarSelectedCount,
          }) || `已选 ${batchDeleteBarSelectedCount} 项`
        }}
      </span>
      <div class="library-batch-delete-actions">
        <el-button
          size="small"
          @click="clearBatchDeleteBarSelection"
        >
          {{ t('common.cancel') || '取消' }}
        </el-button>
        <el-button
          v-if="isBatchDeleteBarCollectionDocsMode"
          size="small"
          :loading="removeFromCollectionBusy"
          @click="handleRemoveFromCollection"
        >
          {{ t('referenceLibrary.removeFromCollection') || '移出文献集' }}
        </el-button>
        <el-button
          type="danger"
          size="small"
          :loading="batchDeleteBarBusy"
          @click="handleBatchDeleteBarConfirm"
        >
          {{ t('common.delete') || '删除' }}
        </el-button>
      </div>
    </div>

    <!-- 详情抽屉/弹窗 -->
    <el-drawer
      v-model="detailVisible"
      size="400px"
      direction="rtl"
    >
      <template #header>
        <div class="detail-drawer-header">
          <div class="detail-drawer-title">
            {{ t('referenceLibrary.detail') || '文献详情' }}
          </div>
          <div class="detail-drawer-actions">
            <el-button
              v-if="!isEditingDetail"
              type="primary"
              link
              :disabled="!currentDetail || isLoadingDetail"
              :title="t('common.edit') || '编辑'"
              @click="startEditDetail"
            >
              {{ t('common.edit') || '编辑' }}
            </el-button>
            <template v-else>
              <el-button
                link
                :disabled="isLoadingDetail"
                :title="t('common.cancel') || '取消'"
                @click="cancelDetailEdit"
              >
                {{ t('common.cancel') || '取消' }}
              </el-button>
              <el-button
                type="primary"
                link
                :disabled="isLoadingDetail"
                :title="t('common.save') || '保存'"
                @click="saveDetailEdit"
              >
                {{ t('common.save') || '保存' }}
              </el-button>
            </template>
          </div>
        </div>
      </template>
      <div v-if="currentDetail" class="detail-content">
        <div v-if="isLoadingDetail" class="detail-loading">
          <i class="fas fa-spinner fa-spin"></i>
          <span>{{ t('reference.loading') || '加载中...' }}</span>
        </div>
        <template v-else>
          <el-form
            v-if="isEditingDetail"
            class="detail-edit-form"
            label-position="top"
          >
            <el-form-item :label="t('reference.detailLabels.title')">
              <el-input v-model="editableDetail.title" />
            </el-form-item>
            <el-form-item :label="t('reference.detailLabels.authors')">
              <el-input v-model="editableDetail.authorsText" />
            </el-form-item>
            <el-form-item :label="t('reference.detailLabels.venueName')">
              <el-input v-model="editableDetail.venueName" />
            </el-form-item>
            <el-form-item :label="t('reference.detailLabels.publicationYear')">
              <el-input-number
                v-model="editableDetail.publicationYear"
                :min="0"
                :max="2100"
                controls-position="right"
                style="width: 100%;"
              />
            </el-form-item>
            <el-form-item :label="t('reference.detailLabels.abstract')">
              <el-input
                v-model="editableDetail.abstractText"
                type="textarea"
                :rows="6"
                resize="none"
              />
            </el-form-item>
            <el-form-item :label="t('reference.detailLabels.doi')">
              <el-input v-model="editableDetail.doi" />
            </el-form-item>
          </el-form>
          <template v-else>
            <div class="detail-row">
              <div class="detail-label">{{ t('reference.detailLabels.title') }}</div>
              <div class="detail-value">{{ currentDetail.title }}</div>
            </div>
            <div class="detail-row" v-if="currentDetail.authorsText">
              <div class="detail-label">{{ t('reference.detailLabels.authors') }}</div>
              <div class="detail-value">{{ currentDetail.authorsText }}</div>
            </div>
            <div class="detail-row" v-if="currentDetail.venueName">
              <div class="detail-label">{{ t('reference.detailLabels.venueName') }}</div>
              <div class="detail-value">{{ currentDetail.venueName }}</div>
            </div>
            <div class="detail-row" v-if="currentDetail.publicationYear">
              <div class="detail-label">{{ t('reference.detailLabels.publicationYear') }}</div>
              <div class="detail-value">{{ currentDetail.publicationYear }}</div>
            </div>
            <div class="detail-row" v-if="currentDetail.abstractText">
              <div class="detail-label">{{ t('reference.detailLabels.abstract') }}</div>
              <div class="detail-value abstract">{{ currentDetail.abstractText }}</div>
            </div>
            <div class="detail-row" v-if="currentDetail.doi">
              <div class="detail-label">{{ t('reference.detailLabels.doi') }}</div>
              <div class="detail-value">
                <a
                  :href="`https://doi.org/${currentDetail.doi}`"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {{ currentDetail.doi }}
                </a>
              </div>
            </div>
          </template>
        </template>
      </div>
    </el-drawer>

    <!-- 上传到文献库弹窗 -->
    <el-dialog
      v-model="importVisible"
      :title="t('reference.uploadToLibrary')"
      width="570px"
    >
      <div class="import-dialog-content">
        <el-tabs v-model="importTab" class="import-tabs">
          <el-tab-pane name="pdf">
            <template #label>
              <span class="tab-label">
                <i class="fas fa-upload"></i>
                {{ t('reference.uploadPdf') }}
              </span>
            </template>
            <div class="upload-pdf-panel">
              <el-upload
                ref="pdfUploadRef"
                class="pdf-upload-area"
                drag
                multiple
                :limit="100"
                accept=".pdf"
                :auto-upload="false"
                :file-list="pdfFileList"
                :before-upload="beforePdfUpload"
                :on-change="handlePdfFileChange"
                :on-exceed="handlePdfExceed"
              >
                <div class="upload-inner">
                  <i class="fas fa-cloud-upload-alt upload-icon"></i>
                  <div class="upload-text">{{ t('reference.maxPdfCount') }}</div>
                  <div class="upload-hint">
                    {{ t('reference.dragOrSelect') }}
                    <span class="select-link" @click.stop="triggerPdfSelect">{{ t('reference.selectFile') }}</span>
                  </div>
                  <div class="upload-limit">{{ t('reference.pdfLimit') }}</div>
                </div>
              </el-upload>
              <input
                ref="pdfInputRef"
                type="file"
                accept=".pdf"
                multiple
                class="hidden-file-input"
                @change="handlePdfInputChange"
              />
              <el-button
                type="primary"
                class="pdf-import-btn"
                :disabled="pdfFileList.length === 0"
                @click="handlePdfImport"
              >
                {{ t('reference.importToLibrary') }}
              </el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane name="zotero">
            <template #label>
              <span class="tab-label">
                <i class="tab-icon-z">Z</i>
                {{ t('reference.zotero') }}
              </span>
            </template>
            <div class="zotero-connect-panel">
              <div class="zotero-logo" aria-hidden="true">
                <span class="zotero-logo-z">Z</span>
              </div>
              <div class="zotero-title">
                {{ t('reference.zoteroConnectTitle') || '连接Zotero账户' }}
              </div>
              <div class="zotero-desc">
                {{ t('reference.zoteroConnectDesc') || '从Zotero导入PDF和元数据以在LinkMed中使用。' }}
              </div>
              <el-button type="primary" class="zotero-connect-btn" @click="openZoteroLogin">
                {{ t('reference.zoteroConnectBtn') || '连接Zotero' }}
              </el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane name="mendeley">
            <template #label>
              <span class="tab-label">
                <i class="tab-icon-m">M</i>
                {{ t('reference.mendeley') }}
              </span>
            </template>
            <div class="mendeley-connect-panel">
              <div class="mendeley-logo" aria-hidden="true">
                <span class="mendeley-logo-m">M</span>
              </div>
              <div class="mendeley-title">
                {{ t('reference.mendeleyConnectTitle') || '连接Mendeley账户' }}
              </div>
              <div class="mendeley-desc">
                {{ t('reference.mendeleyConnectDesc') || '从Mendeley导入PDF和元数据以在LinkMed中使用。' }}
              </div>
              <el-button type="primary" class="mendeley-connect-btn" @click="openMendeley">
                {{ t('reference.mendeleyConnectBtn') || '连接Mendeley' }}
              </el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane name="bibris">
            <template #label>
              <span class="tab-label">
                <i class="fas fa-file-alt"></i>
                {{ t('reference.importBibRis') }}
              </span>
            </template>
            <div class="bibris-panel">
              <textarea
                v-model="bibrisContent"
                class="bibris-textarea"
                :placeholder="t('reference.bibrisPlaceholder')"
                rows="14"
                spellcheck="false"
                @input="bibrisOnInput"
              />
              <div v-if="bibrisHint" class="bibris-hint" :class="`kind-${bibrisHintKind}`">
                <i
                  v-if="bibrisHintKind === 'success'"
                  class="fas fa-check-circle"
                  aria-hidden="true"
                ></i>
                <i
                  v-else-if="bibrisHintKind === 'warning'"
                  class="fas fa-exclamation-circle"
                  aria-hidden="true"
                ></i>
                <i
                  v-else-if="bibrisHintKind === 'error'"
                  class="fas fa-times-circle"
                  aria-hidden="true"
                ></i>
                <i v-else class="fas fa-info-circle" aria-hidden="true"></i>
                <span class="bibris-hint-text">{{ bibrisHint }}</span>
              </div>
              <div class="bibris-file-hint">
                {{ t('reference.bibrisPreferFile') }}
                <span class="select-link" @click="triggerBibRisFileSelect">{{ t('reference.selectFile') }}</span>
              </div>
              <input
                ref="bibrisFileInputRef"
                type="file"
                accept=".bib,.ris"
                multiple
                class="hidden-file-input"
                @change="handleBibRisFileChange"
              />
              <el-button
                type="primary"
                class="bibris-search-btn"
                :disabled="
                  bibrisBusy ||
                  (bibrisInputType === 'text' ? !bibrisContent.trim() : !bibrisSelectedFile)
                "
                @click="handleBibRisSearch"
              >
                <i class="fas fa-search"></i>
                检索并导入
              </el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane name="pasteId">
            <template #label>
              <span class="tab-label">
                <i class="fas fa-hashtag"></i>
                {{ t('reference.pasteId') }}
              </span>
            </template>
            <div class="pasteid-panel">
              <div class="pasteid-tip">
                {{
                  te('reference.pasteIdTip')
                    ? t('reference.pasteIdTip')
                    : '通过 DOI、PMID、arXiv URL 或 ISBN 获取元数据'
                }}
              </div>
              <div class="pasteid-input-row">
                <input
                  v-model="pasteIdValue"
                  class="pasteid-input"
                  type="text"
                  ref="pasteIdInputRef"
                  :placeholder="
                    te('reference.pasteIdPlaceholder')
                      ? t('reference.pasteIdPlaceholder')
                      : '请输入 DOI / PMID / arXiv URL / ISBN'
                  "
                />
                <button
                  class="pasteid-search-btn"
                  type="button"
                  :disabled="pasteIdBusy || !pasteIdValue.trim()"
                  @click="handlePasteIdSearch"
                >
                  <i class="fas fa-search"></i>
                </button>
              </div>

              <div v-if="pasteIdHint" class="pasteid-hint" :class="`kind-${pasteIdHintKind}`">
                <i
                  v-if="pasteIdHintKind === 'success'"
                  class="fas fa-check-circle"
                  aria-hidden="true"
                ></i>
                <i
                  v-else-if="pasteIdHintKind === 'warning'"
                  class="fas fa-exclamation-circle"
                  aria-hidden="true"
                ></i>
                <i
                  v-else-if="pasteIdHintKind === 'error'"
                  class="fas fa-times-circle"
                  aria-hidden="true"
                ></i>
                <i v-else class="fas fa-info-circle" aria-hidden="true"></i>
                <span class="pasteid-hint-text">{{ pasteIdHint }}</span>
              </div>

              <div v-if="pasteIdBusy" class="pasteid-results-header">
                <i class="fas fa-spinner fa-spin"></i>
                {{ '正在获取元数据...' }}
              </div>

              <template v-else-if="pasteIdImportItems.length">
                <div class="pasteid-results-list">
                  <div
                    v-for="item in pasteIdImportItems"
                    :key="item.workId ?? item.doi ?? item.title"
                    class="pasteid-result-item"
                  >
                    <div class="pasteid-result-title">{{ item.title }}</div>
                    <div class="pasteid-result-authors" v-if="item.authorsText">
                      {{ item.authorsText }}
                    </div>
                    <div class="pasteid-result-venue" v-if="item.venueName || item.journalAbbr">
                      {{ item.venueName || item.journalAbbr }}
                      <span v-if="item.publicationYear"> {{ item.publicationYear }}</span>
                    </div>
                  </div>
                </div>
              </template>

              <template v-else>
                <div class="pasteid-examples-title">
                  {{
                    te('reference.pasteIdExamples')
                      ? t('reference.pasteIdExamples')
                      : '尝试以下示例之一：'
                  }}
                </div>
                <div class="pasteid-examples">
                  <div class="example-card" role="button" tabindex="0" @click="setPasteIdExample('10.1056/NEJMoa2034577')">
                    <div class="example-title">DOI</div>
                    <div class="example-subtitle">
                      {{
                        te('reference.pasteIdExampleDoi')
                          ? t('reference.pasteIdExampleDoi')
                          : '数字对象标识符'
                      }}
                    </div>
                    <div class="example-value">10.1056/NEJMoa2034577</div>
                  </div>
                  <div class="example-card" role="button" tabindex="0" @click="setPasteIdExample('34407336')">
                    <div class="example-title">PMID</div>
                    <div class="example-subtitle">
                      {{
                        te('reference.pasteIdExamplePmid')
                          ? t('reference.pasteIdExamplePmid')
                          : 'PubMed 标识符'
                      }}
                    </div>
                    <div class="example-value">39549757</div>
                  </div>
                  <div class="example-card" role="button" tabindex="0" @click="setPasteIdExample('https://arxiv.org/abs/1706.03762')">
                    <div class="example-title">arXiv</div>
                    <div class="example-subtitle">
                      {{
                        te('reference.pasteIdExampleArxiv')
                          ? t('reference.pasteIdExampleArxiv')
                          : 'arXiv 预印本 URL'
                      }}
                    </div>
                    <div class="example-value">https://arxiv.org/abs/1706.03762</div>
                  </div>
                  <div class="example-card" role="button" tabindex="0" @click="setPasteIdExample('9780262033848')">
                    <div class="example-title">ISBN</div>
                    <div class="example-subtitle">
                      {{
                        te('reference.pasteIdExampleIsbn')
                          ? t('reference.pasteIdExampleIsbn')
                          : '国际标准书号'
                      }}
                    </div>
                    <div class="example-value">9780262033848</div>
                  </div>
                </div>
              </template>

              <el-button
                type="primary"
                class="pasteid-import-btn"
                :disabled="pasteIdBusy || pasteIdImportItems.length === 0"
                @click="handlePasteIdImport"
              >
                {{ t('reference.importToLibrary') }}
              </el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { UploadFile, UploadFiles } from 'element-plus';
import * as pdfjsLib from 'pdfjs-dist';
import {
  getReferenceDetail,
  getFormatCitation,
  type ReferenceItem,
  type ReferenceDetail,
} from '@/api/references';
import {
  importReferenceByArxiv,
  importReferenceByBibtex,
  importReferenceByBibtexFile,
  importReferenceByRis,
  importReferenceByRisFile,
  importReferenceByDoi,
  importReferenceByIsbn,
  importReferenceByPmid,
  getUserLibraryItems,
  getUserLibraryCollections,
  getUserLibraryCollectionDocuments,
  createUserLibraryCollection,
  createUserLibraryCollectionDocument,
  updateUserLibraryCollection,
  upsertUserLibraryItem,
  deleteUserLibraryItem,
  batchDeleteUserLibraryItems,
  deleteUserLibraryCollection,
  batchDeleteUserLibraryCollections,
  deleteUserLibraryCollectionDocument,
  batchDeleteUserLibraryCollectionDocuments,
  type ReferenceImportItem,
  type UserLibraryItem,
  type UserLibraryCollectionItem,
  type UserLibraryCollectionDocumentItem,
} from '@/api/referenceLibrary';

const MAX_PDF_SIZE = 1024 * 1024 * 1024; // 1GB
const MAX_PDF_PAGES = 1000;

const props = defineProps<{
  fileId?: string | number | null;
  isChatAnswer?: boolean;
}>();

const { t, te } = useI18n();

const librarySubTab = ref<'all' | 'collections'>('all');
/** 当前打开的文献集（进入文献集内文献列表时设置，返回时清空） */
const activeCollection = ref<ReferenceCollection | null>(null);
const collectionsBusy = ref(false);
const collections = ref<ReferenceCollection[]>([]);
const collectionsCreateBusy = ref(false);
const collectionsRenameBusy = ref(false);
const collectionDocsBusy = ref(false);
const collectionDocuments = ref<any[]>([]);
const showCreateCollectionInput = ref(false);
const newCollectionName = ref('');
const newCollectionInputRef = ref<HTMLInputElement | null>(null);

// 文献集重命名：仅在 collections 列表页生效
const editingCollectionId = ref<number | null>(null);
const editingCollectionName = ref('');
const editingCollectionOriginalName = ref('');
const editCollectionInputRef = ref<HTMLInputElement | null>(null);

const searchKeyword = ref('');
const collectionSearchKeyword = ref('');

// 添加到文献集：下拉选择状态
const addToCollectionSearchKeyword = ref('');
const addToCollectionSelectedCollectionId = ref<number | null>(null);
const addToCollectionTargetWorkId = ref<number | null>(null);
const addToCollectionBusy = ref(false);

// 下拉内创建文献集
const addToCollectionShowCreateInput = ref(false);
const addToCollectionNewCollectionName = ref('');
const addToCollectionNewCollectionInputRef = ref<HTMLInputElement | null>(null);
const addToCollectionCreateBusy = ref(false);

/** 按 workId 保存「添加到文献集」的 el-dropdown 实例，确认后调用 handleClose */
const addToCollectionDropdownByWorkId = new Map<number, { handleClose?: () => void }>();

function setAddToCollectionDropdownRef(workId: number, el: unknown) {
  if (el && typeof el === 'object' && 'handleClose' in el) {
    addToCollectionDropdownByWorkId.set(workId, el as { handleClose?: () => void });
  } else {
    addToCollectionDropdownByWorkId.delete(workId);
  }
}

function closeAddToCollectionDropdownForWorkId(workId: number) {
  addToCollectionDropdownByWorkId.get(workId)?.handleClose?.();
}

const filterState = reactive({
  pdfStatus: 'all' as string,
  pubYear: '1y' as string,
  impactFactor: 'all' as string,
  openAccess: 'any' as string,
  // 默认文献类型为“所有”
  litTypes: ['all'] as string[],
  tag: 'any' as string,
});
const tagInput = ref('');
const pdfStatusOptions = [
  { value: 'all', label: '所有' },
  { value: 'has', label: '有PDF文件' },
  { value: 'no', label: '没有PDF文件' },
];
const pubYearOptions = [
  { value: 'all', label: '所有' },
  { value: '1y', label: '最近1年' },
  { value: '3y', label: '最近3年' },
  { value: 'custom', label: '自定义时间' },
];
const impactFactorOptions = [
  { value: 'all', label: 'All' },
  { value: '0.25', label: '>0.25' },
  { value: '3', label: '>3' },
  { value: '10', label: '>10' },
];
const openAccessOptions = [
  { value: 'any', label: 'Any' },
  { value: 'open', label: '开放访问' },
  { value: 'closed', label: '不是开放访问' },
];
const litTypeOptions = [
  { value: 'literature', label: '文献' },
  { value: 'online', label: '网络文献' },
  { value: 'book', label: '书籍' },
  { value: 'document', label: '文档' },
];
const tagOptions = [
  { value: 'any', label: 'Any' },
  { value: 'guide', label: '指南' },
  { value: 'evidence', label: '循证' },
  { value: 'case', label: '病例' },
];
const isLoading = ref(false);
const references = ref<ReferenceItem[]>([]);
const referencesDetailCache = ref<Record<number, ReferenceDetail>>({});

const detailVisible = ref(false);
const currentDetailRef = ref<ReferenceItem | null>(null);
const currentDetail = ref<ReferenceDetail | null>(null);
const isLoadingDetail = ref(false);
const isEditingDetail = ref(false);
const editableDetail = reactive({
  title: '',
  authorsText: '',
  venueName: '',
  publicationYear: 0,
  abstractText: '',
  doi: '',
});

const importVisible = ref(false);
const importTab = ref<'pdf' | 'zotero' | 'mendeley' | 'bibris' | 'pasteId'>('pdf');
const pdfFileList = ref<UploadFile[]>([]);
const pdfUploadRef = ref();
void pdfUploadRef.value;
const pdfInputRef = ref<HTMLInputElement>();
const bibrisContent = ref('');
const bibrisFileInputRef = ref<HTMLInputElement>();
/** BibTeX 文本输入 或 选择的 .bib 文件 */
const bibrisInputType = ref<'text' | 'file'>('text');
/** 选择的 .bib 文件（用于文件导入） */
const bibrisSelectedFile = ref<File | null>(null);
/** 标记 textarea 的程序性更新，避免误触发 @input 把文件模式清掉 */
const bibrisProgrammaticChange = ref(false);
const bibrisSearched = ref(false);
const bibrisImportItems = ref<BibrisParsedItem[]>([]);
const bibrisBusy = ref(false);
const bibrisHint = ref('');
const bibrisHintKind = ref<'success' | 'warning' | 'error' | 'info'>('info');

interface BibrisParsedItem {
  workId?: number;
  title?: string;
  authorsText?: string;
  publicationYear?: number;
  doi?: string;
}
const pasteIdValue = ref('');
const pasteIdInputRef = ref<HTMLInputElement>();
const pasteIdImportItems = ref<ReferenceImportItem[]>([]);
const pasteIdBusy = ref(false);
const pasteIdLastQuery = ref('');
const pasteIdHint = ref('');
const pasteIdHintKind = ref<'success' | 'warning' | 'error' | 'info'>('info');

type PasteIdType = 'doi' | 'pmid' | 'arxiv' | 'isbn';

function isValidIsbn13(isbn13: string) {
  const digits = isbn13.replace(/[^0-9]/g, '');
  if (digits.length !== 13) return false;
  const sum = digits
    .slice(0, 12)
    .split('')
    .reduce((acc, d, idx) => acc + Number(d) * (idx % 2 === 0 ? 1 : 3), 0);
  const checkDigit = (10 - (sum % 10)) % 10;
  return checkDigit === Number(digits[12]);
}

function isValidIsbn10(isbn10: string) {
  const s = isbn10.replace(/[^0-9Xx]/g, '').toUpperCase();
  if (!/^[0-9]{9}[0-9X]$/.test(s)) return false;
  let sum = 0;
  for (let i = 0; i < 10; i++) {
    const c = s[i];
    const digit = c === 'X' ? 10 : Number(c);
    sum += digit * (10 - i);
  }
  return sum % 11 === 0;
}

function detectPasteIdType(input: string): { type: PasteIdType; value: string } | null {
  const trimmed = input.trim();
  if (!trimmed) return null;

  // 允许用户输入形如：`PMID: 123` / `DOI: 10.xxxx/xxxx` 之类的前缀
  const cleaned = trimmed.replace(/^(doi|pmid|arxiv|isbn)\s*[:：]\s*/i, '');

  // 1) arXiv
  // 支持：arXiv URL、arXiv ID（新/旧格式）
  if (/arxiv\.org/i.test(cleaned) || /^arxiv[:：]/i.test(trimmed)) {
    const arxivId = cleaned
      .replace(/^https?:\/\/(www\.)?arxiv\.org\/(abs|pdf)\//i, '')
      .replace(/\.pdf$/i, '')
      .trim();

    const modern = /^\d{4}\.\d{4,5}(v\d+)?$/i;
    const old = /^[a-z-]+\/\d{7}(v\d+)?$/i;
    if (modern.test(arxivId) || old.test(arxivId)) return { type: 'arxiv', value: arxivId };
    // 后端通常可兜底解析完整 URL；这里仍按 arXiv 路由
    if (arxivId) return { type: 'arxiv', value: cleaned };
  }

  // 2) DOI
  const doiNormalized = cleaned
    .replace(/^https?:\/\/(dx\.)?doi\.org\//i, '')
    .replace(/^\s*doi\.org\//i, '')
    .trim()
    .replace(/\s+/g, '');
  const doiRegex = /^10\.\d{4,9}\/[-._;()/:A-Z0-9]+$/i;
  if (doiRegex.test(doiNormalized)) return { type: 'doi', value: doiNormalized };

  // 3) ISBN（10 位/13 位，做校验后再当作 ISBN）
  const isbnCandidate = cleaned.replace(/[\s-]/g, '').toUpperCase();
  if (/^[0-9]{13}$/.test(isbnCandidate) && isValidIsbn13(isbnCandidate)) return { type: 'isbn', value: isbnCandidate };
  if (/^[0-9]{9}[0-9X]$/.test(isbnCandidate) && isValidIsbn10(isbnCandidate)) return { type: 'isbn', value: isbnCandidate };

  // 4) PMID（纯数字）
  if (/^\d{1,20}$/.test(cleaned)) return { type: 'pmid', value: cleaned };

  return null;
}

// 上传文献应独立于当前工作台是否打开文件
const canAddReference = computed(() => true);

// PDF.js 获取页数
function getPdfjs() {
  const lib = pdfjsLib as any;
  if (lib.getDocument) return lib;
  if (lib.default?.getDocument) return lib.default;
  return lib;
}

let pdfWorkerInited = false;
function initPdfWorker() {
  if (pdfWorkerInited) return;
  try {
    const pdfjs = getPdfjs();
    if (pdfjs.GlobalWorkerOptions?.workerSrc) return;
    pdfjs.GlobalWorkerOptions = pdfjs.GlobalWorkerOptions || {};
    pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version || '2.16.105'}/pdf.worker.min.js`;
    pdfWorkerInited = true;
  } catch (e) {
    console.error('Failed to init PDF worker:', e);
  }
}

async function getPdfPageCount(file: File): Promise<number> {
  initPdfWorker();
  const url = URL.createObjectURL(file);
  try {
    const pdfjs = getPdfjs();
    const doc = await pdfjs.getDocument({ url }).promise;
    const n = doc.numPages;
    doc.destroy();
    return n;
  } finally {
    URL.revokeObjectURL(url);
  }
}

async function beforePdfUpload(file: File): Promise<boolean> {
  if (file.size > MAX_PDF_SIZE) {
    ElMessage.warning(t('reference.pdfExceedSize', { name: file.name }));
    return false;
  }
  try {
    const pages = await getPdfPageCount(file);
    if (pages > MAX_PDF_PAGES) {
      ElMessage.warning(t('reference.pdfExceedPages', { name: file.name }));
      return false;
    }
  } catch (e) {
    console.error('PDF 页数检测失败:', e);
    ElMessage.warning(`「${file.name}」无法读取，暂不上传`);
    return false;
  }
  return true;
}

function handlePdfFileChange(_file: UploadFile, files: UploadFiles) {
  pdfFileList.value = [...files];
}

function handlePdfExceed() {
  ElMessage.warning(t('reference.maxPdfCount'));
}

function triggerPdfSelect() {
  pdfInputRef.value?.click();
}

async function handlePdfInputChange(e: Event) {
  const input = e.target as HTMLInputElement;
  const files = input.files;
  if (!files?.length) return;
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    if (!file) continue;
    if (pdfFileList.value.length >= 100) {
      ElMessage.warning(t('reference.maxPdfCount'));
      break;
    }
    const ok = await beforePdfUpload(file);
    if (ok) {
      pdfFileList.value = [
        ...pdfFileList.value,
        {
          name: file.name,
          size: file.size,
          raw: file,
          uid: Date.now() + Math.random(),
          status: 'ready',
        } as UploadFile,
      ];
    }
  }
  input.value = '';
}

function triggerBibRisFileSelect() {
  bibrisFileInputRef.value?.click();
}

function bibrisOnInput() {
  if (bibrisProgrammaticChange.value) return;

  // 用户在文本框修改时，隐藏之前的导入报错/警告提示
  if (bibrisHintKind.value === 'error' || bibrisHintKind.value === 'warning') {
    bibrisHint.value = '';
    bibrisHintKind.value = 'info';
  }

  if (bibrisSelectedFile.value) {
    bibrisInputType.value = 'text';
    bibrisSelectedFile.value = null;
  }
}

function handlePdfImport() {
  if (pdfFileList.value.length === 0) {
    ElMessage.warning(t('reference.selectFile') || '请先选择文件');
    return;
  }
  // 暂未接入接口：先补齐与其它 tab 一致的“导入到库”入口
  ElMessage.info(t('reference.bibrisComingSoon') || '导入功能即将推出');
}

async function handleBibRisFileChange(e: Event) {
  const input = e.target as HTMLInputElement;
  const files = input.files;
  if (!files?.length) return;
  const file = files[0];
  if (!file) return;
  const isBib = /\.bib$/i.test(file.name);
  const isRis = /\.ris$/i.test(file.name);

  if (!isBib && !isRis) {
    ElMessage.warning(t('reference.selectFile') || '请先选择 BibTeX .bib 或 RIS .ris 文件');
    bibrisSelectedFile.value = null;
    bibrisInputType.value = 'text';
    bibrisContent.value = '';
    bibrisHint.value = '';
    bibrisHintKind.value = 'info';
    bibrisImportItems.value = [];
    bibrisSearched.value = false;
    input.value = '';
    return;
  }

  if (bibrisBusy.value) return;

  try {
    // 清理旧状态，避免之前“文件模式”残留影响按钮可用性
    bibrisInputType.value = 'text';
    bibrisSelectedFile.value = null;
    bibrisImportItems.value = [];
    bibrisSearched.value = false;

    bibrisBusy.value = true;
    bibrisHint.value = isRis ? '正在导入 RIS 到文献库...' : '正在导入 BibTeX 到文献库...';
    bibrisHintKind.value = 'info';

    const resp = isRis
      ? await importReferenceByRisFile({
          file,
          addToUserLibrary: true,
        })
      : await importReferenceByBibtexFile({
          file,
          addToUserLibrary: true,
        });

    const successCount = resp?.data?.success ?? 0;
    const failedCount = resp?.data?.failed ?? 0;
    const items = resp?.data?.items ?? [];
    const nullWorkIdItems = items.filter((it) => it?.workId == null);
    const hasNullWorkId = nullWorkIdItems.length > 0;

    if (hasNullWorkId) {
      bibrisHint.value = '导入失败';
      bibrisHintKind.value = 'error';
    } else if (successCount <= 0) {
      ElMessage.warning(resp?.data?.message || '导入完成，但未检测到成功导入的条目');
      bibrisHint.value = '';
      bibrisHintKind.value = 'info';
    } else if (failedCount > 0) {
      bibrisHint.value = `已导入 ${successCount} 条文献（失败 ${failedCount} 条）`;
      bibrisHintKind.value = 'warning';
    } else {
      bibrisHint.value = `已成功导入 ${successCount} 条文献`;
      bibrisHintKind.value = 'success';
    }

    // 如果存在 workId: null，直接判定为失败并保持弹窗不关闭
    if (hasNullWorkId) return;

    // 刷新列表，让用户能立即看到新增结果
    await loadReferences(searchKeyword.value);

    bibrisProgrammaticChange.value = true;
    bibrisInputType.value = 'text';
    bibrisSelectedFile.value = null;
    bibrisContent.value = '';
    bibrisImportItems.value = [];
    bibrisSearched.value = false;
    nextTick(() => {
      bibrisProgrammaticChange.value = false;
    });

    setTimeout(() => {
      importVisible.value = false;
      bibrisHint.value = '';
      bibrisHintKind.value = 'info';
    }, 700);
  } catch (err) {
    console.error('读取 .bib/.ris 文件失败:', err);
    // 上传失败只展示统一提示
    bibrisHint.value = '导入失败';
    bibrisHintKind.value = 'error';
  } finally {
    bibrisBusy.value = false;
    input.value = '';
  }
}

/** 检测内容是否为 RIS 格式（基于 TY/ER 行的粗校验，用于路由判断） */
function isRisFormat(content: string): boolean {
  const t = content.trim();
  return /^\s*TY\s*-\s*/im.test(t) || /^\s*ER\s*-\s*/im.test(t);
}

/** 校验 RIS 内容是否足够“完整”，否则不直接发给后端避免失败体验差 */
function isValidRis(content: string): boolean {
  const t = content.trim();
  if (!isRisFormat(t)) return false;

  // 典型 RIS 必须包含 TY 和 ER
  if (!/^\s*TY\s*-\s*/im.test(t)) return false;
  if (!/^\s*ER\s*-\s*/im.test(t)) return false;

  // 至少要有一个字段行（如 AU/TI/JO...）
  const hasFieldLine = /^(?:[A-Z0-9]{2})\s*-\s*.+/im.test(t);
  return hasFieldLine;
}

/** 解析 BibTeX 为预览项，用于校验和展示（支持常见格式） */
function parseBibtexToItems(content: string): BibrisParsedItem[] {
  const items: BibrisParsedItem[] = [];
  const trimmed = content.trim();
  if (!trimmed) return items;

  const entryRegex = /@(\w+)\s*\{\s*([^,\n]+)\s*,\s*([\s\S]*?)(?=\s*@\w|$)/g;
  let m: RegExpExecArray | null;
  while ((m = entryRegex.exec(trimmed)) !== null) {
    const rest = m[3] || '';
    const fields: Record<string, string> = {};
    const fieldRegex = /(\w+)\s*=\s*(\{([^{}]*(?:\{[^{}]*\}[^{}]*)*)\}|"([^"]*)"|(\d+))/g;
    let fm: RegExpExecArray | null;
    while ((fm = fieldRegex.exec(rest)) !== null) {
      const key = fm[1]?.toLowerCase();
      if (!key) continue;
      const braced = fm[3];
      const quoted = fm[4];
      const num = fm[5];
      fields[key] = (braced ?? quoted ?? num ?? '').trim();
    }
    items.push({
      title: fields.title,
      authorsText: fields.author,
      publicationYear: fields.year ? parseInt(fields.year, 10) : undefined,
      doi: fields.doi,
    });
  }
  return items;
}

/** 检测内容是否为有效 BibTeX */
function isValidBibtex(content: string): boolean {
  const t = content.trim();
  if (!/@\s*\w+\s*\{/.test(t)) return false;
  // 粗校验：花括号需配对，避免明显残缺文本
  let depth = 0;
  for (const ch of t) {
    if (ch === '{') depth += 1;
    if (ch === '}') depth -= 1;
    if (depth < 0) return false;
  }
  if (depth !== 0) return false;
  // 至少可解析出一条 entry
  return parseBibtexToItems(t).length > 0;
}

async function handleBibRisSearch() {
  if (bibrisBusy.value) return;

  let importScheduledClose = false;

  bibrisBusy.value = true;
  bibrisHint.value = '正在检索并导入到文献库...';
  bibrisHintKind.value = 'info';

  try {
    // 1) 文件模式：根据文件扩展名路由到 RIS 或 BibTeX
    if (bibrisInputType.value === 'file') {
      const file = bibrisSelectedFile.value;
      if (!file) {
        ElMessage.warning(t('reference.selectFile') || '请先选择文件');
        return;
      }

      const isRisFile = /\.ris$/i.test(file.name);
      const isBibFile = /\.bib$/i.test(file.name);

      if (!isRisFile && !isBibFile) {
        ElMessage.warning('仅支持 .bib / .ris 文件');
        return;
      }

      if (isRisFile) {
        // 读取并校验 RIS 内容（避免后端解析失败体验差）
        const risText = await file.text();
        if (!isValidRis(risText)) {
          bibrisHint.value = 'RIS 格式不完整，请检查 TY/ER 行及字段内容';
          bibrisHintKind.value = 'error';
          return;
        }

        const resp = await importReferenceByRisFile({
          file,
          addToUserLibrary: true,
        });

        const successCount = resp?.data?.success ?? 0;
        const failedCount = resp?.data?.failed ?? 0;
        const items = resp?.data?.items ?? [];
        const nullWorkIdItems = items.filter((it) => it?.workId == null);
        const hasNullWorkId = nullWorkIdItems.length > 0;

        if (hasNullWorkId) {
          bibrisHint.value = '导入失败';
          bibrisHintKind.value = 'error';
          return;
        }

        if (successCount <= 0) {
          ElMessage.warning(resp?.data?.message || '导入完成，但未检测到成功导入的条目');
          bibrisHint.value = '';
          bibrisHintKind.value = 'info';
          bibrisSelectedFile.value = null;
          bibrisImportItems.value = [];
          bibrisSearched.value = false;
          return;
        }

        if (failedCount > 0) {
          bibrisHint.value = `已导入 ${successCount} 条文献（失败 ${failedCount} 条）`;
          bibrisHintKind.value = 'warning';
        } else {
          bibrisHint.value = `已成功导入 ${successCount} 条文献`;
          bibrisHintKind.value = 'success';
        }
      } else {
        // BibTeX .bib 文件导入（保持与原逻辑一致：由后端解析后返回 success/failed）
        const resp = await importReferenceByBibtexFile({
          file,
          addToUserLibrary: true,
        });

        const successCount = resp?.data?.success ?? 0;
        const failedCount = resp?.data?.failed ?? 0;
        const items = resp?.data?.items ?? [];
        const nullWorkIdItems = items.filter((it) => it?.workId == null);
        const hasNullWorkId = nullWorkIdItems.length > 0;

        if (hasNullWorkId) {
          bibrisHint.value = '导入失败';
          bibrisHintKind.value = 'error';
          return;
        }

        if (successCount <= 0) {
          ElMessage.warning(resp?.data?.message || '导入完成，但未检测到成功导入的条目');
          bibrisHint.value = '';
          bibrisHintKind.value = 'info';
          bibrisSelectedFile.value = null;
          bibrisImportItems.value = [];
          bibrisSearched.value = false;
          return;
        }

        if (failedCount > 0) {
          bibrisHint.value = `已导入 ${successCount} 条文献（失败 ${failedCount} 条）`;
          bibrisHintKind.value = 'warning';
        } else {
          bibrisHint.value = `已成功导入 ${successCount} 条文献`;
          bibrisHintKind.value = 'success';
        }
      }

      // 刷新列表，让用户能立即看到新增结果
      await loadReferences(searchKeyword.value);

      bibrisSelectedFile.value = null;
      bibrisInputType.value = 'text';
      bibrisContent.value = '';
      bibrisImportItems.value = [];
      bibrisSearched.value = false;

      importScheduledClose = true;
      setTimeout(() => {
        importVisible.value = false;
        bibrisHint.value = '';
        bibrisHintKind.value = 'info';
      }, 700);

      return;
    }

    // 2) 文本模式：根据内容路由到 RIS 或 BibTeX
    const content = bibrisContent.value.trim();
    if (!content) {
      bibrisHint.value = t('reference.bibrisEmptyHint');
      bibrisHintKind.value = 'warning';
      bibrisSearched.value = false;
      return;
    }

    if (isRisFormat(content)) {
      if (!isValidRis(content)) {
        bibrisHint.value = 'RIS 格式不完整，请检查 TY/ER 行及字段内容';
        bibrisHintKind.value = 'error';
        bibrisImportItems.value = [];
        bibrisSearched.value = false;
        return;
      }

      const resp = await importReferenceByRis({
        ris: content,
        addToUserLibrary: true,
      });

      const successCount =
        resp?.data?.success ?? resp?.data?.items?.filter((it) => it.addedToUserLibrary)?.length ?? 0;
      const failedCount = resp?.data?.failed ?? 0;
      const items = resp?.data?.items ?? [];
      const nullWorkIdItems = items.filter((it) => it?.workId == null);
      if (nullWorkIdItems.length > 0) {
        bibrisHint.value = '导入失败';
        bibrisHintKind.value = 'error';
        return;
      }

      if (!successCount) {
        bibrisHint.value = resp?.data?.message || '导入完成，但未检测到可导入条目';
        bibrisHintKind.value = 'warning';
        return;
      }

      if (failedCount > 0) {
        bibrisHint.value = `已导入 ${successCount} 条文献（失败 ${failedCount} 条）`;
        bibrisHintKind.value = 'warning';
      } else {
        bibrisHint.value = `已成功导入 ${successCount} 条文献`;
        bibrisHintKind.value = 'success';
      }
    } else {
      if (!isValidBibtex(content)) {
        bibrisHint.value = '无效的 BibTeX 格式，请输入正确的 BibTeX 内容';
        bibrisHintKind.value = 'error';
        bibrisImportItems.value = [];
        bibrisSearched.value = false;
        return;
      }

      const resp = await importReferenceByBibtex({
        bibtex: content,
        addToUserLibrary: true,
      });

      const successCount =
        resp?.data?.success ?? resp?.data?.items?.filter((it) => it.addedToUserLibrary)?.length ?? 0;
      const failedCount = resp?.data?.failed ?? 0;
      const items = resp?.data?.items ?? [];
      const nullWorkIdItems = items.filter((it) => it?.workId == null);
      if (nullWorkIdItems.length > 0) {
        bibrisHint.value = '导入失败';
        bibrisHintKind.value = 'error';
        return;
      }

      if (!successCount) {
        bibrisHint.value = resp?.data?.message || '导入完成，但未检测到可导入条目';
        bibrisHintKind.value = 'warning';
        return;
      }

      if (failedCount > 0) {
        bibrisHint.value = `已导入 ${successCount} 条文献（失败 ${failedCount} 条）`;
        bibrisHintKind.value = 'warning';
      } else {
        bibrisHint.value = `已成功导入 ${successCount} 条文献`;
        bibrisHintKind.value = 'success';
      }
    }

    // 刷新列表，让用户能立即看到新增结果
    await loadReferences(searchKeyword.value);

    bibrisContent.value = '';
    bibrisSelectedFile.value = null;
    bibrisInputType.value = 'text';
    bibrisImportItems.value = [];
    bibrisSearched.value = false;

    importScheduledClose = true;
    setTimeout(() => {
      importVisible.value = false;
      bibrisHint.value = '';
      bibrisHintKind.value = 'info';
    }, 700);
  } catch (e) {
    bibrisHint.value = '导入失败';
    bibrisHintKind.value = 'error';
  } finally {
    if (!importScheduledClose) {
      bibrisBusy.value = false;
    }
  }
}

// 文献集数据结构（与图中示例一致）
interface ReferenceCollection {
  id: number;
  title: string;
  count: number;
  createdAt: string;
}

const displayCollections = computed(() => collections.value);

const addToCollectionFilteredCollections = computed(() => {
  const list = collections.value || [];
  const kw = addToCollectionSearchKeyword.value.trim().toLowerCase();
  if (!kw) return list;
  return list.filter((c) => (c.title || '').toLowerCase().includes(kw));
});

async function loadCollections(keyword?: string) {
  try {
    collectionsBusy.value = true;
    const res = await getUserLibraryCollections({
      page: 0,
      size: 50,
      keyword: keyword?.trim() || undefined,
    });
    const items = (res?.data || []) as UserLibraryCollectionItem[];
    collections.value = items
      .filter((it): it is UserLibraryCollectionItem & { id: number } => typeof it.id === 'number')
      .map((it) => ({
        id: it.id,
        title: it.name || '',
        count: it.documentCount ?? 0,
        createdAt: it.createdAt || it.updatedAt || '',
      }));
  } catch (e) {
    ElMessage.error((e as Error).message || '获取文献集列表失败');
    collections.value = [];
  } finally {
    collectionsBusy.value = false;
  }
}

watch(
  () => librarySubTab.value,
  (val) => {
    if (val === 'collections') {
      // 切换到“文献集”时立即拉取一次真实列表
      loadCollections(collectionSearchKeyword.value);
      return;
    }
    if (val === 'all') {
      // 切换到“全部文献”时，按当前关键词拉取服务端搜索结果
      loadReferences(searchKeyword.value);
    }
  }
);

watch(
  () => activeCollection.value,
  (v) => {
    if (!v) {
      collectionDocuments.value = [];
      collectionDocsBusy.value = false;
    }
  }
);

// 文献集搜索：对输入做防抖，减少请求次数
let collectionsSearchTimer: ReturnType<typeof setTimeout> | null = null;
watch(
  () => collectionSearchKeyword.value,
  (kw) => {
    if (librarySubTab.value !== 'collections') return;
    if (collectionsSearchTimer) clearTimeout(collectionsSearchTimer);
    collectionsSearchTimer = setTimeout(() => loadCollections(kw), 300);
  }
);

// 全部文献搜索：走 /library/items 的 keyword 参数
let referencesSearchTimer: ReturnType<typeof setTimeout> | null = null;
watch(
  () => searchKeyword.value,
  (kw) => {
    if (librarySubTab.value !== 'all') return;
    if (referencesSearchTimer) clearTimeout(referencesSearchTimer);
    referencesSearchTimer = setTimeout(() => loadReferences(kw), 300);
  }
);

function handleCreateCollection() {
  if (collectionsCreateBusy.value) return;

  activeCollection.value = null;
  showCreateCollectionInput.value = true;
  newCollectionName.value = '';

  nextTick(() => {
    newCollectionInputRef.value?.focus();
    newCollectionInputRef.value?.select?.();
  });
}

function closeCreateCollectionInput() {
  showCreateCollectionInput.value = false;
  newCollectionName.value = '';
}

async function submitCreateCollection() {
  if (collectionsCreateBusy.value) return;
  const name = newCollectionName.value.trim();
  if (!name) {
    ElMessage.warning('请输入文献集名称');
    return;
  }

  collectionsCreateBusy.value = true;
  try {
    await createUserLibraryCollection({ name });
    ElMessage.success('文献集已创建');

    // 创建后刷新列表，保证用户能立即看到新增结果
    collectionSearchKeyword.value = '';
    closeCreateCollectionInput();
    await loadCollections('');
  } catch (e) {
    ElMessage.error((e as Error).message || '创建文献集失败');
  } finally {
    collectionsCreateBusy.value = false;
  }
}

function submitCreateCollectionOnBlur() {
  // ESC 取消时可能会触发 blur，避免误提交
  if (!showCreateCollectionInput.value) return;
  const name = newCollectionName.value.trim();
  if (!name) {
    // 失焦但未输入内容：直接关闭输入框（不弹 warning）
    closeCreateCollectionInput();
    return;
  }
  submitCreateCollection();
}

function startRenameCollection(coll: ReferenceCollection) {
  if (collectionsRenameBusy.value) return;
  editingCollectionId.value = coll.id;
  editingCollectionOriginalName.value = coll.title;
  editingCollectionName.value = coll.title;
  nextTick(() => {
    editCollectionInputRef.value?.focus();
    editCollectionInputRef.value?.select?.();
  });
}

function cancelRenameCollection() {
  editingCollectionId.value = null;
  editingCollectionName.value = editingCollectionOriginalName.value;
}

async function submitRenameCollection(trigger: 'enter' | 'blur') {
  const id = editingCollectionId.value;
  if (!id) return;
  if (collectionsRenameBusy.value) return;

  const name = editingCollectionName.value.trim();

  if (!name) {
    if (trigger === 'blur') {
      cancelRenameCollection();
    } else {
      ElMessage.warning('请输入文献集名称');
    }
    return;
  }

  const original = editingCollectionOriginalName.value;
  if (name === original) {
    editingCollectionId.value = null;
    return;
  }

  collectionsRenameBusy.value = true;
  try {
    await updateUserLibraryCollection(id, { name });
    ElMessage.success('文献集已重命名');

    // 同步列表展示（不强制刷新，避免影响当前筛选/搜索状态）
    collections.value = collections.value.map((c) => (c.id === id ? { ...c, title: name } : c));

    // 如果恰好打开的是同一个文献集，也一并同步
    if (activeCollection.value && activeCollection.value.id === id) {
      activeCollection.value = { ...activeCollection.value, title: name };
    }

    editingCollectionId.value = null;
  } catch (e) {
    editingCollectionName.value = original;
    ElMessage.error((e as Error).message || '重命名文献集失败');
  } finally {
    collectionsRenameBusy.value = false;
  }
}

async function openCollection(coll: ReferenceCollection) {
  // 正在重命名时不切换文献集，避免交互打断
  if (editingCollectionId.value !== null) return;
  activeCollection.value = coll;

  const requestedCollectionId = coll.id;
  collectionDocsBusy.value = true;
  collectionDocuments.value = [];

  try {
    const res = await getUserLibraryCollectionDocuments(requestedCollectionId, {
      page: 0,
      size: 50,
    });
    const items = (res?.data || []) as UserLibraryCollectionDocumentItem[];
    const safeItems = items.filter(
      (it): it is UserLibraryCollectionDocumentItem & { workId: number } =>
        typeof it.workId === 'number',
    );

    // 如果请求过程中用户切换了文献集，则丢弃旧结果
    if (activeCollection.value?.id !== requestedCollectionId) return;

    collectionDocuments.value = safeItems.map((doc) => {
      const rawDoi = (doc.workDoi || '').trim();
      const doi = rawDoi
        .replace(/^https?:\/\/(dx\.)?doi\.org\//i, '')
        .replace(/^doi\.org\//i, '')
        .trim();

      const lib = references.value.find((r) => r.workId === doc.workId);
      const libraryItemId = lib && lib.id > 0 ? lib.id : 0;

      return {
        id: libraryItemId,
        fileId: 0,
        workId: doc.workId,
        title: doc.workTitle || '',
        publicationYear: doc.publicationYear ?? 0,
        authorsText: doc.workAuthors || '',
        doi,
        landingUrl: doi ? `https://doi.org/${doi}` : '',
        pdfUrl: '',
        note: '',
        updatedAt: doc.createdAt || '',
        venueName: doc.venueName || '',
        journalAbbr: doc.journalAbbr || '',
      } as ExtendedRef;
    });
  } catch (e) {
    if (activeCollection.value?.id !== requestedCollectionId) return;
    ElMessage.error((e as Error).message || '获取文献集文献列表失败');
    collectionDocuments.value = [];
  } finally {
    if (activeCollection.value?.id !== requestedCollectionId) return;
    collectionDocsBusy.value = false;
  }
}

function handleAddTag() {
  const tag = tagInput.value.trim();
  if (!tag) return;
  if (!filterState.litTypes.includes(tag)) {
    filterState.litTypes = [...filterState.litTypes, tag];
  }
  tagInput.value = '';
}

// 扩展 ReferenceItem 以支持 venueName、impactFactor、citations
interface ExtendedRef extends ReferenceItem {
  isMock?: boolean;
  venueName?: string;
  journalAbbr?: string;
  impactFactor?: string;
  citations?: string;
}

// 当前文献集文献列表由接口返回数据渲染

const displayReferences = computed(() => {
  return references.value as ExtendedRef[];
});

/** 当前文献集下的文献列表（由接口返回） */
const collectionDisplayReferences = computed((): ExtendedRef[] => {
  if (!activeCollection.value) return [];
  return collectionDocuments.value as ExtendedRef[];
});

/** 勾选后批量删除用户文献库项（/library/items） */
const selectedLibraryItemIds = ref<number[]>([]);
const batchDeleteLibraryBusy = ref(false);

/** 文献集列表页：勾选后批量删除文献集（/library/collections） */
const selectedCollectionIds = ref<number[]>([]);
const batchDeleteCollectionsBusy = ref(false);

/** 文献集详情页：按 workId 勾选（支持移出文献集；删除文献库仍按 library item id 解析） */
const selectedCollectionDocWorkIds = ref<number[]>([]);
const removeFromCollectionBusy = ref(false);

const isBatchDeleteBarCollectionsMode = computed(
  () =>
    librarySubTab.value === 'collections' &&
    !activeCollection.value &&
    selectedCollectionIds.value.length > 0,
);

const isBatchDeleteBarCollectionDocsMode = computed(
  () =>
    librarySubTab.value === 'collections' &&
    !!activeCollection.value &&
    selectedCollectionDocWorkIds.value.length > 0,
);

const batchDeleteBarSelectedCount = computed(() => {
  if (isBatchDeleteBarCollectionsMode.value) {
    return selectedCollectionIds.value.length;
  }
  if (isBatchDeleteBarCollectionDocsMode.value) {
    return selectedCollectionDocWorkIds.value.length;
  }
  return selectedLibraryItemIds.value.length;
});

const batchDeleteBarBusy = computed(() =>
  isBatchDeleteBarCollectionsMode.value
    ? batchDeleteCollectionsBusy.value
    : batchDeleteLibraryBusy.value,
);

function clearCollectionSelection() {
  selectedCollectionIds.value = [];
}

function isCollectionIdSelected(id: number): boolean {
  return id > 0 && selectedCollectionIds.value.includes(id);
}

function toggleCollectionIdSelection(id: number) {
  if (id <= 0) return;
  const cur = selectedCollectionIds.value;
  const idx = cur.indexOf(id);
  if (idx >= 0) {
    selectedCollectionIds.value = cur.filter((x) => x !== id);
  } else {
    selectedCollectionIds.value = [...cur, id];
  }
}

function clearBatchDeleteBarSelection() {
  if (isBatchDeleteBarCollectionsMode.value) {
    clearCollectionSelection();
  } else if (isBatchDeleteBarCollectionDocsMode.value) {
    clearCollectionDocWorkIdSelection();
  } else {
    clearLibraryItemSelection();
  }
}

async function handleBatchDeleteBarConfirm() {
  if (isBatchDeleteBarCollectionsMode.value) {
    await handleBatchDeleteCollections();
  } else {
    await handleBatchDeleteLibraryItems();
  }
}

function getWorkIdForCollectionDocSelect(ref: ExtendedRef): number {
  if ((ref as any).isMock) return 0;
  const w = (ref as ReferenceItem).workId;
  return typeof w === 'number' && w > 0 ? w : 0;
}

function getLibraryItemIdForDelete(ref: ExtendedRef): number {
  if ((ref as any).isMock) return 0;
  const id = (ref as ReferenceItem).id;
  return typeof id === 'number' && id > 0 ? id : 0;
}

function isCollectionDocWorkIdSelected(workId: number): boolean {
  return workId > 0 && selectedCollectionDocWorkIds.value.includes(workId);
}

function toggleCollectionDocWorkIdSelection(workId: number) {
  if (workId <= 0) return;
  const cur = selectedCollectionDocWorkIds.value;
  const idx = cur.indexOf(workId);
  if (idx >= 0) {
    selectedCollectionDocWorkIds.value = cur.filter((x) => x !== workId);
  } else {
    selectedCollectionDocWorkIds.value = [...cur, workId];
  }
}

function clearCollectionDocWorkIdSelection() {
  selectedCollectionDocWorkIds.value = [];
}

function isLibraryItemIdSelected(id: number): boolean {
  return id > 0 && selectedLibraryItemIds.value.includes(id);
}

function toggleLibraryItemIdSelection(id: number) {
  if (id <= 0) return;
  const cur = selectedLibraryItemIds.value;
  const idx = cur.indexOf(id);
  if (idx >= 0) {
    selectedLibraryItemIds.value = cur.filter((x) => x !== id);
  } else {
    selectedLibraryItemIds.value = [...cur, id];
  }
}

function clearLibraryItemSelection() {
  selectedLibraryItemIds.value = [];
}

const canShowLibraryBatchDeleteBar = computed(() => {
  const onCollectionsRoot =
    librarySubTab.value === 'collections' && !activeCollection.value;
  if (onCollectionsRoot && selectedCollectionIds.value.length > 0) {
    return !collectionsBusy.value;
  }
  if (librarySubTab.value === 'collections' && activeCollection.value) {
    if (selectedCollectionDocWorkIds.value.length > 0) {
      return !collectionDocsBusy.value;
    }
    return false;
  }
  if (selectedLibraryItemIds.value.length === 0) return false;
  if (librarySubTab.value === 'all') {
    return !isLoading.value;
  }
  return false;
});

watch(
  () => [librarySubTab.value, activeCollection.value?.id ?? null] as const,
  () => {
    clearLibraryItemSelection();
    clearCollectionSelection();
    clearCollectionDocWorkIdSelection();
  },
);

watch(
  () => [
    displayReferences.value,
    collectionDisplayReferences.value,
    librarySubTab.value,
    activeCollection.value?.id,
  ],
  () => {
    if (librarySubTab.value === 'collections' && activeCollection.value) {
      const validW = new Set(
        collectionDisplayReferences.value
          .map((r) => getWorkIdForCollectionDocSelect(r as ExtendedRef))
          .filter((w) => w > 0),
      );
      selectedCollectionDocWorkIds.value = selectedCollectionDocWorkIds.value.filter(
        (w) => validW.has(w),
      );
      return;
    }
    const list = displayReferences.value;
    const valid = new Set(
      list
        .map((r) => getLibraryItemIdForDelete(r as ExtendedRef))
        .filter((id) => id > 0),
    );
    selectedLibraryItemIds.value = selectedLibraryItemIds.value.filter((id) =>
      valid.has(id),
    );
  },
  { deep: true },
);

watch(
  () => collections.value.map((c) => c.id),
  () => {
    const valid = new Set(collections.value.map((c) => c.id));
    selectedCollectionIds.value = selectedCollectionIds.value.filter((id) =>
      valid.has(id),
    );
  },
);

watch(
  references,
  () => {
    if (!activeCollection.value || collectionDocsBusy.value) return;
    const next = collectionDocuments.value.map((row) => {
      const ext = row as ExtendedRef;
      const lib = references.value.find((r) => r.workId === ext.workId);
      const nid = lib && lib.id > 0 ? lib.id : 0;
      return { ...ext, id: nid };
    });
    const changed = next.some(
      (row, i) => row.id !== (collectionDocuments.value[i] as ExtendedRef | undefined)?.id,
    );
    if (changed) collectionDocuments.value = next;
  },
  { deep: true },
);

async function handleBatchDeleteLibraryItems() {
  let ids: number[];
  if (
    librarySubTab.value === 'collections' &&
    activeCollection.value &&
    selectedCollectionDocWorkIds.value.length > 0
  ) {
    ids = selectedCollectionDocWorkIds.value
      .map((wid) => {
        const r = collectionDisplayReferences.value.find((x) => x.workId === wid);
        return r ? getLibraryItemIdForDelete(r as ExtendedRef) : 0;
      })
      .filter((id) => id > 0);
    if (ids.length === 0) {
      ElMessage.warning(
        t('referenceLibrary.noLibraryItemForBatchDelete') ||
          '所选文献不在个人文献库中，无法从文献库删除',
      );
      return;
    }
  } else {
    ids = selectedLibraryItemIds.value.filter((id) => id > 0);
  }
  if (ids.length === 0) return;
  try {
    await ElMessageBox.confirm(
      t('referenceLibrary.batchDeleteConfirm', { count: ids.length }) ||
        `确定从文献库删除已选中的 ${ids.length} 条文献吗？`,
      t('common.warning') || '提示',
      {
        type: 'warning',
        confirmButtonText: t('common.delete') || '删除',
        cancelButtonText: t('common.cancel') || '取消',
      },
    );
  } catch {
    return;
  }
  batchDeleteLibraryBusy.value = true;
  try {
    if (ids.length === 1) {
      const onlyId = ids[0]!;
      await deleteUserLibraryItem(onlyId);
    } else {
      await batchDeleteUserLibraryItems(ids);
    }
    ElMessage.success(t('common.success') || '操作成功');
    clearLibraryItemSelection();
    clearCollectionDocWorkIdSelection();
    await loadReferences(searchKeyword.value);
    await loadCollections(collectionSearchKeyword.value);
    if (activeCollection.value) {
      await openCollection(activeCollection.value);
    }
  } catch (e) {
    ElMessage.error((e as Error).message || '删除失败');
  } finally {
    batchDeleteLibraryBusy.value = false;
  }
}

async function handleRemoveFromCollection() {
  const coll = activeCollection.value;
  if (!coll) return;
  const workIds = selectedCollectionDocWorkIds.value.filter((w) => w > 0);
  if (workIds.length === 0) return;
  try {
    await ElMessageBox.confirm(
      t('referenceLibrary.removeFromCollectionConfirm', { count: workIds.length }) ||
        `确定将已选中的 ${workIds.length} 篇文献移出当前文献集吗？`,
      t('common.warning') || '提示',
      {
        type: 'warning',
        confirmButtonText: t('referenceLibrary.removeFromCollection') || '移出文献集',
        cancelButtonText: t('common.cancel') || '取消',
      },
    );
  } catch {
    return;
  }
  removeFromCollectionBusy.value = true;
  try {
    const collectionId = coll.id;
    if (workIds.length === 1) {
      await deleteUserLibraryCollectionDocument(collectionId, workIds[0]!);
    } else {
      await batchDeleteUserLibraryCollectionDocuments(collectionId, workIds);
    }
    ElMessage.success(t('common.success') || '操作成功');
    clearCollectionDocWorkIdSelection();
    await loadCollections(collectionSearchKeyword.value);
    await openCollection(coll);
  } catch (e) {
    ElMessage.error((e as Error).message || '移出失败');
  } finally {
    removeFromCollectionBusy.value = false;
  }
}

async function handleBatchDeleteCollections() {
  const ids = selectedCollectionIds.value.filter((id) => id > 0);
  if (ids.length === 0) return;
  try {
    await ElMessageBox.confirm(
      t('referenceLibrary.batchDeleteCollectionsConfirm', { count: ids.length }) ||
        `确定删除已选中的 ${ids.length} 个文献集吗？`,
      t('common.warning') || '提示',
      {
        type: 'warning',
        confirmButtonText: t('common.delete') || '删除',
        cancelButtonText: t('common.cancel') || '取消',
      },
    );
  } catch {
    return;
  }
  batchDeleteCollectionsBusy.value = true;
  try {
    if (ids.length === 1) {
      await deleteUserLibraryCollection(ids[0]!);
    } else {
      await batchDeleteUserLibraryCollections(ids);
    }
    ElMessage.success(t('common.success') || '操作成功');
    clearCollectionSelection();
    await loadCollections(collectionSearchKeyword.value);
    await loadReferences(searchKeyword.value);
  } catch (e) {
    ElMessage.error((e as Error).message || '删除失败');
  } finally {
    batchDeleteCollectionsBusy.value = false;
  }
}

// 文献类型筛选逻辑：
// - 默认选中“所有”
// - 若在只选中“所有”时勾选其他类型，则取消“所有”，只保留其他类型
// - 若在已有其他类型时再勾选“所有”，则只保留“所有”
// - 若全部取消，则恢复为“所有”
watch(
  () => filterState.litTypes.slice(),
  (val, prev) => {
    const hasAll = val.includes('all');
    const prevHasAll = prev.includes('all');

    // 全部取消 -> 恢复为“所有”
    if (val.length === 0) {
      filterState.litTypes = ['all'];
      return;
    }

    // 之前只有“所有”，现在勾选了其他类型 -> 取消“所有”，只保留其他类型
    if (prevHasAll && prev.length === 1 && hasAll && val.length > 1) {
      filterState.litTypes = val.filter((v) => v !== 'all');
      return;
    }

    // 之前是其他类型，现在又勾选了“所有” -> 只保留“所有”
    if (!prevHasAll && hasAll) {
      filterState.litTypes = ['all'];
      return;
    }
  }
);

function getJournal(ref: ReferenceItem): string {
  const ext = ref as ExtendedRef;
  return ext.venueName || ext.journalAbbr || '—';
}

/** 列表卡片作者展示：workAuthors 多为分号分隔，仅显示前 max 位，其余用拉丁语缩写 et al. */
function formatAuthorsDisplayForCard(raw: string | undefined | null, max = 3): string {
  const s = (raw || '').trim();
  if (!s) return '';
  const parts = s
    .split(';')
    .map((p) => p.trim())
    .filter(Boolean);
  if (parts.length === 0) return '';
  if (parts.length <= max) return parts.join('; ');
  return `${parts.slice(0, max).join('; ')} et al.`;
}

async function handleAddRef(ref: ExtendedRef) {
  if (!ref || typeof ref.workId !== 'number') return;

  // 模拟数据不允许落库
  if ((ref as any).isMock) {
    ElMessage.info(t('referenceLibrary.openDocToView') || '该文献无法添加');
    return;
  }

  addToCollectionTargetWorkId.value = ref.workId;
  addToCollectionSearchKeyword.value = '';
  addToCollectionSelectedCollectionId.value = null;
  addToCollectionBusy.value = false;
  addToCollectionShowCreateInput.value = false;
  addToCollectionNewCollectionName.value = '';
  addToCollectionCreateBusy.value = false;

  // 在“全部文献”视图下按需补齐文献集列表
  if (!collections.value.length && !collectionsBusy.value) {
    await loadCollections('');
  }
}

function cancelAddToCollection() {
  addToCollectionSearchKeyword.value = '';
  addToCollectionSelectedCollectionId.value = null;
  addToCollectionTargetWorkId.value = null;
  addToCollectionBusy.value = false;
  addToCollectionShowCreateInput.value = false;
  addToCollectionNewCollectionName.value = '';
  addToCollectionCreateBusy.value = false;
}

function handleAddToCollectionDropdownVisibleChange(visible: boolean) {
  if (visible) return;
  addToCollectionSearchKeyword.value = '';
  addToCollectionSelectedCollectionId.value = null;
  addToCollectionTargetWorkId.value = null;
  addToCollectionBusy.value = false;
  addToCollectionShowCreateInput.value = false;
  addToCollectionNewCollectionName.value = '';
  addToCollectionCreateBusy.value = false;
}

function handleAddToCollectionCreateCollection() {
  if (addToCollectionCreateBusy.value) return;
  addToCollectionShowCreateInput.value = true;
  addToCollectionNewCollectionName.value = '';
  nextTick(() => {
    addToCollectionNewCollectionInputRef.value?.focus();
    addToCollectionNewCollectionInputRef.value?.select?.();
  });
}

function closeAddToCollectionCreateCollectionInput() {
  addToCollectionShowCreateInput.value = false;
  addToCollectionNewCollectionName.value = '';
}

async function submitAddToCollectionCreateCollection() {
  if (addToCollectionCreateBusy.value) return;
  const name = addToCollectionNewCollectionName.value.trim();
  if (!name) {
    ElMessage.warning('请输入文献集名称');
    return;
  }

  addToCollectionCreateBusy.value = true;
  try {
    await createUserLibraryCollection({ name });
    ElMessage.success('文献集已创建');

    // 刷新文献集列表，确保新数据可立即选择/查看
    addToCollectionSearchKeyword.value = '';
    closeAddToCollectionCreateCollectionInput();
    await loadCollections('');
  } catch (e) {
    ElMessage.error((e as Error).message || '创建文献集失败');
  } finally {
    addToCollectionCreateBusy.value = false;
  }
}

async function submitAddToCollectionCreateCollectionOnBlur(e: FocusEvent) {
  if (!addToCollectionShowCreateInput.value) return;

  // 如果是点击“创建”按钮导致的 blur，则由按钮 click 负责提交，避免重复提交
  const relatedTarget = e.relatedTarget as HTMLElement | null;
  if (relatedTarget?.closest?.('.add-collection-create-submit')) return;

  const name = addToCollectionNewCollectionName.value.trim();
  if (!name) {
    closeAddToCollectionCreateCollectionInput();
    return;
  }
  await submitAddToCollectionCreateCollection();
}

async function confirmAddToCollection() {
  const targetWorkId = addToCollectionTargetWorkId.value;
  const collectionId = addToCollectionSelectedCollectionId.value;

  if (!targetWorkId || !collectionId) {
    ElMessage.warning(t('referenceLibrary.selectCollection') || '请选择文献集');
    return;
  }
  if (addToCollectionBusy.value) return;

  addToCollectionBusy.value = true;
  try {
    await createUserLibraryCollectionDocument(collectionId, { workId: targetWorkId });
    ElMessage.success(t('common.saveSuccess') || '已添加到文献集');
    closeAddToCollectionDropdownForWorkId(targetWorkId);

    // 刷新文献集数量（以及可能的列表更新）
    await loadCollections('');

    // 如果当前正在查看该文献集内文献，则刷新列表
    if (activeCollection.value?.id === collectionId) {
      await openCollection(activeCollection.value);
    }
  } catch (e) {
    ElMessage.error((e as Error).message || '添加失败');
  } finally {
    addToCollectionBusy.value = false;
  }
}

async function loadReferences(keyword?: string) {
  isLoading.value = true;
  try {
    references.value = [];

    // 由于 getUserLibraryItems 仅返回列表，这里通过“返回数量不足 pageSize”来判断结束。
    const pageSize = 50;
    let page = 0;
    const all: UserLibraryItem[] = [];
    const kw = keyword?.trim() || undefined;

    while (true) {
      const res = await getUserLibraryItems({ page, size: pageSize, keyword: kw });
      const items = (res?.data || []) as UserLibraryItem[];
      all.push(...items);

      if (items.length === 0 || items.length < pageSize) break;
      page += 1;

      // 防御性：避免极端情况下死循环
      if (page > 10000) break;
    }

    references.value = all.map((item) => {
      const rawDoi = (item.workDoi || '').trim();
      const doi = rawDoi
        .replace(/^https?:\/\/(dx\.)?doi\.org\//i, '')
        .replace(/^doi\.org\//i, '')
        .trim();
      const landingUrl = doi ? `https://doi.org/${doi}` : '';

      const impactFactorRaw = (item as any).impactFactor;
      const citationsRaw = (item as any).citations;

      return {
        id: item.id ?? 0,
        fileId: 0,
        workId: item.workId ?? 0,
        title: item.workTitle || '',
        publicationYear: item.publicationYear ?? 0,
        authorsText: item.workAuthors || '',
        doi,
        landingUrl,
        pdfUrl: '',
        note: item.note || '',
        updatedAt: item.updatedAt || item.createdAt || '',
        venueName: item.venueName || '',
        journalAbbr: item.journalAbbr || '',
        impactFactor:
          impactFactorRaw !== undefined && impactFactorRaw !== null
            ? String(impactFactorRaw)
            : undefined,
        citations:
          citationsRaw !== undefined && citationsRaw !== null ? String(citationsRaw) : undefined,
      } as ExtendedRef;
    });
  } catch (e) {
    console.error('加载文献库失败:', e);
    references.value = [];
  } finally {
    isLoading.value = false;
  }
}

watch(
  () => [props.fileId, props.isChatAnswer],
  () => loadReferences(searchKeyword.value),
  { immediate: true }
);

// 输入变化时清空旧结果（避免展示与输入不一致的文献）
watch(
  () => pasteIdValue.value.trim(),
  (v) => {
    if (pasteIdImportItems.value.length && v !== pasteIdLastQuery.value) {
      pasteIdImportItems.value = [];
    }
    pasteIdHint.value = '';
    pasteIdHintKind.value = 'info';
  }
);

type ImportTabName = 'pdf' | 'zotero' | 'mendeley' | 'bibris' | 'pasteId';

function openImportDialog(tab: ImportTabName) {
  importTab.value = tab;
  importVisible.value = true;
  pdfFileList.value = [];
  bibrisContent.value = '';
  bibrisInputType.value = 'text';
  bibrisSelectedFile.value = null;
  bibrisSearched.value = false;
  bibrisImportItems.value = [];
  bibrisBusy.value = false;
  bibrisHint.value = '';
  bibrisHintKind.value = 'info';
  pasteIdValue.value = '';
  pasteIdImportItems.value = [];
  pasteIdLastQuery.value = '';
  pasteIdHint.value = '';
  pasteIdHintKind.value = 'info';
}

function handleUploadClick() {
  openImportDialog('pdf');
}

async function handlePasteIdSearch() {
  const input = pasteIdValue.value.trim();
  if (!input) return;
  if (pasteIdBusy.value) return;
  pasteIdLastQuery.value = input;

  const detected = detectPasteIdType(input);
  if (!detected) {
    pasteIdImportItems.value = [];
    pasteIdHint.value = '无法识别输入，请确认是 DOI / PMID / arXiv URL / ISBN';
    pasteIdHintKind.value = 'warning';
    return;
  }

  pasteIdBusy.value = true;
  pasteIdImportItems.value = [];
  pasteIdHint.value = '';
  pasteIdHintKind.value = 'info';

  try {
    const res =
      detected.type === 'doi'
        ? await importReferenceByDoi(detected.value)
        : detected.type === 'arxiv'
          ? await importReferenceByArxiv(detected.value)
          : detected.type === 'pmid'
            ? await importReferenceByPmid(detected.value)
            : await importReferenceByIsbn(detected.value);

    const items = (res?.data?.items || []) as ReferenceImportItem[];
    pasteIdImportItems.value = items;

    if (!items.length) {
      pasteIdHint.value = '未获取到可用的元数据结果';
      pasteIdHintKind.value = 'warning';
      return;
    }

    pasteIdHint.value = `已找到 ${items.length} 条结果，点击“导入到库”完成添加`;
    pasteIdHintKind.value = 'success';
  } catch (e) {
    pasteIdHint.value = (e as Error).message || '获取元数据失败，请稍后重试';
    pasteIdHintKind.value = 'error';
  } finally {
    pasteIdBusy.value = false;
  }
}

async function handlePasteIdImport() {
  const input = pasteIdValue.value.trim();
  if (!input) return;
  if (pasteIdBusy.value) return;

  // 如果还没搜索获取过，则先获取一次结果
  if (!pasteIdImportItems.value.length) {
    await handlePasteIdSearch();
    if (!pasteIdImportItems.value.length) return;
  }

  const items = pasteIdImportItems.value || [];
  const workIds = items.map((i) => i.workId).filter((id): id is number => typeof id === 'number');
  if (!workIds.length) {
    pasteIdHint.value = '未获取到可添加的文献 ID';
    pasteIdHintKind.value = 'warning';
    return;
  }

  let scheduledClose = false;
  try {
    pasteIdBusy.value = true;
    pasteIdHint.value = '正在导入到文献库...';
    pasteIdHintKind.value = 'info';

    // 1) 先“落库”（确保点击按钮必定调用 /library/items）
    await Promise.all(workIds.map((workId) => upsertUserLibraryItem({ workId })));

    // 2) 导入成功后刷新“全部文献”列表
    await loadReferences(searchKeyword.value);

    // 注意：此按钮仅负责“落库”（/library/items），不额外触发其它接口
    pasteIdHint.value = '已导入到文献库';
    pasteIdHintKind.value = 'success';

    pasteIdImportItems.value = [];
    pasteIdLastQuery.value = '';

    scheduledClose = true;
    setTimeout(() => {
      importVisible.value = false;
      pasteIdHint.value = '';
      pasteIdHintKind.value = 'info';
      pasteIdBusy.value = false;
    }, 700);
  } catch (e) {
    pasteIdHint.value = (e as Error).message || '导入失败，请稍后重试';
    pasteIdHintKind.value = 'error';
  } finally {
    if (!scheduledClose) {
      pasteIdBusy.value = false;
    }
  }
}

function setPasteIdExample(v: string) {
  pasteIdValue.value = v;
  try {
    pasteIdInputRef.value?.focus();
  } catch {
    // ignore
  }
}

function openZoteroLogin() {
  window.open('https://www.zotero.org/user/login', '_blank', 'noopener,noreferrer');
}

function openMendeley() {
  window.open(
    'https://id.elsevier.com/as/authorization.oauth2?state=396037cfb1894cc18f05027aedafd2ab&prompt=login&scope=openid%20email%20profile%20els_auth_info%20els_analytics_info%20urn%3Acom%3Aelsevier%3Aidp%3Apolicy%3Aproduct%3Aindv_identity&authType=SINGLE_SIGN_IN&response_type=code&platSite=MDY%2Fmendeley&redirect_uri=https%3A%2F%2Fwww.mendeley.com%2Fcallback%2F&client_id=MENDELEY&additionalPlatSites=SC%2Fscopus%2CSD%2Fscience',
    '_blank',
    'noopener,noreferrer',
  );
}

async function openDetail(ref: ReferenceItem) {
  currentDetailRef.value = ref;
  detailVisible.value = true;
  isEditingDetail.value = false;
  const cached = referencesDetailCache.value[ref.workId];
  if (cached) {
    currentDetail.value = cached;
    return;
  }
  // 模拟数据：直接使用 ref 构建详情，不请求 API
  const ext = ref as ExtendedRef;
  if (ext.isMock) {
    currentDetail.value = {
      workId: ref.workId,
      doi: ref.doi,
      title: ref.title,
      publicationYear: ref.publicationYear || 0,
      publicationDate: '',
      itemType: '',
      authorsText: ref.authorsText || '',
      abstractText: '',
      venueName: ext.venueName || '',
      journalAbbr: ext.journalAbbr || '',
      issn: '',
      volume: '',
      issue: '',
      pages: '',
      language: '',
      landingUrl: ref.landingUrl,
      pdfUrl: ref.pdfUrl,
      source: '',
      identifiersJson: '',
      createdAt: '',
      updatedAt: '',
      note: ref.note,
    };
    return;
  }
  isLoadingDetail.value = true;
  currentDetail.value = null;
  try {
    const res = await getReferenceDetail(ref.workId);
    if (res?.data) {
      const detail = res.data;
      currentDetail.value = detail;
      referencesDetailCache.value[ref.workId] = detail;
    }
  } catch (e) {
    console.error('获取详情失败:', e);
    ElMessage.error('获取详情失败');
  } finally {
    isLoadingDetail.value = false;
  }
}

watch(
  () => detailVisible.value,
  (v) => {
    if (!v) {
      isEditingDetail.value = false;
      currentDetailRef.value = null;
      currentDetail.value = null;
      isLoadingDetail.value = false;
    }
  }
);

function startEditDetail() {
  if (!currentDetail.value) return;
  isEditingDetail.value = true;
  editableDetail.title = currentDetail.value.title || '';
  editableDetail.authorsText = currentDetail.value.authorsText || '';
  editableDetail.venueName = currentDetail.value.venueName || '';
  editableDetail.publicationYear = currentDetail.value.publicationYear || 0;
  editableDetail.abstractText = currentDetail.value.abstractText || '';
  editableDetail.doi = currentDetail.value.doi || '';
}

function cancelDetailEdit() {
  isEditingDetail.value = false;
}

function saveDetailEdit() {
  if (!currentDetail.value) return;
  currentDetail.value.title = editableDetail.title?.trim() || '';
  currentDetail.value.authorsText = editableDetail.authorsText?.trim() || '';
  currentDetail.value.venueName = editableDetail.venueName?.trim() || '';
  currentDetail.value.publicationYear = Number(editableDetail.publicationYear || 0);
  currentDetail.value.abstractText = editableDetail.abstractText || '';
  currentDetail.value.doi = editableDetail.doi?.trim() || '';

  referencesDetailCache.value[currentDetail.value.workId] = { ...currentDetail.value };

  const refInList = references.value.find((r) => r.workId === currentDetail.value!.workId) as any;
  if (refInList) {
    refInList.title = currentDetail.value.title;
    refInList.authorsText = currentDetail.value.authorsText;
    refInList.publicationYear = currentDetail.value.publicationYear;
    refInList.doi = currentDetail.value.doi;
    refInList.venueName = currentDetail.value.venueName;
  }
  if (currentDetailRef.value && currentDetailRef.value.workId === currentDetail.value.workId) {
    (currentDetailRef.value as any).title = currentDetail.value.title;
    (currentDetailRef.value as any).authorsText = currentDetail.value.authorsText;
    (currentDetailRef.value as any).publicationYear = currentDetail.value.publicationYear;
    (currentDetailRef.value as any).doi = currentDetail.value.doi;
    (currentDetailRef.value as any).venueName = currentDetail.value.venueName;
  }

  isEditingDetail.value = false;
  ElMessage.success(t('common.saveSuccess') || '保存成功');
}

function openOriginal(ref: ReferenceItem) {
  const url = ref.landingUrl || (ref.doi ? `https://doi.org/${ref.doi}` : '');
  if (url) window.open(url, '_blank');
  else ElMessage.warning('暂无原文链接');
}

async function copyCitation(ref: ReferenceItem) {
  if (!props.fileId) return;
  try {
    const res = await getFormatCitation(
      Number(props.fileId),
      [[ref.workId]],
      'apa',
      'text'
    );
    const text = res?.data?.entries?.[0];
    if (text) {
      await navigator.clipboard.writeText(text);
      ElMessage.success('已复制引用');
    }
  } catch (e) {
    ElMessage.error('复制失败');
  }
}
</script>

<style lang="scss" scoped>
/* 全部文献：详情/原文/添加按钮与勾选框；文献集勾选框 — 共用同一圆角数值 */
$ref-lib-card-action-radius: 4px;

.reference-library {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  /* 与左侧知识库区域统一的浅灰底色 */
  background: var(--color-card, #f5f5f5);
}

.library-tabs {
  display: flex;
  gap: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
  flex-shrink: 0;

  .library-tab {
    padding: 10px 16px;
    font-size: 14px;
    color: var(--outline-text, #666);
    cursor: pointer;
    position: relative;
    transition: color 0.2s;

    &:hover {
      color: var(--color-text, #333);
    }

    &.active {
      color: var(--color-primary, #409eff);
      font-weight: 500;

      &::after {
        content: '';
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: -1px;
        height: 2px;
        background: var(--color-primary, #409eff);
      }
    }
  }
}

.library-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
  flex-shrink: 0;
  margin-bottom: 8px;

  .toolbar-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    background: var(--color-bg, #fff);
    color: var(--outline-text, #666);
    cursor: pointer;
    transition: all 0.2s;

    &:hover:not(:disabled) {
      border-color: var(--color-primary, #409eff);
      color: var(--color-primary, #409eff);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .search-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    background: var(--color-bg, #fff);

    .search-icon {
      margin-right: 8px;
      color: var(--outline-text, #999);
      font-size: 12px;
    }

    .search-input {
      flex: 1;
      min-width: 0;
      width: 100%;
      border: none;
      outline: none;
      font-size: 13px;
      color: var(--color-text, #333);
      background: transparent;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &::placeholder {
        color: var(--outline-text, #999);
        text-overflow: ellipsis;
      }
    }

    &.search-wrapper-full {
      flex: 1;
    }
  }

  .new-collection-btn {
    flex-shrink: 0;
  }
}

.filter-panel {
  width: 280px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 16px;
  background: var(--color-bg, #fff);
  border-radius: 8px;

  .filter-panel-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text, #333);
    text-align: center;
    margin-bottom: 16px;
  }

  .filter-section {
    margin-bottom: 14px;
    position: relative;

    .filter-section-label {
      font-size: 12px;
      color: var(--outline-text, #666);
      font-weight: 600;
      margin-bottom: 4px;
    }

    .filter-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;

      &.filter-options-grid {
        display: flex;
        flex-wrap: wrap;
        column-gap: 8px;
        row-gap: 4px;
        justify-content: flex-start;
      }
    }

    .filter-opt-btn {
      padding: 6px 12px;
      font-size: 12px;
      color: var(--color-text, #333);
      background: var(--color-bg, #fff);
      border: 1px solid var(--color-border, #ddd);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s;
      outline: none;
      user-select: none;
      white-space: nowrap;

      &:hover {
        border-color: #1890ff;
        color: #1890ff;
        background: rgba(24, 144, 255, 0.05);
      }

      &.active {
        border-color: #1890ff;
        color: #1890ff;
        background: rgba(24, 144, 255, 0.05);
      }
    }

    .filter-checkbox {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--color-text, #333);
      cursor: pointer;

      span {
        white-space: nowrap;
      }

      input {
        width: 14px;
        height: 14px;
      }

      &.all-checkbox {
        flex-shrink: 0;
      }
    }

    .filter-all-text {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 12px;
      color: var(--outline-text, #999);
      cursor: pointer;

      &.active {
        color: #1890ff;
        font-weight: 500;
      }
    }

  }

  /* 个性化标签输入行（移出 filter-section 后的独立样式） */
  .filter-tag-input-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
  }

  .filter-tag-input {
    flex: 1;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 6px;
    outline: none;

    &:focus {
      border-color: var(--color-primary, #409eff);
    }

    &::placeholder {
      color: var(--outline-text, #999);
    }
  }

  .filter-add-btn {
    padding: 0 14px;
    font-size: 12px;
    color: #fff;
    background: var(--color-primary, #409eff);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s;

    &:hover {
      opacity: 0.9;
    }
  }
}

.filter-panel-enter-active,
.filter-panel-leave-active {
  transition: opacity 0.2s, transform 0.2s;
}
.filter-panel-enter-from,
.filter-panel-leave-to {
  opacity: 0;
  transform: translateX(-8px);
}

.collection-detail-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
  background: var(--color-card, #f5f5f5);
  margin-bottom: 8px;
}

.collection-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 6px;
  background: var(--color-bg, #fff);
  color: var(--outline-text, #666);
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    border-color: var(--color-primary, #409eff);
    color: var(--color-primary, #409eff);
  }
}

.collection-detail-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, #333);
}

.library-collections {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collection-card {
  position: relative;
  padding: 10px 36px 10px 12px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: box-shadow 0.2s;

  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .collection-delete-checkbox {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    cursor: pointer;

    input[type='checkbox'] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      box-sizing: border-box;
      width: 16px;
      height: 16px;
      margin: 0;
      cursor: pointer;
      flex-shrink: 0;
      border: 1px solid var(--color-border, #dcdfe6);
      border-radius: $ref-lib-card-action-radius;
      background: var(--color-bg, #fff);
      position: relative;
      transition: border-color 0.2s, background 0.2s;
    }

    input[type='checkbox']:checked {
      background: var(--color-primary, #409eff);
      border-color: var(--color-primary, #409eff);
    }

    input[type='checkbox']:checked::after {
      content: '';
      position: absolute;
      left: 4px;
      top: 0;
      width: 6px;
      height: 11px;
      box-sizing: border-box;
      border: solid #fff;
      border-width: 0 2.5px 2.5px 0;
      transform: rotate(45deg);
    }

    &:hover input[type='checkbox']:not(:checked) {
      border-color: var(--color-primary, #409eff);
    }
  }

  .collection-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #333);
    line-height: 1.4;
    margin: 0;
  }

  .collection-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .collection-edit-btn {
    position: absolute;
    top: 6px;
    right: 38px;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--outline-text, #666);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;

    &:hover:not(:disabled) {
      color: var(--color-primary, #409eff);
      background: var(--color-bg, #fff);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    i {
      font-size: 13px;
    }
  }

  .collection-title-input {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #333);
    line-height: 1.4;
    padding: 6px 8px;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 6px;
    background: var(--color-bg, #fff);
    outline: none;

    &:focus {
      border-color: var(--color-primary, #409eff);
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
    }
  }

  .collection-meta {
    font-size: 12px;
    color: var(--outline-text, #666);

    .meta-sep {
      margin: 0 4px;
    }
  }
}

.collection-create-card {
  cursor: default;
}

.collection-create-input {
  width: 100%;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--color-text, #333);
  outline: none;
  background: var(--color-bg, #fff);
}

.collection-create-input:focus {
  border-color: var(--color-primary, #409eff);
}

/* 下拉内创建输入框：不显示边框，聚焦也不显示描边 */
.add-collection-create-input-wrap .collection-create-input {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 6px;

  height: 32px;
  padding: 0;
  margin: 0;
  line-height: 32px;
  flex: 1;
  min-width: 0;
  background: transparent;
}

.add-collection-create-input-wrap .collection-create-input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.library-batch-delete-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 6px 12px;
  border-top: 1px solid var(--color-border, #e0e0e0);

  .library-batch-delete-hint {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--color-text, #333);
    white-space: nowrap;
  }

  .library-batch-delete-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
  }
}

.library-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
}

.library-loading,
.library-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--outline-text, #999);
  font-size: 14px;

  .empty-icon {
    font-size: 40px;
    opacity: 0.5;
  }

  .import-btn {
    margin-top: 8px;
  }
}

.library-empty.library-empty-cta {
  justify-content: flex-start;
  align-items: stretch;
  align-self: center;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px 8px 24px;
  gap: 0;
  color: var(--color-text, #333);
}

.library-empty-cta-visual {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.cta-source-stack {
  position: relative;
  width: 200px;
  height: 100px;
}

.cta-mini-card {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 52px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.cta-mini-card--n {
  left: 8px;
  top: 28px;
  transform: rotate(-12deg);
  background: linear-gradient(145deg, #fff 0%, #e8f5e9 100%);
  color: #1b5e20;
}

.cta-mini-card--s {
  left: 56px;
  top: 4px;
  transform: rotate(4deg);
  z-index: 2;
  background: linear-gradient(145deg, #fff8e1 0%, #ffecb3 100%);
  color: #e65100;
}

.cta-mini-card--a {
  right: 4px;
  top: 22px;
  transform: rotate(14deg);
  background: linear-gradient(145deg, #fff 0%, #ffebee 100%);
  color: #b71c1c;
  font-size: 10px;
}

.library-empty-cta-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--color-text, #111);
}

.library-empty-cta-subtitle {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--outline-text, #888);
}

.library-empty-cta-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--outline-text, #666);
  margin-bottom: 10px;

  &--other {
    margin-top: 20px;
  }
}

.library-empty-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.library-empty-cta-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text, #333);
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;

  &:hover {
    border-color: var(--color-primary, #409eff);
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.12);
  }
}

.library-empty-cta-btn-icon {
  font-size: 16px;
  color: var(--outline-text, #666);
  width: 22px;
  text-align: center;
}

.library-empty-cta-btn-zm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
}

.library-empty-cta-btn .tab-icon-z {
  color: #c5522b;
}

.library-empty-cta-btn .tab-icon-m {
  color: #9d1625;
}

.collections-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text, #111);
  opacity: 0.85;
  font-size: 22px;
}

.collections-empty-text {
  max-width: 520px;
  text-align: center;
  line-height: 1.6;
  padding: 0 10px;
}

.collections-empty-btn {
  width: 100%;
  max-width: 520px;
}

.library-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reference-card {
  position: relative;
  padding: 14px 16px;
  /* 卡片保持白底，在浅灰背景上形成对比，风格与知识库列表一致 */
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 8px;
  transition: box-shadow 0.2s;

  /* el-dropdown 触发层可能会成为定位参照，导致绝对定位按钮偏移 */
  :deep(.el-dropdown) {
    position: static !important;
  }

  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #333);
    line-height: 1.4;
    margin-bottom: 6px;
    padding-right: 44px; /* 为右上角 + 按钮留出空间，避免重叠 */
  }

  .card-author {
    font-size: 12px;
    color: var(--outline-text, #666);
    margin-bottom: 4px;
  }

  .card-journal {
    font-size: 12px;
    color: var(--color-primary, #409eff);
    font-weight: 500;
    margin-bottom: 8px;
  }

  .card-meta {
    font-size: 12px;
    color: var(--outline-text, #999);
    margin-bottom: 10px;

    .meta-sep {
      margin: 0 4px;
    }

    .doi-link {
      color: var(--color-primary, #409eff);
      text-decoration: underline;
    }
  }

  .card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #eee);

    .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 4px 6px;
      font-size: 11px;
      color: var(--color-text, #333);
      background: var(--color-bg, #fff);
      border: 1px solid var(--color-border, #dcdfe6);
      border-radius: $ref-lib-card-action-radius;
      cursor: pointer;
      transition: all 0.2s;

      i {
        font-size: 11px;
        color: var(--outline-text, #666);
      }

      &:hover {
        border-color: var(--color-primary, #409eff);
        color: var(--color-primary, #409eff);

        i {
          color: var(--color-primary, #409eff);
        }
      }
    }

    .card-delete-checkbox {
      margin-left: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px 6px;
      cursor: pointer;

      input[type='checkbox'] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        box-sizing: border-box;
        width: 16px;
        height: 16px;
        margin: 0;
        cursor: pointer;
        flex-shrink: 0;
        border: 1px solid var(--color-border, #dcdfe6);
        border-radius: $ref-lib-card-action-radius;
        background: var(--color-bg, #fff);
        position: relative;
        transition: border-color 0.2s, background 0.2s;
      }

      input[type='checkbox']:checked {
        background: var(--color-primary, #409eff);
        border-color: var(--color-primary, #409eff);
      }

      input[type='checkbox']:checked::after {
        content: '';
        position: absolute;
        left: 4px;
        top: 0;
        width: 6px;
        height: 11px;
        box-sizing: border-box;
        border: solid #fff;
        border-width: 0 2.5px 2.5px 0;
        transform: rotate(45deg);
      }

      &:hover input[type='checkbox']:not(:checked) {
        border-color: var(--color-primary, #409eff);
      }
    }
  }

  .card-add-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border, #dcdfe6);
    border-radius: $ref-lib-card-action-radius;
    background: var(--color-bg, #fff);
    color: var(--color-text, #333);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;

    &:hover {
      border-color: var(--color-primary, #409eff);
      color: var(--color-primary, #409eff);
      background: rgba(64, 158, 255, 0.06);
    }
  }
}

.add-collection-panel {
  width: 246px;
  max-height: 80vh;
  overflow: hidden;
  padding: 12px;
}

.add-collection-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #333);
  text-align: center;
  margin-bottom: 10px;
}

.add-collection-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 8px;
  background: var(--color-bg, #fff);
  margin-bottom: 6px;

  .search-icon {
    color: var(--outline-text, #999);
    font-size: 12px;
  }

  .search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--color-text, #333);
    background: transparent;

    &::placeholder {
      color: var(--outline-text, #999);
    }
  }
}

.add-collection-empty {
  padding: 20px 10px;
  text-align: center;
  color: var(--outline-text, #999);
  font-size: 13px;
}

.add-collection-list {
  /* 视觉上最多展示 3 条；多余通过滚动 */
  max-height: 136px;
  overflow-y: auto;
  padding-right: 2px;
  padding-bottom: 4px;
  margin-bottom: 6px;

  /* 隐藏滚动条（仍可滚动） */
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

.add-collection-item {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  &:hover {
    background: rgba(64, 158, 255, 0.06);
    border-color: rgba(64, 158, 255, 0.25);
  }

  &.selected {
    background: rgba(64, 158, 255, 0.08);
    border-color: var(--color-primary, #409eff);
  }
}

.add-collection-item-title {
  font-size: 13px;
  color: var(--color-text, #333);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-collection-item-meta {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--outline-text, #999);
}

.add-collection-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;

  .add-collection-cancel,
  .add-collection-confirm {
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    font-size: 11px;
    border-radius: 6px;
    border: 1px solid var(--color-border, #dcdfe6);
    background: var(--color-bg, #fff);
    color: var(--color-text, #333);
    cursor: pointer;
    transition: all 0.2s;

    min-width: 0;
  }

  .add-collection-confirm {
    background: var(--color-primary, #409eff);
    border-color: var(--color-primary, #409eff);
    color: #fff;

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  .add-collection-cancel {
    &:hover {
      border-color: var(--color-primary, #409eff);
      color: var(--color-primary, #409eff);
      background: rgba(64, 158, 255, 0.06);
    }
  }
}

.add-collection-create {
  border-top: 1px solid var(--color-border, #f0f0f0);
}

.add-collection-create-entry {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--color-primary, #409eff);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
  font-weight: 600;

  /* 用于 <i> 图标对齐 */
  i {
    font-size: 13px;
    line-height: 1;
  }
}

.add-collection-create-entry.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.add-collection-create-input-wrap {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 8px;
}

.add-collection-create-input-plus {
  color: var(--color-primary, #409eff);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

.add-collection-create-submit {
  height: 26px;
  line-height: 26px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #dcdfe6);
  background: transparent;
  color: var(--outline-text, #909399);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.add-collection-create-submit.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.add-collection-create-submit:not(.disabled):hover {
  background: rgba(0, 0, 0, 0.04);
}

.detail-content {
  padding: 12px 0;

  .detail-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--outline-text, #999);
  }

  .detail-row {
    margin-bottom: 16px;

    .detail-label {
      font-size: 12px;
      color: var(--outline-text, #999);
      margin-bottom: 4px;
    }

    .detail-value {
      font-size: 14px;
      color: var(--color-text, #333);
      line-height: 1.5;

      &.abstract {
        max-height: 120px;
        overflow-y: auto;
      }

      a {
        color: var(--color-primary, #409eff);
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

.detail-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  /* 预留右侧关闭按钮位置，避免操作按钮挤在一起 */
  padding-right: 16px;

  .detail-drawer-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text, #333);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .detail-drawer-actions {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

.detail-edit-form {
  padding-top: 2px;
}

.import-dialog-content {
  display: flex;
  flex-direction: column;
  gap: 16px;

  :deep(.import-tabs) {
    .el-tabs__header {
      margin-bottom: 16px;
    }
    .el-tabs__nav-wrap::after {
      display: none;
    }
    .el-tabs__item {
      font-size: 13px;
    }
    .el-tabs__item.is-active .tab-label {
      color: var(--color-primary, #409eff);
    }
    .tab-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      i, .tab-icon-z, .tab-icon-m {
        font-size: 14px;
      }
      .tab-icon-z, .tab-icon-m {
        font-weight: 700;
        font-style: normal;
      }
      .tab-icon-z { color: #c5522b; }
      .tab-icon-m { color: #9d1625; }
    }
    .tab-placeholder {
      padding: 24px;
      text-align: center;
      color: var(--outline-text, #999);
      font-size: 14px;
    }
  }

  .upload-pdf-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    .pdf-upload-area {
      :deep(.el-upload-dragger) {
        padding: 32px 20px;
      }
    }
    .upload-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      .upload-icon {
        font-size: 32px;
        color: var(--outline-text, #999);
      }
      .upload-text {
        font-size: 14px;
        color: var(--color-text, #333);
      }
      .upload-hint {
        font-size: 13px;
        color: var(--outline-text, #666);
        .select-link {
          color: var(--color-primary, #409eff);
          cursor: pointer;
          &:hover { text-decoration: underline; }
        }
      }
      .upload-limit {
        font-size: 12px;
        color: var(--outline-text, #999);
      }
    }
    .hidden-file-input {
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
      overflow: hidden;
    }

    .pdf-import-btn {
      align-self: flex-end;
      margin-top: 4px;
    }

    /* Element Plus: primary + disabled 仍可能保留主题色，这里强制置灰 */
    :deep(.pdf-import-btn.is-disabled),
    :deep(.pdf-import-btn.is-disabled:hover),
    :deep(.pdf-import-btn.is-disabled:focus),
    :deep(.pdf-import-btn.is-disabled:active) {
      background-color: #cfd3dc !important;
      border-color: #cfd3dc !important;
      color: #ffffff !important;
      cursor: not-allowed !important;
    }
  }

  .bibris-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;

    .bibris-textarea {
      min-height: 200px;
      width: 100%;
      padding: 12px;
      font-size: 13px;
      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
      line-height: 1.5;
      color: var(--color-text, #333);
      background: var(--color-bg-secondary, #fafafa);
      border: 1px solid var(--color-border, #e0e0e0);
      border-radius: 8px;
      resize: none;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;

      &::placeholder {
        color: var(--outline-text, #999);
      }

      &:focus {
        border-color: var(--color-primary, #409eff);
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
      }
    }

    .bibris-file-hint {
      font-size: 13px;
      color: var(--outline-text, #666);
      .select-link {
        color: var(--color-primary, #409eff);
        cursor: pointer;
        &:hover { text-decoration: underline; }
      }
    }

    .bibris-search-btn {
      align-self: flex-end;
      margin-top: 4px;
    }

    .bibris-hint {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 13px;
      border: 1px solid var(--color-border, #e0e0e0);
      background: #fff;
      color: var(--outline-text, #666);
    }
    .bibris-hint.kind-success {
      border-color: rgba(64, 158, 255, 0.35);
      background: rgba(64, 158, 255, 0.08);
      color: var(--color-primary, #409eff);
    }
    .bibris-hint.kind-warning {
      border-color: rgba(230, 162, 60, 0.45);
      background: rgba(230, 162, 60, 0.12);
      color: #e6a23c;
    }
    .bibris-hint.kind-error {
      border-color: rgba(245, 108, 108, 0.45);
      background: rgba(245, 108, 108, 0.12);
      color: #f56c6c;
    }
    .bibris-hint-text {
      word-break: break-word;
      line-height: 1.4;
    }

    .bibris-results-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: 240px;
      overflow-y: auto;
    }
    .bibris-result-item {
      border: 1px solid var(--color-border, #e0e0e0);
      border-radius: 10px;
      padding: 12px 14px;
    }
    .bibris-result-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--color-text, #333);
    }
    .bibris-result-authors {
      font-size: 12px;
      color: var(--outline-text, #666);
      margin-top: 4px;
    }
    .bibris-result-venue {
      font-size: 12px;
      color: #8a8f98;
      margin-top: 2px;
    }

    .bibris-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 8px;
    }
    .bibris-back-btn {
      margin-left: 0;
    }

    .bibris-import-btn {
      align-self: flex-end;
      margin-top: 4px;
    }

    /* 强制“导入到库”禁用态置灰 */
    :deep(.bibris-import-btn.is-disabled),
    :deep(.bibris-import-btn.is-disabled:hover),
    :deep(.bibris-import-btn.is-disabled:focus),
    :deep(.bibris-import-btn.is-disabled:active) {
      background-color: #cfd3dc !important;
      border-color: #cfd3dc !important;
      color: #ffffff !important;
      cursor: not-allowed !important;
    }

    .hidden-file-input {
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
      overflow: hidden;
    }
  }

  .pasteid-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;

    .pasteid-tip {
      font-size: 13px;
      color: var(--outline-text, #666);
    }

    .pasteid-input-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .pasteid-input {
      flex: 1;
      height: 40px;
      padding: 0 12px;
      border: 1px solid var(--color-border, #e0e0e0);
      border-radius: 10px;
      font-size: 12px;
      outline: none;
      background: #fff;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .pasteid-input:focus {
      border-color: var(--color-primary, #409eff);
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
    }

    .pasteid-search-btn {
      width: 44px;
      height: 40px;
      border-radius: 10px;
      border: none;
      background: var(--color-primary, #409eff);
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s, background-color 0.2s;
    }
    .pasteid-search-btn:hover {
      opacity: 0.92;
    }
    .pasteid-search-btn:disabled {
      background: #cfd3dc;
      cursor: not-allowed;
      opacity: 1;
    }

    .pasteid-results-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--color-text, #333);
      font-weight: 600;
    }

    .pasteid-hint {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--color-border, #e0e0e0);
      background: #fff;
      font-size: 13px;
      color: var(--outline-text, #666);
    }

    .pasteid-hint.kind-success {
      border-color: rgba(64, 158, 255, 0.35);
      background: rgba(64, 158, 255, 0.08);
      color: var(--color-primary, #409eff);
    }

    .pasteid-hint.kind-warning {
      border-color: rgba(230, 162, 60, 0.45);
      background: rgba(230, 162, 60, 0.12);
      color: #e6a23c;
    }

    .pasteid-hint.kind-error {
      border-color: rgba(245, 108, 108, 0.45);
      background: rgba(245, 108, 108, 0.12);
      color: #f56c6c;
    }

    .pasteid-hint-text {
      word-break: break-word;
      line-height: 1.4;
    }

    .pasteid-results-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .pasteid-result-item {
      border: 1px solid var(--color-border, #e0e0e0);
      border-radius: 10px;
      background: #fff;
      padding: 12px;
    }

    .pasteid-result-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--color-text, #333);
      margin-bottom: 6px;
      line-height: 1.35;
      word-break: break-word;
    }

    .pasteid-result-authors {
      font-size: 12px;
      color: var(--outline-text, #666);
      margin-bottom: 2px;
    }

    .pasteid-result-venue {
      font-size: 12px;
      color: #8a8f98;
      font-style: italic;
    }

    .pasteid-examples-title {
      font-size: 13px;
      color: var(--color-text, #333);
    }

    .pasteid-examples {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .example-card {
      border: 1px solid var(--color-border, #e0e0e0);
      border-radius: 10px;
      background: #fff;
      padding: 12px 12px 10px;
      cursor: pointer;
      transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
      outline: none;
    }
    .example-card:hover {
      border-color: var(--color-primary, #409eff);
      box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
      transform: translateY(-1px);
    }
    .example-card:active {
      transform: translateY(0);
    }
    .example-card:focus-visible {
      border-color: var(--color-primary, #409eff);
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.18);
    }

    .example-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--color-text, #333);
      margin-bottom: 2px;
    }

    .example-subtitle {
      font-size: 12px;
      color: var(--outline-text, #666);
      margin-bottom: 10px;
    }

    .example-value {
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: #f3f4f6;
      color: #8a8f98;
      font-size: 13px;
      user-select: none;
    }

    .pasteid-import-btn {
      align-self: flex-end;
      margin-top: 4px;
    }

    /* 强制“导入到库”禁用态置灰 */
    :deep(.pasteid-import-btn.is-disabled),
    :deep(.pasteid-import-btn.is-disabled:hover),
    :deep(.pasteid-import-btn.is-disabled:focus),
    :deep(.pasteid-import-btn.is-disabled:active) {
      background-color: #cfd3dc !important;
      border-color: #cfd3dc !important;
      color: #ffffff !important;
      cursor: not-allowed !important;
    }
  }

  .zotero-connect-panel {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    text-align: center;
  }

  .zotero-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .zotero-logo::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: conic-gradient(from 180deg, #ff6b6b, #845ef7, #74c0fc, #ffd43b, #ff6b6b);
    opacity: 0.22;
    filter: blur(6px);
  }
  .zotero-logo-z {
    position: relative;
    font-weight: 800;
    font-size: 22px;
    color: #d6336c;
    line-height: 1;
  }

  .zotero-title {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text, #333);
  }

  .zotero-desc {
    max-width: 420px;
    font-size: 13px;
    color: var(--outline-text, #666);
    line-height: 1.5;
  }

  .zotero-connect-btn {
    margin-top: 10px;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
  }

  .mendeley-connect-panel {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    text-align: center;
  }

  .mendeley-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #b31217;
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mendeley-logo-m {
    font-weight: 800;
    font-size: 22px;
    color: #ffffff;
    line-height: 1;
  }

  .mendeley-title {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text, #333);
  }

  .mendeley-desc {
    max-width: 420px;
    font-size: 13px;
    color: var(--outline-text, #666);
    line-height: 1.5;
  }

  .mendeley-connect-btn {
    margin-top: 10px;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
  }

  .import-method-group {
    display: flex;
    gap: 16px;
  }

  .import-results {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .import-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 6px;

    .result-title {
      flex: 1;
      font-size: 13px;
      font-weight: 500;
    }

    .result-meta {
      flex: 1;
      font-size: 12px;
      color: var(--outline-text, #666);
    }

    .el-button {
      flex-shrink: 0;
    }
  }
}
</style>