<template>
  <div>
    <LayoutsBreadcrumb />
    <rs-card class="mb-5">
      <template #header>
        <div class="flex">
          <span title="Info"
            ><Icon class="mr-2 flex justify-center" name="ic:outline-info"></Icon
          ></span>
          Info
        </div>
      </template>
      <template #body>
        <p class="mb-4">
          Manage your notification templates here. You can create, edit, preview, and
          manage versions of templates for various channels like Email, SMS, Push, and
          In-App messages.
        </p>
      </template>
    </rs-card>

    <rs-card>
      <template #header>
        <h2 class="text-xl font-semibold">Notification Templates</h2>
      </template>
      <template #body>
        <div class="pt-2">
          <rs-tab fill>
            <rs-tab-item title="All Templates">
              <div class="flex justify-between items-center mb-4">
                <div class="flex items-center gap-4 flex-wrap">
                  <FormKit
                    type="select"
                    name="category"
                    placeholder="Filter by Category"
                    :options="categories"
                    v-model="filters.category"
                    @input="filterByCategory"
                    :disabled="isLoading"
                    input-class="formkit-input appearance-none bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md py-2 px-3 text-base leading-normal focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 disabled:opacity-50"
                    outer-class="flex-grow sm:flex-grow-0 min-w-[180px] mb-0"
                  />
                  <FormKit
                    type="select"
                    name="status"
                    placeholder="Filter by Status"
                    :options="statusOptions"
                    v-model="filters.status"
                    @input="filterByStatus"
                    :disabled="isLoading"
                    input-class="formkit-input appearance-none bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md py-2 px-3 text-base leading-normal focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 disabled:opacity-50"
                    outer-class="flex-grow sm:flex-grow-0 min-w-[180px] mb-0"
                  />
                  <FormKit
                    type="select"
                    name="channel"
                    placeholder="Filter by Channel"
                    :options="channels"
                    v-model="filters.channel"
                    @input="filterByChannel"
                    :disabled="isLoading"
                    input-class="formkit-input appearance-none bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md py-2 px-3 text-base leading-normal focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400 disabled:opacity-50"
                    outer-class="flex-grow sm:flex-grow-0 min-w-[180px] mb-0"
                  />
                </div>
                <rs-button
                  @click="$router.push('/notification/templates/create_template')"
                  class="ml-auto"
                >
                  <Icon name="material-symbols:add" class="mr-1"></Icon>
                  Create Template
                </rs-button>
              </div>
              <!-- Loading State -->
              <div v-if="isLoading" class="text-center py-12">
                <div class="flex justify-center mb-4">
                  <Icon
                    name="ic:outline-refresh"
                    size="2rem"
                    class="text-primary animate-spin"
                  />
                </div>
                <p class="text-gray-600 dark:text-gray-400">Loading templates...</p>
              </div>

              <!-- Empty State -->
              <div
                v-else-if="!templateList || templateList.length === 0"
                class="text-center py-12"
              >
                <div class="flex justify-center mb-4">
                  <Icon
                    name="material-symbols:inbox-outline"
                    size="3rem"
                    class="text-gray-400"
                  />
                </div>
                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
                  No templates found
                </h3>
                <p class="text-gray-600 dark:text-gray-400 mb-4">
                  {{
                    filters.category ||
                    filters.channel ||
                    filters.status ||
                    filters.search
                      ? "No templates match your current filters."
                      : "Get started by creating your first notification template."
                  }}
                </p>
                <rs-button
                  @click="$router.push('/notification/templates/create_template')"
                >
                  <Icon name="material-symbols:add" class="mr-1"></Icon>
                  Create Your First Template
                </rs-button>
              </div>

              <!-- Templates Table -->
              <rs-table
                v-else
                :data="templateList"
                :columns="columns"
                :options="{
                  variant: 'default',
                  striped: true,
                  borderless: true,
                  class: 'align-middle',
                }"
                advanced
              >
                <template v-slot:channel="{ value }">
                  <div
                    class="flex items-center justify-start gap-1 flex-wrap"
                    style="max-width: 100px"
                  >
                    <template v-if="value.channel && value.channel.length">
                      <template v-for="channel_item in value.channel" :key="channel_item">
                        <span :title="channel_item">
                          <Icon
                            :name="getChannelIcon(channel_item)"
                            class="text-gray-700 dark:text-gray-300"
                            size="18"
                          />
                        </span>
                      </template>
                    </template>
                    <span v-else>-</span>
                  </div>
                </template>
                <template v-slot:version="{ text }">
                  <span class="text-sm text-gray-600 dark:text-gray-400"
                    >v{{ text }}</span
                  >
                </template>
                <template v-slot:status="{ text }">
                  <span
                    class="px-2 py-1 rounded-full text-xs font-medium"
                    :class="getStatusClass(text)"
                  >
                    {{ text == 1 ? "Active" : text == 0 ? "Inactive" : "Draft" }}
                  </span>
                </template>
                <template v-slot:action="data">
                  <div class="flex justify-center items-center gap-3">
                    <span title="Edit">
                      <Icon
                        name="material-symbols:edit-outline-rounded"
                        class="text-primary hover:text-primary/90 cursor-pointer"
                        size="20"
                        @click="editTemplate(data.value)"
                      />
                    </span>
                    <!-- <span title="Preview">
                      <Icon
                        name="material-symbols:preview-outline"
                        class="text-blue-500 hover:text-blue-600 cursor-pointer"
                        size="20"
                        @click="previewTemplate(data.value)"
                      />
                    </span> -->
                    <span title="Delete">
                      <Icon
                        name="material-symbols:delete-outline"
                        class="text-red-500 hover:text-red-600 cursor-pointer"
                        size="20"
                        @click="openModalDelete(data.value)"
                      />
                    </span>
                  </div>
                </template>
              </rs-table>
            </rs-tab-item>
          </rs-tab>
        </div>
      </template>
    </rs-card>

    <!-- Preview Modal -->
    <rs-modal v-model="showPreview" title="Template Preview" size="lg">
      <div class="space-y-4 p-1">
        <div class="flex gap-4 mb-4">
          <FormKit
            type="select"
            name="previewChannel"
            label="Preview Channel"
            :options="channels.filter((c) => c.value !== '')"
            v-model="previewChannel"
            outer-class="flex-1"
          />
        </div>
        <div class="border rounded-lg p-4 bg-gray-50 dark:bg-gray-800">
          <h3 class="font-semibold mb-2 text-gray-800 dark:text-gray-200">
            {{ selectedTemplate?.notificationTitle }}
          </h3>
          <div
            class="prose prose-sm max-w-none dark:prose-invert"
            v-html="selectedTemplate?.content"
          ></div>
        </div>
      </div>
      <template #footer>
        <rs-button @click="showPreview = false">Close</rs-button>
      </template>
    </rs-modal>

    <!-- Version History Modal -->
    <rs-modal v-model="showVersions" title="Version History" size="lg">
      <div class="space-y-4 p-1">
        <div v-if="versionHistory.length">
          <div
            v-for="version in versionHistory"
            :key="version.id"
            class="border rounded-lg p-4 mb-3 last:mb-0 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150 ease-in-out"
            :class="{
              'border-primary-300 bg-primary-50 dark:bg-primary-900/20':
                version.isCurrent,
            }"
          >
            <div class="flex justify-between items-center mb-2">
              <div class="flex items-center gap-2">
                <span class="font-semibold text-gray-700 dark:text-gray-300"
                  >Version {{ version.version }}</span
                >
                <span
                  v-if="version.isCurrent"
                  class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full dark:bg-green-900 dark:text-green-300"
                >
                  Current
                </span>
                <span
                  class="px-2 py-1 text-xs font-medium rounded-full"
                  :class="getStatusClass(version.status)"
                >
                  {{ version.status }}
                </span>
              </div>
              <div class="flex items-center gap-2">
                <span class="text-sm text-gray-500 dark:text-gray-400">{{
                  version.updatedAt
                }}</span>
                <rs-button
                  size="sm"
                  @click="restoreVersion(version)"
                  variant="outline"
                  :disabled="version.isCurrent"
                  >Restore</rs-button
                >
                <rs-button
                  size="sm"
                  @click="deleteVersion(version)"
                  variant="danger-outline"
                  :disabled="version.isCurrent"
                  >Delete</rs-button
                >
              </div>
            </div>
            <div class="mb-2">
              <p class="text-sm font-medium text-gray-700 dark:text-gray-300">
                {{ version.name }}
              </p>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                {{ version.subject }}
              </p>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              {{ version.changeDescription }}
            </p>
          </div>
        </div>
        <div v-else class="text-center text-gray-500 dark:text-gray-400 py-4">
          No version history available for this template.
        </div>
      </div>
      <template #footer>
        <rs-button @click="showVersions = false">Close</rs-button>
      </template>
    </rs-modal>
  </div>
