<template>
  <div>
    <LayoutsBreadcrumb />

    <!-- Info Card -->
    <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>
          Create Notification
        </div>
      </template>
      <template #body>
        <p class="mb-4">
          Create and send notifications to your audience. Configure basic settings and
          choose from multiple channels including email and push notifications.
        </p>
      </template>
    </rs-card>

    <!-- Main Form Card -->
    <rs-card>
      <template #header>
        <div class="flex items-center justify-between">
          <h2 class="text-xl font-semibold">
            {{ isEditMode ? "Edit" : "Create" }} Notification
          </h2>
          <div class="text-sm text-gray-600 dark:text-gray-400">
            Step {{ currentStep }} of {{ totalSteps }}
          </div>
        </div>
      </template>
      <template #body>
        <div class="pt-2">
          <!-- Step Progress Indicator -->
          <div class="mb-8">
            <div class="flex items-center justify-between">
              <div
                v-for="(step, index) in steps"
                :key="index"
                class="flex items-center"
                :class="{ 'flex-1': index < steps.length - 1 }"
              >
                <div class="flex items-center">
                  <div
                    class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium"
                    :class="{
                      'bg-primary text-white': index + 1 <= currentStep,
                      'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-400':
                        index + 1 > currentStep,
                    }"
                  >
                    <Icon
                      v-if="index + 1 < currentStep"
                      name="material-symbols:check"
                      class="text-sm"
                    />
                    <span v-else>{{ index + 1 }}</span>
                  </div>
                  <span
                    class="ml-2 text-sm font-medium"
                    :class="{
                      'text-primary': index + 1 === currentStep,
                      'text-gray-900 dark:text-gray-100': index + 1 < currentStep,
                      'text-gray-500 dark:text-gray-400': index + 1 > currentStep,
                    }"
                  >
                    {{ step.title }}
                  </span>
                </div>
                <div
                  v-if="index < steps.length - 1"
                  class="flex-1 h-0.5 mx-4"
                  :class="{
                    'bg-primary': index + 1 < currentStep,
                    'bg-gray-200 dark:bg-gray-700': index + 1 >= currentStep,
                  }"
                ></div>
              </div>
            </div>
          </div>

          <FormKit
            type="form"
            @submit="submitNotification"
            :actions="false"
            class="w-full"
          >
            <!-- Step 1: Basic Settings -->
            <div v-show="currentStep === 1" class="space-y-6">
              <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Left Column -->
                <div class="space-y-4">
                  <FormKit
                    type="text"
                    name="title"
                    label="Notification Title"
                    placeholder="Enter notification title"
                    validation="required"
                    v-model="notificationForm.title"
                    help="This is for internal identification purposes"
                  />

                  <FormKit
                    type="select"
                    name="type"
                    label="Notification Type"
                    :options="notificationTypes"
                    validation="required"
                    v-model="notificationForm.type"
                    help="Choose notification type"
                  />

                  <FormKit
                    type="select"
                    name="priority"
                    label="Priority Level"
                    :options="priorityLevels"
                    validation="required"
                    v-model="notificationForm.priority"
                    help="Set the importance level of this notification"
                  />

                  <FormKit
                    type="select"
                    name="category"
                    label="Category"
                    :options="categoryOptions"
                    validation="required"
                    v-model="notificationForm.category"
                    help="Categorize your notification for better organization"
                  />
                </div>

                <!-- Right Column -->
                <div class="space-y-4">
                  <FormKit
                    type="checkbox"
                    name="channels"
                    label="Delivery Channels"
                    :options="channelOptions"
                    validation="required|min:1"
                    v-model="notificationForm.channels"
                    decorator-icon="material-symbols:check"
                    options-class="grid grid-cols-1 gap-y-2 pt-1"
                    help="Select one or more delivery channels"
                  />

                  <FormKit
                    v-if="notificationForm.channels.includes('email')"
                    type="text"
                    name="emailSubject"
                    label="Email Subject Line"
                    placeholder="Enter email subject"
                    validation="required"
                    v-model="notificationForm.emailSubject"
                    help="This will be the email subject line"
                  />

                  <FormKit
                    type="radio"
                    name="deliveryType"
                    label="Delivery Schedule"
                    :options="deliveryTypes"
                    validation="required"
                    v-model="notificationForm.deliveryType"
                    decorator-icon="material-symbols:radio-button-checked"
                    options-class="space-y-3 pt-1"
                  />

                  <FormKit
                    v-if="notificationForm.deliveryType === 'scheduled'"
                    type="datetime-local"
                    name="scheduledAt"
                    label="Scheduled Date & Time"
                    validation="required"
                    v-model="notificationForm.scheduledAt"
                    help="When should this notification be sent?"
                  />
                </div>
              </div>
            </div>

            <!-- Step 2: Target Audience -->
            <div v-show="currentStep === 2" class="space-y-6">
              <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="space-y-4">
                  <FormKit
                    type="radio"
                    name="audienceType"
                    label="Audience Selection"
                    :options="audienceTypes"
                    validation="required"
                    v-model="notificationForm.audienceType"
                    decorator-icon="material-symbols:radio-button-checked"
                    options-class="space-y-3 pt-1"
                  />

                  <div
                    v-if="notificationForm.audienceType === 'specific'"
                    class="space-y-4 p-4 border rounded-lg bg-gray-50 dark:bg-gray-800"
                  >
                    <FormKit
                      type="textarea"
                      name="specificUsers"
                      label="User IDs or Email Addresses"
                      placeholder="Enter user IDs or emails, one per line"
                      rows="4"
                      v-model="notificationForm.specificUsers"
                      help="Enter user IDs or email addresses, one per line"
                    />
                  </div>

                  <div
                    v-if="notificationForm.audienceType === 'segmented'"
                    class="space-y-4 p-4 border rounded-lg bg-gray-50 dark:bg-gray-800"
                  >
                    <FormKit
                      type="checkbox"
                      name="userSegments"
                      label="User Segments"
                      :options="userSegmentOptions"
                      v-model="notificationForm.userSegments"
                      decorator-icon="material-symbols:check"
                      options-class="grid grid-cols-1 gap-y-2 pt-1"
                    />
                  </div>
                </div>

                <div class="space-y-4">
                  <div class="p-4 border rounded-lg bg-blue-50 dark:bg-blue-900/20">
                    <h3 class="font-semibold text-blue-800 dark:text-blue-200 mb-2">
                      Audience Preview
                    </h3>
                    <p class="text-sm text-blue-600 dark:text-blue-300">
                      Estimated reach:
                      <span class="font-bold">{{ estimatedReach }}</span>
                      users
                    </p>
                  </div>

                  <FormKit
                    type="checkbox"
                    name="excludeUnsubscribed"
                    label="Exclude Unsubscribed Users"
                    v-model="notificationForm.excludeUnsubscribed"
                    help="Automatically exclude users who have unsubscribed"
                  />
                </div>
              </div>
            </div>

            <!-- Step 3: Content -->
            <div v-show="currentStep === 3" class="space-y-6">
              <FormKit
                type="radio"
                name="contentType"
                label="Content Source"
                :options="contentTypes"
                validation="required"
                v-model="notificationForm.contentType"
                decorator-icon="material-symbols:radio-button-checked"
                options-class="flex gap-8 pt-1"
              />

              <!-- Content Section -->
              <div
                v-if="notificationForm.contentType === 'template'"
                class="space-y-4 p-4 border rounded-lg bg-gray-50 dark:bg-gray-800"
              >
                <div class="flex justify-between items-center">
                  <h3 class="font-semibold">Select Notification Template</h3>
                  <rs-button
                    variant="outline"
                    size="sm"
                    @click="$router.push('/notification/templates')"
                    type="button"
                  >
                    <Icon name="material-symbols:library-books-outline" class="mr-1" />
                    Browse All Templates
                  </rs-button>
                </div>

                <div class="grid grid-cols-1 gap-4">
                  <!-- Template Selection -->
                  <div>
                    <FormKit
                      type="select"
                      name="selectedTemplate"
                      label="Select Template"
                      :options="templateOptions"
                      validation="required"
                      v-model="notificationForm.selectedTemplate"
                      help="Choose from existing notification templates"
                      :disabled="isLoadingTemplates"
                    />
                  </div>
                </div>
              </div>

              <!-- Create New Content Section -->
              <div v-if="notificationForm.contentType === 'new'" class="space-y-4">
                <div
                  v-if="notificationForm.channels.includes('push')"
                  class="space-y-4 p-4 border rounded-lg bg-gray-50 dark:bg-gray-800"
                >
                  <h3 class="font-semibold">Push Notification Content</h3>
                  <FormKit
                    type="text"
                    name="pushTitle"
                    label="Push Title"
                    placeholder="Enter push notification title"
                    validation="required|length:0,50"
                    v-model="notificationForm.pushTitle"
                    help="Maximum 50 characters"
                  />

                  <FormKit
                    type="textarea"
                    name="pushBody"
                    label="Push Message"
                    placeholder="Enter push notification message"
                    validation="required|length:0,150"
                    rows="3"
                    v-model="notificationForm.pushBody"
                    help="Maximum 150 characters"
                  />
                </div>

                <div
                  v-if="notificationForm.channels.includes('email')"
                  class="space-y-4 p-4 border rounded-lg bg-gray-50 dark:bg-gray-800"
                >
                  <h3 class="font-semibold">Email Content</h3>
                  <FormKit
                    type="textarea"
                    name="emailContent"
                    label="Email Body"
                    validation="required"
                    v-model="notificationForm.emailContent"
                    rows="8"
                    help="You can use HTML formatting"
                  />

                  <FormKit
                    type="text"
                    name="callToActionText"
                    label="Call-to-Action Button Text (Optional)"
                    placeholder="e.g., Learn More, Get Started"
                    v-model="notificationForm.callToActionText"
                  />

                  <FormKit
                    type="url"
                    name="callToActionUrl"
                    label="Call-to-Action URL (Optional)"
                    placeholder="https://example.com"
                    v-model="notificationForm.callToActionUrl"
                  />
                </div>
              </div>

              <!-- Preview -->
              <div class="border rounded-lg p-4 bg-gray-50 dark:bg-gray-800">
                <h4 class="font-semibold mb-3">Send Test Notification</h4>
                <div class="flex gap-4 items-end">
                  <FormKit
                    type="email"
                    name="testEmail"
                    label="Test Email Address"
                    placeholder="test@example.com"
                    v-model="testEmail"
                    outer-class="flex-1 mb-0"
                  />
                  <rs-button
                    @click="sendTestNotification"
                    variant="outline"
                    type="button"
                    :disabled="isSending"
                  >
                    <Icon name="material-symbols:send" class="mr-1" />
                    Send Test
                  </rs-button>
                </div>
              </div>
            </div>

            <!-- Step Navigation -->
            <div class="flex justify-between items-center mt-8 pt-6 border-t">
              <div class="flex gap-3">
                <rs-button
                  v-if="currentStep > 1"
                  type="button"
                  variant="outline"
                  @click="previousStep"
                >
                  <Icon name="material-symbols:arrow-back" class="mr-1" />
                  Previous
                </rs-button>
                <rs-button
                  v-if="currentStep < totalSteps"
                  type="button"
                  variant="outline"
                  @click="saveDraftNotification"
                  :disabled="isSaving"
                >
                  <Icon name="material-symbols:save-as-outline" class="mr-1" />
                  Save as Draft
                </rs-button>
              </div>

              <div class="flex gap-3">
                <rs-button
                  type="button"
                  variant="outline"
                  @click="$router.push('/notification/list')"
                >
                  Cancel
                </rs-button>
                <rs-button
                  v-if="currentStep < totalSteps"
                  type="button"
                  @click="nextStep"
                  :disabled="!isCurrentStepValid"
                  :class="{
                    'opacity-50 cursor-not-allowed': !isCurrentStepValid,
                  }"
                >
                  Next
                  <Icon name="material-symbols:arrow-forward" class="ml-1" />
                </rs-button>
                <rs-button
                  v-if="currentStep === totalSteps"
                  type="submit"
                  :disabled="!isFormValid || isSending"
                  :class="{ 'opacity-50 cursor-not-allowed': !isFormValid || isSending }"
                  @click="submitNotification"
                >
                  <Icon name="material-symbols:send" class="mr-1" />
                  {{
                    notificationForm.deliveryType === "immediate"
                      ? "Send Now"
                      : "Schedule Notification"
                  }}
                </rs-button>
              </div>
            </div>
          </FormKit>
        </div>
      </template>
    </rs-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useNotifications } from "~/composables/useNotifications";
