"use client";

import {
  useForm,
  FormProvider,
  Controller,
  SubmitHandler,
} from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { useTranslations } from "next-intl";

import "rsuite/DatePicker/styles/index.css";
import { DatePicker } from "rsuite";

import SideDrawer from "@/components/common/SideDrawer";
import Button from "@/components/common/Button";
import Input from "@/components/common/CustomInputField";
import MultiImageUploader from "@/components/MultiImageUploader";
import { createAdvertisement } from "@/lib/actions/productCategoryAction";
import { useAppDispatch, useAppSelector } from "@/app/store/hooks";
import { useRouter } from "next/navigation";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { toast } from "react-toastify";
import { ADVERTISEMENT_CAT, CATEGORIES } from "@/lib/formTypes";
import { IoCheckmarkOutline } from "react-icons/io5";

type AdvertisementFormValues = {
  title: string;
  description: string;
  startDate: Date | null;
  endDate: Date | null;
  bannerImage: File | any;
  pagesSelected: string[];
};

interface PageCheckbox {
  id: string;
  label: string;
  value: string;
  parentId?: string;
}

interface AdvertisementFormProps {
  isOpen: boolean;
  onClose: () => void;
  isSubmitting?: boolean;
  postId: string;
  postType: string;
}

const createAdvertisementSchema = (t: any) =>
  z
    .object({
      title: z.string().min(1, t("advertisement.validation.title_required")),

      description: z
        .string()
        .min(1, t("advertisement.validation.description_required")),

      startDate: z
        .date()
        .nullable()
        .refine((val) => val !== null, {
          message: t("advertisement.validation.start_date_required"),
        }),

      endDate: z
        .date()
        .nullable()
        .refine((val) => val !== null, {
          message: t("advertisement.validation.end_date_required"),
        }),

      bannerImage: z.instanceof(File, {
        message: t("advertisement.validation.banner_image_required"),
      }),

      pagesSelected: z
        .array(z.string())
        .min(1, t("advertisement.validation.pages_required")),
    })
    .refine(
      (data) =>
        data.startDate !== null &&
        data.endDate !== null && {
          // !isBefore(data.endDate, data.startDate),
          path: ["endDate"],
          message: t("advertisement.validation.invalid_dates"),
        },
    );

