"use client"

import Link from 'next/link'
import { useRef, useEffect, useState, useCallback } from 'react'
import { footerDefaults } from '@/lib/api/footer'
import type { FooterData } from '@/lib/strapi/types'

const quickLinks = [
  { label: 'Home', href: '/', isRoute: true },
  { label: 'About Us', href: '/about', isRoute: true },
  { label: 'Careers', href: '/careers', isRoute: true },
  { label: 'Newsletter', href: '/newsletter', isRoute: true },
  { label: 'Contact', href: '/contact', isRoute: true },
]

const companiesLeft = [
  { label: 'SAFL', href: '/safl', isRoute: true },
  { label: 'Entertainment', href: '/entertainment', isRoute: true },
  { label: 'Hospitality', href: '/hospitality', isRoute: true },
  { label: 'Green Energy', href: '/green-energy', isRoute: true },
]
const companiesRight = [
  { label: 'Logistics', href: '/logistics', isRoute: true },
  { label: 'Vital Industries', href: '/vital-industries', isRoute: true },
  { label: 'Wedding Collective', href: '/wedding-collective', isRoute: true },
]

function FitText({ className }: { className?: string }) {
  const containerRef = useRef<HTMLDivElement>(null)
  const textRef = useRef<HTMLSpanElement>(null)
  const [fontSize, setFontSize] = useState(100)

  const fit = useCallback(() => {
    const container = containerRef.current
    const text = textRef.current
    if (!container || !text) return
    const containerWidth = container.clientWidth
    let size = 300
    text.style.fontSize = size + 'px'
    while (text.scrollWidth > containerWidth && size > 10) {
      size -= 1
      text.style.fontSize = size + 'px'
    }
    setFontSize(size)
  }, [])

  useEffect(() => {
    fit()
    window.addEventListener('resize', fit)
    return () => window.removeEventListener('resize', fit)
  }, [fit])

  return (
    <div ref={containerRef} className={`w-full overflow-hidden ${className || ''}`} aria-hidden="true">
      <span
        ref={textRef}
        className="text-[#9c1e36] leading-[0.85] uppercase select-none block whitespace-nowrap font-[700] pr-[15px]"
        style={{ fontSize: fontSize + 'px', letterSpacing: '-0.03em' }}
      >
        MGM Group
      </span>
    </div>
  )
}

