<template>
  <div
    class="field"
    style="min-width: 360px"
  >
    <label
      class="label is-flex is-align-items-center fsb-18 mb-2"
      for="name"
    >
      Template name <span class="has-text-danger ml-1">*</span>
    </label>
    <div class="control">
      <input
        ref="listNameRef"
        id="name"
        name="name"
        class="input"
        placeholder="Enter template name (e.g., My Template)"
        v-model="templateName"
        :disabled="loading"
        autofocus
      />
    </div>
  </div>
  <div class="is-flex is-justify-content-flex-end pt-2">
    <div class="buttons">
      <button
        class="button is-success"
        @click="handleSave"
        :disabled="loading || !templateName.trim()"
      >
        <span
          class="icon"
          v-if="loading"
        >
          <SvgIcon v-bind="{ name: 'loading.svg', type: 'white', size: 16 }"></SvgIcon>
        </span>
        <span
          class="icon"
          v-else-if="isEditMode"
        >
          <SvgIcon v-bind="{ name: 'save.svg', type: 'white', size: 16 }"></SvgIcon>
        </span>
        <span
          class="icon"
          v-else
        >
          <SvgIcon v-bind="{ name: 'add4.svg', type: 'white', size: 16 }"></SvgIcon>
        </span>
        <span>{{
          loading ? (isEditMode ? "Updating..." : "Creating...") : isEditMode ? "Update Template" : "Create Template"
        }}</span>
      </button>
      <button
        v-if="isEditMode"
        class="button is-success"
        :disabled="loadingCreate"
        @click="handleCreateNew"
      >
        <span
          class="icon"
          v-if="loadingCreate"
        >
          <SvgIcon v-bind="{ name: 'loading.svg', type: 'white', size: 16 }" />
        </span>
        <span
          class="icon"
          v-else
        >
          <SvgIcon v-bind="{ name: 'add4.svg', type: 'white', size: 16 }"></SvgIcon>
        </span>
        <span>{{ loadingCreate ? "Creating..." : "Create" }}</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { useNuxtApp } from "nuxt/app";

interface TemplateContent {
  receiver: string;
  subject: string;
  content: string;
  imageUrl: string | null;
  linkUrl: string[];
  textLinkUrl: string[];
  keyword: string[];
  html: string;
}

interface DataTemplate {
  id?: number;
  name: string;
  content: TemplateContent;
}

interface Props {
  data: DataTemplate;
  editMode?: boolean;
  onClose?: () => void;
  onSuccess?: () => void;
}

const props = withDefaults(defineProps<Props>(), {
  data: () => ({
    name: "",
    content: {
      receiver: "",
      subject: "",
      content: "",
      imageUrl: null,
      linkUrl: [""],
      textLinkUrl: [""],
      keyword: [""],
      html: "",
    },
  }),
  editMode: false,
  onSuccess: () => {},
});

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

const nuxtApp = useNuxtApp();
const { $snackbar, $insertapi, $patchapi } = nuxtApp;

const templateName = ref("");

const loading = ref(false);
const loadingCreate = ref(false);
const isEditMode = ref(props.editMode || false);
const listNameRef = ref<HTMLInputElement | null>(null);
const dataTemplate = ref<DataTemplate[]>([]);

onMounted(() => {
  templateName.value = props.data.name || "";
});

watch(
  () => props.data.name,
  (newName) => {
    templateName.value = newName || "";
  },
);

watch(
  () => props.editMode,
  (newEditMode) => {
    isEditMode.value = newEditMode || false;
  },
);

const handleSave = async () => {
  if (!templateName.value.trim()) {
    $snackbar("Validation Error: Please enter a template name");
    return;
  }

  loading.value = true;

  try {
    let response;
    if (isEditMode.value) {
      const patchData = {
        ...props.data,
        name: templateName.value,
      };
      response = await $patchapi("Email_Template", patchData);
    } else {
      const insertData = {
        ...props.data,
        name: templateName.value,
      };
      response = await $insertapi("Email_Template", insertData);
    }

    if (response && response !== "error") {
      $snackbar(`Template ${isEditMode.value ? "updated" : "created"} successfully`);
      if (props.onClose) props.onClose();
      if (props.onSuccess) props.onSuccess();
      emit("close");
      emit("success");
    } else {
      throw new Error("Failed to save template");
    }
  } catch (error) {
    console.error("Error saving template:", error);
    const errorMessage = error.message || "Failed to save template.";
    $snackbar(errorMessage);
  } finally {
    loading.value = false;
  }
};

const handleCreateNew = async () => {
  const postTemplateUrl = `${apiUrl}/Email_Template/`;
  try {
    loadingCreate.value = true;
    const newTemplateData = {
      ...props.data,
      name: templateName.value,
    };
    const response = await axios.post(postTemplateUrl, newTemplateData);
    if (response.status === 201 || response.status === 200) {
      $snackbar("Template created successfully");
      if (props.onClose) props.onClose();
      emit("close");
      emit("success");
      templateName.value = "";
    }
  } catch (error) {
    console.error(error);
    $snackbar("Error: Failed to create new template");
  } finally {
    loadingCreate.value = false;
  }
};
</script>

<style scoped>
.rotating {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
