import ExitAlert from "@/components/blocks/ConfirmAlert/confirmAlert";
import type { CoreMemberAccountType } from "@/lib/features/members/types";
import { Button, Drawer, Stack, Stepper, Text } from "@mantine/core";
import { useForm } from "@mantine/form";
import { useDisclosure } from "@mantine/hooks";
import {
  IconBell,
  IconCalendarCheck,
  IconCurrentLocation,
  IconExclamationCircleFilled,
  IconFileText,
  IconPlus,
} from "@tabler/icons-react";
import { useState, useEffect } from "react";
import AdditionalOptionsForm from "./additionalOptionsForm";
import NotificationForm from "./notificationForm";
import ScheduleForm from "./scheduleForm";
import classes from "./stepper.module.css";
import TargetForm from "./targetForm";
import DevicePreview from "./devicePreview";
import { IconEye } from "@tabler/icons-react";
import { Modal, Group } from "@mantine/core";
import type {
  AdditionalOptionsFormType,
  NotificationFormType,
  ScheduleFormType,
  TargetFormType,
} from "./types";

import type { Campaign } from "../CampaignsTable/types";

const AddNotification: React.FC<{
  accountTypes: CoreMemberAccountType[];
  onSuccess?: () => void;
  initialData?: Campaign | null;
  opened?: boolean;
  onClose?: () => void;
}> = ({ accountTypes, onSuccess, initialData, opened: controlledOpened, onClose: controlledOnClose }) => {
  const [internalOpened, { open: openInternal, close: closeInternal }] = useDisclosure(false);
  const opened = controlledOpened ?? internalOpened;
  const open = controlledOpened ? () => { } : openInternal;
  const close = controlledOnClose ?? closeInternal;

  const [previewOpened, { open: openPreview, close: closePreview }] = useDisclosure(false);
  const [activeStep, setActiveStep] = useState(0);
  const [audienceCount, setAudienceCount] = useState<number | null>(null);
  // One shot per composer session: the Target step remounts on every step
  // change, so it can't remember on its own that the defaults already ran.
  const [targetDefaultsApplied, setTargetDefaultsApplied] = useState(false);
  const [alertOpened, { open: alertOpen, close: alertClose }] =
    useDisclosure(false);

  useEffect(() => {
    if (opened && initialData) {
      // Map initialData (Campaign) to internal forms
      notificationForm.setValues({
        title: initialData.title || "",
        name: initialData.name || "",
        text: initialData.body || "",
        image: initialData.image_url || null,
      });

      if (initialData.target_criteria) {
        targetForm.setValues(initialData.target_criteria);
      }

      if (initialData.additional_data?.schedule_details) {
        scheduleForm.setValues(initialData.additional_data.schedule_details);
      }

      if (initialData.additional_data) {
        additionalOptionsForm.setValues({
          customData: initialData.additional_data.customData || [],
          persist: initialData.additional_data.persist ?? true,
          apply_block_list: initialData.additional_data.apply_block_list ?? true,
          apply_default_email: initialData.additional_data.apply_default_email ?? false,
        });
      }
    } else if (!opened) {
      // Clear forms when closing
      notificationForm.reset();
      targetForm.reset();
      scheduleForm.reset();
      additionalOptionsForm.reset();
      setActiveStep(0);
      setAudienceCount(null);
      setTargetDefaultsApplied(false);
    }
  }, [opened, initialData]);

  const targetForm = useForm<TargetFormType>({
    mode: "uncontrolled",
    initialValues: {
      membershipType: [],
      region: [],
      country: [],
      userSegment: [],
      members: [],
      city: [],
      onlyWithValidVersion: false,
      membershipStatus: [],
    },
    // validate: {
    //   userSegment: (value) =>
    //     value?.length === 0 ? "Please select at least one user segment" : null,
    // },
  });
  const notificationForm = useForm<NotificationFormType>({
    mode: "uncontrolled",
    initialValues: {
      title: "",
      name: "",
      text: "",
      image: null,
    },
    validate: {
      title: (value, values) => {
        if (value.length < 1 && !values.image) return "Please enter notification title";
        return null;
      },
      text: (value, values) => {
        if (value.length < 1 && !values.image) return "Please enter notification text";
        return null;
      },
      image: (value, values) => {
        if (!value && (values.title?.trim().length ?? 0) < 1 && (values.text?.trim().length ?? 0) < 1)
          return "Image is required when title and text are not provided";
        return null;
      },
    },
  });

  const scheduleForm = useForm<ScheduleFormType>({
    mode: "uncontrolled",
    initialValues: {
      notificationType: "Now",
      scheduleDate: null,
      scheduleTime: "",
      timeZone: "",
      notificationInterval: 1,
      // repeat: false,
      // frequency: "",
      // frequencyCount: "",
      startDate: null,
      endDate: null,
      batchSize: 750,
    },
    validate: {
      notificationType: (value) =>
        value?.length > 0 ? null : "Please Select a notification type",
      scheduleDate: (value, values) => {
        if (values.notificationType === "Scheduled") {
          return value && value?.length > 0
            ? null
            : "Please Select a schedule date";
        }
        return null;
      },
      scheduleTime: (value, values) => {
        if (values.notificationType !== "Now") {
          return value && value?.length > 0
            ? null
            : "Please Select time to trigger notification";
        }
        return null;
      },
      timeZone: (value, values) => {
        if (values.notificationType !== "Now") {
          return value && value?.length > 0 ? null : "Please Select a timezone";
        }
        return null;
      },
      notificationInterval: (value, values) => {
        if (values.notificationType === "Daily") {
          return value > 0 ? null : "";
        }
        return null;
      },
      startDate: (value, values) => {
        if (values.notificationType === "Daily") {
          return value && value?.length > 0
            ? null
            : "Please Select a start date";
        }
        return null;
      },
      endDate: (value, values) => {
        if (values.notificationType === "Daily") {
          return value && value?.length > 0
            ? null
            : "Please Select an end date";
        }
        return null;
      },
    },
  });

  const additionalOptionsForm = useForm<AdditionalOptionsFormType>({
    mode: "uncontrolled",
    initialValues: {
      customData: [],
      persist: true,
      apply_block_list: true,
      apply_default_email: false,
    },
    validate: {},
  });

  const handleClose = () => {
    const formTouched =
      notificationForm.isTouched() ||
      targetForm?.isTouched() ||
      scheduleForm.isTouched() ||
      additionalOptionsForm.isTouched();
    if (formTouched) {
      alertOpen();
    } else {
      close();
    }
  };

  const handleContinueAlert = () => {
    notificationForm.reset();
    targetForm.reset();
    scheduleForm.reset();
    additionalOptionsForm.reset();
    setActiveStep(0);
    alertClose();
    close();
  };

  const onFormSuccess = () => {
    close();
    onSuccess?.();
  };

  return (
    <>
      <Drawer
        opened={opened}
        onClose={handleClose}
        title={
          <Group justify="space-between w-full" style={{ width: "100%", paddingRight: 40 }}>
            <Text fz={20} fw={500}>
              {initialData ? "Duplicate Notification" : "Compose Notification"}
            </Text>
            <Button
              leftSection={<IconEye size={18} />}
              variant="outline"
              size="sm"
              onClick={openPreview}
            >
              Preview Notification
            </Button>
          </Group>
        }
        position="right"
        size={"lg"}
      >
        <Stack
          pt={25}
          style={{
            borderTop: "1px solid var(--mantine-color-white-1)",
          }}
        >
          <Stepper
            color="dark.12"
            active={activeStep}
            // onStepClick={setActiveStep}
            size="sm"
            classNames={{
              stepBody: classes.stepBody,
              steps: classes.steps,
              stepWrapper: classes.stepsWrapper,
            }}
          >
            <Stepper.Step
              label="Step 1"
              description="Notification"
              icon={<IconBell />}
              style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                textAlign: "center",
                gap: "10px",
              }}
            >
              <NotificationForm
                activeStep={activeStep}
                setActiveStep={setActiveStep}
                form={notificationForm}
              />
            </Stepper.Step>
            <Stepper.Step
              label="Step 2"
              description="Target"
              icon={<IconCurrentLocation />}
              style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                textAlign: "center",
                gap: "10px",
              }}
            >
              <TargetForm
                activeStep={activeStep}
                setActiveStep={setActiveStep}
                accountTypes={accountTypes}
                form={targetForm}
                setAudienceCount={setAudienceCount}
                applyDefaults={!initialData}
                defaultsApplied={targetDefaultsApplied}
                onDefaultsApplied={() => setTargetDefaultsApplied(true)}
              />
            </Stepper.Step>
            <Stepper.Step
              label="Step 3"
              description="Scheduling"
              icon={<IconCalendarCheck />}
              style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                textAlign: "center",
                gap: "10px",
              }}
            >
              <ScheduleForm
                activeStep={activeStep}
                setActiveStep={setActiveStep}
                form={scheduleForm}
                audienceCount={audienceCount}
              />
            </Stepper.Step>
            <Stepper.Step
              label="Step 4"
              description="Additional Options"
              icon={<IconFileText />}
              style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                textAlign: "center",
                gap: "10px",
              }}
            >
              <AdditionalOptionsForm
                activeStep={activeStep}
                setActiveStep={setActiveStep}
                form={additionalOptionsForm}
                notificationForm={notificationForm}
                scheduleForm={scheduleForm}
                targetForm={targetForm}
                onSuccess={onFormSuccess}
              />
            </Stepper.Step>
          </Stepper>
        </Stack>
      </Drawer>
      <ExitAlert
        bodyProps={{
          pl: 34,
          w: "80%",
        }}
        modalProps={{
          opened: alertOpened,
          onClose: alertClose,
          closeButtonProps: {
            right: 15,
          },
        }}
        title="Unsaved Changes"
        titleIcon={<IconExclamationCircleFilled fill="red" />}
        message="You have unsaved changes. Are you sure you want to go back without saving?"
        handleConfirm={handleContinueAlert}
      />

      <Modal
        opened={previewOpened}
        onClose={closePreview}
        title="Notification Preview"
        size="lg"
        centered
      >
        <DevicePreview
          title={notificationForm.values.title}
          body={notificationForm.values.text}
          image={notificationForm.values.image || undefined}
        />
      </Modal>
    </>
  );
};

export default AddNotification;