<script setup>
import { ref, inject } from "vue";
import * as yup from "yup";
import "yup-phone-lite";
import useFormErrorMessage from "@/hooks/useFormErrorMessage";
import { postOperationCompany, updateOperationCompany } from "@/apis/operation";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const { openToast } = inject("app_toast");

const props = defineProps({
  formState: Object,
  getData: Function,
  openModal: Function, // 父層傳入：開/關 modal
});

const schema = yup.object({
  name: yup.string().required(t("button.required")),
  contact_person: yup.string().nullable(true),
  email: yup.string().email().nullable(true),
  phone: yup.string().nullable(true),
  city: yup.string().nullable(true),
  address: yup.string().nullable(true),
  tax_id_number: yup.string().nullable(true),
  remark: yup.string().nullable(true),
});

const { formErrorMsg, handleSubmit, handleErrorReset } =
  useFormErrorMessage(schema);

const loading = ref(false);
const MODAL_ID = "company_modal";

/** ====== 關閉 Modal：多重保險 ====== */
const closeModal = () => {
  // 1) 父層 boolean 控制
  if (typeof props.openModal === "function") {
    try {
      if (props.openModal.length >= 1) {
        // 偏好：openModal(false)
        props.openModal(false);
      } else {
        // 兼容：無參數 toggler → 先嘗試傳 false，不行再當作切換
        try {
          props.openModal(false);
        } catch {
          props.openModal();
        }
      }
      return;
    } catch (_) {}
  }

  // 2) 原生 <dialog> 或可 close() 的自製 Modal
  const el = document.getElementById(MODAL_ID);
  if (el?.close) {
    try {
      el.close();
      return;
    } catch (_) {}
  }

  // 3) 發送一個常見的關閉事件給自製 Modal（若有監聽）
  try {
    el?.dispatchEvent?.(new CustomEvent("close", { bubbles: true }));
  } catch (_) {}
};

/** ====== 開啟 Modal：呼叫父層 ====== */
const openModal = () => {
  if (typeof props.openModal === "function") {
    try {
      if (props.openModal.length >= 1) props.openModal(true);
      else props.openModal();
    } catch {
      // 忽略
    }
  }
};

const onCancel = () => {
  // 只做「關閉」；不要清空內容，避免你說的「取消→內容被清空但沒關」情況
  // 若要清錯誤訊息，可在下次打開前再清
  closeModal();
};

const onOk = async () => {
  try {
    loading.value = true;

    const value = await handleSubmit(schema, props.formState);

    let res;
    if (props.formState?.id) {
      // 若你的 API 需要 id 參數，改成：updateOperationCompany(props.formState.id, value)
      res = await updateOperationCompany(value);
    } else {
      res = await postOperationCompany(value);
    }

    if (res?.isSuccess) {
      await props.getData?.();
      props.openModal(false);
      // 成功後關閉
      closeModal();
      // 下次打開前再清錯誤
      handleErrorReset();
      props.openModal(false);
      openToast?.("success", t("common.success"), `#${MODAL_ID}`);
    } else {
      openToast?.("error", res?.msg ?? t("common.failed"), `#${MODAL_ID}`);
    }
  } catch (err) {
    openToast?.("error", err?.message ?? t("common.failed"), `#${MODAL_ID}`);
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <button class="btn btn-sm btn-add" @click.stop.prevent="openModal">
    <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
  </button>

  <Modal
    id="company_modal"
    :title="props.formState?.id ? t('button.edit') : t('button.add')"
    :onCancel="onCancel"
    width="710"
  >
    <template #modalContent>
      <form class="mt-5 w-full flex flex-wrap justify-between">
        <Input :value="props.formState" class="my-2" name="name">
          <template #topLeft>{{ $t("operation.name") }}</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{ formErrorMsg.name }}</span>
          </template>
        </Input>
        <Input :value="props.formState" class="my-2" name="contact_person">
          <template #topLeft>{{ $t("operation.contact_person") }}</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{
              formErrorMsg.contact_person
            }}</span>
          </template>
        </Input>
        <Input :value="props.formState" class="my-2" name="phone">
          <template #topLeft>{{ $t("operation.phone") }}</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{ formErrorMsg.phone }}</span>
          </template>
        </Input>
        <Input :value="props.formState" class="my-2" name="email">
          <template #topLeft>{{ $t("operation.email") }}</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{ formErrorMsg.email }}</span>
          </template>
        </Input>
        <Input :value="props.formState" class="my-2" name="city">
          <template #topLeft>{{ $t("operation.city") }}</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{ formErrorMsg.city }}</span>
          </template>
        </Input>
        <Input :value="props.formState" class="my-2" name="address">
          <template #topLeft>{{ $t("operation.address") }}</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{ formErrorMsg.address }}</span>
          </template>
        </Input>
        <Input :value="props.formState" class="my-2" name="tax_id_number">
          <template #topLeft>{{ $t("operation.tax_id_number") }}</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{
              formErrorMsg.tax_id_number
            }}</span>
          </template>
        </Input>
        <Input :value="props.formState" class="my-2" name="remark">
          <template #topLeft>{{ $t("operation.remark") }}</template>
          <template #bottomLeft>
            <span class="text-error text-base">{{ formErrorMsg.remark }}</span>
          </template>
        </Input>
      </form>
    </template>

    <template #modalAction>
      <button
        type="button"
        class="btn btn-outline-success mr-2"
        @click.prevent="onCancel"
        :disabled="loading"
      >
        {{ $t("button.cancel") }}
      </button>

      <button
        type="button"
        class="btn btn-outline-success"
        @click.stop.prevent="onOk"
        :disabled="loading"
      >
        <span v-if="loading" class="loading loading-spinner loading-xs mr-2" />
        {{ $t("button.submit") }}
      </button>
    </template>
  </Modal>
</template>

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