<script setup lang="ts">
import { retentionDaysApi, snapStatusApi, type LineAlarms, type LineDevices, type Station, type VersionInfo } from '@/apis';
import { ThemeSwitch } from '@/components';
import { NDM_ALARM_STORE_ID, NDM_DEVICE_STORE_ID, NDM_STATION_STORE_ID } from '@/constants';
import { usePollingStore, useSettingStore } from '@/stores';
import { downloadByData, getAppEnvConfig, parseErrorFeedback, sleep } from '@/utils';
import { useMutation } from '@tanstack/vue-query';
import { useEventListener } from '@vueuse/core';
import axios, { isCancel } from 'axios';
import destr from 'destr';
import { isFunction } from 'es-toolkit';
import localforage from 'localforage';
import { DownloadIcon, Trash2Icon, UploadIcon } from 'lucide-vue-next';
import { NButton, NButtonGroup, NDivider, NDrawer, NDrawerContent, NDropdown, NFlex, NFormItem, NIcon, NInput, NInputNumber, NModal, NSwitch, NText, type DropdownOption } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { ref, watch } from 'vue';

const show = defineModel<boolean>('show', { default: false });

const settingsStore = useSettingStore();
const { menuCollpased, stationGridCols, debugModeEnabled, offlineDev } = storeToRefs(settingsStore);

const versionInfo = ref<VersionInfo>({ version: '', buildTime: '' });

const { mutate: getVersionInfo } = useMutation({
  mutationFn: async () => {
    const { data } = await axios.get<VersionInfo>(`/manifest.json?t=${Date.now()}`);
    return data;
  },
  onSuccess: (data) => {
    versionInfo.value = data;
  },
  onError: (error) => {
    console.error(error);
    const errorFeedback = parseErrorFeedback(error);
    window.$message.error(errorFeedback);
  },
});

const abortControllers = ref({
  retentionDays: new AbortController(),
  snapStatus: new AbortController(),
});

const retentionDays = ref(0);
const { mutate: getRetentionDays, isPending: retentionDaysLoading } = useMutation({
  mutationFn: async () => {
    abortControllers.value.retentionDays.abort();
    abortControllers.value.retentionDays = new AbortController();
    const signal = abortControllers.value.retentionDays.signal;
    const days = await retentionDaysApi('get', { signal });
    return days;
  },
  onSuccess: (days) => {
    retentionDays.value = days;
  },
  onError: (error) => {
    if (isCancel(error)) return;
    console.error(error);
    const errorFeedback = parseErrorFeedback(error);
    window.$message.error(errorFeedback);
  },
});
const { mutate: saveRetentionDays, isPending: retentionDaysSaving } = useMutation({
  mutationFn: async () => {
    abortControllers.value.retentionDays.abort();
    abortControllers.value.retentionDays = new AbortController();
    const signal = abortControllers.value.retentionDays.signal;
    await retentionDaysApi('post', { days: retentionDays.value, signal });
  },
  onError: (error) => {
    if (isCancel(error)) return;
    console.error(error);
    const errorFeedback = parseErrorFeedback(error);
    window.$message.error(errorFeedback);
    // 修改失败，刷新 retentionDays
    getRetentionDays();
  },
});

const snapStatus = ref(false);
const { mutate: getSnapStatus, isPending: snapStatusLoading } = useMutation({
  mutationFn: async () => {
    abortControllers.value.snapStatus.abort();
    abortControllers.value.snapStatus = new AbortController();
    const signal = abortControllers.value.snapStatus.signal;
    const status = await snapStatusApi('get', { signal });
    return status;
  },
  onSuccess: (status) => {
    snapStatus.value = status;
  },
  onError: (error) => {
    if (isCancel(error)) return;
    console.error(error);
    const errorFeedback = parseErrorFeedback(error);
    window.$message.error(errorFeedback);
  },
});
const { mutate: saveSnapStatus, isPending: snapStatusSaving } = useMutation({
  mutationFn: async () => {
    abortControllers.value.snapStatus.abort();
    abortControllers.value.snapStatus = new AbortController();
    const signal = abortControllers.value.snapStatus.signal;
    await snapStatusApi('post', { doSnap: snapStatus.value, signal });
  },
  onError: (error) => {
    if (isCancel(error)) return;
    console.error(error);
    const errorFeedback = parseErrorFeedback(error);
    window.$message.error(errorFeedback);
    // 修改失败，刷新 snapStatus
    getSnapStatus();
  },
});

const showDebugCodeModal = ref(false);
const debugCode = ref('');
const enableDebugMode = () => {
  const { debugCode: expectedDebugCode } = getAppEnvConfig();
  if (debugCode.value !== expectedDebugCode) {
    window.$message.error('调试授权码错误');
    return;
  }
  showDebugCodeModal.value = false;
  settingsStore.enableDebugMode();
};
const disableDebugMode = () => {
  showDebugCodeModal.value = false;
  settingsStore.disableDebugMode();
};
useEventListener('keydown', (event) => {
  const { ctrlKey, altKey, code } = event;
  if (ctrlKey && altKey && code === 'KeyD') {
    showDebugCodeModal.value = true;
  }
});

