"use client";

import Link from "next/link";
import { ChevronLeft, ChevronRight, ShieldCheck } from "lucide-react";
import Image from "next/image";
import { useTranslations, useLocale } from "next-intl";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import {
  getGlobalSettingsMap,
  getFooterData,
} from "@/lib/actions/globalSettingsActions";
import { toast, ToastContainer } from "react-toastify";
import BackToTopButton from "./BackToTopButton";
import { indexAnnouncement } from "@/lib/actions/announcementActions";
import Button from "./common/Button";
import { CgClose } from "react-icons/cg";
import { Announcement, LanguageCode } from "../../types/announcement";
import { getImageUrl } from "@/hooks/useImageUrl";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation} from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";

export default function Footer() {
  const t = useTranslations();
  const locale = useLocale();
  const pathname = usePathname();
  const [settingsMap, setSettingsMap] = useState<any>(null);

  const [showAnnouncement, setShowAnnouncement] = useState<boolean>(false);
  const [announcement, setAnnouncement] = useState<Announcement | null>(null);
  const [showConfirmModal, setShowConfirmModal] = useState<null | "on">(null);

  useEffect(() => {
    const getAnnouncement = async () => {
      try {
        const result = await indexAnnouncement();

        if (!result.success) {
          toast.error(result?.message || t("validation.error_msg"));
        }

        const data = result?.data;

        if (!data) {
          return;
        }

        const id = data.id;

        if (!id) return;

        const count = data.count;

        const savedId = localStorage.getItem("announcementId");

        if (savedId !== id) {
          localStorage.removeItem("announcementId");
          localStorage.removeItem("announcementCount");

          localStorage.setItem("announcementId", id);
          localStorage.setItem("announcementCount", "1");

          setShowAnnouncement(true);
          setAnnouncement(data);
          setShowConfirmModal("on");
          return;
        }

        let localCount = parseInt(
          localStorage.getItem("announcementCount") || "0",
        );

        if (localCount >= count) {
          return;
        }

        localCount += 1;

        localStorage.setItem("announcementId", id);
        localStorage.setItem("announcementCount", String(localCount));

        setShowAnnouncement(true);
        setAnnouncement(data);
        setShowConfirmModal("on");
      } catch (error: any) {
        toast.error(
          error?.response?.data?.message ||
            t("validation.error_getting_global_settings"),
        );
      }
    };

    getAnnouncement();

    return () => {};
  }, []);

  useEffect(() => {
    (async () => {
      try {
        // const result = await getGlobalSettingsMap();
        // setSettingsMap(result.data);
        const footerResult = await getFooterData();
        setSettingsMap(footerResult.data);
      } catch (error: any) {
        toast.error(
          error?.response?.data?.message ||
            t("validation.error_getting_global_settings"),
        );
      }
    })();
  }, [locale]);

  if (!settingsMap) return null;

  // Check if current path is /chat
  const isChat = pathname.includes("/chat");

  const renderBanner = () => {
    const banner = announcement?.banner?.[locale as LanguageCode] || [];
    if (banner.length === 0) return null;

    return (
      <div className="relative w-[50%] max-sm:w-full flex items-center justify-center overflow-hidden max-h-[450px] max-sm:max-h-[300px] max-sm:rounded-[10px_10px_0_0]">
        {/* Left Arrow */}
      <button className="banner-prev absolute left-2 z-10 bg-white/80 hover:bg-white shadow-md rounded-full p-2 transition">
        <ChevronLeft className="w-5 h-5 text-black" />
      </button>

      {/* Right Arrow */}
      <button className="banner-next absolute right-2 z-10 bg-white/80 hover:bg-white shadow-md rounded-full p-2 transition">
        <ChevronRight className="w-5 h-5 text-black" />
      </button>
        <Swiper
          modules={[Navigation]}
          slidesPerView={1}
          loop={true}
          navigation={{
            prevEl: ".banner-prev",
            nextEl: ".banner-next",
          }}
          className="w-full h-full announcement-swiper overflow-hidden"
        >
          {banner.map((item, index) => (
            <SwiperSlide key={index}>
              {item.type.startsWith("image/") && (
                <img
                  src={getImageUrl(item.url)}
                  alt={
                    announcement?.title?.[locale as LanguageCode] ||
                    "Announcement"
                  }
                  className="w-full h-full object-cover rounded-[10px_0_0_10px] max-sm:rounded-[10px_0_0_0] max-sm:h-[100vh]"
                />
              )}

              {item.type.startsWith("video/") && (
                <video
                  className="w-full h-full object-cover rounded-[10px_0_0_10px] max-sm:rounded-[10px_0_0_0] max-sm:h-[100vh]"
                  autoPlay
                  muted
                  loop
                  playsInline
                  controls
                >
                  <source
                    src={`${process.env.NEXT_PUBLIC_IMAGE_BASE_URL}/${item.url}`}
                    type={item.type}
                  />
                </video>
              )}
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    );
  };

  return (
    <>
      <ToastContainer />
      <footer
        className={`bg-[#0c1122] text-white ${isChat ? "pb-0" : "pb-16 md:pb-0"} dark:bg-card`}
      >
        <div className="py-10 md:py-[72px] px-6">
          <div className="max-w-w1660 mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-[30px] xl:gap-5 text-sm">
            <div className="order-1">
              <h2 className="text-lg font-semibold mb-3">
                {settingsMap.site_title?.value || t("kanzy")}
              </h2>
              <p className="text-neutral-400 text-sm mb-1 dark:text-neutral-300">
                {t("customer_support")}:
              </p>
              <a
                className="font-medium text-lg text-white mb-3 flex gap-2.5 items-center"
                href={`https://wa.me/${(
                  settingsMap?.siteSettings?.siteSettings?.contact_information
                    ?.contact_support_phone?.[locale] || ""
                ).replace(/[^0-9]/g, "")}`}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="social image"
              >
                <Image
                  src="/socialicons/whatsapp.svg"
                  alt="whatsapp"
                  width={24}
                  loading="lazy"
                  height={24}
                  style={{ objectFit: "contain", width: 24, height: 24 }}
                />
                {
                  settingsMap?.siteSettings?.siteSettings?.contact_information
                    ?.contact_support_phone?.[locale]
                }
              </a>
              <p className="text-neutrals300 text-base">
                {
                  settingsMap?.siteSettings?.siteSettings?.contact_information
                    ?.office_location?.[locale]
                }
              </p>
              <a
                href={`mailto:${settingsMap?.siteSettings?.siteSettings?.contact_information?.contact_support_email?.[locale]}`}
                className="text-white font-medium text-lg mt-3 inline-block"
              >
                {
                  settingsMap?.siteSettings?.siteSettings?.contact_information
                    ?.contact_support_email?.[locale]
                }
              </a>
            </div>
            <div className="order-2">
              <h3 className="font-medium mb-3 uppercase leading-6 text-white">
                {t("footer.category")}
              </h3>
              <ul className="space-y-3 text-neutrals400">
                {settingsMap?.category.map((item: any, index: any) => (
                  <li key={index}>
                    <Link
                      href={`products?category=${item?.slug}`}
                      className="hover:text-white transition"
                      prefetch={true}
                      aria-label="products category"
                    >
                      {item?.title?.[locale]}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
            <div className="order-3 lg:order-4 xl:order-3 col-span-full xl:col-span-2 2xl:col-span-3">
              <h3 className="font-medium mb-3 uppercase leading-6 text-white">
                {t("footer.quick_links")}
              </h3>
              <ul className=" text-neutrals400 grid grid-cols-1 sm:grid-cols-2 gap-y-3 gap-x-5">
                {settingsMap?.product.map((item: any, index: any) => (
                  <li key={index}>
                    <Link
                      href={`/products/${item?.productId}`}
                      className="hover:text-white transition"
                      aria-label={`product ${item?.title}`}
                      prefetch={true}
                    >
                      {item?.title}
                    </Link>
                  </li>
                ))}
                <li>
                  <Link
                    href="/contact"
                    className="hover:text-white transition"
                    aria-label="contact us"
                    prefetch={true}
                  >
                    {t("footer.contact_us")}
                  </Link>
                </li>
                <li>
                  <Link
                    href="/faq"
                    className="hover:text-white transition"
                    aria-label="frequently asked questions"
                    prefetch={true}
                  >
                    {t("footer.frequently_asked_questions")}
                  </Link>
                </li>
                <li>
                  <Link
                    href="/terms-and-conditions"
                    className="hover:text-white transition"
                    aria-label="terms of service"
                    prefetch={true}
                  >
                    {t("footer.terms_of_service")}
                  </Link>
                </li>
                <li>
                  <Link
                    href="/privacy-policy"
                    className="hover:text-white transition"
                    aria-label="privacy policy"
                    prefetch={true}
                  >
                    {t("footer.privacy_policy")}
                  </Link>
                </li>
              </ul>
            </div>
            <div className="order-4 lg:order-3 xl:order-4 space-y-6">
              <div className="flex items-center gap-2.5 text-white">
                <ShieldCheck className="w-6 h-6" />
                <span className="font-medium uppercase leading-6">
                  {t("footer.safe_and_secure_payment")}
                </span>
              </div>
              {settingsMap?.siteSettings?.siteSettings?.social_media &&
                Object.keys(settingsMap.siteSettings.siteSettings.social_media)
                  .length > 0 && (
                  <div>
                    <p className="font-medium uppercase leading-6 mb-3">
                      {t("footer.social_links")}
                    </p>
                    <div className="flex items-center gap-4 text-white">
                      {Object.entries(
                        settingsMap?.siteSettings?.siteSettings?.social_media ||
                          {},
                      ).map(([key, item]: any, index) => (
                        <a
                          key={key}
                          href={item?.[locale]}
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          <Image
                            src={`/socialicons/${key}.svg`}
                            alt={key}
                            width={24}
                            height={24}
                          />
                        </a>
                      ))}
                    </div>
                  </div>
                )}
            </div>
          </div>
        </div>
        <div className="border-t border-[#303639] p-6 text-left md:text-center text-neutrals300 text-sm dark:bg-cardfooter rtl:md:text-center rtl:text-right">
          {t("footer.copyright")} © {new Date().getFullYear()}
        </div>
      </footer>

      <BackToTopButton settingsMap={settingsMap} locale={locale} />

      {showConfirmModal && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30 max-md:px-4"
          onClick={() => setShowConfirmModal(null)}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            className="min-h-[450px] max-w-[750px] mx-4 relative flex bg-white rounded-xl shadow-2xl w-full dark:bg-darkbg transition-all max-sm:flex-col"
          >
            <button
              className="absolute -top-2 -right-1.5 z-10 bg-white border border-neutrals100 text-primary500 w-8 h-8 flex items-center justify-center rounded-full hover:bg-primary500 hover:text-white hover:border-primary500 dark:hover:bg-primary400 dark:hover:text-white dark:hover:border-primary400 dark:bg-neutrals100"
              onClick={() => setShowConfirmModal(null)}
              aria-label="close"
            >
              <CgClose />
            </button>

            {/* Banner Section */}
            {renderBanner()}

            <div className="w-[50%] p-5 pt-4 pr-6 overflow-y-auto min-h-[300px] overflow-auto max-h-[440px] max-sm:w-full max-sm:min-h-[200px] max-sm:p-5 max-sm:max-h-[300px]">
              {/* Title Section */}
              <div className="mb-1.5">
                <h3 className="text-xl font-semibold text-gray-900 dark:text-white max-lg:text-lg capitalize">
                  {announcement?.title?.[locale as LanguageCode] || ""}
                </h3>
              </div>

              {/* Description Section */}
              <div className="mb-2.5">
                <div
                  className="text-sm text-neutrals600 dark:text-neutrals300 leading-relaxed"
                  dangerouslySetInnerHTML={{
                    __html:
                      announcement?.description?.[locale as LanguageCode] || "",
                  }}
                />
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}