export default function Footer({ data }: { data?: FooterData }) {
  const logo = data?.logo ?? footerDefaults.logo
  const description = data?.description ?? footerDefaults.description
  const copyright = data?.copyright ?? footerDefaults.copyright
  const socialLinks = (data?.socialLinks ?? footerDefaults.socialLinks).filter((s) => s.icon)
  const contactItems = (data?.contactItems ?? footerDefaults.contactItems).filter((c) => c.icon)
  return (
    <footer
      className="relative w-full border-t border-black lg:px-5"
      style={{ background: `radial-gradient(ellipse at 42% 84%, rgba(16,36,67,0) 0%, rgba(14,33,62,1) 100%), linear-gradient(90deg, #0a121e 0%, #0a121e 100%)`,
      }}
    >
      <div className="relative z-10 flex flex-col gap-8 items-center px-5 lg:px-0 py-10 w-full max-w-[1297px] mx-auto">
        <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between lg:gap-0 w-full">
          <div className="flex flex-col gap-5 max-w-[403px]">
            <div className="h-[38px]">
              <img
                src={logo}
                alt="MGM"
                className="h-[40px] w-auto object-contain"
              />
            </div>
            <p
              className="text-[#99a1af] text-[16px] leading-[1.3] font-medium"
            >
              {description}
            </p>
          </div>

          {socialLinks.length > 0 && (
            <div className="flex items-start gap-[13.3px]">
              {socialLinks.map((social, i) => (
                <a
                  key={i}
                  href={social.url || '#'}
                  className="w-[44px] h-[44px] rounded-full bg-white flex items-center justify-center"
                >
                  <img
                    src={social.icon}
                    alt=""
                    loading="lazy"
                    className="w-[22px] h-[22px]"
                  />
                </a>
              ))}
            </div>
          )}
        </div>

        <div className="relative w-full border border-[#333f52]">
          <div className="ftr-desktop relative z-10 hidden lg:flex items-start justify-between px-6">
            <div className="absolute top-[-1px] left-[-1px] w-[9px] h-[11px]" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="0 0 9 11" fill="none" style={{ transform: 'scaleX(-1)' }}><path d="M0 0.5H8V10.5" stroke="#CFD8E7" /></svg>
            </div>
            <div className="absolute top-[-1px] right-[-1px] w-[9px] h-[11px]" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="0 0 9 11" fill="none"><path d="M0 0.5H8V10.5" stroke="#CFD8E7" /></svg>
            </div>
            <div className="absolute bottom-[-1px] left-[-1px] w-[9px] h-[11px]" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="0 0 9 11" fill="none" style={{ transform: 'scale(-1, -1)' }}><path d="M0 0.5H8V10.5" stroke="#CFD8E7" /></svg>
            </div>
            <div className="absolute bottom-[-1px] right-[-1px] w-[9px] h-[11px]" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="0 0 9 11" fill="none" style={{ transform: 'scaleY(-1)' }}><path d="M0 0.5H8V10.5" stroke="#CFD8E7" /></svg>
            </div>
            <div className="ftr-col-quick flex flex-col gap-[60px] items-start pt-10 pb-20 w-[291px]">
              <h4
                className="text-[20px] text-white leading-[26.6px]"
              >
                Quick Links
              </h4>
              <ul className="flex flex-col gap-[9px] w-full">
                {quickLinks.map((link) => (
                  <li key={link.label} className="h-[20px] flex items-start">
                    {link.isRoute ? (
                      <Link
                        href={link.href}
                        className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors whitespace-nowrap"
                      >
                        {link.label}
                      </Link>
                    ) : (
                      <a
                        href={link.href}
                        className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors whitespace-nowrap"
                      >
                        {link.label}
                      </a>
                    )}
                  </li>
                ))}
              </ul>
            </div>

            <div className="relative w-px self-stretch bg-[#333f52]">
              <div className="absolute -top-px left-1/2 -translate-x-1/2 w-[5px] h-[6px]" aria-hidden="true">
                <svg width="5" height="6" viewBox="0 0 5 6" fill="none" style={{ transform: 'rotate(270deg)' }}><path d="M0 3H4.5V0V6" stroke="#CFD8E7" /></svg>
              </div>
              <div className="absolute -bottom-px left-1/2 -translate-x-1/2 w-[5px] h-[6px]" aria-hidden="true">
                <svg width="5" height="6" viewBox="0 0 5 6" fill="none" style={{ transform: 'rotate(90deg)' }}><path d="M0 3H4.5V0V6" stroke="#CFD8E7" /></svg>
              </div>
            </div>

            <div className="ftr-col-companies flex flex-col gap-[60px] items-start pt-10 pb-20 w-[351px]">
              <h4
                className="text-[20px] text-white leading-[26.6px]"
              >
                Our Companies
              </h4>
              <div className="ftr-companies-inner flex items-start w-[351px]">
                <ul className="ftr-companies-left flex flex-col gap-[9px] w-[176px]">
                  {companiesLeft.map((company) => (
                    <li key={company.label} className="h-[20px] flex items-start">
                      {company.isRoute ? (
                        <Link
                          href={company.href}
                          className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors whitespace-nowrap"
                        >
                          {company.label}
                        </Link>
                      ) : (
                        <a
                          href={company.href}
                          className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors whitespace-nowrap"
                        >
                          {company.label}
                        </a>
                      )}
                    </li>
                  ))}
                </ul>
                <ul className="flex flex-col gap-[9px] flex-1">
                  {companiesRight.map((company) => (
                    <li key={company.label} className="flex items-start">
                      {company.isRoute ? (
                        <Link
                          href={company.href}
                          className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors whitespace-nowrap"
                        >
                          {company.label}
                        </Link>
                      ) : (
                        <a
                          href={company.href}
                          className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors whitespace-nowrap"
                        >
                          {company.label}
                        </a>
                      )}
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            <div className="relative w-px self-stretch bg-[#333f52]">
              <div className="absolute -top-px left-1/2 -translate-x-1/2 w-[5px] h-[6px]" aria-hidden="true">
                <svg width="5" height="6" viewBox="0 0 5 6" fill="none" style={{ transform: 'rotate(270deg)' }}><path d="M0 3H4.5V0V6" stroke="#CFD8E7" /></svg>
              </div>
              <div className="absolute -bottom-px left-1/2 -translate-x-1/2 w-[5px] h-[6px]" aria-hidden="true">
                <svg width="5" height="6" viewBox="0 0 5 6" fill="none" style={{ transform: 'rotate(90deg)' }}><path d="M0 3H4.5V0V6" stroke="#CFD8E7" /></svg>
              </div>
            </div>

            <div className="ftr-col-contact flex flex-col gap-[60px] items-start pt-10 pb-20 w-[296px]">
              <h4
                className="text-[20px] text-white leading-[26.6px]"
              >
                Contact Us
              </h4>
              <ul className="flex flex-col gap-2 w-full">
                {contactItems.map((item, i) => (
                  <li
                    key={i}
                    className={
                      item.href
                        ? 'flex gap-[9px] items-center h-[22px] w-full'
                        : 'flex gap-[9px] items-start w-full'
                    }
                  >
                    <img
                      src={item.icon}
                      alt=""
                      loading="lazy"
                      className="w-[22px] h-[22px] flex-shrink-0"
                    />
                    {item.href ? (
                      <a
                        href={item.href}
                        className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors whitespace-nowrap"
                      >
                        {item.value}
                      </a>
                    ) : (
                      <span className="ftr-contact-val text-[16px] text-[#99a1af] leading-[1.1] w-[200px]">
                        {item.value}
                      </span>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div className="relative z-10 flex flex-col items-center gap-9 px-5 py-10 lg:hidden">
            <div className="absolute top-[-1px] left-[-1px] w-[9px] h-[11px]" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="0 0 9 11" fill="none" style={{ transform: 'scaleX(-1)' }}><path d="M0 0.5H8V10.5" stroke="#CFD8E7" /></svg>
            </div>
            <div className="absolute top-[-1px] right-[-1px] w-[9px] h-[11px]" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="0 0 9 11" fill="none"><path d="M0 0.5H8V10.5" stroke="#CFD8E7" /></svg>
            </div>
            <div className="absolute bottom-[-1px] left-[-1px] w-[9px] h-[11px]" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="0 0 9 11" fill="none" style={{ transform: 'scale(-1, -1)' }}><path d="M0 0.5H8V10.5" stroke="#CFD8E7" /></svg>
            </div>
            <div className="absolute bottom-[-1px] right-[-1px] w-[9px] h-[11px]" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="0 0 9 11" fill="none" style={{ transform: 'scaleY(-1)' }}><path d="M0 0.5H8V10.5" stroke="#CFD8E7" /></svg>
            </div>

            <div className="flex flex-col gap-10 items-start w-full">
              <h4
                className="text-[20px] text-white leading-[26.6px]"
              >
                Quick Links
              </h4>
              <ul className="flex flex-col gap-[9px] w-full">
                {quickLinks.map((link) => (
                  <li key={link.label} className="h-[20px] flex items-start">
                    {link.isRoute ? (
                      <Link
                        href={link.href}
                        className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors whitespace-nowrap"
                      >
                        {link.label}
                      </Link>
                    ) : (
                      <a
                        href={link.href}
                        className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors whitespace-nowrap"
                      >
                        {link.label}
                      </a>
                    )}
                  </li>
                ))}
              </ul>
            </div>

            <div className="relative w-full">
              <div className="h-px bg-[#333f52] -mx-[21px]" />
              <div className="absolute top-1/2 -translate-y-1/2 -left-[21px] w-[5px] h-[6px]" aria-hidden="true">
                <svg width="5" height="6" viewBox="0 0 5 6" fill="none" style={{ transform: 'rotate(180deg)' }}><path d="M0 3H4.5V0V6" stroke="white" /></svg>
              </div>
              <div className="absolute top-1/2 -translate-y-1/2 -right-[21px] w-[5px] h-[6px]" aria-hidden="true">
                <svg width="5" height="6" viewBox="0 0 5 6" fill="none" style={{ transform: 'rotate(360deg)' }}><path d="M0 3H4.5V0V6" stroke="white" /></svg>
              </div>
            </div>

            <div className="flex flex-col gap-10 items-start w-full">
              <h4
                className="text-[20px] text-white leading-[26.6px]"
              >
                Our Companies
              </h4>
              <div className="flex items-start w-full gap-4">
                <ul className="flex flex-col gap-[9px] w-1/2">
                  {companiesLeft.map((company) => (
                    <li key={company.label} className="flex items-start">
                      {company.isRoute ? (
                        <Link
                          href={company.href}
                          className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors"
                        >
                          {company.label}
                        </Link>
                      ) : (
                        <a
                          href={company.href}
                          className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors"
                        >
                          {company.label}
                        </a>
                      )}
                    </li>
                  ))}
                </ul>
                <ul className="flex flex-col gap-[9px] w-1/2">
                  {companiesRight.map((company) => (
                    <li key={company.label} className="flex items-start">
                      {company.isRoute ? (
                        <Link
                          href={company.href}
                          className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors"
                        >
                          {company.label}
                        </Link>
                      ) : (
                        <a
                          href={company.href}
                          className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors"
                        >
                          {company.label}
                        </a>
                      )}
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            <div className="relative w-full">
              <div className="h-px bg-[#333f52] -mx-[21px]" />
              <div className="absolute top-1/2 -translate-y-1/2 -left-[21px] w-[5px] h-[6px]" aria-hidden="true">
                <svg width="5" height="6" viewBox="0 0 5 6" fill="none" style={{ transform: 'rotate(180deg)' }}><path d="M0 3H4.5V0V6" stroke="white" /></svg>
              </div>
              <div className="absolute top-1/2 -translate-y-1/2 -right-[21px] w-[5px] h-[6px]" aria-hidden="true">
                <svg width="5" height="6" viewBox="0 0 5 6" fill="none" style={{ transform: 'rotate(360deg)' }}><path d="M0 3H4.5V0V6" stroke="white" /></svg>
              </div>
            </div>

            <div className="flex flex-col gap-10 items-start w-full">
              <h4
                className="text-[20px] text-white leading-[26.6px]"
              >
                Contact Us
              </h4>
              <ul className="flex flex-col gap-2 w-full">
                {contactItems.map((item, i) => (
                  <li
                    key={i}
                    className={
                      item.href
                        ? 'flex gap-[9px] items-center h-[22px] w-full'
                        : 'flex gap-[9px] items-start w-full'
                    }
                  >
                    <img
                      src={item.icon}
                      alt=""
                      loading="lazy"
                      className="w-[20px] h-[20px] flex-shrink-0"
                    />
                    {item.href ? (
                      <a
                        href={item.href}
                        className="text-[14px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors whitespace-nowrap"
                      >
                        {item.value}
                      </a>
                    ) : (
                      <span className="text-[14px] text-[#99a1af] leading-[1.1] w-[200px]">
                        {item.value}
                      </span>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>

        <p
          className="lg:hidden text-[#9c1e36] leading-[0.85] uppercase select-none w-full text-center font-[700]"
          style={{ fontSize: '25vw', letterSpacing: '-0.03em' }}
          aria-hidden="true"
        >
          MGM<br />Group
        </p>
        <FitText className="hidden lg:block" />

        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between lg:gap-0 w-full border-t border-[#333f52] pt-3 lg:pt-[0.924px] lg:h-[58.5px]">
          <p
            className="text-[14px] lg:text-[16px] text-[#99a1af] leading-[1.1] whitespace-nowrap"
          >
            {copyright}
          </p>
          <div className="flex items-start justify-between lg:gap-[26.6px]">
            <Link
              href="/privacy-policy"
              className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors whitespace-nowrap"
            >
              Privacy Policy
            </Link>
            <Link
              href="/terms-and-conditions"
              className="text-[16px] text-[#99a1af] leading-[1.1] hover:text-white transition-colors whitespace-nowrap"
            >
              Terms &amp; Conditions
            </Link>
          </div>
        </div>
      </div>
    </footer>
  )
}