"use client";
import LocalePath from "@/shared/LocalePath";
import { useLocale, useTranslations } from "next-intl";
import { useSelector } from "react-redux";
import { RootState } from "@/store/store";
import Logo from "@/public/logo.png";
import MediaWithFallback from "@/shared/MediaWithFallback";
import { usePathname } from "next/navigation";
import { UseMutate } from "@/hooks/UseMutate";
import UseSession from "@/hooks/UseSession";
import { useRouter } from "nextjs-toploader/app";
import Cookies from "js-cookie";

export default function Footer() {
  const t = useTranslations();

  const setting = useSelector(
    (state: RootState) => state.SettingsConfig.allSettings,
  );
  const locale = useLocale();
  const session = UseSession();
  const { allCategoriesItems: categories } = useSelector(
    (state: RootState) => state.CategoriesConfig,
  );

  const router = useRouter();
  const pathname = usePathname();
  const { mutate } = UseMutate({
    endpoint: "client/profile/settings",
    onSuccess(responseData: any) {},
    method: "PUT",
  });
  const setLanguage = async (locale: string) => {
    const lang = locale === "ar" ? "en" : "ar";
    if (session) await mutate({ locale: lang });

    Cookies.set("NEXT_LOCALE", lang);
    const url = new URL(window.location.href);
    const searchParams = url.search;
    let newPathname = pathname;
    if (newPathname.startsWith("/en")) {
      newPathname = `/${lang}/${newPathname.slice(3)}`;
    } else {
      newPathname = `/${lang}${newPathname}`;
    }
    router.push(`${newPathname}${searchParams}`);
  };

  return (
    <footer className="bg-gradient-to-b from-[#FFFBFC] to-white border-t border-gray-200">
      <div className="container py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
          <div className="lg:col-span-1">
            <LocalePath href={"/"} className="relative group mb-6">
              <div className="absolute -inset-2 bg-gradient-to-r from-primary/0 via-primary/5 to-secondary/0 rounded-xl blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
              <MediaWithFallback
                src={Logo}
                alt="vibes Flower Arrangements"
                className="h-32 w-auto object-contain relative z-10 max-w-[380px]"
              />
            </LocalePath>
            <button className="text-text-secondary hover:text-primary active:text-primary focus:text-primary transition-colors text-sm mb-6 leading-relaxed text-start w-full">
              {t("Text.footer_description")}
            </button>
            <div>
              <button className="text-sm mb-4 text-text-secondary hover:text-primary active:text-primary focus:text-primary transition-colors">
                {t("Text.social_links")}
              </button>
              <div className="flex gap-3">
                <a
                  href={setting?.facebook}
                  className="w-10 h-10 bg-gradient-to-br from-primary to-secondary hover:from-secondary hover:to-primary text-white rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:shadow-lg"
                  aria-label="Facebook"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="18"
                    height="18"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-facebook"
                  >
                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                  </svg>
                </a>
                <a
                  href={setting?.instagram}
                  className="w-10 h-10 bg-gradient-to-br from-primary to-secondary hover:from-secondary hover:to-primary text-white rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:shadow-lg"
                  aria-label="Instagram"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="18"
                    height="18"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="lucide lucide-instagram"
                  >
                    <rect
                      width="20"
                      height="20"
                      x="2"
                      y="2"
                      rx="5"
                      ry="5"
                    ></rect>
                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
                  </svg>
                </a>
                <a
                  href={setting?.twitter}
                  className="w-10 h-10 bg-gradient-to-br from-primary to-secondary hover:from-secondary hover:to-primary text-white rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:shadow-lg"
                  aria-label="X"
                >
                  <span className="font-bold text-lg">𝕏</span>
                </a>
              </div>
            </div>
          </div>
          <div>
            <h3 className="mb-6 text-primary">{t("NAV.about")}</h3>
            <ul className="space-y-3">
              <li>
                <LocalePath
                  href="/"
                  className="text-text-secondary hover:text-primary transition-all text-sm hover:translate-x-1 duration-300 inline-block"
                >
                  {t("NAV.home")}
                </LocalePath>
              </li>
              {categories?.map((ele, index) => (
                <li key={index}>
                  <LocalePath
                    href={`/products?category_id=${ele.id}`}
                    className="text-text-secondary hover:text-primary transition-all text-sm hover:translate-x-1 duration-300 inline-block"
                  >
                    {ele.name}
                  </LocalePath>
                </li>
              ))}
              <li>
                <LocalePath
                  href="/subscriptions"
                  className="text-text-secondary hover:text-primary transition-all text-sm hover:translate-x-1 duration-300 inline-block"
                >
                  {t("NAV.weekly_subscriptions")}
                </LocalePath>
              </li>
              <li>
                <LocalePath
                  href="/contact"
                  className="text-text-secondary hover:text-primary transition-all text-sm hover:translate-x-1 duration-300 inline-block cursor-pointer"
                >
                  {t("Text.contact")}
                </LocalePath>
              </li>
            </ul>
          </div>
          <div>
            <h3 className="mb-6 text-primary">{t("Text.quick_links")}</h3>
            <ul className="space-y-3">
              <li>
                <LocalePath
                  href="/terms"
                  className="text-text-secondary hover:text-primary active:text-primary focus:text-primary transition-all text-sm hover:translate-x-1 duration-300 inline-block"
                >
                  {t("NAV.terms_and_conditions")}
                </LocalePath>
              </li>
              <li>
                <LocalePath
                  href="/privacy-policy"
                  className="text-text-secondary hover:text-primary active:text-primary focus:text-primary transition-all text-sm hover:translate-x-1 duration-300 inline-block"
                >
                  {t("NAV.privacy-policy")}
                </LocalePath>
              </li>
            </ul>
          </div>
          <div>
            <h3 className="mb-6 text-primary">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="lucide lucide-circle-help inline-block mb-1"
              >
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                <path d="M12 17h.01"></path>
              </svg>{" "}
              {t("Text.help_center")}
            </h3>
            <ul className="space-y-3">
              <li className="flex items-start gap-2 text-sm">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="lucide lucide-map-pin text-primary mt-1 flex-shrink-0"
                >
                  <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
                  <circle cx="12" cy="10" r="3"></circle>
                </svg>
                <button className="text-text-secondary hover:text-primary active:text-primary focus:text-primary transition-colors text-start">
                  {setting?.location}
                </button>
              </li>
              <li className="flex items-center gap-2 text-sm">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="lucide lucide-phone text-primary flex-shrink-0"
                >
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                </svg>
                <a
                  href={`tel:${setting?.phone}`}
                  className="text-text-secondary hover:text-primary transition-colors"
                >
                  {setting?.phone}
                </a>
              </li>
              <li className="flex items-center gap-2 text-sm">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="lucide lucide-mail text-primary flex-shrink-0"
                >
                  <rect width="20" height="16" x="2" y="4" rx="2"></rect>
                  <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
                </svg>
                <a
                  href={`mailto:${setting?.email}`}
                  className="text-text-secondary hover:text-primary transition-colors"
                >
                  {setting?.email}
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className="mt-12 pt-8 border-t border-gray-200 text-center">
          <p className="text-sm text-text-secondary mb-6">
            {t("FOOTER.roles")}
          </p>
          <div className="flex flex-col md:flex-row items-center justify-between gap-6 pb-6">
            <div className="flex flex-col items-center md:items-start gap-3 flex-1">
              <div className="flex items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="lucide lucide-credit-card text-primary"
                >
                  <rect width="20" height="14" x="2" y="5" rx="2"></rect>
                  <line x1="2" x2="22" y1="10" y2="10"></line>
                </svg>
                <p className="text-xs text-text-secondary">
                  {t("FOOTER.payment-methods")}
                </p>
              </div>
              <div className="flex items-center justify-center md:justify-start">
                <img
                  src="https://bring-count-62108027.figma.site/_assets/v11/68d6c3808ab48f4b6804f47039b751df0b0c4bf3.png"
                  alt="Payment Methods - Visa, MasterCard, American Express, Meeza"
                  className="h-12 object-contain"
                />
              </div>
            </div>
            <div className="flex flex-col items-center md:items-end gap-2">
              <button
                onClick={() => setLanguage(locale)}
                className="text-xs px-4 py-2 bg-gradient-to-r from-primary to-secondary text-white rounded-lg hover:shadow-lg hover:scale-105 transition-all duration-300"
              >
                {locale === "ar" ? "English" : "العربية"}
              </button>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}