import { useDebounceFn } from "~/composables/useDebounceFn";

definePageMeta({
  title: "Create Notification",
  middleware: ["auth"],
  requiresAuth: true,
});

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

// Initialize notifications composable
const {
  isLoading: notificationLoading,
  createNotification,
  updateNotification,
  getNotificationById,
  saveDraft,
  testSendNotification,
  getAudiencePreview,
} = useNotifications();

// Step management
const currentStep = ref(1);
const totalSteps = ref(3);

const steps = [
  { title: "Basic Settings", key: "basic" },
  { title: "Target Audience", key: "audience" },
  { title: "Content", key: "content" },
];

// Reactive data
const isEditMode = ref(!!route.query.id);
const testEmail = ref("");
const estimatedReachCount = ref(0);

// Loading states
const isLoadingTemplates = ref(false);
const isSaving = ref(false);
const isSending = ref(false);

// Form data
const notificationForm = ref({
  title: "",
  type: "single",
  priority: "medium",
  category: "",
  channels: [],
  emailSubject: "",
  deliveryType: "immediate",
  scheduledAt: "",
  timezone: "UTC",
  audienceType: "all",
  specificUsers: "",
  userSegments: [],
  excludeUnsubscribed: true,
  contentType: "new",
  selectedTemplate: "",
  pushTitle: "",
  pushBody: "",
  emailContent: "",
  callToActionText: "",
  callToActionUrl: "",
});