</template>

<script setup>
definePageMeta({
  title: "Notification Templates",
  middleware: ["auth"],
  requiresAuth: true,
});

const { $swal } = useNuxtApp();
const router = useRouter();

// Reactive data
const isLoading = ref(false);
const templateList = ref([]);
const totalCount = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);

// Filters
const filters = ref({
  category: "",
  channel: "",
  status: "",
  search: "",
});

const categories = ref([
  { label: "All Categories", value: "" },
  { label: "User Management", value: "user_management" },
  { label: "Orders & Transactions", value: "orders" },
  { label: "Security & Authentication", value: "security" },
  { label: "Marketing & Promotions", value: "marketing" },
  { label: "System Updates", value: "system" },
  { label: "General Information", value: "general" },
]);

const statusOptions = ref([
  { label: "All Status", value: "" },
  { label: "Active", value: "Active" },
  { label: "Inactive", value: "Inactive" },
  { label: "Draft", value: "Draft" },
  { label: "Archived", value: "Archived" },
]);

const channels = ref([
  { label: "All Channels", value: "" },
  { label: "Email", value: "email" },
  { label: "SMS", value: "sms" },
  { label: "Push Notification", value: "push" },
]);

const columns = [
  {
    label: "Title",
    key: "title",
    sortable: true,
  },
  {
    label: "Category",
    key: "category",
    sortable: true,
  },
  {
    label: "Channels",
    key: "channel",
    sortable: false,
  },
  {
    label: "Status",
    key: "status",
    sortable: true,
  },
  {
    label: "Action",
    key: "action",
    align: "center",
  },
];

