<script setup lang="ts">
import { NButton, NCard, NFlex, NIcon, NText, NUpload, NUploadDragger } from 'naive-ui';
import type { UploadFileInfo } from 'naive-ui';
import { CloudUploadOutline } from '@vicons/ionicons5';

const emit = defineEmits<{
  next: [payload: { source: SourceType; fileList: UploadFileInfo[] }];
}>();

type SourceType = 'file' | 'notion' | 'web';

const selectedSource = defineModel<SourceType>('source', { default: 'file' });
const fileList = defineModel<UploadFileInfo[]>('fileList', { default: () => [] });

const ACCEPT = '.docx,.markdown,.md,.txt,.mdx,.xls,.xlsx,.properties,.csv,.pdf,.html,.htm,.vtt';

const sourceOptions: { key: SourceType; icon: string; label: string }[] = [
  { key: 'file', icon: '📄', label: '导入已有文本' },
  { key: 'notion', icon: '📓', label: '同步自 Notion 内容' },
  { key: 'web', icon: '🌐', label: '同步自 Web 站点' },
];

function handleNext() {
  emit('next', { source: selectedSource.value, fileList: fileList.value });
}
</script>

<template>
  <NFlex justify="center" align="flex-start">
    <NFlex vertical>
      <NText strong style="font-size: 15px">选择数据源</NText>

      <NFlex :gap="12">
        <NCard
          v-for="src in sourceOptions"
          :key="src.key"
          hoverable
          :bordered="true"
          style="width: 220px; cursor: pointer; transition: border-color 0.2s"
          :style="selectedSource === src.key ? 'border-color: var(--n-color-target);' : ''"
          @click="selectedSource = src.key"
        >
          <NFlex align="center" :gap="10">
            <span style="font-size: 22px">{{ src.icon }}</span>
            <NText>{{ src.label }}</NText>
          </NFlex>
        </NCard>
      </NFlex>

      <!-- 文件上传 -->
      <template v-if="selectedSource === 'file'">
        <NText strong style="font-size: 15px">上传文本文件</NText>
        <NUpload
          v-model:file-list="fileList"
          :accept="ACCEPT"
          :max="20"
          multiple
          directory-dnd
          style="max-width: 600px"
        >
          <NUploadDragger style="padding: 28px 24px">
            <NFlex vertical align="center" :gap="8">
              <NIcon size="28" depth="3"><CloudUploadOutline /></NIcon>
              <NText>
                拖拽文件或文件夹至此，或者
                <NText type="primary" style="cursor: pointer">选择文件</NText>
              </NText>
              <NText depth="3" style="font-size: 12px; text-align: center">
                已支持
                DOCX、MARKDOWN、TXT、MDX、XLS、PROPERTIES、CSV、PDF、HTML、XLSX、VTT、MD、HTM，每批最多
                5 个文件，每个文件不超过 15 MB，总数不超过 20 个文件。
              </NText>
            </NFlex>
          </NUploadDragger>
        </NUpload>
      </template>

      <!-- Notion / Web 占位 -->
      <template v-else>
        <NFlex
          justify="center"
          align="center"
          style="
            height: 160px;
            border: 1px dashed var(--n-border-color);
            border-radius: 8px;
            max-width: 600px;
          "
        >
          <NText depth="3">
            {{
              selectedSource === 'notion'
                ? 'Notion 同步配置（开发中）'
                : 'Web 站点同步配置（开发中）'
            }}
          </NText>
        </NFlex>
      </template>

      <NFlex justify="start" style="max-width: 600px">
        <NButton :disabled="selectedSource === 'file' && fileList.length === 0" @click="handleNext">
          下一步 →
        </NButton>
      </NFlex>
    </NFlex>
  </NFlex>
</template>
