import {
  addApprovalTemplate,
  deleteApprovalTemplate,
  getApprovalTemplateDetail,
  listApprovalTemplate,
  listApprovalTemplatePage,
  TEMPLATE_TYPE_BUILTIN,
  TEMPLATE_TYPE_CUSTOM,
  TEMPLATE_TYPE_OPTIONS,
  updateApprovalTemplate,
} from "@/api/officeProcessAutomation/approvalTemplate.js";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref } from "vue";
import {
  buildApprovalTemplateListParams,
  createEmptyTemplateForm,
  flowNodesSummary,
  mapBuiltinCardFromApi,
  mapTemplateFromApi,
  mapTemplateToApi,
  nodeSignModeLabel,
  templateTypeLabel,
  unwrapTemplateList,
  formatDisplayTime,
  unwrapTemplateDetail,
  validateTemplateForm,
} from "./approveTemplateConstants.js";
import { parseFormConfigToData } from "./formConfigUtils.js";

const LEGACY_STORAGE_KEY = "oa_approve_template_custom_v1";

function clearLegacyStorage() {
  try {
    localStorage.removeItem(LEGACY_STORAGE_KEY);
  } catch {
    /* ignore */
  }
}

export function useApproveTemplate() {
  clearLegacyStorage();

  const activeTab = ref("custom");
  const builtinTemplates = ref([]);
  const builtinLoading = ref(false);

  const searchForm = reactive({
    keyword: "",
    enabledOnly: false,
  });

  const tableLoading = ref(false);
  const page = reactive({ current: 1, size: 10, total: 0 });
  const tableData = ref([]);

  const formDialog = reactive({ visible: false, title: "", mode: "add" });
  const form = reactive(createEmptyTemplateForm());
  const formRef = ref();

  const detailDialog = reactive({ visible: false });
  const detailRow = ref({});
  const detailLoading = ref(false);

  const formRules = {
    templateName: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
    templateType: [{ required: true, message: "请选择模板类型", trigger: "change" }],
  };

  const tableColumn = ref([
    { label: "模板名称", prop: "templateName", minWidth: 140 },
    {
      label: "模板类型",
      prop: "templateType",
      width: 100,
      align: "center",
      formatData: (v) => templateTypeLabel(v),
    },
    { label: "说明", prop: "description", minWidth: 160, showOverflowTooltip: true },
    {
      label: "节点数",
      prop: "flowNodes",
      width: 80,
      align: "center",
      formatData: (v) => (Array.isArray(v) ? v.length : 0),
    },
    {
      label: "流程概要",
      prop: "flowNodes",
      minWidth: 220,
      showOverflowTooltip: true,
      formatData: (v) => flowNodesSummary(v),
    },
    {
      label: "状态",
      prop: "enabled",
      width: 90,
      align: "center",
      dataType: "tag",
      formatData: (v) => (v !== false ? "启用" : "停用"),
      formatType: (v) => (v !== false ? "success" : "info"),
    },
    {
      label: "创建时间",
      prop: "createdTime",
      width: 170,
      showOverflowTooltip: true,
      formatData: (v) => formatDisplayTime(v),
    },
    {
      label: "更新时间",
      prop: "updatedTime",
      width: 170,
      showOverflowTooltip: true,
      formatData: (v) => formatDisplayTime(v),
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 220,
      operation: [
        { name: "详情", type: "text", clickFun: (row) => openDetail(row) },
        { name: "编辑", type: "text", clickFun: (row) => openFormDialog("edit", row) },
        {
          name: "删除",
          type: "danger",
          link: true,
          clickFun: (row) => removeTemplate(row),
        },
      ],
    },
  ]);

  async function loadBuiltinTemplates() {
    builtinLoading.value = true;
    try {
      const res = await listApprovalTemplate(TEMPLATE_TYPE_BUILTIN);
      builtinTemplates.value = unwrapTemplateList(res).map(mapBuiltinCardFromApi);
    } catch {
      builtinTemplates.value = [];
      ElMessage.warning("系统常用审批加载失败");
    } finally {
      builtinLoading.value = false;
    }
  }

  async function fetchTemplateList() {
    tableLoading.value = true;
    try {
      const res = await listApprovalTemplatePage(
        buildApprovalTemplateListParams({ page, searchForm })
      );
      const data = res?.data || {};
      tableData.value = (data.records || []).map(mapTemplateFromApi);
      page.total = Number(data.total || 0);
    } catch {
      tableData.value = [];
      page.total = 0;
    } finally {
      tableLoading.value = false;
    }
  }

  function handleQuery() {
    page.current = 1;
    fetchTemplateList();
  }

  function resetSearch() {
    searchForm.keyword = "";
    searchForm.enabledOnly = false;
    handleQuery();
  }

  function pagination({ page: p, limit }) {
    page.current = p;
    page.size = limit;
    fetchTemplateList();
  }

  function resetForm(row) {
    const base = createEmptyTemplateForm();
    if (!row) {
      Object.assign(form, base);
      return;
    }
    Object.assign(form, {
      ...base,
      id: row.id,
      templateName: row.templateName || "",
      description: row.description || "",
      templateType: row.templateType ?? TEMPLATE_TYPE_CUSTOM,
      formConfig: row.formConfig || "",
      formConfigData: JSON.parse(
        JSON.stringify(row.formConfigData || parseFormConfigToData(row.formConfig))
      ),
      enabled: row.enabled !== false,
      flowNodes: JSON.parse(JSON.stringify(row.flowNodes || [base.flowNodes[0]])),
    });
  }

  function openFormDialog(mode, row) {
    formDialog.mode = mode;
    formDialog.title = mode === "add" ? "新建审批模板" : "编辑审批模板";
    resetForm(mode === "edit" ? row : null);
    formDialog.visible = true;
  }

  async function openDetail(row) {
    if (row?.id == null || row.id === "") {
      ElMessage.warning("无法查看详情：缺少模板 ID");
      return;
    }
    detailDialog.visible = true;
    detailLoading.value = true;
    detailRow.value = {};
    try {
      const res = await getApprovalTemplateDetail(row.id);
      detailRow.value = mapTemplateFromApi(unwrapTemplateDetail(res));
    } catch {
      detailDialog.visible = false;
    } finally {
      detailLoading.value = false;
    }
  }

  async function submitForm() {
    if (!formRef.value) return false;
    try {
      await formRef.value.validate();
    } catch {
      return false;
    }
    const validated = validateTemplateForm(form);
    if (!validated.ok) {
      return { message: validated.message };
    }
    if (formDialog.mode === "edit" && !form.id) {
      return { message: "缺少模板 ID，无法保存修改" };
    }
    const dto = mapTemplateToApi(form);
    try {
      if (formDialog.mode === "add") {
        await addApprovalTemplate(dto);
      } else {
        await updateApprovalTemplate(dto);
      }
    } catch {
      return false;
    }
    formDialog.visible = false;
    page.current = 1;
    await fetchTemplateList();
    if (dto.templateType === TEMPLATE_TYPE_BUILTIN) {
      await loadBuiltinTemplates();
    }
    return { ok: true };
  }

  async function removeTemplate(row) {
    if (row?.id == null || row.id === "") {
      ElMessage.warning("无法删除：缺少模板 ID");
      return;
    }
    const name = row.templateName || "未命名模板";
    try {
      await ElMessageBox.confirm(
        `确定要删除审批模板「${name}」吗？删除后不可恢复。`,
        "删除确认",
        {
          type: "warning",
          confirmButtonText: "确定删除",
          cancelButtonText: "取消",
          distinguishCancelAndClose: true,
          autofocus: false,
        }
      );
    } catch {
      return;
    }
    try {
      await deleteApprovalTemplate([row.id]);
      ElMessage.success("删除成功");
      await fetchTemplateList();
      if (row.templateType === TEMPLATE_TYPE_BUILTIN) {
        await loadBuiltinTemplates();
      }
    } catch {
      /* 错误由拦截器提示 */
    }
  }

  return {
    Search,
    TEMPLATE_TYPE_OPTIONS,
    templateTypeLabel,
    activeTab,
    builtinTemplates,
    builtinLoading,
    loadBuiltinTemplates,
    fetchTemplateList,
    nodeSignModeLabel,
    flowNodesSummary,
    searchForm,
    tableLoading,
    page,
    tableData,
    tableColumn,
    formDialog,
    form,
    formRef,
    formRules,
    detailDialog,
    detailRow,
    detailLoading,
    handleQuery,
    resetSearch,
    pagination,
    openFormDialog,
    openDetail,
    submitForm,
  };
}