// API functions
const fetchTemplates = async () => {
  try {
    isLoading.value = true;

    const queryParams = new URLSearchParams({
      page: currentPage.value.toString(),
      limit: pageSize.value.toString(),
      sortBy: "created_at",
      sortOrder: "desc",
    });

    // Add filters if they have values
    if (filters.value.category) queryParams.append("category", filters.value.category);
    if (filters.value.channel) queryParams.append("channel", filters.value.channel);
    if (filters.value.status) queryParams.append("status", filters.value.status);
    if (filters.value.search) queryParams.append("search", filters.value.search);

    console.log("Fetching templates with params:", queryParams.toString());

    const response = await $fetch(`/api/notifications/templates?${queryParams}`);

    console.log("API Response:", response);

    // Check if response has the expected structure
    if (
      response &&
      response.success &&
      response.data &&
      Array.isArray(response.data.templates)
    ) {
      // Transform API data to match frontend format
      templateList.value = response.data.templates.map((template) => ({
        id: template.id,
        title: template.title,
        category: template.category,
        status: template.is_active, // This is now the correct string status from DB
        createdAt: formatDate(template.created_at),
        updatedAt: formatDate(template.updated_at),
        action: null,
      }));

      totalCount.value = response.data.templates?.length || 0;
      console.log(`Loaded ${templateList.value.length} templates`);
    } else {
      // Handle unexpected response structure
      console.warn("Unexpected API response structure:", response);
      templateList.value = [];
      totalCount.value = 0;

      if (response && !response.success) {
        const errorMessage =
          response.data?.error || response.error || "Unknown error occurred";
        $swal.fire("Error", errorMessage, "error");
      } else {
        $swal.fire(
          "Warning",
          "Received unexpected response format from server.",
          "warning"
        );
      }
    }
  } catch (error) {
    console.error("Error fetching templates:", error);

    // Initialize empty state on error
    templateList.value = [];
    totalCount.value = 0;

    // Show user-friendly error message
    let errorMessage = "Failed to load templates. Please try again.";

    if (error.response?.status === 401) {
      errorMessage = "Authentication required. Please log in again.";
    } else if (error.response?.status === 403) {
      errorMessage = "You don't have permission to access this resource.";
    } else if (error.response?.status >= 500) {
      errorMessage = "Server error occurred. Please try again later.";
    } else if (error.data?.error) {
      errorMessage = error.data.error;
    }

    $swal.fire("Error", errorMessage, "error");
  } finally {
    isLoading.value = false;
  }
};