const expectToShowDebugCodeInput = ref(false);
const onModalAfterEnter = () => {
  expectToShowDebugCodeInput.value = !debugModeEnabled.value;
};
const onModalAfterLeave = () => {
  expectToShowDebugCodeInput.value = false;
  debugCode.value = '';
};

const pollingStore = usePollingStore();
const { pollingEnabled } = storeToRefs(pollingStore);
const onPollingEnabledUpdate = (enabled: boolean) => {
  if (enabled) {
    pollingStore.startPolling();
  } else {
    pollingStore.stopPolling();
  }
};

type IndexedDbStoreId = typeof NDM_STATION_STORE_ID | typeof NDM_DEVICE_STORE_ID | typeof NDM_ALARM_STORE_ID;
type IndexedDbStoreStates = {
  [NDM_STATION_STORE_ID]: { stations: Station[] };
  [NDM_DEVICE_STORE_ID]: { lineDevices: LineDevices };
  [NDM_ALARM_STORE_ID]: { lineAlarms: LineAlarms; unreadLineAlarms: LineAlarms };
};
const exportFromIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, options?: { errorMsg?: string }) => {
  const { errorMsg } = options ?? {};
  const data = await localforage.getItem<IndexedDbStoreStates[K]>(storeId);
  if (!data) {
    window.$message.error(errorMsg ?? '导出数据失败');
    return;
  }
  downloadByData(JSON.stringify(data, null, 2), `${storeId}.json`);
};
const importToIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, options?: { successMsg?: string; errorMsg?: string }) => {
  const { successMsg, errorMsg } = options ?? {};
  pollingStore.stopPolling();
  offlineDev.value = true;
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.accept = '.json';
  fileInput.click();
  fileInput.onchange = async () => {
    const file = fileInput.files?.[0];
    if (!file) {
      window.$message.error(errorMsg ?? '导入数据失败');
      return;
    }
    const reader = new FileReader();
    reader.readAsText(file, 'utf-8');
    reader.onload = async () => {
      const data = destr<IndexedDbStoreStates[K]>(reader.result as string);
      await localforage.setItem(storeId, data);
      window.$message.success(`${successMsg ?? '导入数据成功'}，即将刷新页面`);
      await sleep(2000);
      window.location.reload();
    };
  };
};
const deleteFromIndexedDB = async (storeId: IndexedDbStoreId) => {
  pollingStore.stopPolling();
  offlineDev.value = true;
  await localforage.removeItem(storeId).catch((error) => {
    window.$message.error(`${error}`);
    return;
  });
  window.$message.success('删除成功，即将刷新页面');
  await sleep(2000);
  window.location.reload();
};

const exportDropdownOptions: DropdownOption[] = [
  {
    label: '导出车站',
    key: 'exportStations',
    onSelect: () => exportFromIndexedDB(NDM_STATION_STORE_ID),
  },
  {
    label: '导出设备',
    key: 'exportDevices',
    onSelect: () => exportFromIndexedDB(NDM_DEVICE_STORE_ID),
  },
  {
    label: '导出告警',
    key: 'exportAlarms',
    onSelect: () => exportFromIndexedDB(NDM_ALARM_STORE_ID),
  },
];
const importDropdownOptions: DropdownOption[] = [
  {
    label: '导入车站',
    key: 'importStations',
    onSelect: () => importToIndexedDB(NDM_STATION_STORE_ID),
  },
  {
    label: '导入设备',
    key: 'importDevices',
    onSelect: () => importToIndexedDB(NDM_DEVICE_STORE_ID),
  },
  {
    label: '导入告警',
    key: 'importAlarms',
    onSelect: () => importToIndexedDB(NDM_ALARM_STORE_ID),
  },
];
const deleteDropdownOptions: DropdownOption[] = [
  {
    label: '删除车站',
    key: 'deleteStations',
    onSelect: () => deleteFromIndexedDB(NDM_STATION_STORE_ID),
  },
  {
    label: '删除设备',
    key: 'deleteDevices',
    onSelect: () => deleteFromIndexedDB(NDM_DEVICE_STORE_ID),
  },
  {
    label: '删除告警',
    key: 'deleteAlarms',
    onSelect: () => deleteFromIndexedDB(NDM_ALARM_STORE_ID),
  },
];

const onSelectDropdownOption = (key: string, option: DropdownOption) => {
  const onSelect = option['onSelect'];
  if (isFunction(onSelect)) {
    onSelect();
  }
};

watch([offlineDev, show], ([offline, entered]) => {
  if (!offline) {
    if (entered) {
      getRetentionDays();
      getSnapStatus();
    } else {
      abortControllers.value.retentionDays.abort();
      abortControllers.value.snapStatus.abort();
    }
  }
});
const onDrawerAfterEnter = () => {
  getVersionInfo();
};
const onDrawerAfterLeave = () => {
  abortControllers.value.retentionDays.abort();
  abortControllers.value.snapStatus.abort();
};
</script>