// Options for form fields
const notificationTypes = [
  { label: "Single Notification", value: "single" },
  { label: "Bulk Notification", value: "bulk" },
];

const priorityLevels = [
  { label: "Low", value: "low" },
  { label: "Medium", value: "medium" },
  { label: "High", value: "high" },
  { label: "Critical", value: "critical" },
];

// Dynamic options loaded from API
const categoryOptions = ref([
  { label: "System", value: "system" },
  { label: "Marketing", value: "marketing" },
  { label: "Transactional", value: "transactional" },
  { label: "Alerts", value: "alerts" },
  { label: "Updates", value: "updates" },
]);

const templateOptions = ref([]);

const channelOptions = [
  { label: "Email", value: "email" },
  { label: "Push Notification", value: "push" },
  { label: "SMS", value: "sms" },
];

const deliveryTypes = [
  { label: "Send Immediately", value: "immediate" },
  { label: "Schedule for Later", value: "scheduled" },
];

const audienceTypes = [
  { label: "All Users", value: "all" },
  { label: "Specific Users", value: "specific" },
  { label: "Segmented Users", value: "segmented" },
];

const userSegmentOptions = [
  { label: "New Users (< 30 days)", value: "new_users" },
  { label: "Active Users", value: "active_users" },
  { label: "Premium Subscribers", value: "premium_users" },
  { label: "Inactive Users", value: "inactive_users" },
];

