<script setup lang="ts">
import { computed } from 'vue';

import { $t } from '@easyflow/locales';

import {
  ElCard,
  ElDescriptions,
  ElDescriptionsItem,
  ElEmpty,
  ElTable,
  ElTableColumn,
  ElTag,
} from 'element-plus';

interface PreviewItem {
  fileName: string;
  previewSessionId: string;
  totalChunks?: number;
}

interface CommitResultItem {
  chunkCount?: number;
  fileName?: string;
  reason?: string;
  success?: boolean;
}

const props = defineProps<{
  commitResults?: CommitResultItem[];
  loading?: boolean;
  previewItems?: PreviewItem[];
}>();

const summary = computed(() => {
  const results = props.commitResults ?? [];
  const successCount = results.filter((item) => item.success).length;
  const errorCount = results.length - successCount;
  let totalCount = 0;
  if (results.length > 0) {
    totalCount = results.length;
  } else if (props.previewItems && props.previewItems.length > 0) {
    totalCount = props.previewItems.length;
  }
  return {
    errorCount,
    successCount,
    totalCount,
  };
});
</script>

<template>
  <div class="confirm-shell">
    <ElCard shadow="never" class="confirm-card">
      <ElDescriptions :column="3" border>
        <ElDescriptionsItem
          :label="$t('documentCollection.faq.import.totalCount')"
        >
          {{ summary.totalCount }}
        </ElDescriptionsItem>
        <ElDescriptionsItem
          :label="$t('documentCollection.faq.import.successCount')"
        >
          {{ summary.successCount }}
        </ElDescriptionsItem>
        <ElDescriptionsItem
          :label="$t('documentCollection.faq.import.errorCount')"
        >
          {{ summary.errorCount }}
        </ElDescriptionsItem>
      </ElDescriptions>
    </ElCard>

    <ElEmpty
      v-if="!previewItems || previewItems.length === 0"
      :description="$t('documentCollection.importDoc.resultEmpty')"
    />

    <ElTable
      v-else
      :data="
        commitResults && commitResults.length > 0 ? commitResults : previewItems
      "
      size="large"
    >
      <ElTableColumn
        prop="fileName"
        :label="$t('documentCollection.importDoc.fileName')"
        min-width="260"
      />
      <ElTableColumn
        prop="chunkCount"
        :label="$t('documentCollection.importDoc.chunkCount')"
        width="120"
      >
        <template #default="{ row }">
          {{ row.chunkCount ?? row.totalChunks ?? '-' }}
        </template>
      </ElTableColumn>
      <ElTableColumn
        :label="$t('documentCollection.splitterDoc.uploadStatus')"
        width="140"
      >
        <template #default="{ row }">
          <ElTag v-if="row.success === true" type="success" effect="plain">
            {{ $t('documentCollection.splitterDoc.completed') }}
          </ElTag>
          <ElTag v-else-if="row.success === false" type="danger" effect="plain">
            {{ $t('documentCollection.importDoc.importFailed') }}
          </ElTag>
          <ElTag v-else type="info" effect="plain">
            {{
              loading
                ? $t('documentCollection.splitterDoc.uploading')
                : $t('documentCollection.splitterDoc.pendingUpload')
            }}
          </ElTag>
        </template>
      </ElTableColumn>
      <ElTableColumn
        prop="reason"
        :label="$t('documentCollection.faq.import.reason')"
        min-width="280"
      />
    </ElTable>
  </div>
</template>

<style scoped>
.confirm-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.confirm-card {
  border: 1px solid var(--el-border-color-light);
  border-radius: 16px;
}
</style>