// Helper function to format dates
const formatDate = (dateString) => {
  if (!dateString) return "";
  return new Date(dateString).toLocaleDateString("en-US", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  });
};

const showPreview = ref(false);
const selectedTemplate = ref(null);
const previewChannel = ref("email");

const showVersions = ref(false);
const versionHistory = ref([]);

const getChannelIcon = (channel_item) => {
  const icons = {
    email: "material-symbols:mail-outline-rounded",
    sms: "material-symbols:sms-outline-rounded",
    push: "material-symbols:notifications-active-outline-rounded",
    "in-app": "material-symbols:chat-bubble-outline-rounded",
  };
  return icons[channel_item] || "material-symbols:help-outline-rounded";
};

const getStatusClass = (status) => {
  const classes = {
    1: "bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100",
    0: "bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100",
    2: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200",
  };
  return (
    classes[status] || "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
  );
};

// Filter functions
const filterByCategory = async (value) => {
  filters.value.category = value;
  currentPage.value = 1; // Reset to first page
  await fetchTemplates();
};

const filterByChannel = async (value) => {
  filters.value.channel = value;
  currentPage.value = 1; // Reset to first page
  await fetchTemplates();
};

const filterByStatus = async (value) => {
  filters.value.status = value;
  currentPage.value = 1; // Reset to first page
  await fetchTemplates();
};

// Action functions
const editTemplate = (template) => {
  router.push(`/notification/templates/edit/${template.id}`);
};

const previewTemplate = (template) => {
  selectedTemplate.value = template;
  showPreview.value = true;
};

const restoreVersion = async (version) => {
  const result = await $swal.fire({
    title: "Restore Version?",
    text: `Are you sure you want to restore version ${version.version} for "${selectedTemplate.value?.title}"? Current content will be overwritten.`,
    icon: "warning",
    showCancelButton: true,
    confirmButtonText: "Restore",
    cancelButtonText: "Cancel",
    confirmButtonColor: "#3085d6",
    cancelButtonColor: "#d33",
  });

  if (result.isConfirmed) {
    try {
      // Show loading
      const loadingSwal = $swal.fire({
        title: "Restoring Version...",
        text: "Please wait while we restore the version",
        allowOutsideClick: false,
        allowEscapeKey: false,
        showConfirmButton: false,
        didOpen: () => {
          $swal.showLoading();
        },
      });

      console.log("Restoring version:", version.id);

      const response = await $fetch(
        `/api/notifications/templates/${selectedTemplate.value.id}/versions/${version.id}/restore`,
        {
          method: "POST",
        }
      );

      loadingSwal.close();

      if (response.success) {
        await $swal.fire({
          title: "Restored!",
          text: response.data.message,
          icon: "success",
          timer: 3000,
        });

        // Close the version history modal
        showVersions.value = false;

        // Refresh the templates list to show updated version
        await fetchTemplates();
      } else {
        throw new Error(response.data?.error || "Failed to restore version");
      }
    } catch (error) {
      console.error("Error restoring version:", error);

      let errorMessage = "Failed to restore version. Please try again.";
      if (error.data?.error) {
        errorMessage = error.data.error;
      }

      await $swal.fire({
        title: "Error",
        text: errorMessage,
        icon: "error",
      });
    }
  }
};