<template>
  <NDrawer v-model:show="show" :width="560" :auto-focus="false" @after-enter="onDrawerAfterEnter" @after-leave="onDrawerAfterLeave">
    <NDrawerContent closable title="系统设置" :native-scrollbar="false">
      <NFlex vertical>
        <NDivider>主题</NDivider>
        <NFormItem label="深色模式" label-placement="left">
          <ThemeSwitch size="small" />
        </NFormItem>

        <NDivider>布局</NDivider>
        <NFormItem label="折叠菜单" label-placement="left">
          <NSwitch size="small" v-model:value="menuCollpased" />
        </NFormItem>
        <NFormItem label="车站列数" label-placement="left">
          <NInputNumber v-model:value="stationGridCols" :min="1" :max="10" />
        </NFormItem>

        <NDivider>告警</NDivider>
        <NFormItem label="告警画面截图保留天数" label-placement="left">
          <NFlex justify="space-between" align="center" style="width: 100%">
            <NInputNumber v-model:value="retentionDays" :min="1" :max="15" />
            <NButtonGroup>
              <NButton secondary size="small" :disabled="retentionDaysSaving" :loading="retentionDaysLoading" @click="() => getRetentionDays()">刷新</NButton>
              <NButton secondary size="small" :disabled="retentionDaysLoading" :loading="retentionDaysSaving" @click="() => saveRetentionDays()">保存</NButton>
            </NButtonGroup>
          </NFlex>
        </NFormItem>
        <NFormItem label="自动获取告警画面截图" label-placement="left">
          <NFlex justify="space-between" align="center" style="width: 100%">
            <NSwitch size="small" v-model:value="snapStatus" />
            <NButtonGroup>
              <NButton secondary size="small" :disabled="snapStatusSaving" :loading="snapStatusLoading" @click="() => getSnapStatus()">刷新</NButton>
              <NButton secondary size="small" :disabled="snapStatusLoading" :loading="snapStatusSaving" @click="() => saveSnapStatus()">保存</NButton>
            </NButtonGroup>
          </NFlex>
        </NFormItem>

        <template v-if="debugModeEnabled">
          <NDivider title-placement="center">调试</NDivider>
          <NFormItem label="启用轮询" label-placement="left">
            <NSwitch size="small" :value="pollingEnabled" @update:value="onPollingEnabledUpdate" />
          </NFormItem>
          <NFormItem label="离线开发" label-placement="left">
            <NSwitch size="small" v-model:value="offlineDev" />
          </NFormItem>
          <NFormItem label="本地数据库" label-placement="left">
            <NFlex>
              <NDropdown trigger="click" :options="exportDropdownOptions" @select="onSelectDropdownOption">
                <NButton secondary size="small">
                  <template #icon>
                    <NIcon :component="DownloadIcon" />
                  </template>
                  <template #default>导出</template>
                </NButton>
              </NDropdown>
              <NDropdown trigger="click" :options="importDropdownOptions" @select="onSelectDropdownOption">
                <NButton secondary size="small">
                  <template #icon>
                    <NIcon :component="UploadIcon" />
                  </template>
                  <template #default>导入</template>
                </NButton>
              </NDropdown>
              <NDropdown trigger="click" :options="deleteDropdownOptions" @select="onSelectDropdownOption">
                <NButton secondary size="small">
                  <template #icon>
                    <NIcon :component="Trash2Icon" />
                  </template>
                  <template #default>删除</template>
                </NButton>
              </NDropdown>
            </NFlex>
          </NFormItem>
        </template>
      </NFlex>
      <template #footer>
        <NFlex vertical justify="flex-end" align="center" style="width: 100%; font-size: 12px; gap: 4px">
          <NText :depth="3">平台版本: {{ versionInfo.version }} ({{ versionInfo.buildTime }})</NText>
        </NFlex>
      </template>
    </NDrawerContent>
  </NDrawer>

  <NModal v-model:show="showDebugCodeModal" preset="dialog" type="info" @after-enter="onModalAfterEnter" @after-leave="onModalAfterLeave">
    <template #header>
      <NText v-if="!debugModeEnabled">请输入调试码</NText>
      <NText v-else>确认关闭调试模式</NText>
    </template>
    <template #default>
      <NInput v-if="expectToShowDebugCodeInput" v-model:value="debugCode" placeholder="输入调试码" @keyup.enter="enableDebugMode" />
    </template>
    <template #action>
      <NButton @click="showDebugCodeModal = false">取消</NButton>
      <NButton v-if="!debugModeEnabled" type="primary" @click="enableDebugMode">启用</NButton>
      <NButton v-else type="primary" @click="disableDebugMode">确认</NButton>
    </template>
  </NModal>
</template>

<style scoped lang="scss"></style>
