<script setup lang="ts">
import type { FormInstance } from 'element-plus';

import type { BotInfo } from '@easyflow/types';

import type {
  ActionButton,
  CardPrimaryAction,
} from '#/components/page/CardList.vue';

import { computed, markRaw, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import { EasyFlowFormModal } from '@easyflow/common-ui';
import { $t } from '@easyflow/locales';

import { Delete, Edit, Plus, Setting } from '@element-plus/icons-vue';
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElMessage,
  ElMessageBox,
} from 'element-plus';
import { tryit } from 'radash';

import { removeBotFromId } from '#/api';
import { api } from '#/api/request';
import defaultAvatar from '#/assets/ai/bot/defaultBotAvatar.png';
import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
import CardList from '#/components/page/CardList.vue';
import PageData from '#/components/page/PageData.vue';
import PageSide from '#/components/page/PageSide.vue';
import { useDictStore } from '#/store';

import Modal from './modal.vue';

interface FieldDefinition {
  // 字段名称
  prop: string;
  // 字段标签
  label: string;
  // 字段类型：input, number, select, radio, checkbox, switch, date, datetime
  type?: 'input' | 'number';
  // 是否必填
  required?: boolean;
  // 占位符
  placeholder?: string;
}

onMounted(() => {
  initDict();
  getSideList();
});

const router = useRouter();
const pageDataRef = ref();
const modalRef = ref<InstanceType<typeof Modal>>();
const dictStore = useDictStore();

// 操作按钮配置
const headerButtons = [
  {
    key: 'create',
    text: `${$t('button.create')}${$t('bot.chatAssistant')}`,
    icon: markRaw(Plus),
    type: 'primary',
    data: { action: 'create' },
    permission: '/api/v1/documentCollection/save',
  },
];
function resolveNavTitle(row: BotInfo) {
  return (row as Record<string, any>)?.title || row?.name || '';
}
const primaryAction: CardPrimaryAction = {
  icon: Setting,
  text: $t('button.setting'),
  onClick(row: BotInfo) {
    router.push({
      path: `/ai/bots/setting/${row.id}`,
      query: {
        pageKey: '/ai/bots',
        navTitle: resolveNavTitle(row),
      },
    });
  },
};

const actions: ActionButton[] = [
  {
    icon: Edit,
    text: $t('button.edit'),
    placement: 'inline',
    onClick(row: BotInfo) {
      modalRef.value?.open('edit', row);
    },
  },
  {
    icon: Delete,
    text: $t('button.delete'),
    tone: 'danger',
    permission: '/api/v1/bot/remove',
    placement: 'inline',
    onClick(row: BotInfo) {
      removeBot(row);
    },
  },
];

const removeBot = async (bot: BotInfo) => {
  const [action] = await tryit(ElMessageBox.confirm)(
    $t('message.deleteAlert'),
    $t('message.noticeTitle'),
    {
      confirmButtonText: $t('message.ok'),
      cancelButtonText: $t('message.cancel'),
      type: 'warning',
    },
  );

  if (!action) {
    const [err, res] = await tryit(removeBotFromId)(bot.id);

    if (!err && res.errorCode === 0) {
      ElMessage.success($t('message.deleteOkMessage'));
      pageDataRef.value.setQuery({});
    }
  }
};

const handleSearch = (params: string) => {
  pageDataRef.value.setQuery({ title: params, isQueryOr: true });
};
const handleButtonClick = () => {
  modalRef.value?.open('create');
};

const fieldDefinitions = ref<FieldDefinition[]>([
  {
    prop: 'categoryName',
    label: $t('aiWorkflowCategory.categoryName'),
    type: 'input',
    required: true,
    placeholder: $t('aiWorkflowCategory.categoryName'),
  },
  {
    prop: 'sortNo',
    label: $t('aiWorkflowCategory.sortNo'),
    type: 'number',
    required: false,
    placeholder: $t('aiWorkflowCategory.sortNo'),
  },
]);

const formData = ref<any>({});
const dialogVisible = ref(false);
const formRef = ref<FormInstance>();
const saveLoading = ref(false);
const sideList = ref<any[]>([]);
const controlBtns = [
  {
    icon: Edit,
    label: $t('button.edit'),
    onClick(row: any) {
      showControlDialog(row);
    },
  },
  {
    type: 'danger',
    icon: Delete,
    label: $t('button.delete'),
    onClick(row: any) {
      removeCategory(row);
    },
  },
];
const footerButton = {
  icon: Plus,
  label: $t('button.add'),
  onClick() {
    showControlDialog({});
  },
};

