import Link from "next/link";
import Image from "next/image";
import { FooterProps } from "@/types/footer";
import { fetchPageData } from "@/services/api";
import ScrollToTop from "@/components/ScrollToTop";

export default async function Footer({ data: initialData }: FooterProps) {
  let data = initialData;

  // Fetch footer data inside the component using the GET fetchPageData service
  if (!data) {
    try {
      const footerResponse = await fetchPageData<FooterProps>("footer", { method: "GET" });
      data = footerResponse.data;
    } catch (error) {
      console.error("Error fetching footer data inside Footer component:", error);
    }
  }

  if (!data) {
    return null; // Return null if footer data has not been retrieved
  }

  const {
    footer_data,
    footer_contact,
    social_media,
    footer_menus,
  } = data;

  const logoSrc = footer_data?.logo || null;
  const primaryMenu = footer_menus?.primary_menu || [];
  const bigLogoSrc = footer_data?.logo_icon || null;

  return (
    <footer className="mb-2">
      <div className="container">
        <div className="grid grid-cols-12 lg:grid-cols-12 gap-4 border-b border-[#E2E2E2] pb-6 lg:pb-[120px] mb-6 lg:mb-10">
          <div className="col-span-12 lg:col-span-5 mb-8 lg:mb-0">
            {logoSrc && (
              <Link href="/">
                <div className="w-[130px] lg:w-[180px] relative">
                  <Image
                    src={logoSrc}
                    width={180}
                    height={56}
                    alt={footer_data?.logo_desc || "Logo"}
                    style={{ width: '100%', height: 'auto' }}
                  />
                </div>
              </Link>
            )}
          </div>
          <div className="col-span-12 lg:col-span-7">
            <div className="grid grid-cols-12 lg:grid-cols-12 gap-4">
              {primaryMenu.map((menu, index) => {
                return (
                  <div key={index} className="col-span-6 lg:col-span-4">
                    <h3 className="!text-[14px] text-[#00204F] !font-bold tracking-[0.5px] uppercase mb-4 lg:mb-6">
                      {menu.title}
                    </h3>
                    {menu.children?.map((item, idx) => {
                      return (
                        <ul key={idx}>
                          <li className="text-[14px] lg:text-[16px] text-[#334D72] font-medium mb-2 lg:mb-3 relative inline-block after:absolute after:bottom-0 after:left-0 after:h-px after:w-0 after:bg-[#334D72] after:transition-all after:duration-600 hover:after:w-full">
                            <Link href={item.url}>{item.title}</Link>
                          </li>
                        </ul>
                      );
                    })}
                  </div>
                );
              })}

              {footer_contact && (
                <div className="col-span-12 lg:col-span-4">
                  <h3 className="!text-[14px] text-[#00204F] !font-bold tracking-[0.5px] uppercase mb-3 lg:mb-6">
                    {footer_contact.contact_title || "Contact"}
                  </h3>
                  {footer_contact.address && (
                    <>
                      <span className="text-[14px] lg:text-[16px] text-[#00204F] font-bold tracking-[0.5px] mb-2 inline-block">
                        Address:
                      </span>
                      <p className="!text-[14px] lg:!text-[16px] text-[#334D72] !font-medium mb-3">
                        {footer_contact.address}
                      </p>
                    </>
                  )}
                  {(footer_contact.contact_text || footer_contact.phone) && (
                    <>
                      {/* <span className="text-[14px] lg:text-[16px] text-[#00204F] font-bold tracking-[0.5px] mb-2 inline-block">
                        {footer_contact.phone}
                      </span> */}
                      {footer_contact.phone && (
                        <Link
                          className="text-[14px] lg:text-[16px] text-[#334D72] font-medium block"
                          href={`tel:${footer_contact.phone.replace(/\s+/g, "")}`}
                        >
                          {footer_contact.call_heading}  {footer_contact.phone}
                        </Link>
                      )}
                    </>
                  )}
                  {footer_contact.mail && (
                    <Link
                      className="text-[14px] lg:text-[16px] text-[#334D72] font-medium block"
                      href={`mailto:${footer_contact.mail}`}
                    >
                      {footer_contact.mail_heading}  {footer_contact.mail}
                    </Link>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>

        <div className="grid lg:grid-cols-12 mb-8 lg:mb-[120px]">
          <div className="lg:col-span-8 order-2 lg:order-1">
            {footer_data?.copyright && (
              <p className="!text-[14px] lg:!text-[16px] !text-[#334D72] !font-medium text-center lg:text-left">
                {footer_data.copyright}
              </p>
            )}
          </div>
          <div className="lg:col-span-4 order-1 lg:order-2">
            {social_media && (
              <ul className="flex justify-center lg:justify-end gap-3 mb-6 lg:mb-0">
                {Object.entries(social_media).map(([key, value]) => {
                  if (!value || !value.url) return null;
                  const socialIconSrc = value.logo || null;
                  if (!socialIconSrc) return null;
                  return (
                    <li key={key} className="text-[16px] text-[#334D72] font-medium">
                      <Link href={value.url} rel="noopener noreferrer" target="_blank">
                        <Image
                          src={socialIconSrc}
                          width={24}
                          height={24}
                          alt={key}
                          className="w-6 h-6 object-contain"
                        />
                      </Link>
                    </li>
                  );
                })}
              </ul>
            )}
          </div>
        </div>

        {bigLogoSrc && (
          <figure>
            <Image
              src={bigLogoSrc}
              width={1280}
              height={310}
              alt={footer_data?.logo_desc || "Oculus"}
              className="mx-auto"
            />
          </figure>
        )}
      </div>
      <ScrollToTop />
    </footer>
  );
}