<template>
  <el-dialog
    v-model="visible"
    title="文档分段管理"
    width="1200px"
    :close-on-click-modal="false"
    class="segment-dialog"
  >
    <!-- 统计信息卡片 -->
    <div class="segment-stats">
      <div class="stat-item">
        <div class="stat-label">总分段数</div>
        <div class="stat-value">{{ totalSegments }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">总字数</div>
        <div class="stat-value">{{ totalWords }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">总 Tokens</div>
        <div class="stat-value">{{ totalTokens }}</div>
      </div>
    </div>

    <!-- 分段列表 -->
    <div class="segment-list" v-loading="loading">
      <div 
        v-for="(segment, index) in segments" 
        :key="segment.id"
        class="segment-item"
      >
        <div class="segment-header">
          <span class="segment-index">分段 {{ index + 1 }}</span>
          <span class="segment-info">
            {{ segment.word_count }} 字 · {{ segment.tokens }} tokens
          </span>
          <div class="segment-actions">
            <el-button 
              size="small" 
              @click="editSegment(segment)"
              :icon="Edit"
            >
              编辑
            </el-button>
            <el-button 
              size="small" 
              type="danger"
              @click="deleteSegment(segment)"
              :icon="Delete"
            >
              删除
            </el-button>
          </div>
        </div>

        <!-- 分段内容显示/编辑 -->
        <div class="segment-content">
          <div v-if="editingSegmentId === segment.id" class="segment-editor">
            <el-input
              v-model="editingContent"
              type="textarea"
              :rows="6"
              placeholder="编辑分段内容"
            />
            <div class="editor-actions">
              <el-button size="small" @click="cancelEdit">取消</el-button>
              <el-button 
                size="small" 
                type="primary" 
                @click="saveSegment(segment)"
                :loading="saving"
              >
                保存
              </el-button>
            </div>
          </div>
          <div v-else class="segment-text">
            {{ segment.content }}
          </div>
        </div>

        <!-- 关键词标签 -->
        <div class="segment-keywords" v-if="segment.parentKeywords?.length">
          <el-tag
            v-for="keyword in segment.parentKeywords"
            :key="keyword"
            size="small"
            style="margin-right: 8px;"
          >
            {{ keyword }}
          </el-tag>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="!loading && segments.length === 0" class="empty-state">
        <p>暂无分段数据</p>
      </div>
    </div>

    <!-- 底部操作栏 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
        <el-button type="primary" @click="showAddSegment" :icon="Plus">
          添加分段
        </el-button>
      </div>
    </template>

    <!-- 添加分段对话框 -->
    <el-dialog
      v-model="addDialogVisible"
      title="添加新分段"
      width="600px"
      append-to-body
    >
      <el-form label-position="top">
        <el-form-item label="选择父分段（可选）">
          <el-select
            v-model="selectedParentSegment"
            placeholder="选择一个分段作为父级"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="(seg, idx) in segments"
              :key="seg.id"
              :label="`分段 ${idx + 1}: ${seg.content.substring(0, 30)}...`"
              :value="seg.parentSegmentId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="分段内容" required>
          <el-input
            v-model="newSegmentContent"
            type="textarea"
            :rows="8"
            placeholder="请输入分段内容"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button 
          type="primary" 
          @click="createNewSegment"
          :loading="creating"
        >
          创建
        </el-button>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Edit, Delete, Plus } from '@element-plus/icons-vue';
import { documentSegmentApi } from '../../../../../apis/ai';

defineOptions({
  name: 'DocumentSegmentDialog'
});

interface Props {
  /** 是否显示对话框 */
  modelValue: boolean;
  /** Dify数据集ID */
  datasetId: string;
  /** Dify文档ID */
  documentId: string;
}

const props = defineProps<Props>();
const emit = defineEmits(['update:modelValue']);

// 对话框显示状态
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

// 数据状态
const loading = ref(false);
const saving = ref(false);
const creating = ref(false);
const segments = ref<any[]>([]);

// 编辑状态
const editingSegmentId = ref<string | null>(null);
const editingContent = ref('');

// 添加分段状态
const addDialogVisible = ref(false);
const selectedParentSegment = ref<string>('');
const newSegmentContent = ref('');

// 统计信息
const totalSegments = computed(() => segments.value.length);
const totalWords = computed(() => 
  segments.value.reduce((sum, seg) => sum + (seg.word_count || 0), 0)
);
const totalTokens = computed(() => 
  segments.value.reduce((sum, seg) => sum + (seg.tokens || 0), 0)
);

// 监听对话框显示状态，加载数据
watch(visible, async (val) => {
  if (val) {
    await loadSegments();
  }
});

/**
 * 加载分段数据
 */
async function loadSegments() {
  try {
    loading.value = true;
    
    // 使用辅助方法获取所有分段和子块
    const allChunks = await documentSegmentApi.getAllSegmentsWithChunks(
      props.datasetId,
      props.documentId
    );
    
    segments.value = allChunks;
  } catch (error: any) {
    console.error('加载分段失败:', error);
    ElMessage.error(error.message || '加载分段失败');
  } finally {
    loading.value = false;
  }
}

/**
 * 编辑分段
 */
function editSegment(segment: any) {
  editingSegmentId.value = segment.id;
  editingContent.value = segment.content;
}

/**
 * 取消编辑
 */
function cancelEdit() {
  editingSegmentId.value = null;
  editingContent.value = '';
}

/**
 * 保存分段
 */
async function saveSegment(segment: any) {
  if (!editingContent.value.trim()) {
    ElMessage.warning('分段内容不能为空');
    return;
  }

  try {
    saving.value = true;
    
    const result = await documentSegmentApi.updateChildChunk(
      props.datasetId,
      props.documentId,
      segment.segment_id,
      segment.id,
      editingContent.value
    );
    
    if (result.success && result.data?.data) {
      // 更新本地数据
      const index = segments.value.findIndex(s => s.id === segment.id);
      if (index !== -1) {
        segments.value[index] = {
          ...segments.value[index],
          ...result.data.data
        };
      }
      
      ElMessage.success('保存成功');
      cancelEdit();
    }
  } catch (error: any) {
    console.error('保存分段失败:', error);
    ElMessage.error(error.message || '保存失败');
  } finally {
    saving.value = false;
  }
}

/**
 * 删除分段
 */
async function deleteSegment(segment: any) {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个分段吗？此操作不可恢复。',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );
    
    const result = await documentSegmentApi.deleteChildChunk(
      props.datasetId,
      props.documentId,
      segment.segment_id,
      segment.id
    );
    
    if (result.success) {
      segments.value = segments.value.filter(s => s.id !== segment.id);
      ElMessage.success('删除成功');
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('删除分段失败:', error);
      ElMessage.error(error.message || '删除失败');
    }
  }
}

