"use client";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import logo from "@/src/assets/images/logo.png";
import Link from "next/link";
import instagram from "@/src/assets/images/instagram.svg";
import linkedIn from "@/src/assets/images/linkedIn.svg";
import x from "@/src/assets/images/x.svg";
import { t } from "@/lib/i18n";
import { useGetHomeData } from "../Requests/usegetHomeData";

export default function Footer() {
  const [lang, setLang] = useState("ar");

  useEffect(() => {
    try {
      if (typeof window !== "undefined") {
        const stored = localStorage.getItem("lang");
        if (stored) setLang(stored);
      }
    } catch (error) {
      console.error("Footer localStorage error:", error);
    }
  }, []);
  const { data: homeData, isLoading } = useGetHomeData(lang);
  const footerData = homeData?.footer;

  // Map Arabic social media keys to English keys
  const mapSocialMediaKeys = (socialMedia) => {
    if (!socialMedia) return {};

    const keyMapping = {
      فيسبوك: "facebook",
      إنستقرام: "instagram",
      تويتر: "twitter",
      لينكدإن: "linkedin",
      يوتيوب: "youtube",
      واتساب: "whatsapp",
    };

    const mappedSocialMedia = {};
    Object.keys(socialMedia).forEach((arabicKey) => {
      const englishKey = keyMapping[arabicKey];
      if (englishKey && socialMedia[arabicKey]) {
        mappedSocialMedia[englishKey] = socialMedia[arabicKey];
      }
    });

    return mappedSocialMedia;
  };

  const mappedSocialMedia = mapSocialMediaKeys(footerData?.socialMedia);

  const menu = [
    { labelKey: "footer_menu_home", href: "/" },
    { labelKey: "footer_menu_races", href: "/championships" },
    { labelKey: "footer_menu_auctions", href: "/auctions" },
    { labelKey: "footer_menu_reports", href: "/#reports" },
    { labelKey: "footer_menu_news", href: "/news" },
    { labelKey: "footer_menu_articles", href: "/articles" },
    { labelKey: "footer_menu_contact", href: "/contact" },
    { labelKey: "footer_menu_regulations", href: "/regulations" },
    { labelKey: "committees_link", href: "/committees" },
  ];

  const importantLinks = [
    { labelKey: "national_service_gateway", href: "https://www.my.gov.sa" },
    { labelKey: "open_government_data", href: "https://www.data.gov.sa" },
    { labelKey: "national_data_ai_strategy", href: "https://www.nsdai.gov.sa" },
    { labelKey: "open_data_portal", href: "https://www.od.gov.sa" },
    {
      labelKey: "e_participation_portal",
      href: "https://www.istitlaa.ncc.gov.sa",
    },
  ];

  const supportLinks = [
    { labelKey: "footer_contact_us", href: "/contact" },
    { labelKey: "submit_complaint", href: "/complaints" },
    { labelKey: "about-us-footer", href: "/about" },
    { labelKey: "org_structure", href: "/org-structure" },
  ];

  const supportLinksLinks =
    footerData?.supportLinks && footerData.supportLinks.length
      ? footerData.supportLinks
      : supportLinks.map((x) => ({ label: t(lang, x.labelKey), url: x.href }));

  const seasonResults = [
    {
      labelAr: "نتائج سباق التربية - نادي الرياض",
      labelEn: "Breeding Race Results - Riyadh Club",
      file: "/season-results/season-results-2025.pdf",
    },
  ];

  const seasonResultsLinks =
    footerData?.seasonResults && footerData.seasonResults.length
      ? footerData.seasonResults
      : seasonResults.map((x) => ({
          label: lang === "ar" ? x.labelAr : x.labelEn,
          url: x.file,
        }));

  const menuLinks =
    footerData?.menuLinks && footerData.menuLinks.length
      ? footerData.menuLinks
      : menu.map((x) => ({ label: t(lang, x.labelKey), url: x.href }));

  const whatsappUrl =
    mappedSocialMedia?.whatsapp || "https://wa.me/966509302269";

  return (
    <>
      <footer className="footer">
        <div className="container max-lg:px-8">
          <div className="footer-columns">
            <div className="footer-col">
              <h4 className="footer-title">{t(lang, "summary")}</h4>
              <div className="links-cont">
                {menuLinks.map((item, i) => {
                  const href = item?.url || "";
                  const label = item?.label || "";
                  const isInternal = href.startsWith("/");

                  if (isInternal) {
                    return (
                      <Link href={href} key={i}>
                        {label}
                      </Link>
                    );
                  }

                  return (
                    <a
                      href={href || "#"}
                      key={i}
                      target="_blank"
                      rel="noreferrer"
                    >
                      {label}
                    </a>
                  );
                })}
              </div>
            </div>

            <div className="footer-col">
              <h4 className="footer-title">
                {t(lang, "footer_important_links")}
              </h4>
              {footerData?.importantLinks &&
              footerData.importantLinks.length ? (
                <div className="links-cont">
                  {footerData?.importantLinks?.map((item, i) => (
                    <a href={item.url} key={i} target="_blank" rel="noreferrer">
                      {item.label}
                    </a>
                  ))}
                </div>
              ) : (
                <div className="links-cont">
                  {importantLinks.map((item, i) => (
                    <a
                      href={item.href}
                      key={i}
                      target="_blank"
                      rel="noreferrer"
                    >
                      {t(lang, item.labelKey)}
                    </a>
                  ))}
                </div>
              )}
            </div>

            <div className="footer-col">
              <h4 className="footer-title">
                {t(lang, "footer_support_title")}
              </h4>
              <div className="links-cont">
                {supportLinksLinks.map((item, i) => {
                  const href = item?.url || "";
                  const label = item?.label || "";
                  const isInternal = href.startsWith("/");

                  if (isInternal) {
                    return (
                      <Link href={href} key={i}>
                        {label}
                      </Link>
                    );
                  }

                  return (
                    <a
                      href={href || "#"}
                      key={i}
                      target="_blank"
                      rel="noreferrer"
                    >
                      {label}
                    </a>
                  );
                })}
              </div>
            </div>

            <div className="footer-col hidden">
              {/* <h4 className="footer-title">
                {lang === "ar" ? "نتائج الموسم" : "Season Results"}
              </h4> */}
              {/* <div className="links-cont">
                {seasonResultsLinks.map((item, i) => (
                  <a
                    key={i}
                    href={item.url}
                    target="_blank"
                    rel="noreferrer"
                    className="season-result-link"
                  >
                    <svg
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      style={{
                        marginLeft: lang === "ar" ? "6px" : "0",
                        marginRight: lang === "ar" ? "0" : "6px",
                        flexShrink: 0,
                      }}
                    >
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                      <polyline points="7 10 12 15 17 10" />
                      <line x1="12" y1="15" x2="12" y2="3" />
                    </svg>
                    {item.label}
                  </a>
                ))}
              </div> */}
            </div>

            <div className="footer-col footer-social">
              <h4 className="footer-title">{t(lang, "footer_follow_us")}</h4>
              <div className="footer-social-icons">
                {mappedSocialMedia?.twitter && (
                  <a
                    href={mappedSocialMedia?.twitter}
                    target="_blank"
                    rel="noreferrer"
                    aria-label="X"
                  >
                    <Image src={x} alt="X" width={18} height={18} />
                  </a>
                )}
                {mappedSocialMedia?.linkedin && (
                  <a
                    href={mappedSocialMedia?.linkedin}
                    target="_blank"
                    rel="noreferrer"
                    aria-label="LinkedIn"
                  >
                    <Image
                      src={linkedIn}
                      alt="LinkedIn"
                      width={18}
                      height={18}
                    />
                  </a>
                )}
                {mappedSocialMedia?.instagram && (
                  <a
                    href={mappedSocialMedia?.instagram}
                    target="_blank"
                    rel="noreferrer"
                    aria-label="Instagram"
                  >
                    <Image
                      src={instagram}
                      alt="Instagram"
                      width={18}
                      height={18}
                    />
                  </a>
                )}
                {mappedSocialMedia?.facebook && (
                  <a
                    href={mappedSocialMedia?.facebook}
                    target="_blank"
                    rel="noreferrer"
                    aria-label="Facebook"
                  >
                    <svg
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                    >
                      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                    </svg>
                  </a>
                )}
                {mappedSocialMedia?.youtube && (
                  <a
                    href={mappedSocialMedia?.youtube}
                    target="_blank"
                    rel="noreferrer"
                    aria-label="YouTube"
                  >
                    <svg
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                    >
                      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                    </svg>
                  </a>
                )}
                {mappedSocialMedia?.whatsapp && (
                  <a
                    href={mappedSocialMedia?.whatsapp}
                    target="_blank"
                    rel="noreferrer"
                    aria-label="WhatsApp"
                  >
                    <svg
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                    >
                      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
                    </svg>
                  </a>
                )}
              </div>
            </div>
          </div>

          <div className="footer-bottom">
            <div className="footer-copy">
              <h5>
                {t(lang, "footer_copyright_title")} {new Date().getFullYear()}
              </h5>
              <p>
                {lang === "ar" ? "تطوير وتصميم " : "Developed by "}
                <a
                  href="https://aait.sa"
                  target="_blank"
                  rel="noreferrer"
                  style={{ color: "#fff", fontWeight: 600 }}
                >
                  {lang === "ar" ? "شركة أوامر الشبكة" : "Awamir Al-Shabakah"}
                </a>
              </p>
            </div>
            <div className="footer-logos">
              <div className="footer-logo-box">
                <Image src={logo} alt="sauid Logo" width={1000} height={1000} />
              </div>
            </div>
          </div>
        </div>
      </footer>

      {/* Floating WhatsApp Button */}
      <a
        href={whatsappUrl}
        target="_blank"
        rel="noreferrer"
        aria-label="WhatsApp"
        className="whatsapp-float"
      >
        <svg viewBox="0 0 24 24" fill="#fff" width="28" height="28">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
        </svg>
        {/* <span className="whatsapp-tooltip">
          {lang === "ar" ? "تواصل معنا" : "Chat with us"}
        </span> */}
      </a>

      <style jsx>{`
        .whatsapp-float {
          position: fixed;
          bottom: 30px;
          left: 30px;
          z-index: 9999;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: #25d366;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow:
            0 4px 15px rgba(37, 211, 102, 0.4),
            0 2px 8px rgba(0, 0, 0, 0.15);
          transition:
            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.3s;
          animation: whatsapp-pulse 2s infinite;
          text-decoration: none;
        }
        .whatsapp-float:hover {
          transform: scale(1.1);
          box-shadow:
            0 6px 25px rgba(37, 211, 102, 0.5),
            0 4px 12px rgba(0, 0, 0, 0.2);
          animation: none;
        }
        .whatsapp-float:hover .whatsapp-tooltip {
          opacity: 1;
          transform: translateX(0);
          pointer-events: auto;
        }
        .whatsapp-tooltip {
          position: absolute;
          left: 70px;
          background: #333;
          color: #fff;
          padding: 6px 14px;
          border-radius: 8px;
          font-size: 13px;
          font-weight: 500;
          white-space: nowrap;
          opacity: 0;
          transform: translateX(-10px);
          transition:
            opacity 0.3s,
            transform 0.3s;
          pointer-events: none;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        .whatsapp-tooltip::before {
          content: "";
          position: absolute;
          right: 100%;
          top: 50%;
          transform: translateY(-50%);
          border: 6px solid transparent;
          border-right-color: #333;
        }
        @keyframes whatsapp-pulse {
          0% {
            box-shadow:
              0 4px 15px rgba(37, 211, 102, 0.4),
              0 0 0 0 rgba(37, 211, 102, 0.4);
          }
          70% {
            box-shadow:
              0 4px 15px rgba(37, 211, 102, 0.4),
              0 0 0 15px rgba(37, 211, 102, 0);
          }
          100% {
            box-shadow:
              0 4px 15px rgba(37, 211, 102, 0.4),
              0 0 0 0 rgba(37, 211, 102, 0);
          }
        }
        .season-result-link {
          display: flex !important;
          align-items: center;
        }
        @media (max-width: 768px) {
          .whatsapp-float {
            bottom: 20px;
            left: 20px;
            width: 54px;
            height: 54px;
          }
          .whatsapp-tooltip {
            display: none;
          }
        }
      `}</style>
    </>
  );
}