'use client'

import { apiCall } from "@/utils/callApi";
import React, { useEffect, useState } from "react";

let cachedCategories: any = null;
let cachedPromise: any = null;

let cachedSettings: any = null;
let cachedSettingsPromise: any = null;

const AppFooter = () => {
  const [categories, setCategories] = useState([]);
  const [settings, setSettings] = useState<any>({});

  const fetchCategories = async () => {
    try {
      if (cachedCategories) {
        setCategories(cachedCategories);
        return;
      }

      if (!cachedPromise) {
        cachedPromise = apiCall<any>("/clientapi/home").then((res) => {
          const ctg = res.data?.categories || [];
          cachedCategories = ctg;
          return ctg;
        });
      }

      const ctg = await cachedPromise;
      setCategories(ctg);
    } catch (error) {
      console.error("Error", error);
    }
  };

  const fetchGeneralSettings = async () => {
    try {
      if (cachedSettings) {
        setSettings(cachedSettings);
        return;
      }

      if (!cachedSettingsPromise) {
        cachedSettingsPromise = apiCall<any>("/api/general-settings").then((res) => {
          const stg = res.data?.data || [];
          cachedSettings = stg;
          return stg;
        });
      }

      const stg = await cachedSettingsPromise;
      setSettings(stg);
    } catch (error) {
      console.error("Error", error);
    }
  };

  useEffect(() => {
    fetchCategories()
    fetchGeneralSettings()
  }, [])

  return (
    <footer className="footercontainer">
      <div className="footertp">
        <div className="container container-xxl px-3">
          <div className="flex flex-wrap -mx-2 xl:-mx-6">
            <div className="xxl:w-1/4 xl:w-1/4 lg:w-1/4 md:w-1/3 sm:w-full w-full footercolumnone px-2 xl:px-6">
              <div className="footerlogoouter">
                <div className="footerlogo">
                  <a href="/"><img alt="Footer Logo" src={settings?.footerLogo || "/images/logo-icon.png"} /></a>
                </div>
                <div className="p-0 footeraddres">
                  <p>A store that provides you an extensive collection of men’s clothing for every occasion</p>
                </div>
              </div>
            </div>
            <div className="xxl:w-1/3 xl:w-1/3 lg:w-1/3 md:w-1/3 sm:w-7/12 w-full mb-2 sm:md-0 footercolumntwo px-2 xl:px-6">
              <div className="footernav">
                <div className="toggleCat footerheading">Categories</div>
                <ul className="footercollapse">
                  {categories?.map((cat: any) => (
                    <li key={cat._id}>
                      <a href={`/products?category=${cat.slug}`}>
                        {cat.name}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
            <div className="xxl:w-2/12 xl:w-2/12 lg:w-2/12 md:w-1/4 sm:w-5/12 w-full mb-2 sm:md-0 footercolumnthree px-2 xl:px-6">
              <div className="footernav footernavbx">
                <div className="toggleCat footerheading">Quick Links</div>
                <ul className="footercollapse">
                  <li><a href="/">Home</a></li>
                  <li><a href="/about-us">About Us</a></li>
                  <li><a href="/blog">Blog</a></li>
                  <li><a href="/contact-us">Contact Us</a></li>
                  <li><a href="/t&c">Terms &amp; Conditions</a></li>
                </ul>
              </div>
            </div>
            <div className="xxl:w-1/4 xl:w-1/4 lg:w-1/4 md:w-1/3 sm:w-full w-full footercolumnfour px-2 xl:px-6">
              <div className="footernav footernavbx !border-0">
                <div className="footerheading">We Accept:</div>
                <div className="cards">
                  <img alt="Visa" src="/images/visa.jpg" />
                  <img alt="Master Card" src="/images/mastercard.jpg" />
                  <img alt="Rupay" src="/images/rupay.jpg" />
                  <img alt="paytm" src="/images/paytm.jpg" />
                  <img alt="UPI" src="/images/upi.jpg" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="footerbtm">
        <div className="container container-xxl px-3">
          <p>Copyright © 2026 <a href="index.html">Dulhe Sahab</a>. All Rights Reserved</p>
        </div>
      </div>
    </footer>
  );
};

export default React.memo(AppFooter)