<template>
  <div class="text-split">
    <!-- Header -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">分割生成</h2>
        <p class="page-subtitle">选择文件进行智能分割</p>
      </div>
      <div class="header-actions">
        <el-button
          @click="openSplitDialog"
          :disabled="selectedFiles.length === 0"
          class="split-btn"
        >
          <el-icon><ChatDotSquare /></el-icon>
          <span>批量分割</span>
        </el-button>
        <el-button
          type="primary"
          @click="openGenerateDialog"
          :disabled="completedFiles === 0"
          class="generate-btn"
        >
          <el-icon><VideoPlay /></el-icon>
          <span>批量生成</span>
        </el-button>
      </div>
    </div>

    <!-- Stats Cards -->
    <div class="stats-grid">
      <div
        class="stat-card stat-total"
        :class="{ active: filterStatus === '' }"
        @click="filterStatus = ''"
      >
        <div class="stat-glow"></div>
        <div class="stat-inner">
          <div class="stat-icon-wrap">
            <el-icon size="24"><Document /></el-icon>
          </div>
          <div class="stat-info">
            <span class="stat-value">{{ files.length }}</span>
            <span class="stat-label">总文件</span>
          </div>
        </div>
      </div>
      <div
        class="stat-card stat-completed"
        :class="{ active: filterStatus === 'completed' }"
        @click="filterStatus = filterStatus === 'completed' ? '' : 'completed'"
      >
        <div class="stat-glow"></div>
        <div class="stat-inner">
          <div class="stat-icon-wrap">
            <el-icon size="24"><CircleCheckFilled /></el-icon>
          </div>
          <div class="stat-info">
            <span class="stat-value">{{ completedFiles }}</span>
            <span class="stat-label">已分割</span>
          </div>
        </div>
      </div>
      <div
        class="stat-card stat-processing"
        :class="{ active: filterStatus === 'processing' }"
        @click="filterStatus = filterStatus === 'processing' ? '' : 'processing'"
      >
        <div class="stat-glow"></div>
        <div class="stat-inner">
          <div class="stat-icon-wrap">
            <el-icon size="24"><Loading /></el-icon>
          </div>
          <div class="stat-info">
            <span class="stat-value">{{ processingCount }}</span>
            <span class="stat-label">分割中</span>
          </div>
        </div>
      </div>
      <div
        class="stat-card stat-chunks"
      >
        <div class="stat-glow"></div>
        <div class="stat-inner">
          <div class="stat-icon-wrap">
            <el-icon size="24"><List /></el-icon>
          </div>
          <div class="stat-info">
            <span class="stat-value">{{ totalChunks }}</span>
            <span class="stat-label">总文本块</span>
          </div>
        </div>
      </div>
    </div>

    <!-- File List / Split View -->
    <div class="content-area">
      <!-- Empty State -->
      <div v-if="!loading && !isInitialLoad && filteredFiles.length === 0" class="empty-state">
        <div class="empty-illustration">
          <div class="orbit orbit-1"></div>
          <div class="orbit orbit-2"></div>
          <div class="orbit orbit-3"></div>
          <div class="empty-core">
            <el-icon size="40"><FolderOpened /></el-icon>
          </div>
        </div>
        <h3 class="empty-title">暂无可分割文件</h3>
        <p class="empty-desc">请先在文件管理中上传文档</p>
      </div>

      <!-- File Table -->
      <div v-else class="files-table-wrapper">
        <div class="table-header">
          <div class="table-select">
            <el-checkbox
              :model-value="isAllSelected"
              @change="toggleSelectAll"
              class="select-all"
            >
              <span v-if="selectedCount > 0" class="selected-text">已选择 {{ selectedCount }} 项</span>
              <span v-else>全选</span>
            </el-checkbox>
          </div>
          <div class="table-actions" v-if="selectedCount > 0">
            <el-button type="danger" size="small" plain @click="clearSelection" class="batch-clear-btn">
              <el-icon><Close /></el-icon>
              <span>清除选择</span>
            </el-button>
          </div>
        </div>
        <div class="files-list">
          <div
            v-for="(file, index) in filteredFiles"
            :key="file.id"
            class="file-row"
            :class="{
              'is-selected': isSelected(file.id),
              'is-processing': file.status === 'processing'
            }"
            :style="{ '--delay': index * 0.04 + 's' }"
            @click="toggleSelect(file.id)"
          >
            <div class="col-select">
              <el-checkbox
                :model-value="isSelected(file.id)"
                @click.stop
                @change="toggleSelect(file.id)"
              />
            </div>
            <div class="col-icon">
              <div class="file-type-icon" style="background: #8b5cf6;">
                <el-icon size="18" color="white">
                  <Document />
                </el-icon>
              </div>
            </div>
            <div class="col-name">
              <span class="file-name">{{ file.filename }}.md</span>
              <span class="file-meta">{{ formatSize(file.size) }}</span>
            </div>
            <div class="col-chunks">
              <span v-if="fileChunks[file.id]" class="chunk-count">
                {{ fileChunks[file.id] }} 块
              </span>
              <span v-else class="chunk-count empty">-</span>
            </div>
            <div class="col-status">
              <div v-if="file.status === 'processing'" class="status-badge processing">
                <el-icon class="spin" size="12"><Loading /></el-icon>
                <span>分割中</span>
              </div>
              <div v-else-if="fileChunks[file.id]" class="status-badge success">
                <el-icon size="12"><CircleCheckFilled /></el-icon>
                <span>已完成</span>
              </div>
              <div v-else class="status-badge pending">
                <el-icon size="12"><Clock /></el-icon>
                <span>待分割</span>
              </div>
            </div>
            <div class="col-operations" v-if="fileChunks[file.id]">
              <el-tooltip content="预览修改" placement="top">
                <el-button text size="small" class="op-btn" @click.stop="openChunkPreview(file)">
                  <el-icon><Edit /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除该文件的所有块" placement="top">
                <el-button
                  text
                  size="small"
                  class="op-btn delete"
                  :loading="deletingFileChunksId === file.id"
                  @click.stop="openDeleteFileChunksDialog(file)"
                >
                  <el-icon><Delete /></el-icon>
                </el-button>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Batch Split Dialog -->
  <Teleport to="body">
    <Transition name="dialog-fade">
      <div v-if="splitDialogVisible" class="split-dialog-overlay" @click.self="splitDialogVisible = false">
        <div class="split-dialog">
          <!-- Header -->
          <div class="dialog-header">
            <div class="header-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                <path d="M2 17l10 5 10-5"/>
                <path d="M2 12l10 5 10-5"/>
              </svg>
            </div>
            <div class="header-text">
              <h3>批量分割配置</h3>
              <span class="header-sub">{{ selectedFiles.length }} 个文件待处理</span>
            </div>
            <button class="close-btn" @click="splitDialogVisible = false">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M18 6L6 18M6 6l12 12"/>
              </svg>
            </button>
          </div>

          <!-- Dialog Body -->
          <div class="dialog-body">
            <!-- Split Method Selector -->
            <div class="method-selector">
              <div class="method-label">
                <span class="label-icon">◆</span>
                <span>分割算法</span>
              </div>
              <div class="method-grid">
                <button
                  v-for="m in methods"
                  :key="m.value"
                  class="method-btn"
                  :class="{ active: splitConfig.method === m.value }"
                  @click="splitConfig.method = m.value"
                >
                  <span class="method-name">{{ m.label }}</span>
                  <span class="method-tag">{{ m.tag }}</span>
                </button>
              </div>
            </div>

            <!-- Parameters Panel -->
            <div class="params-panel">
              <!-- Panel Grid Background -->
              <div class="panel-grid"></div>

              <!-- Common Parameters -->
              <div class="param-section" v-if="splitConfig.method !== 'paragraph'">
                <div class="section-header">
                  <span class="section-num">01</span>
                  <span class="section-title">块大小控制</span>
                </div>
                <div class="param-row">
                  <div class="param-info">
                    <span class="param-name">chunk_size</span>
                    <span class="param-desc">每个文本块的字符数</span>
                  </div>
                  <div class="param-control">
                    <input
                      type="range"
                      v-model.number="splitConfig.chunk_size"
                      :min="100"
                      :max="2000"
                      :step="100"
                      class="cyber-slider"
                    />
                    <div class="param-value">
                      <span class="value-num">{{ splitConfig.chunk_size }}</span>
                      <span class="value-unit">chars</span>
                    </div>
                  </div>
                </div>
                <!-- Visual Preview -->
                <div class="chunk-preview">
                  <div class="preview-label">预览</div>
                  <div class="preview-bars">
                    <div
                      v-for="i in 5"
                      :key="i"
                      class="preview-bar"
                      :style="{ width: (splitConfig.chunk_size / 20) + 'px' }"
                    ></div>
                  </div>
                </div>
              </div>

              <div class="param-section" v-if="splitConfig.method !== 'sentence'">
                <div class="section-header">
                  <span class="section-num">02</span>
                  <span class="section-title">重叠控制</span>
                </div>
                <div class="param-row">
                  <div class="param-info">
                    <span class="param-name">overlap</span>
                    <span class="param-desc">相邻块之间的重叠字符数</span>
                  </div>
                  <div class="param-control">
                    <input
                      type="range"
                      v-model.number="splitConfig.overlap"
                      :min="0"
                      :max="500"
                      :step="50"
                      class="cyber-slider"
                    />
                    <div class="param-value">
                      <span class="value-num">{{ splitConfig.overlap }}</span>
                      <span class="value-unit">chars</span>
                    </div>
                  </div>
                </div>
                <!-- Overlap Visual -->
                <div class="overlap-preview">
                  <div class="overlap-block" :style="{ width: (splitConfig.chunk_size / 4) + 'px' }"></div>
                  <div class="overlap-zone" :style="{ width: (splitConfig.overlap / 4) + 'px' }"></div>
                  <div class="overlap-block" :style="{ width: (splitConfig.chunk_size / 4) + 'px' }"></div>
                </div>
              </div>

              <!-- Custom Separator -->
              <div class="param-section" v-if="splitConfig.method === 'custom'">
                <div class="section-header">
                  <span class="section-num">03</span>
                  <span class="section-title">自定义分隔符</span>
                </div>
                <div class="param-row">
                  <div class="param-info">
                    <span class="param-name">separator</span>
                    <span class="param-desc">用于分割文本的字符序列</span>
                  </div>
                  <div class="param-control full">
                    <input
                      type="text"
                      v-model="splitConfig.separator"
                      placeholder="\n\n"
                      class="cyber-input"
                    />
                  </div>
                </div>
              </div>

              <template v-if="splitConfig.method === 'semantic'">
                <div class="param-section">
                  <div class="section-header highlight">
                    <span class="section-num">04</span>
                    <span class="section-title">句段优先说明</span>
                    <span class="section-badge">RULE</span>
                  </div>
                  <div class="param-row full">
                    <div class="param-info">
                      <span class="param-name">规则型切分</span>
                      <span class="param-desc">按段落和句子边界优先切分，不调用 embedding API，更接近“句段优先的递归切分”。</span>
                    </div>
                  </div>
                </div>
              </template>
              <template v-if="splitConfig.method === 'semantic_embedding'">
                <div class="param-section">
                  <div class="section-header highlight">
                    <span class="section-num">04</span>
                    <span class="section-title">Embedding 模型</span>
                    <span class="section-badge">API</span>
                  </div>
                  <div class="api-grid">
                    <div class="param-row full">
                      <div class="param-info">
                        <span class="param-name">embedding_model</span>
                        <span class="param-desc">直接使用模型管理中已配置的 embedding 模型</span>
                      </div>
                      <div class="param-control full">
                        <select v-model="splitConfig.embedding_model_id" class="cyber-select" :disabled="embeddingModels.length === 0">
                          <option value="" disabled>
                            {{ embeddingModels.length ? '选择 embedding 模型' : '暂无可用 embedding 模型' }}
                          </option>
                          <option
                            v-for="model in embeddingModels"
                            :key="model.id"
                            :value="model.id"
                          >
                            {{ model.model_name }} · {{ getProviderLabel(model.provider) }}
                          </option>
                        </select>
                      </div>
                    </div>
                    <div class="param-row full" v-if="embeddingModels.length === 0">
                      <div class="embedding-empty-hint">
                        <span>还没有可用的 embedding 模型。</span>
                        <button type="button" class="text-link-btn" @click="goToModelSettings">
                          去模型配置
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="param-section">
                  <div class="section-header highlight">
                    <span class="section-num">05</span>
                    <span class="section-title">语义边界参数</span>
                    <span class="section-badge">AI</span>
                  </div>
                  <div class="param-row">
                    <div class="param-info">
                      <span class="param-name">similarity_threshold</span>
                      <span class="param-desc">越高越保守，越低越容易切出新块</span>
                    </div>
                    <div class="param-control">
                      <input
                        type="range"
                        v-model.number="splitConfig.similarity_threshold"
                        :min="0.1"
                        :max="0.9"
                        :step="0.05"
                        class="cyber-slider accent"
                      />
                      <div class="param-value accent">
                        <span class="value-num">{{ splitConfig.similarity_threshold.toFixed(2) }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="param-row">
                    <div class="param-info">
                      <span class="param-name">min_chunk_size</span>
                      <span class="param-desc">最小块大小，避免语义过碎</span>
                    </div>
                    <div class="param-control">
                      <input
                        type="range"
                        v-model.number="splitConfig.min_chunk_size"
                        :min="50"
                        :max="500"
                        :step="10"
                        class="cyber-slider accent"
                      />
                      <div class="param-value accent">
                        <span class="value-num">{{ splitConfig.min_chunk_size }}</span>
                        <span class="value-unit">chars</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

            </div>
          </div>

          <div class="dialog-footer">
            <button class="btn-cancel" @click="splitDialogVisible = false">
              <span>取消</span>
            </button>
            <button class="btn-confirm" @click="handleBatchSplit" :class="{ loading: splitting }">
              <span v-if="!splitting" class="btn-text">
                <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="5 3 19 12 5 21 5 3"/>
                </svg>
                开始生成
              </span>
              <span v-else class="btn-loading">
                <span class="loading-dot"></span>
                <span class="loading-dot"></span>
                <span class="loading-dot"></span>
              </span>
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>

  <Teleport to="body">
    <Transition name="dialog-fade">
      <div v-if="generateDialogVisible" class="split-dialog-overlay" @click.self="generateDialogVisible = false">
        <div class="split-dialog generate-dialog-shell">
          <div class="dialog-header">
            <div class="header-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 2l2.4 5.8L20 10l-4 4 1 6-5-3-5 3 1-6-4-4 5.6-2.2L12 2z"/>
              </svg>
            </div>
            <div class="header-text">
              <h3>批量生成问答</h3>
              <span class="header-sub">面向当前项目全部已分割文本块</span>
            </div>
            <button class="close-btn" @click="generateDialogVisible = false">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M18 6L6 18M6 6l12 12"/>
              </svg>
            </button>
          </div>

          <div class="dialog-body">
            <div class="params-panel">
              <div class="panel-grid"></div>

              <div class="param-section">
                <div class="section-header">
                  <span class="section-num">01</span>
                  <span class="section-title">大语言模型</span>
                </div>
                <div class="param-row full">
                  <div class="param-info">
                    <span class="param-name">model</span>
                    <span class="param-desc">选择用于生成问答对的 chat / vlm 模型</span>
                  </div>
                  <div class="param-control full">
                    <el-select
                      v-model="generateConfig.model_id"
                      class="cyber-select generate-model-select"
                      :disabled="generateModels.length === 0"
                      :teleported="false"
                      placement="bottom-start"
                      popper-class="generate-model-dropdown"
                      placeholder="选择生成模型"
                    >
                      <el-option
                        v-for="model in generateModels"
                        :key="model.id"
                        :label="`${model.model_name} · ${getProviderLabel(model.provider)}`"
                        :value="model.id"
                      >
                        <div class="generate-option">
                          <div class="generate-option__title">{{ model.model_name }}</div>
                          <div class="generate-option__meta">{{ getProviderLabel(model.provider) }}</div>
                        </div>
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div class="param-row full" v-if="generateModels.length === 0">
                  <div class="embedding-empty-hint">
                    <span>还没有可用的 chat / vlm 模型。</span>
                    <button type="button" class="text-link-btn" @click="goToModelSettings">
                      去模型配置
                    </button>
                  </div>
                </div>
              </div>

              <div class="param-section generate-strategy-section">
                <div class="section-header">
                  <span class="section-num">02</span>
                  <span class="section-title">生成策略</span>
                </div>
                <div class="generate-strategy-grid">
                  <button
                    type="button"
                    class="strategy-card"
                    :class="{ active: generateConfig.dirty_data_filter }"
                    @click="generateConfig.dirty_data_filter = !generateConfig.dirty_data_filter"
                  >
                    <div class="strategy-card__head">
                      <span class="strategy-card__title">脏数据过滤</span>
                      <span class="strategy-card__switch" :class="{ active: generateConfig.dirty_data_filter }">
                        <span class="strategy-card__switch-handle"></span>
                      </span>
                    </div>
                    <p class="strategy-card__desc">过滤目录、极短内容和明显噪声，减少无效调用。</p>
                    <span class="strategy-card__state">{{ generateConfig.dirty_data_filter ? '已开启' : '已关闭' }}</span>
                  </button>
                  <button
                    type="button"
                    class="strategy-card"
                    :class="{ active: generateConfig.thinking_mode }"
                    @click="generateConfig.thinking_mode = !generateConfig.thinking_mode"
                  >
                    <div class="strategy-card__head">
                      <span class="strategy-card__title">思考模式</span>
                      <span class="strategy-card__switch" :class="{ active: generateConfig.thinking_mode }">
                        <span class="strategy-card__switch-handle"></span>
                      </span>
                    </div>
                    <p class="strategy-card__desc">生成前强化内容分析，提升问题质量与覆盖度。</p>
                    <span class="strategy-card__state">{{ generateConfig.thinking_mode ? '已开启' : '已关闭' }}</span>
                  </button>
                </div>
                <div class="param-row">
                  <div class="param-info">
                    <span class="param-name">single_chunk_count</span>
                    <span class="param-desc">每个 chunk 生成多少组问答</span>
                  </div>
                  <div class="param-control">
                    <input
                      type="range"
                      v-model.number="generateConfig.count"
                      :min="1"
                      :max="8"
                      :step="1"
                      class="cyber-slider accent"
                    />
                    <div class="param-value accent">
                      <span class="value-num">{{ generateConfig.count }}</span>
                      <span class="value-unit">pairs</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="param-section generate-prompt-section">
                <div class="section-header">
                  <span class="section-num">03</span>
                  <span class="section-title">预设提示语</span>
                </div>
                <div class="generate-prompt-box">
                  <textarea
                    v-model="generateConfig.preset_prompt"
                    class="cyber-textarea generate-prompt-textarea"
                    rows="9"
                  />
                </div>
              </div>
            </div>
          </div>

          <div class="dialog-footer">
            <button class="btn-cancel" @click="generateDialogVisible = false">
              <span>取消</span>
            </button>
            <button class="btn-confirm" @click="handleBatchGenerate" :class="{ loading: generatingQuestions }">
              <span v-if="!generatingQuestions" class="btn-text">
                <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="5 3 19 12 5 21 5 3"/>
                </svg>
                开始生成
              </span>
              <span v-else class="btn-loading">
                <span class="loading-dot"></span>
                <span class="loading-dot"></span>
                <span class="loading-dot"></span>
              </span>
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>

  <Teleport to="body">
    <Transition name="dialog-fade">
      <div v-if="chunkPreviewVisible" class="chunk-preview-overlay" @click.self="chunkPreviewVisible = false">
        <div class="chunk-preview-dialog">
          <div class="dialog-header">
            <div class="header-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                <path d="M2 17l10 5 10-5"/>
                <path d="M2 12l10 5 10-5"/>
              </svg>
            </div>
            <div class="header-text">
              <h3>预览修改</h3>
              <span class="header-sub">{{ previewFile?.filename }} - {{ previewChunks.length }} 个块</span>
            </div>
            <button class="close-btn" @click="chunkPreviewVisible = false">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M18 6L6 18M6 6l12 12"/>
              </svg>
            </button>
          </div>

          <div class="chunk-preview-toolbar">
            <label class="preview-search">
              <span class="preview-search-label">检索</span>
              <input
                v-model.trim="previewSearch"
                type="text"
                class="cyber-input"
                placeholder="搜索块内容、块号"
              />
            </label>

            <div class="preview-filter-group">
              <button
                class="preview-filter-btn"
                :class="{ active: previewFilter === 'all' }"
                @click="previewFilter = 'all'"
              >
                全部
              </button>
              <button
                class="preview-filter-btn"
                :class="{ active: previewFilter === 'modified' }"
                @click="previewFilter = 'modified'"
              >
                仅已修改
              </button>
            </div>

            <label class="preview-jump">
              <span class="preview-search-label">跳转</span>
              <input
                v-model.trim="previewJumpInput"
                type="text"
                inputmode="numeric"
                class="cyber-input"
                placeholder="块号"
                @keydown.enter.prevent="jumpToChunk"
              />
            </label>

            <div class="preview-stats">
              <span>{{ filteredPreviewChunks.length }} / {{ previewChunks.length }} 块</span>
              <span>{{ modifiedPreviewCount }} 已修改</span>
            </div>
          </div>

          <div class="dialog-body chunk-workspace">
            <div v-if="previewLoading" class="loading-state">
              <span class="loading-dot"></span>
              <span class="loading-dot"></span>
              <span class="loading-dot"></span>
            </div>
            <div v-else-if="previewChunks.length" class="chunk-workspace-grid">
              <aside class="chunk-nav-panel">
                <div class="chunk-nav-list">
                  <button
                    v-for="chunk in filteredPreviewChunks"
                    :key="chunk.id"
                    class="chunk-nav-item"
                    :class="{
                      active: chunk.id === selectedPreviewChunkId,
                      modified: isChunkModified(chunk)
                    }"
                    @click="selectPreviewChunk(chunk.id)"
                  >
                    <div class="chunk-nav-meta">
                      <span class="chunk-nav-index">块 {{ chunk.displayIndex }}</span>
                      <span class="chunk-nav-words">{{ chunk.word_count || 0 }} 字</span>
                    </div>
                    <p class="chunk-nav-snippet">{{ getChunkSnippet(chunk) }}</p>
                    <div class="chunk-nav-footer">
                      <span class="chunk-nav-status">{{ isChunkModified(chunk) ? '已修改' : '原始' }}</span>
                    </div>
                  </button>
                </div>
              </aside>

              <section v-if="activePreviewChunk" class="chunk-editor-panel">
                <div class="chunk-item">
                  <div class="chunk-header">
                    <div class="chunk-header-main">
                      <span class="chunk-index">块 {{ activePreviewChunkIndex }} / {{ previewChunks.length }}</span>
                      <span class="chunk-state-pill" :class="{ modified: isChunkModified(activePreviewChunk) }">
                        {{ isChunkModified(activePreviewChunk) ? '已修改未保存' : '内容未变更' }}
                      </span>
                    </div>
                    <span class="chunk-words">{{ activePreviewChunk.word_count || 0 }} 字</span>
                  </div>
                  <div class="chunk-form">
                    <div class="form-group">
                      <label>内容</label>
                      <textarea
                        v-model="activePreviewChunk.editingContent"
                        class="cyber-textarea preview-editor"
                        rows="20"
                      ></textarea>
                    </div>
                    <div class="chunk-actions">
                      <button
                        class="btn-secondary"
                        :disabled="!isChunkModified(activePreviewChunk)"
                        @click="resetChunk(activePreviewChunk)"
                      >
                        还原
                      </button>
                      <button
                        class="btn-save"
                        :class="{ loading: savingChunks }"
                        :disabled="!isChunkModified(activePreviewChunk)"
                        @click="saveChunk(activePreviewChunk)"
                      >
                        <span v-if="!savingChunks">保存</span>
                        <span v-else class="btn-loading">
                          <span class="loading-dot"></span>
                          <span class="loading-dot"></span>
                          <span class="loading-dot"></span>
                        </span>
                      </button>
                      <button
                        class="btn-delete"
                        :class="{ loading: deletingChunkId === activePreviewChunk.id }"
                        :disabled="deletingChunkId === activePreviewChunk.id"
                        @click="openDeleteChunkDialog(activePreviewChunk)"
                      >
                        <span v-if="deletingChunkId !== activePreviewChunk.id">删除</span>
                        <span v-else class="btn-loading">
                          <span class="loading-dot"></span>
                          <span class="loading-dot"></span>
                          <span class="loading-dot"></span>
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </section>
            </div>
            <div v-else class="chunk-empty-state">
              <h4>没有匹配的分片</h4>
              <p>试试清空搜索词，或切回“全部”查看所有分片。</p>
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>

  <DeleteDialog
    v-model:visible="deleteDialogVisible"
    :title="deleteDialogTitle"
    :item-name="deleteDialogItemName"
    :detail-text="deleteDialogDetail"
    :warning-text="deleteDialogWarning"
    :confirm-text="deleteDialogConfirmText"
    :loading="deleteDialogLoading"
    @confirm="confirmDeleteAction"
  />
</template>

<script lang="ts" src="../page-logic/ProjectTextSplitPage.ts"></script>
<style scoped src="../styles/pages/project-text-split.css"></style>
