<script lang="ts" setup>
import { ref, onUnmounted } from 'vue';

import {
  Button,
  Modal,
  Progress,
  Radio,
  Select,
  Statistic,
  Steps,
  Table,
  Tag,
  Upload,
  message,
} from 'ant-design-vue';
import { InboxOutlined } from '@ant-design/icons-vue';

import {
  importPreview,
  importConfirm,
  getImportProgress,
} from '#/api/energy/hydrogen-record';
import type { EnergyHydrogenRecordApi } from '#/api/energy/hydrogen-record';
import { getStationConfigSimpleList } from '#/api/energy/station-config';

const emit = defineEmits(['success']);

const visible = ref(false);
const currentStep = ref(0);
const loading = ref(false);

// Step 1 data
const stationId = ref<number>();
const stationOptions = ref<{ label: string; value: number }[]>([]);
const fileList = ref<any[]>([]);

// Step 2 data
const previewData = ref<EnergyHydrogenRecordApi.ImportPreview>();
const duplicateStrategy = ref('skip');

// Step 3 data
const progressData = ref<EnergyHydrogenRecordApi.ImportProgress>({
  current: 0,
  total: 0,
  status: '',
});
const importResult = ref<Record<string, number>>();
let progressTimer: ReturnType<typeof setInterval> | null = null;

function open() {
  visible.value = true;
  currentStep.value = 0;
  stationId.value = undefined;
  fileList.value = [];
  previewData.value = undefined;
  duplicateStrategy.value = 'skip';
  progressData.value = { current: 0, total: 0, status: '' };
  importResult.value = undefined;
  loadStations();
}

async function loadStations() {
  const list = await getStationConfigSimpleList();
  stationOptions.value = list.map((s) => ({
    label: s.stationName,
    value: s.stationId,
  }));
}

// Step 1 -> Step 2: Upload and preview
async function handleNextStep() {
  if (!stationId.value) {
    message.warning('请选择加氢站');
    return;
  }
  if (fileList.value.length === 0) {
    message.warning('请上传文件');
    return;
  }

  loading.value = true;
  try {
    const file = fileList.value[0].originFileObj || fileList.value[0];
    const result = await importPreview(stationId.value, file);
    previewData.value = result;
    currentStep.value = 1;
  } catch (e: any) {
    message.error(e.message || '预览失败');
  } finally {
    loading.value = false;
  }
}

// Step 2 -> Step 3: Confirm import
async function handleConfirmImport() {
  if (!previewData.value) return;
  loading.value = true;
  try {
    importResult.value = await importConfirm(
      previewData.value.batchNo,
      duplicateStrategy.value,
    );
    currentStep.value = 2;
    startProgressPolling();
  } catch (e: any) {
    message.error(e.message || '导入失败');
  } finally {
    loading.value = false;
  }
}

function startProgressPolling() {
  if (!previewData.value) return;
  const batchNo = previewData.value.batchNo;
  progressTimer = setInterval(async () => {
    try {
      const progress = await getImportProgress(batchNo);
      progressData.value = progress;
      if (
        progress.status === 'completed' ||
        progress.status === 'failed' ||
        progress.status === 'not_found'
      ) {
        stopProgressPolling();
      }
    } catch {
      stopProgressPolling();
    }
  }, 2000);
}

function stopProgressPolling() {
  if (progressTimer) {
    clearInterval(progressTimer);
    progressTimer = null;
  }
}

function handleClose() {
  stopProgressPolling();
  visible.value = false;
  if (currentStep.value === 2) {
    emit('success');
  }
}

onUnmounted(() => stopProgressPolling());

// Preview table columns
const previewColumns = [
  { title: '行号', dataIndex: 'rowNum', width: 60 },
  { title: '车牌号', dataIndex: 'plateNumber', width: 100 },
  { title: '加氢日期', dataIndex: 'hydrogenDate', width: 100 },
  { title: '加氢量(KG)', dataIndex: 'hydrogenQuantity', width: 100 },
  { title: '单价', dataIndex: 'unitPrice', width: 80 },
  { title: '金额', dataIndex: 'amount', width: 80 },
  { title: '里程数', dataIndex: 'mileage', width: 80 },
];