/**
 * 显示添加分段对话框
 */
function showAddSegment() {
  // 如果有分段，默认选择第一个作为父级
  if (segments.value.length > 0) {
    selectedParentSegment.value = segments.value[0].parentSegmentId;
  }
  addDialogVisible.value = true;
}

/**
 * 创建新分段
 */
async function createNewSegment() {
  if (!newSegmentContent.value.trim()) {
    ElMessage.warning('请输入分段内容');
    return;
  }

  if (!selectedParentSegment.value) {
    ElMessage.warning('请选择一个父分段');
    return;
  }

  try {
    creating.value = true;
    
    const result = await documentSegmentApi.createChildChunk(
      props.datasetId,
      props.documentId,
      selectedParentSegment.value,
      newSegmentContent.value
    );
    
    if (result.success && result.data?.data) {
      ElMessage.success('创建成功');
      addDialogVisible.value = false;
      newSegmentContent.value = '';
      selectedParentSegment.value = '';
      
      // 重新加载列表
      await loadSegments();
    }
  } catch (error: any) {
    console.error('创建分段失败:', error);
    ElMessage.error(error.message || '创建失败');
  } finally {
    creating.value = false;
  }
}
</script>

<style lang="scss" scoped>
.segment-dialog {
  :deep(.el-dialog) {
    border-radius: 14px;
    
    .el-dialog__header {
      padding: 24px 24px 16px;
      border-bottom: 1px solid #F3F3F5;
      
      .el-dialog__title {
        font-size: 18px;
        font-weight: 500;
        color: #101828;
        letter-spacing: -0.02em;
      }
    }
    
    .el-dialog__body {
      padding: 24px;
      background: #FAFAFA;
    }
    
    .el-dialog__footer {
      padding: 16px 24px;
      border-top: 1px solid #F3F3F5;
    }
  }
}

.segment-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;

  .stat-item {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    transition: all 0.2s;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transform: translateY(-2px);
    }

    .stat-label {
      font-size: 14px;
      font-weight: 400;
      color: #4A5565;
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }

    .stat-value {
      font-size: 28px;
      font-weight: 400;
      color: #101828;
      letter-spacing: -0.02em;
    }
  }
}