const deleteVersion = async (version) => {
  const result = await $swal.fire({
    title: "Delete Version?",
    text: `Are you sure you want to delete version ${version.version} for "${selectedTemplate.value?.title}"? This action cannot be undone.`,
    icon: "warning",
    showCancelButton: true,
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "Cancel",
    confirmButtonColor: "#d33",
    cancelButtonColor: "#3085d6",
  });

  if (result.isConfirmed) {
    try {
      // Show loading
      const loadingSwal = $swal.fire({
        title: "Deleting Version...",
        text: "Please wait while we delete the version",
        allowOutsideClick: false,
        allowEscapeKey: false,
        showConfirmButton: false,
        didOpen: () => {
          $swal.showLoading();
        },
      });

      console.log("Deleting version:", version.id);

      const response = await $fetch(
        `/api/notifications/templates/${selectedTemplate.value.id}/versions/${version.id}`,
        {
          method: "DELETE",
        }
      );

      loadingSwal.close();

      if (response.success) {
        // Remove the deleted version from the local array
        versionHistory.value = versionHistory.value.filter((v) => v.id !== version.id);

        await $swal.fire({
          title: "Deleted!",
          text: response.data.message,
          icon: "success",
          timer: 3000,
        });

        // If no versions left, close the modal
        if (versionHistory.value.length === 0) {
          showVersions.value = false;
        }
      } else {
        throw new Error(response.data?.error || "Failed to delete version");
      }
    } catch (error) {
      console.error("Error deleting version:", error);

      let errorMessage = "Failed to delete version. Please try again.";
      if (error.data?.error) {
        errorMessage = error.data.error;
      }

      await $swal.fire({
        title: "Error",
        text: errorMessage,
        icon: "error",
      });
    }
  }
};

const openModalDelete = async (templateToDelete) => {
  const result = await $swal.fire({
    title: "Delete Template",
    text: `Are you sure you want to delete "${templateToDelete.title}"? This action cannot be undone.`,
    icon: "warning",
    showCancelButton: true,
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "Cancel",
    confirmButtonColor: "#d33",
    cancelButtonColor: "#3085d6",
  });

  if (result.isConfirmed) {
    await deleteTemplate(templateToDelete);
  }
};

const deleteTemplate = async (templateToDelete) => {
  try {
    // Show loading
    const loadingSwal = $swal.fire({
      title: "Deleting Template...",
      text: "Please wait while we delete the template",
      allowOutsideClick: false,
      allowEscapeKey: false,
      showConfirmButton: false,
      didOpen: () => {
        $swal.showLoading();
      },
    });

    console.log("Deleting template:", templateToDelete.title);

    const response = await $fetch(`/api/notifications/templates/${templateToDelete.id}`, {
      method: "DELETE",
    });

    loadingSwal.close();

    if (response.success) {
      await $swal.fire({
        position: "center",
        icon: "success",
        title: "Deleted!",
        text: response.data.message,
        timer: 3000,
        showConfirmButton: false,
      });

      // Refresh the templates list
      await fetchTemplates();
    }
  } catch (error) {
    console.error("Error deleting template:", error);

    let errorMessage = "Failed to delete template. Please try again.";
    if (error.data?.error) {
      errorMessage = error.data.error;
    }

    await $swal.fire({
      title: "Error",
      text: errorMessage,
      icon: "error",
    });
  }
};

// Load templates when component mounts
onMounted(async () => {
  await fetchTemplates();
});
</script>