// Handle file before upload (prevent auto-upload)
function beforeUpload(file: File) {
  fileList.value = [file];
  return false;
}

defineExpose({ open });
</script>

<template>
  <Modal
    v-model:open="visible"
    title="Excel 批量导入"
    :width="800"
    :footer="null"
    :mask-closable="false"
    @cancel="handleClose"
  >
    <Steps :current="currentStep" class="mb-6">
      <Steps.Step title="上传文件" />
      <Steps.Step title="预览确认" />
      <Steps.Step title="导入结果" />
    </Steps>

    <!-- Step 1: Upload -->
    <div v-if="currentStep === 0">
      <div class="mb-4">
        <label class="mb-2 block font-medium">选择加氢站</label>
        <Select
          v-model:value="stationId"
          :options="stationOptions"
          placeholder="请选择加氢站"
          class="w-full"
        />
      </div>
      <Upload.Dragger
        :file-list="fileList"
        :before-upload="beforeUpload"
        :max-count="1"
        accept=".xlsx,.xls"
      >
        <p class="ant-upload-drag-icon"><InboxOutlined /></p>
        <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
        <p class="ant-upload-hint">支持 .xlsx, .xls 格式</p>
      </Upload.Dragger>
      <div class="mt-4 flex justify-between">
        <a href="javascript:void(0)">下载导入模板</a>
        <Button type="primary" :loading="loading" @click="handleNextStep">
          下一步
        </Button>
      </div>
    </div>

    <!-- Step 2: Preview -->
    <div v-if="currentStep === 1 && previewData">
      <div class="mb-4 flex gap-4">
        <Statistic title="总行数" :value="previewData.totalCount" />
        <Statistic
          title="有效"
          :value="previewData.validCount"
          class="text-green-600"
        />
        <Statistic
          title="重复"
          :value="previewData.duplicateCount"
          class="text-orange-500"
        />
        <Statistic
          title="错误"
          :value="previewData.errorCount"
          class="text-red-500"
        />
      </div>
      <Table
        :data-source="[...previewData.records, ...previewData.duplicates]"
        :columns="previewColumns"
        :row-class-name="
          (record: any) => (record.isDuplicate ? 'bg-yellow-50' : '')
        "
        :pagination="false"
        :scroll="{ y: 300 }"
        size="small"
        row-key="rowNum"
      />
      <div v-if="previewData.errors?.length" class="mt-2">
        <Tag color="red">{{ previewData.errors.length }} 条错误记录</Tag>
      </div>
      <div class="mt-4">
        <Radio.Group v-model:value="duplicateStrategy">
          <Radio value="skip">跳过重复记录</Radio>
          <Radio value="overwrite">覆盖重复记录</Radio>
        </Radio.Group>
      </div>
      <div class="mt-4 flex justify-end gap-2">
        <Button @click="currentStep = 0">上一步</Button>
        <Button type="primary" :loading="loading" @click="handleConfirmImport">
          确认导入
        </Button>
      </div>
    </div>

    <!-- Step 3: Result -->
    <div v-if="currentStep === 2">
      <div class="py-8 text-center">
        <Progress
          :percent="
            progressData.total > 0
              ? Math.round((progressData.current / progressData.total) * 100)
              : 0
          "
          :status="
            progressData.status === 'failed'
              ? 'exception'
              : progressData.status === 'completed'
                ? 'success'
                : 'active'
          "
        />
        <div v-if="importResult" class="mt-4">
          <p>
            成功导入
            <span class="font-bold text-green-600">{{
              importResult.successCount
            }}</span>
            条
          </p>
          <p v-if="(importResult.failCount ?? 0) > 0">
            失败
            <span class="font-bold text-red-500">{{
              importResult.failCount
            }}</span>
            条
          </p>
        </div>
      </div>
      <div class="flex justify-end">
        <Button type="primary" @click="handleClose">关闭</Button>
      </div>
    </div>
  </Modal>
</template>