const contentTypes = [
  { label: "Create New Content", value: "new" },
  { label: "Use Existing Template", value: "template" },
];

// Computed properties
const estimatedReach = computed(() => {
  if (estimatedReachCount.value > 0) {
    return estimatedReachCount.value.toLocaleString();
  }

  // Fallback calculation while API data loads
  if (notificationForm.value.audienceType === "all") {
    return "15,000";
  } else if (notificationForm.value.audienceType === "specific") {
    const lines = notificationForm.value.specificUsers
      .split("\n")
      .filter((line) => line.trim());
    return lines.length.toLocaleString();
  } else if (notificationForm.value.audienceType === "segmented") {
    return "5,000";
  }
  return "0";
});

const isFormValid = computed(() => {
  return (
    notificationForm.value.title &&
    notificationForm.value.type &&
    notificationForm.value.priority &&
    notificationForm.value.category &&
    notificationForm.value.channels.length > 0 &&
    notificationForm.value.audienceType &&
    (notificationForm.value.contentType === "template"
      ? notificationForm.value.selectedTemplate
      : (notificationForm.value.channels.includes("push")
          ? notificationForm.value.pushTitle && notificationForm.value.pushBody
          : true) &&
        (notificationForm.value.channels.includes("email")
          ? notificationForm.value.emailSubject && notificationForm.value.emailContent
          : true))
  );
});

