<template>
  <div class="question-manage">
    <!-- 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 type="primary" @click="showGenerateDialog = true" class="generate-btn">
          <el-icon><Plus /></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"><ChatDotSquare /></el-icon>
          </div>
          <div class="stat-info">
            <span class="stat-value">{{ questions.length }}</span>
            <span class="stat-label">总问题数</span>
          </div>
        </div>
      </div>
      <div
        class="stat-card stat-completed"
        :class="{ active: filterStatus === 'generated' }"
        @click="filterStatus = filterStatus === 'generated' ? '' : 'generated'"
      >
        <div class="stat-glow"></div>
        <div class="stat-inner">
          <div class="stat-icon-wrap">
            <el-icon size="24"><MagicStick /></el-icon>
          </div>
          <div class="stat-info">
            <span class="stat-value">{{ generatedCount }}</span>
            <span class="stat-label">AI 生成</span>
          </div>
        </div>
      </div>
      <div
        class="stat-card stat-processing"
        :class="{ active: filterStatus === 'manual' }"
        @click="filterStatus = filterStatus === 'manual' ? '' : 'manual'"
      >
        <div class="stat-glow"></div>
        <div class="stat-inner">
          <div class="stat-icon-wrap">
            <el-icon size="24"><EditPen /></el-icon>
          </div>
          <div class="stat-info">
            <span class="stat-value">{{ manualCount }}</span>
            <span class="stat-label">手动添加</span>
          </div>
        </div>
      </div>
      <div
        class="stat-card stat-failed"
        :class="{ active: filterStatus === 'failed' }"
        @click="filterStatus = filterStatus === 'failed' ? '' : 'failed'"
      >
        <div class="stat-glow"></div>
        <div class="stat-inner">
          <div class="stat-icon-wrap">
            <el-icon size="24"><CircleCloseFilled /></el-icon>
          </div>
          <div class="stat-info">
            <span class="stat-value">{{ failedCount }}</span>
            <span class="stat-label">失败</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Question Container -->
    <div class="question-container" v-loading="loading && isInitialLoad">
      <!-- Empty State -->
      <div v-if="!loading && !isInitialLoad && filteredQuestions.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"><ChatDotSquare /></el-icon>
          </div>
        </div>
        <h3 class="empty-title">暂无问答数据</h3>
        <p class="empty-desc">生成您的第一个问答数据集</p>
        <el-button type="primary" @click="showGenerateDialog = true" class="empty-btn">生成问题</el-button>
      </div>

      <!-- Question Table -->
      <div v-else class="question-table-wrapper">
        <!-- Table Header -->
        <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>
            <el-button type="danger" size="small" plain @click="batchDelete" class="batch-delete-btn">
              <el-icon><Delete /></el-icon>
              <span>批量删除</span>
            </el-button>
          </div>
        </div>

        <!-- Table Body -->
        <div class="question-table">
          <div
            v-for="(question, index) in filteredQuestions"
            :key="question.id"
            class="question-row"
            :class="{
              'is-selected': isSelected(question.id),
              'row-animated': isInitialLoad
            }"
            :style="{ '--delay': index * 0.04 + 's' }"
            @click="toggleSelect(question.id)"
          >
            <!-- Select Checkbox -->
            <div class="col-select" @click.stop>
              <el-checkbox
                :model-value="isSelected(question.id)"
                @change="toggleSelect(question.id)"
              />
            </div>

            <!-- Question Content -->
            <div class="col-content">
              <div class="question-text">{{ question.content }}</div>
              <div class="answer-text" v-if="question.answer">答: {{ question.answer }}</div>
            </div>

            <!-- Type -->
            <div class="col-type">
              <el-tag size="small" :style="{ '--tag-color': getTypeColor(question.question_type) }" effect="dark">
                {{ getTypeName(question.question_type) }}
              </el-tag>
            </div>

            <!-- Source -->
            <div class="col-source">
              <span class="source-badge" :class="'source-' + question.source">{{ getSourceName(question.source) }}</span>
            </div>

            <!-- Actions -->
            <div class="col-actions" @click.stop>
              <el-popconfirm title="确定删除此问题？" @confirm="handleDelete(question)">
                <template #reference>
                  <el-button text size="small" class="action-btn delete">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </template>
              </el-popconfirm>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog v-model="showGenerateDialog" title="生成问题" width="640px" class="generate-dialog">
      <el-form :model="generateConfig" label-position="top">
        <el-form-item label="生成模型">
          <el-select
            v-model="generateConfig.model_id"
            placeholder="选择 chat / vlm 模型"
            style="width: 100%"
            size="large"
          >
            <el-option
              v-for="model in generateModels"
              :key="model.id"
              :label="`${model.model_name} · ${getProviderLabel(model.provider)}`"
              :value="model.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文本块">
          <el-select
            v-model="generateConfig.chunk_ids"
            multiple
            placeholder="选择文本块"
            style="width: 100%"
            size="large"
          >
            <el-option
              v-for="chunk in chunks"
              :key="chunk.id"
              :label="chunk.name || chunk.content.slice(0, 50) + '...'"
              :value="chunk.id"
            />
          </el-select>
        </el-form-item>
        <div class="form-row">
          <el-form-item label="每个块生成数量">
            <el-input-number v-model="generateConfig.count" :min="1" :max="8" size="large" style="width: 100%" />
          </el-form-item>
        </div>
        <el-form-item label="生成策略">
          <div style="display: flex; gap: 16px; flex-wrap: wrap;">
            <el-checkbox v-model="generateConfig.dirty_data_filter">脏数据过滤</el-checkbox>
            <el-checkbox v-model="generateConfig.thinking_mode">思考模式</el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="预设提示语">
          <el-input
            v-model="generateConfig.preset_prompt"
            type="textarea"
            :rows="8"
            resize="none"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showGenerateDialog = false">取消</el-button>
        <el-button type="primary" @click="handleGenerate" :loading="generating">开始生成</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" src="../page-logic/ProjectQuestionPage.ts"></script>
<style scoped src="../styles/pages/project-question.css"></style>
