<template>
  <div class="box" style="min-width: 400px">
    <div class="field">
      <label class="label is-flex is-align-items-center mb-2" for="name">
        Tên danh sách <span class="has-text-danger ml-1">*</span>
      </label>
      <div class="control">
        <input
          ref="listNameRef"
          id="name"
          name="name"
          class="input"
          placeholder="Nhập tên danh sách (ví dụ: Khách hàng của tôi)"
          v-model="data.name"
          :disabled="loading"
          autofocus
        />
      </div>
    </div>

    <div class="field">
      <label class="label is-flex is-align-items-center mb-2" for="email">
        Địa chỉ email <span class="has-text-danger ml-1">*</span>
      </label>
      <div class="control">
        <textarea
          id="email"
          name="email"
          class="textarea p-2"
          rows="5"
          placeholder="email1@example.com; email2@example.com"
          v-model="data.email"
          :disabled="loading"
        />
      </div>
      <p class="help">Ngăn cách nhiều email bằng dấu chấm phẩy (;)</p>
    </div>

    <div class="is-flex is-justify-content-flex-end pt-2">
      <div class="buttons">
        <button v-if="isEditMode" class="button" :disabled="loading" @click="handleCreateNew">
          <span class="icon">
            <SvgIcon v-bind="{ name: 'add4.svg', type: 'gray', size: 16 }"></SvgIcon>
          </span>
          <span>Create New</span>
        </button>

        <button
          class="button is-dark"
          @click="handleSave"
          :disabled="loading || !data.name.trim() || !data.email.trim()"
        >
          <span v-if="loading">⏳</span>
          <span class="icon" v-else>
            <SvgIcon v-bind="{ name: isEditMode ? 'save.svg' : 'add4.svg', type: 'white', size: 16 }"></SvgIcon>
          </span>
          <span>{{
            loading
              ? isEditMode
                ? "Đang cập nhật..."
                : "Đang tạo..."
              : isEditMode
              ? "Cập nhật danh sách"
              : "Tạo danh sách"
          }}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from "vue";
import axios from "axios";
import { useNuxtApp } from "nuxt/app";
import { apiUrl, putApiUrl } from '@/components/marketing/email/Email.utils';

interface DataEmail {
  id?: number;
  email: string;
  name: string;
}

interface Props {
  emails: string;
  name?: string;
  id?: number;
}

const props = withDefaults(defineProps<Props>(), {
  name: "",
  emails: "",
  id: undefined,
});

const emit = defineEmits<{
  close: [];
  success: [];
}>();

const nuxtApp = useNuxtApp();
const $snackbar = nuxtApp.$snackbar as (message?: string) => void;

const data = ref<DataEmail>({
  id: props.id,
  email: props.emails,
  name: props.name || "",
});

const dataEmailList = ref<DataEmail[]>([]);

const loading = ref(false);
const listNameRef = ref<HTMLInputElement | null>(null);

const isEditMode = computed(() => {
  return !!(props.id && props.name && props.emails);
});

watch(
  () => [props.id, props.name, props.emails],
  () => {
    data.value = {
      email: props.emails,
      name: props.name || "",
    };
  }
);

const handleSave = async () => {
  if (!data.value.name.trim()) {
    $snackbar("Lỗi xác thực: Vui lòng nhập tên danh sách");
    return;
  }

  if (!data.value.email.trim()) {
    $snackbar("Lỗi xác thực: Vui lòng nhập địa chỉ email");
    return;
  }

  loading.value = true;
  const apiUrlPut = `${putApiUrl}/Email_List/`;
  const apiUrlPost = `${apiUrl}/Email_List/`;

  const isUpdate = isEditMode.value && props.id;

  try {
    dataEmailList.value = await axios.get(apiUrlPost).then((res) => res.data.rows);
    let response;

    if (dataEmailList.value.some((item) => item.name === data.value.name.trim() && item.id !== props.id)) {
      $snackbar(`Lỗi: Tên danh sách "${data.value.name.trim()}" đã tồn tại. Vui lòng chọn tên khác.`);
      loading.value = false;
      return;
    }

    if (isUpdate) {
      response = await axios.put(`${apiUrlPut}${props.id}`, {
        name: data.value.name.trim(),
        email: data.value.email,
      });
    } else {
      response = await axios.post(apiUrlPost, {
        name: data.value.name.trim(),
        email: data.value.email,
      });
    }

    if (response.status === 200 || response.status === 201 || response.status === 204) {
      $snackbar(isUpdate ? `"${data.value.name}" cập nhật thành công!` : `"${data.value.name}" tạo thành công!`);

      loading.value = false;
      emit("close");
      emit("success");
    } else {
      throw new Error(`Failed to ${isUpdate ? "update" : "create"} the Gmail list`);
    }
  } catch (error) {
    console.error(`Error ${isUpdate ? "cập nhật" : "tạo"} danh sách:`, error);

    const errorMessage = axios.isAxiosError(error)
      ? error.response?.data?.message || `Lỗi khi ${isUpdate ? "cập nhật" : "tạo"} danh sách`
      : "Đã xảy ra lỗi";

    $snackbar(errorMessage);
    loading.value = false;
  }
};

const handleCreateNew = async () => {
  loading.value = true;
  const emailListUrl = `${apiUrl}/Email_List/`;

  try {
    const response = await axios.post(emailListUrl, {
      name: data.value.name.trim(),
      email: data.value.email,
    });
    if (response.status === 200 || response.status === 201) {
      $snackbar("Tạo danh sách email mới thành công!");
    }
  } catch (error) {
    console.error("Lỗi khi tạo danh sách email mới:", error);
    $snackbar("Tạo danh sách email mới thất bại");
  } finally {
    loading.value = false;
  }

  data.value = { email: "", name: "" };
  await nextTick();
  listNameRef.value?.focus();

  emit("close");
  emit("success");
};
</script>