// Computed properties for step validation
const isCurrentStepValid = computed(() => {
  switch (currentStep.value) {
    case 1: // Basic Settings
      return (
        notificationForm.value.title &&
        notificationForm.value.type &&
        notificationForm.value.priority &&
        notificationForm.value.category &&
        notificationForm.value.channels.length > 0 &&
        (!notificationForm.value.channels.includes("email") ||
          notificationForm.value.emailSubject) &&
        (notificationForm.value.deliveryType === "immediate" ||
          notificationForm.value.scheduledAt)
      );
    case 2: // Target Audience
      return (
        notificationForm.value.audienceType &&
        (notificationForm.value.audienceType !== "specific" ||
          notificationForm.value.specificUsers.trim())
      );
    case 3: // Content
      return (
        notificationForm.value.contentType &&
        (notificationForm.value.contentType === "template"
          ? notificationForm.value.selectedTemplate
          : (!notificationForm.value.channels.includes("push") ||
              (notificationForm.value.pushTitle && notificationForm.value.pushBody)) &&
            (!notificationForm.value.channels.includes("email") ||
              notificationForm.value.emailContent))
      );
    default:
      return false;
  }
});

// API Methods
const loadTemplates = async () => {
  try {
    isLoadingTemplates.value = true;
    const response = await $fetch("/api/notifications/templates");
    if (response.success) {
      templateOptions.value = response.data.templates.map((template) => ({
        label: template.title,
        value: template.value,
        id: template.id,
        subject: template.subject,
        emailContent: template.email_content,
        pushTitle: template.push_title,
        pushBody: template.push_body,
      }));
    }
  } catch (error) {
    console.error("Error loading templates:", error);
    $swal.fire("Error", "Failed to load templates", "error");
  } finally {
    isLoadingTemplates.value = false;
  }
};

// Debounced function for audience calculation
const debouncedCalculateReach = useDebounceFn(calculateEstimatedReach, 500);

async function calculateEstimatedReach() {
  try {
    const requestBody = {
      audienceType: notificationForm.value.audienceType,
      specificUsers: notificationForm.value.specificUsers,
      userSegments: notificationForm.value.userSegments,
      excludeUnsubscribed: notificationForm.value.excludeUnsubscribed,
    };

    const response = await getAudiencePreview(requestBody);

    if (response.success) {
      estimatedReachCount.value = response.data.totalCount;
    }
  } catch (error) {
    console.error("Error calculating estimated reach:", error);
    // Don't show error to user for background calculation
  }
}

// Methods
const sendTestNotification = async () => {
  if (!testEmail.value) {
    $swal.fire("Error", "Please enter a test email address", "error");
    return;
  }

  try {
    isSending.value = true;
    const testData = {
      email: testEmail.value,
      testData: {
        title: notificationForm.value.title,
        channels: notificationForm.value.channels,
        emailSubject: notificationForm.value.emailSubject,
        emailContent: notificationForm.value.emailContent,
        pushTitle: notificationForm.value.pushTitle,
        pushBody: notificationForm.value.pushBody,
        callToActionText: notificationForm.value.callToActionText,
        callToActionUrl: notificationForm.value.callToActionUrl,
      },
    };

    const response = await testSendNotification(testData);

    if (response.success) {
      $swal.fire("Success", `Test notification sent to ${testEmail.value}`, "success");
    }
  } catch (error) {
    console.error("Error sending test notification:", error);
    $swal.fire("Error", "Failed to send test notification", "error");
  } finally {
    isSending.value = false;
  }
};