export default function AdvertisementForm({
  isOpen,
  onClose,
  isSubmitting = false,
  postId,
  postType,
}: AdvertisementFormProps) {
  const t = useTranslations();

  const ALL_PAGES: PageCheckbox[] = [
    { id: "home", label: t("advertisement.pages.home"), value: "home" },
    {
      id: "home_main_banner",
      label: t("advertisement.pages.main_banner"),
      value: "home.mainBanner",
      parentId: "home",
    },
    {
      id: "home_medium_large",
      label: t("advertisement.pages.medium_page_large"),
      value: "home.mediumPageLarge",
      parentId: "home",
    },
    {
      id: "home_medium_top",
      label: t("advertisement.pages.medium_page_top"),
      value: "home.mediumPageTop",
      parentId: "home",
    },
    {
      id: "home_medium_bottom",
      label: t("advertisement.pages.medium_page_bottom"),
      value: "home.mediumPageBottom",
      parentId: "home",
    },
    {
      id: "home_footer",
      label: t("advertisement.pages.footer"),
      value: "home.footer",
      parentId: "home",
    },
    {
      id: "fresh_recommendation",
      label: t("advertisement.pages.fresh_recommendation"),
      value: "freshRecommendation",
    },
    {
      id: "filter_page",
      label: t("advertisement.pages.filter_page"),
      value: "filter_page",
      parentId: "fresh_recommendation",
    },
    {
      id: "single_post",
      label: t("advertisement.pages.single_post"),
      value: "single_post",
      parentId: "fresh_recommendation",
    },
  ];

  const { user } = useAppSelector((state) => state?.auth);
  const dispatch = useAppDispatch();
  const router = useRouter();

  const schema = createAdvertisementSchema(t);

  const methods = useForm<AdvertisementFormValues>({
    resolver: zodResolver(schema),
    mode: "onChange",
    defaultValues: {
      title: "",
      description: "",
      startDate: null,
      endDate: null,
      bannerImage: null,
      pagesSelected: [],
    },
  });

  const {
    handleSubmit,
    control,
    watch,
    setValue,
    formState: { errors },
  } = methods;

  const pagesSelected = watch("pagesSelected");
  const startDate = watch("startDate");

  const handleDisplayAllPages = (checked: boolean) => {
    setValue("pagesSelected", checked ? ALL_PAGES.map((p) => p.value) : [], {
      shouldValidate: true,
    });
  };

  const handleGroupCheckbox = (group: string, checked: boolean) => {
    const values = ALL_PAGES.filter(
      (p) => p.parentId === group || p.value === group,
    ).map((p) => p.value);

    setValue(
      "pagesSelected",
      checked
        ? Array.from(new Set([...pagesSelected, ...values]))
        : pagesSelected.filter((v) => !values.includes(v)),
      { shouldValidate: true },
    );
  };

  const handleIndividualCheckbox = (value: string, checked: boolean) => {
    setValue(
      "pagesSelected",
      checked
        ? [...pagesSelected, value]
        : pagesSelected.filter((v) => v !== value),
      { shouldValidate: true },
    );
  };

  const isAllPagesSelected = pagesSelected.length === ALL_PAGES.length;

  const handleFormSubmit: SubmitHandler<AdvertisementFormValues> = async (
    data,
  ) => {
    const formData = new FormData();
    formData.append("title_en", data.title);
    formData.append("title_ar", data.title);
    formData.append("description_en", data.description);
    formData.append("description_ar", data.description);
    formData.append("start_date", data.startDate!.toISOString());
    formData.append("end_date", data.endDate!.toISOString());
    formData.append("url", `/${ADVERTISEMENT_CAT[postType]}/${postId}`);
    formData.append("postId", postId);
    formData.append("postType", CATEGORIES.product);

    formData.append("banner_en", data.bannerImage);

    data.pagesSelected.forEach((page) => {
      formData.append("display_on[]", page);
    });

    try {
      const response = await createAdvertisement(user.token, formData);

      toast.success(t("advertisement.success_create"));
      methods.reset();
      onClose();
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(
        error?.response?.data?.message || t("advertisement.error_create"),
      );
    }
  };

  return (
    <SideDrawer
      isOpen={isOpen}
      title={t("advertisement.create_advertisement")}
      onClose={onClose}
      footer={
        <div className="flex justify-end gap-2">
          <Button
            label={t("button.cancel")}
            onClick={onClose}
            variant="outline"
          />
          <Button
            label={t("button.save")}
            onClick={handleSubmit(handleFormSubmit)}
            disabled={isSubmitting}
            variant="secondary"
          />
        </div>
      }
    >
      <FormProvider {...methods}>
        <form className="space-y-5">
          <Input label={t("advertisement.title")} name="title" required />
          <Input
            type="textarea"
            label={t("advertisement.description")}
            name="description"
            rows={5}
            required
          />

          {/* START DATE */}
          <div>
            <label className="block text-sm font-medium mb-1 dark:text-neutrals400 text-neutrals800">
              {t("advertisement.start_date")}{" "}
              <span className="text-sm text-red-500">*</span>
            </label>

            <Controller
              name="startDate"
              control={control}
              render={({ field }) => (
                <DatePicker
                  oneTap
                  placeholder={t("advertisement.select_start_date")}
                  style={{ width: "100%" }}
                  format="yyyy-MM-dd"
                  value={field.value}
                  onChange={(value) => {
                    field.onChange(value);
                  }}
                  shouldDisableDate={(date) => date < new Date()}
                />
              )}
            />

            {errors.startDate && (
              <p className="text-red-500">{errors.startDate.message}</p>
            )}
          </div>

          {/* END DATE */}
          <div>
            <label className="block text-sm font-medium mb-1 dark:text-neutrals400 text-neutrals800">
              {t("advertisement.end_date")}{" "}
              <span className="text-sm text-red-500">*</span>
            </label>

            <Controller
              name="endDate"
              control={control}
              render={({ field }) => (
                <DatePicker
                  oneTap
                  placeholder={t("advertisement.select_end_date")}
                  style={{ width: "100%" }}
                  format="yyyy-MM-dd"
                  value={field.value}
                  onChange={(value) => {
                    field.onChange(value);
                  }}
                  shouldDisableDate={(date) => date < new Date()}
                />
              )}
            />

            {errors.endDate && (
              <p className="text-red-500">{errors.endDate.message}</p>
            )}
          </div>

          {/* IMAGES */}
          <div>
            <label className="block text-sm font-medium mb-1 dark:text-neutrals400 text-neutrals800">
              {t("advertisement.banner_image")}{" "}
              <span className="text-sm text-red-500">*</span>
            </label>
            <Controller
              name="bannerImage"
              control={control}
              render={({ field }) => {
                // Check if MultiImageUploader expects array or single file

                return (
                  <MultiImageUploader
                    fileType="image"
                    multiple={false}
                    value={field.value ? [field.value] : []}
                    onChange={(files) => {
                      if (Array.isArray(files)) {
                        field.onChange(files[0] || null);
                      } else {
                        field.onChange(files || null);
                      }
                    }}
                  />
                );
              }}
            />
            {errors.bannerImage && errors.bannerImage.message && (
              <p className="text-red-500">
                {errors.bannerImage.message.toString()}
              </p>
            )}
          </div>

          <div className="space-y-4">
            <div>
              <label className="font-medium text-gray-700 dark:text-gray-400">
                {t("advertisement.display_positions")}{" "}
                <span className="text-gray-500 font-normal dark:text-gray-400">
                  ({t("advertisement.select_all_apply")})
                </span>
              </label>
            </div>

            {/* Display on All Pages Checkbox */}
            <label className="flex gap-2 text-base cursor-pointer items-start">
              <span className="relative w-5 h-5 flex-shrink-0 mt-0.5">
                <input
                  type="checkbox"
                  checked={isAllPagesSelected}
                  onChange={(e) => handleDisplayAllPages(e.target.checked)}
                  className="peer hidden"
                />
                <span className="absolute inset-0 rounded-[4px] border border-gray-300 peer-checked:border-primary500 peer-checked:border-2 peer-checked:bg-primary500 transition-all dark:peer-checked:border-primary400 dark:peer-checked:bg-primary400 dark:border-darkborder"></span>
                <span className="text-lg font-semibold absolute top-0 left-0.5 rounded-sm text-white opacity-0 peer-checked:opacity-100 peer-checked:w-2.5 peer-checked:top-[2px] peer-checked:left-0.5 peer-checked:h-2.5">
                  <IoCheckmarkOutline />
                </span>
              </span>
              <span className="text-gray-700 dark:text-gray-400">
                {t("advertisement.display_all_pages")}
              </span>
            </label>

            {/* Two Column Grid Layout */}
            <div className="grid grid-cols-2 gap-8 border border-gray-200 p-4 rounded-md dark:border-darkborder max-sm:grid-cols-1">
              {/* Home Section */}
              <div className="space-y-3">
                <h3 className="font-semibold text-gray-900 dark:text-gray-400">
                  {t("advertisement.home")}
                </h3>

                {/* Parent Home Checkbox */}
                <label className="flex gap-2 cursor-pointer items-start">
                  <span className="relative w-5 h-5 flex-shrink-0 mt-0.5">
                    <input
                      type="checkbox"
                      checked={ALL_PAGES.filter(
                        (p) => p.parentId === "home" || p.value === "home",
                      ).every((p) => pagesSelected.includes(p.value))}
                      onChange={(e) =>
                        handleGroupCheckbox("home", e.target.checked)
                      }
                      className="peer hidden"
                    />
                    <span className="absolute inset-0 rounded-[4px] border border-gray-300 peer-checked:border-primary500 peer-checked:border-2 peer-checked:bg-primary500 transition-all dark:peer-checked:border-primary400 dark:peer-checked:bg-primary400 dark:border-darkborder"></span>
                    <span className="text-lg font-semibold absolute top-0 left-0.5 rounded-sm text-white opacity-0 peer-checked:opacity-100 peer-checked:w-2.5 peer-checked:top-[2px] peer-checked:left-0.5 peer-checked:h-2.5">
                      <IoCheckmarkOutline />
                    </span>
                  </span>
                  <span className="text-gray-700 dark:text-gray-400">
                    {t("advertisement.home")}
                  </span>
                </label>

                {/* Child Home Checkboxes */}
                <div className="ml-5 space-y-2.5">
                  {ALL_PAGES.filter((p) => p.parentId === "home").map(
                    (page) => (
                      <label
                        key={page.id}
                        className="flex gap-2 cursor-pointer items-start"
                      >
                        <span className="relative w-5 h-5 flex-shrink-0 mt-0.5">
                          <input
                            type="checkbox"
                            checked={pagesSelected.includes(page.value)}
                            onChange={(e) =>
                              handleIndividualCheckbox(
                                page.value,
                                e.target.checked,
                              )
                            }
                            className="peer hidden"
                          />
                          <span className="absolute inset-0 rounded-[4px] border border-gray-300 peer-checked:border-primary500 peer-checked:border-2 peer-checked:bg-primary500 transition-all dark:peer-checked:border-primary400 dark:peer-checked:bg-primary400 dark:border-darkborder"></span>
                          <span className="text-lg font-semibold absolute top-0 left-0.5 rounded-sm text-white opacity-0 peer-checked:opacity-100 peer-checked:w-2.5 peer-checked:top-[2px] peer-checked:left-0.5 peer-checked:h-2.5">
                            <IoCheckmarkOutline />
                          </span>
                        </span>
                        <span className="text-gray-600 dark:text-gray-400">
                          {page.label}
                        </span>
                      </label>
                    ),
                  )}
                </div>
              </div>

              {/* Fresh Recommendation Page Section */}
              <div className="space-y-3">
                <h3 className="font-semibold text-gray-900 dark:text-gray-400">
                  {t("advertisement.fresh_recommendation")}
                </h3>

                {/* Parent Fresh Recommendation Checkbox */}
                <label className="flex gap-2 cursor-pointer items-start">
                  <span className="relative w-5 h-5 flex-shrink-0 mt-0.5">
                    <input
                      type="checkbox"
                      checked={ALL_PAGES.filter(
                        (p) =>
                          p.parentId === "fresh_recommendation" ||
                          p.value === "fresh_recommendation",
                      ).every((p) => pagesSelected.includes(p.value))}
                      onChange={(e) =>
                        handleGroupCheckbox(
                          "fresh_recommendation",
                          e.target.checked,
                        )
                      }
                      className="peer hidden"
                    />
                    <span className="absolute inset-0 rounded-[4px] border border-gray-300 peer-checked:border-primary500 peer-checked:border-2 peer-checked:bg-primary500 transition-all dark:peer-checked:border-primary400 dark:peer-checked:bg-primary400 dark:border-darkborder"></span>
                    <span className="text-lg font-semibold absolute top-0 left-0.5 rounded-sm text-white opacity-0 peer-checked:opacity-100 peer-checked:w-2.5 peer-checked:top-[2px] peer-checked:left-0.5 peer-checked:h-2.5">
                      <IoCheckmarkOutline />
                    </span>
                  </span>
                  <span className="text-gray-700 dark:text-gray-400">
                    {t("advertisement.fresh_recommendation")}
                  </span>
                </label>

                {/* Child Fresh Recommendation Checkboxes */}
                <div className="ml-5 space-y-2.5">
                  {ALL_PAGES.filter(
                    (p) => p.parentId === "fresh_recommendation",
                  ).map((page) => (
                    <label
                      key={page.id}
                      className="flex gap-2 cursor-pointer items-start"
                    >
                      <span className="relative w-5 h-5 flex-shrink-0 mt-0.5">
                        <input
                          type="checkbox"
                          checked={pagesSelected.includes(page.value)}
                          onChange={(e) =>
                            handleIndividualCheckbox(
                              page.value,
                              e.target.checked,
                            )
                          }
                          className="peer hidden"
                        />
                        <span className="absolute inset-0 rounded-[4px] border border-gray-300 peer-checked:border-primary500 peer-checked:border-2 peer-checked:bg-primary500 transition-all dark:peer-checked:border-primary400 dark:peer-checked:bg-primary400 dark:border-darkborder"></span>
                        <span className="text-lg font-semibold absolute top-0 left-0.5 rounded-sm text-white opacity-0 peer-checked:opacity-100 peer-checked:w-2.5 peer-checked:top-[2px] peer-checked:left-0.5 peer-checked:h-2.5">
                          <IoCheckmarkOutline />
                        </span>
                      </span>
                      <span className="text-gray-600 dark:text-gray-400">
                        {page.label}
                      </span>
                    </label>
                  ))}
                </div>
              </div>
            </div>

            {/* Error Message */}
            {errors.pagesSelected && (
              <p className="text-red-500 text-sm mt-2">
                {errors.pagesSelected.message}
              </p>
            )}
          </div>
        </form>
      </FormProvider>
    </SideDrawer>
  );
}