.segment-list {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
  
  /* 自定义滚动条 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 3px;
    
    &:hover {
      background: #9CA3AF;
    }
  }

  .segment-item {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s;

    &:hover {
      border-color: #E7000B;
      box-shadow: 0 4px 12px rgba(231, 0, 11, 0.12);
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .segment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;

    .segment-index {
      font-weight: 500;
      color: #101828;
      font-size: 14px;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    .segment-info {
      flex: 1;
      font-size: 12px;
      color: #6A7282;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    .segment-actions {
      display: flex;
      gap: 8px;
      
      :deep(.el-button) {
        border-radius: 8px;
        font-weight: 500;
        letter-spacing: -0.01em;
        padding: 5px 12px;
        
        &.el-button--small {
          font-size: 14px;
        }
        
        &.el-button--default {
          background: #F3F3F5;
          border-color: transparent;
          color: #0A0A0A;
          
          &:hover {
            background: #E5E5E7;
            border-color: transparent;
          }
        }
        
        &.el-button--danger {
          background: #FEF2F2;
          border-color: transparent;
          color: #DC2626;
          
          &:hover {
            background: #FEE2E2;
            border-color: transparent;
          }
        }
      }
    }
  }

  .segment-content {
    .segment-text {
      padding: 12px;
      background: #F9FAFB;
      border: 1px solid transparent;
      border-radius: 8px;
      line-height: 1.6;
      color: #4A5565;
      font-size: 14px;
      white-space: pre-wrap;
      word-break: break-word;
      letter-spacing: -0.01em;
    }

    .segment-editor {
      :deep(.el-textarea) {
        .el-textarea__inner {
          background: #F3F3F5;
          border: 1px solid transparent;
          border-radius: 8px;
          padding: 12px;
          font-size: 14px;
          line-height: 1.6;
          color: #0A0A0A;
          letter-spacing: -0.01em;
          
          &:hover {
            border-color: rgba(231, 0, 11, 0.2);
          }
          
          &:focus {
            border-color: #E7000B;
            background: #FFFFFF;
          }
        }
      }
      
      .editor-actions {
        margin-top: 12px;
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        
        :deep(.el-button) {
          border-radius: 8px;
          font-weight: 500;
          letter-spacing: -0.01em;
          
          &.el-button--default {
            background: #F3F3F5;
            border-color: transparent;
            color: #0A0A0A;
            
            &:hover {
              background: #E5E5E7;
            }
          }
          
          &.el-button--primary {
            background: #E7000B;
            border-color: #E7000B;
            
            &:hover {
              background: #C90009;
              border-color: #C90009;
            }
          }
        }
      }
    }
  }

  .segment-keywords {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    
    :deep(.el-tag) {
      background: #EFF6FF;
      border: 1px solid transparent;
      border-radius: 8px;
      color: #1447E6;
      font-size: 12px;
      padding: 2px 8px;
      height: 24px;
      line-height: 20px;
    }
  }

  .empty-state {
    text-align: center;
    padding: 80px 20px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;

    p {
      font-size: 14px;
      color: #6A7282;
      margin: 0;
      letter-spacing: -0.01em;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  :deep(.el-button) {
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: -0.01em;
    
    &.el-button--default {
      background: #F3F3F5;
      border-color: transparent;
      color: #0A0A0A;
      
      &:hover {
        background: #E5E5E7;
      }
    }
    
    &.el-button--primary {
      background: #E7000B;
      border-color: #E7000B;
      
      &:hover {
        background: #C90009;
        border-color: #C90009;
      }
    }
  }
}

/* 添加分段对话框样式 */
:deep(.el-dialog__wrapper) {
  .el-dialog {
    border-radius: 14px;
    
    .el-form-item__label {
      font-size: 14px;
      font-weight: 500;
      color: #0A0A0A;
      letter-spacing: -0.01em;
    }
    
    .el-input__wrapper {
      background: #F3F3F5;
      border: 1px solid transparent;
      border-radius: 8px;
      box-shadow: none;
      
      &:hover {
        border-color: rgba(231, 0, 11, 0.2);
      }
      
      &.is-focus {
        border-color: #E7000B;
        background: #FFFFFF;
      }
    }
    
    .el-textarea__inner {
      background: #F3F3F5;
      border: 1px solid transparent;
      border-radius: 8px;
      box-shadow: none;
      
      &:hover {
        border-color: rgba(231, 0, 11, 0.2);
      }
      
      &:focus {
        border-color: #E7000B;
        background: #FFFFFF;
      }
    }
    
    .el-select {
      .el-input__wrapper {
        background: #F3F3F5;
      }
    }
  }
}
</style>