const saveDraftNotification = async () => {
  try {
    isSaving.value = true;
    const response = await saveDraft(notificationForm.value);

    if (response.success) {
      $swal
        .fire({
          title: "Success",
          text: "Notification saved as draft",
          icon: "success",
          confirmButtonText: "Continue Editing",
          showCancelButton: true,
          cancelButtonText: "Go to List",
        })
        .then((result) => {
          if (!result.isConfirmed) {
            router.push("/notification/list");
          }
        });
    }
  } catch (error) {
    console.error("Error saving draft:", error);
    $swal.fire("Error", "Failed to save draft", "error");
  } finally {
    isSaving.value = false;
  }
};

const submitNotification = async () => {
  if (!isFormValid.value) {
    $swal.fire("Validation Error", "Please complete all required fields", "error");
    return;
  }

  try {
    isSending.value = true;

    const response = isEditMode.value
      ? await updateNotification(route.query.id, notificationForm.value)
      : await createNotification(notificationForm.value);

    if (response.success) {
      const actionText =
        notificationForm.value.deliveryType === "immediate" ? "sent" : "scheduled";

      $swal
        .fire({
          title: "Success!",
          text: `Notification has been ${actionText} successfully.`,
          icon: "success",
          confirmButtonText: "View List",
        })
        .then((result) => {
          if (result.isConfirmed) {
            router.push("/notification/list");
          }
        });
    }
  } catch (error) {
    console.error("Error creating notification:", error);
    const errorMessage = error.data?.message || "Failed to process notification";
    $swal.fire("Error", errorMessage, "error");
  } finally {
    isSending.value = false;
  }
};

// Load notification data if in edit mode
const loadNotificationData = async (id) => {
  try {
    const notification = await getNotificationById(id);

    if (notification) {
      // Map notification data to form
      notificationForm.value = {
        title: notification.title,
        type: notification.type,
        priority: notification.priority,
        category: notification.category_value,
        channels: notification.channels.map((c) => c.channel_type),
        emailSubject: notification.email_subject,
        deliveryType: notification.delivery_type,
        scheduledAt: notification.scheduled_at,
        timezone: notification.timezone || "UTC",
        audienceType: notification.audience_type,
        specificUsers: notification.specific_users,
        userSegments: notification.user_segments?.map((s) => s.value) || [],
        excludeUnsubscribed: notification.exclude_unsubscribed,
        contentType: notification.content_type,
        selectedTemplate: notification.template_value,
        pushTitle: notification.push_title,
        pushBody: notification.push_body,
        emailContent: notification.email_content,
        callToActionText: notification.call_to_action_text,
        callToActionUrl: notification.call_to_action_url,
      };

      // Update estimated reach
      estimatedReachCount.value = notification.estimated_reach;
    }
  } catch (error) {
    console.error("Error loading notification data:", error);
    $swal.fire("Error", "Failed to load notification data", "error");
  }
};

// Step navigation methods
const nextStep = () => {
  if (currentStep.value < totalSteps.value && isCurrentStepValid.value) {
    currentStep.value++;
    window.scrollTo({ top: 0, behavior: "smooth" });
  } else if (!isCurrentStepValid.value) {
    $swal.fire(
      "Incomplete Information",
      "Please complete all required fields before proceeding",
      "warning"
    );
  }
};

const previousStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--;
    window.scrollTo({ top: 0, behavior: "smooth" });
  }
};

// Watch for audience changes to calculate estimated reach
watch(
  () => [
    notificationForm.value.audienceType,
    notificationForm.value.specificUsers,
    notificationForm.value.userSegments,
    notificationForm.value.excludeUnsubscribed,
  ],
  () => {
    // Use debounced function to avoid too many API calls
    debouncedCalculateReach();
  },
  { deep: true }
);

onMounted(async () => {
  // Load templates
  await loadTemplates();

  // Load data if editing existing notification
  if (isEditMode.value && route.query.id) {
    await loadNotificationData(route.query.id);
  }
});
</script>

<style scoped>
/* Add any custom styles if needed */
/* .formkit-input {
  @apply 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;
} */
</style>