const formRules = computed(() => {
  const rules: Record<string, any[]> = {};
  fieldDefinitions.value.forEach((field) => {
    const fieldRules = [];
    if (field.required) {
      fieldRules.push({
        required: true,
        message: `${$t('message.required')}`,
        trigger: 'blur',
      });
    }
    if (fieldRules.length > 0) {
      rules[field.prop] = fieldRules;
    }
  });
  return rules;
});
function initDict() {
  dictStore.fetchDictionary('dataStatus');
}
function changeCategory(category: any) {
  pageDataRef.value.setQuery({ categoryId: category.id });
}
function showControlDialog(item: any) {
  formRef.value?.resetFields();
  formData.value = { ...item };
  dialogVisible.value = true;
}
function removeCategory(row: any) {
  ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
    confirmButtonText: $t('message.ok'),
    cancelButtonText: $t('message.cancel'),
    type: 'warning',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true;
        api
          .post('/api/v1/botCategory/remove', { id: row.id })
          .then((res) => {
            instance.confirmButtonLoading = false;
            if (res.errorCode === 0) {
              ElMessage.success(res.message);
              done();
              getSideList();
            }
          })
          .catch(() => {
            instance.confirmButtonLoading = false;
          });
      } else {
        done();
      }
    },
  }).catch(() => {});
}
function handleSubmit() {
  formRef.value?.validate((valid) => {
    if (valid) {
      saveLoading.value = true;
      const url = formData.value.id
        ? '/api/v1/botCategory/update'
        : '/api/v1/botCategory/save';
      api.post(url, formData.value).then((res) => {
        saveLoading.value = false;
        if (res.errorCode === 0) {
          ElMessage.success(res.message);
          dialogVisible.value = false;
          getSideList();
        }
      });
    }
  });
}
const getSideList = async () => {
  const [, res] = await tryit(api.get)('/api/v1/botCategory/list', {
    params: { sortKey: 'sortNo', sortType: 'asc' },
  });

  if (res && res.errorCode === 0) {
    sideList.value = [
      {
        id: '',
        categoryName: $t('common.allCategories'),
      },
      ...res.data,
    ];
  }
};
</script>

<template>
  <div class="flex h-full flex-col gap-6 p-6">
    <HeaderSearch
      :buttons="headerButtons"
      @search="handleSearch"
      @button-click="handleButtonClick"
    />
    <div class="flex flex-1 gap-6">
      <PageSide
        label-key="categoryName"
        value-key="id"
        :menus="sideList"
        :control-btns="controlBtns"
        :footer-button="footerButton"
        @change="changeCategory"
      />
      <div class="h-[calc(100vh-192px)] flex-1 overflow-auto">
        <PageData
          ref="pageDataRef"
          page-url="/api/v1/bot/page"
          :page-sizes="[12, 18, 24]"
          :page-size="12"
        >
          <template #default="{ pageList }">
            <CardList
              :default-icon="defaultAvatar"
              :data="pageList"
              :primary-action="primaryAction"
              :actions="actions"
            />
          </template>
        </PageData>
      </div>
    </div>
    <!-- 创建&编辑Bot弹窗 -->
    <Modal ref="modalRef" @success="pageDataRef.setQuery({})" />

    <EasyFlowFormModal
      v-model:open="dialogVisible"
      :closable="!saveLoading"
      :title="formData.id ? `${$t('button.edit')}` : `${$t('button.add')}`"
      :confirm-loading="saveLoading"
      :confirm-text="$t('button.confirm')"
      :submitting="saveLoading"
      @confirm="handleSubmit"
    >
      <ElForm
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-position="top"
        class="easyflow-modal-form easyflow-modal-form--compact"
      >
        <!-- 动态生成表单项 -->
        <ElFormItem
          v-for="field in fieldDefinitions"
          :key="field.prop"
          :label="field.label"
          :prop="field.prop"
        >
          <ElInput
            v-if="!field.type || field.type === 'input'"
            v-model="formData[field.prop]"
            :placeholder="field.placeholder"
          />
          <ElInputNumber
            v-else-if="field.type === 'number'"
            v-model="formData[field.prop]"
            :placeholder="field.placeholder"
            style="width: 100%"
          />
        </ElFormItem>
      </ElForm>
    </EasyFlowFormModal>
  </div>
</template>
