<script setup lang="ts">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NButton, NFlex, NStep, NSteps, useMessage } from 'naive-ui';
import type { UploadFileInfo } from 'naive-ui';

import SourceStep from './steps/SourceStep.vue';
import SegmentConfig from './steps/SegmentConfig.vue';
import SegmentPreview from './steps/SegmentPreview.vue';
import type { SegmentConfig as SegmentConfigType } from './steps/SegmentConfig.vue';
import Page from '../../../../../../packages/effects/common-ui/src/components/page/page.vue';

const route = useRoute();
const router = useRouter();
const message = useMessage();

const datasetId = route.params.id as string;
const datasetName = (route.query.name as string) || '知识库';

const currentStep = ref(1);

// Step 1 state (lifted for potential further use)
const selectedSource = ref<'file' | 'notion' | 'web'>('file');
const fileList = ref<UploadFileInfo[]>([]);

function handleSourceNext(payload: {
  source: typeof selectedSource.value;
  fileList: UploadFileInfo[];
}) {
  selectedSource.value = payload.source;
  fileList.value = payload.fileList;
  currentStep.value = 2;
}

function handlePrev() {
  currentStep.value = 1;
}

function handleSave(config: SegmentConfigType) {
  console.log('save config', config);
  message.success('保存并处理中...');
}

function goBack() {
  router.push({
    name: 'Documents',
    params: { id: datasetId },
    query: { name: datasetName },
  });
}
</script>

<template>
  <Page auto-content-height>
    <NFlex vertical style="width: 100%; height: 100%">
      <!-- 顶部导航栏 -->
      <NFlex
        align="center"
        style="
          padding: 0 24px;
          height: 56px;
          border-bottom: 1px solid var(--n-border-color);
          flex-shrink: 0;
        "
      >
        <NButton text @click="goBack">← {{ datasetName }}</NButton>
        <NSteps
          :current="currentStep"
          size="small"
          style="flex: 1; margin: 0 auto; max-width: 560px"
        >
          <NStep title="选择数据源" />
          <NStep title="文本分段与清洗" />
          <NStep title="处理并完成" />
        </NSteps>
      </NFlex>

      <!-- Step 1: 选择数据源 -->
      <SourceStep
        v-if="currentStep === 1"
        v-model:source="selectedSource"
        v-model:file-list="fileList"
        @next="handleSourceNext"
        style="flex: 1; overflow-y: auto"
      />

      <!-- Step 2: 文本分段与清洗 -->
      <NFlex v-else-if="currentStep === 2" style="flex: 1; min-height: 0; overflow: hidden">
        <SegmentConfig
          @prev="handlePrev"
          @save="handleSave"
          style="width: 50%; height: 100%; overflow-y: auto"
        />
        <SegmentPreview style="width: 50%; height: 100%; overflow-y: auto" />
      </NFlex>
    </NFlex>
  </Page>
</template>
