"use client";

import { useEffect, useState } from "react";
import MobilePageHeader from "@/components/common/MobilePageHeader";
import { IoIosArrowForward } from "react-icons/io";
import { MdOutlineDeleteOutline, MdOutlineEdit } from "react-icons/md";
import { deleteSearch, indexSearches } from "@/lib/actions/saveSearchActions";
import { useAppDispatch, useAppSelector } from "@/app/store/hooks";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { toast } from "react-toastify";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { getStoredLocale } from "@/lib/getLocale";
import Button from "@/components/common/Button";
import SearchCard from "@/components/saveSearch/Searchcard";
import DeleteConfirmModal from "@/components/saveSearch/DeleteConfirmModal";
import DataNotFound from "@/components/common/DataNotFound";
import RouteLoader from "@/components/common/RouteLoader";
import Loader from "@/components/common/Loader";

export default function SaveSearch() {
  const [savedSearches, setSavedSearches] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const user = useAppSelector((state) => state.auth.user);
  const dispatch = useAppDispatch();
  const router = useRouter();
  const t = useTranslations();
  const locale = getStoredLocale();

  const [searchId, setSearchId] = useState<string>("");

  const [showConfirmModal, setShowConfirmModal] = useState<null | "on">(null);

  const handleBack = () => {
    window.history.back();
  };

  useEffect(() => {
    if (!user?.token) return;

    const fetchUserSearches = async () => {
      try {
        setIsLoading(true);

        const response = await indexSearches(user?.token);

        if (response?.success && Array.isArray(response?.data)) {
          const mapped = response.data.map((item: any) => {
            const getAttr = (name: string) =>
              item.attributes.find(
                (a: any) => a.name.toLowerCase() === name.toLowerCase()
              );

            const price = item.extraSearchParams.params?.price;

            const mapValues = (attr: any) =>
              attr?.values.map((v: any) => ({
                key: v.key,
                value: v.value,
                meta: v.meta,
              })) || [];

            return {
              id: item._id,
              title: item.title,
              categoryType: item.categoryType,
              category: item.category,
              price: price ? `SAR-${price.MIN} - SAR-${price.MAX}` : undefined,

              // colors: mapValues(getAttr("color")),
              // brand: mapValues(getAttr("brand")),
              // condition: mapValues(getAttr("condition")),
              // fuel: mapValues(getAttr("fuel type")),
              // tags: mapValues(getAttr("tags")),

              filters: item.attributes
                // .filter(
                //   (a: any) =>
                //     ![
                //       "brand",
                //       "condition",
                //       "fuel type",
                //       "tags",
                //       "color",
                //     ].includes(a.name.toLowerCase())
                // )
                .map((a: any) => ({
                  attributeId: a?.attributeId,
                  name: a.name,
                  label: a.label,
                  values: mapValues(a),
                })),

              createdOn: new Date(item.createdAt).toLocaleString("en-US", {
                month: "long",
                day: "numeric",
                year: "numeric",
                hour: "numeric",
                minute: "2-digit",
              }),
            };
          });

          setSavedSearches(mapped);
        }
      } catch (error: any) {
        if (checkAuthErrorGet(error, dispatch, router)) return;
        toast.error(
          error?.response?.data?.message || t("validation.error_msg")
        );
      } finally {
        setIsLoading(false);
      }
    };

    fetchUserSearches();
  }, [user?.token]);

  const handleDelete = async () => {
    setIsLoading(true);
    try {
      const response = await deleteSearch(user.token, {
        searchId: searchId,
      });

      if (response.success) {
        toast.success("Search Deleted Successfully");

        const allData = savedSearches.filter(
          (item: any) => item.id != searchId
        );
        setSavedSearches(allData);
      }
    } catch (error: any) {
      console.log("error: ", error);
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error("Something went wrong.");
    } finally {
      setIsLoading(false);
      setShowConfirmModal(null);
    }
  };

  const handleEdit = async (id: string) => {
    const item = savedSearches?.find((obj) => obj.id == id);
    const obj = {
      ...item,
      isView: false,
    };

    if (item) {
      localStorage.removeItem("savedSearchFilter");
      localStorage.setItem("savedSearchFilter", JSON.stringify(obj));
      router.push(
        `/filters/${item.categoryType}?category=${item.category}&save_search_id=${id}`
      );
    }
  };

  const handleView = async (id: string) => {
    const item = savedSearches?.find((obj) => obj.id == id);
    const obj = {
      ...item,
      isView: true,
    };

    if (item) {
      localStorage.removeItem("savedSearchFilter");
      localStorage.setItem("savedSearchFilter", JSON.stringify(obj));
      router.push(
        `/filters/${item.categoryType}?category=${item.category}&save_search_id=${id}`
      );
    }
  };

  if (isLoading)
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Loader />
      </div>
    );

  return (
    <RouteLoader>
      <MobilePageHeader title="Saved Search" onBack={handleBack} />
      <main className="flex-1 max-md:px-0">
        <h1 className="text-lg font-bold text-neutrals900 mb-6 dark:text-white max-md:hidden">
          {t("dashboard.save_search")}
        </h1>
        <section className="rounded-lg">
          {savedSearches.length > 0 ? (
            savedSearches.map((item) => (
              <div
                key={item.id}
                className="bg-white border border-neutrals100 rounded-md p-4 mb-4 shadow-sm hover:shadow-lg transition-all hover:border-primary100 dark:bg-darkbg dark:border-darkborder"
              >
                {/* Header */}
                <div className="flex items-start justify-between">
                  <h2 className="text-base font-semibold text-neutrals900 mb-2 max-sm:text-sm dark:text-neutrals100">
                    {item.title}
                  </h2>
                  <div className="flex gap-2">
                    <MdOutlineEdit
                      onClick={() => {
                        handleEdit(item.id);
                      }}
                      size={23}
                      className="text-neutrals500 cursor-pointer hover:text-primary500 dark:hover:text-primary400"
                    />
                    <MdOutlineDeleteOutline
                      onClick={() => {
                        setShowConfirmModal("on");
                        setSearchId(item.id);
                      }}
                      size={24}
                      className="text-red-600 cursor-pointer hover:text-red-700"
                    />
                  </div>
                </div>

                {/* Attributes */}
                <div className="flex flex-wrap gap-5 gap-y-2.5 text-sm bg-neutrals50 mb-2.5 py-1 px-2 dark:bg-cardfooter">
                  {/* Mandatory fields */}
                  {item?.price && (
                    <div className="pr-5 border-r border-neutrals100 dark:border-neutral-500">
                      <div className="text-sm font-normal text-neutrals500 dark:text-neutrals400">
                        {t("dashboard.price")}
                      </div>
                      <div className="font-semibold text-sm dark:text-neutrals300">
                        {item?.price}
                      </div>
                    </div>
                  )}

                  {item?.colors?.length > 0 && (
                    <div className="pr-5 border-r border-neutrals100 dark:border-neutral-500">
                      <div className="text-sm font-normal text-neutrals500 dark:text-neutrals400">
                        {t("dashboard.color")}
                      </div>
                      <div className="flex gap-1 mt-1">
                        {item.colors.map((color: any, idx: number) => (
                          <div
                            key={idx}
                            className={`w-3 h-3 rounded-full inline-block ${color}`}
                          ></div>
                        ))}
                      </div>
                    </div>
                  )}

                  {item.brand && (
                    <div className="pr-5 border-r border-neutrals100 dark:border-neutral-500">
                      <div className="text-sm font-normal text-neutrals500 dark:text-neutrals400">
                        {t("dashboard.brand")}
                      </div>
                      <div className="font-semibold text-sm dark:text-neutrals300">
                        {item.brand.map((val: any, i: number) => (
                          <span key={i}>
                            {locale === "en" ? val.value?.en : val.value?.ar}{" "}
                            {i != item.brand.length - 1 ? ", " : ""}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}

                  {item?.condition && (
                    <div className="pr-5 border-r border-neutrals100 dark:border-neutral-500">
                      <div className="text-sm font-normal text-neutrals500 dark:text-neutrals400">
                        {t("dashboard.condition")}
                      </div>
                      <div className="font-semibold text-sm dark:text-neutrals300">
                        {item?.condition.map((val: any, i: number) => (
                          <span key={i}>
                            {locale === "en" ? val.value?.en : val.value?.ar}
                            {i != item.condition.length - 1 ? ", " : ""}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}

                  {item?.tags?.length > 0 && (
                    <div className="pr-5 border-r border-neutrals100 dark:border-neutral-500">
                      <div className="text-sm font-normal text-neutrals500 dark:text-neutrals400">
                        {t("dashboard.tags")}
                      </div>
                      <div className="flex flex-wrap gap-1 mt-1">
                        {item?.tags.map((tag: any, idx: number) => (
                          <span
                            key={idx}
                            className="bg-neutrals100 text-neutrals700 text-xs font-semibold px-2 py-1 rounded-full dark:bg-cardfooter dark:text-neutrals300"
                          >
                            {locale === "en" ? tag.value?.en : tag.value?.ar}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}

                  {item?.fuel && (
                    <div className="pr-5 border-r border-neutrals100 dark:border-neutral-500">
                      <div className="text-sm font-normal text-neutrals500 dark:text-neutrals400">
                        {t("dashboard.fuel")}
                      </div>
                      <div className="font-semibold text-sm dark:text-neutrals300">
                        {item?.fuel.map((f: any, idx: number) => (
                          <span key={idx}>
                            {locale === "en" ? f.value?.en : f.value?.ar}
                            {idx != item.fuel.length - 1 ? ", " : ""}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Dynamic Attributes */}
                  {item?.filters.map((attr: any, idx: number) => (
                    <div
                      key={idx}
                      className="pr-5 border-r border-neutrals100 dark:border-neutral-500"
                    >
                      <div className="text-sm font-normal text-neutrals500 dark:text-neutrals400">
                        {locale === "en" ? attr.label?.en : attr.label?.ar}
                      </div>

                      <div className="font-semibold text-sm dark:text-neutrals300 flex gap-2 flex-wrap">
                        {attr?.values.map((val: any, i: number) => {
                          const textVal =
                            locale === "en" ? val.value?.en : val.value?.ar;
                          const fileUrl =
                            locale === "en"
                              ? val.meta?.fileUrl_en
                              : val.meta?.fileUrl_ar;

                          const isTag = attr?.name
                            ?.toLowerCase()
                            .includes("tag")
                            ? true
                            : false;

                          if (isTag) {
                            return (
                              <span
                                key={i}
                                className="bg-neutrals100 text-neutrals700 text-xs font-semibold px-2 py-1 rounded-full dark:bg-cardfooter dark:text-neutrals300"
                              >
                                {textVal}
                              </span>
                            );
                          }

                          return textVal ? (
                            <span key={i}>
                              {textVal}
                              {i != attr.values.length - 1 ? ", " : ""}
                            </span>
                          ) : fileUrl ? (
                            <img
                              key={i}
                              src={`${process.env.NEXT_PUBLIC_API}/${fileUrl}`}
                              alt={val.meta?.originalFileName_en || "attribute"}
                              className="w-12 h-12 object-cover rounded"
                            />
                          ) : null;
                        })}
                      </div>
                    </div>
                  ))}
                </div>

                {/* Footer */}
                <div className="flex items-start justify-between gap-1">
                  <p className="text-sm text-neutrals500 mt-4 dark:text-neutrals400">
                    {t("dashboard.created_on")} {item.createdOn}
                  </p>
                  <button className="w-11 h-11 bg-kzblue50 text-lg font-bold rounded-lg flex items-center justify-center cursor-pointer dark:bg-background dark:hover:bg-cardfooter rtl:rotate-180">
                    <IoIosArrowForward
                      onClick={() => handleView(item.id)}
                      className="text-primary500 dark:text-primary400"
                    />
                  </button>
                </div>
              </div>
            ))
          ) : (
            <DataNotFound />
          )}
        </section>

        {showConfirmModal && (
          <div
            className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30 "
            onClick={() => setShowConfirmModal(null)}
          >
            <div
              onClick={(e) => e.stopPropagation()}
              className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-sm dark:bg-darkbg transition-all"
            >
              <div className="flex items-start gap-3 mb-4">
                <div className="flex-shrink-0 mt-1">
                  <svg
                    className="w-6 h-6 text-red-500"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M12 9v2m0 4h.01M5.07 19H18.93a2 2 0 001.78-2.9l-6.93-12a2 2 0 00-3.56 0l-6.93 12a2 2 0 001.78 2.9z"
                    />
                  </svg>
                </div>
                <div>
                  <h2 className="text-lg font-bold text-neutrals800 dark:text-neutrals100">
                    {t("dashboard.delete_confirm")}
                  </h2>
                  <p className="mt-1 text-sm text-neutrals600 dark:text-neutrals300">
                    {t("dashboard.delete_desc")}
                  </p>
                </div>
              </div>

              <hr className="my-4 border-t border-neutrals200 dark:border-neutrals700" />

              <div className="flex justify-end gap-3">
                <Button
                  variant="outline"
                  onClick={() => setShowConfirmModal(null)}
                  label={t("cancel")}
                />

                <Button
                  label={isLoading ? t("deleting") : t("delete")}
                  type="button"
                  onClick={() => {
                    handleDelete();
                  }}
                  disabled={isLoading}
                  variant="outline"
                />
              </div>
            </div>
          </div>
        )}
      </main>
    </RouteLoader>
  );
}