import Link from 'next/link';
import type { ReactNode } from 'react';
import { routes } from '@/lib/routes';
import { FooterChevronIcon } from '@/components/icons/common';
import { GlobeIcon, ScaleIcon, UsersIcon } from '@/components/icons/footer';
import { LogoFooter } from '@/components/icons/logos';
import { customBrandUrl } from '@/lib/media/display-url';
import { InstagramIcon, LinkedInIcon, YouTubeIcon } from '@/components/icons/social';
import Marquee from '@/components/common/Marquee';
import { orNull } from '@/lib/api/client';
import { getFooterMenu } from '@/lib/menus/footer';
import { getPublicSiteSettings } from '@/lib/public/site-settings';
import type { FooterMenuPayload, FooterSocial } from '@/lib/menus/footer';

const EMPTY_FOOTER: FooterMenuPayload = { columns: [], about: '', copyright: '', social: [] };

interface FooterColumnProps {
  id: string;
  title: string;
  icon: ReactNode;
  className: string;
  links: { label: string; href: string }[];
}

function columnIcon(iconClass: string | undefined, title: string): ReactNode {
  const key = `${iconClass || ''} ${title}`.toLowerCase();
  if (key.includes('legal') || key.includes('shield')) return <ScaleIcon />;
  if (key.includes('connect') || key.includes('users') || key.includes('building') || key.includes('company')) {
    return <UsersIcon />;
  }
  return <GlobeIcon />;
}

function socialIcon(icon: string) {
  if (icon.includes('linkedin')) return LinkedInIcon;
  if (icon.includes('instagram')) return InstagramIcon;
  if (icon.includes('youtube')) return YouTubeIcon;
  return LinkedInIcon;
}

function FooterColumn({ id, title, icon, className, links }: FooterColumnProps) {
  return (
    <div className={`col-lg-2 col-sm-4 footer-col-border ps-0 ps-sm-3 ps-md-4 ps-xl-5 ${className}`}>
      <h4 className="footer-title text-md mb-3" data-bs-toggle="collapse" data-bs-target={`#${id}`} aria-expanded="false" role="button">
        {icon}
        {title}
        <FooterChevronIcon />
      </h4>
      <div className="collapse d-sm-block" id={id}>
        <ul className="footer-links">
          {links.map((link) => (
            <li key={`${link.label}-${link.href}`}>
              <Link href={link.href} className="text-sm color-content">
                {link.label}
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function SocialLinks({ social }: { social: FooterSocial[] }) {
  if (!social.length) return null;
  return (
    <div className="d-flex align-items-start">
      {social.map(({ id, icon, url }) => {
        const Icon = socialIcon(icon);
        return (
          <a key={id} href={url} target="_blank" rel="noopener noreferrer" className="social-icon" aria-label={id}>
            <Icon />
          </a>
        );
      })}
    </div>
  );
}

export default async function Footer() {
  const [menu, settings] = await Promise.all([
    orNull(getFooterMenu({ visibleOnly: true })),
    orNull(getPublicSiteSettings()),
  ]);
  const footer = menu ?? EMPTY_FOOTER;
  const logoSrc = customBrandUrl(settings?.logoUrl);
  const siteName = settings?.siteName || 'CMORoom';
  const orderClasses = ['order-1 order-sm-2 mb-3 mb-sm-0', 'order-2 order-sm-3 mb-3 mb-sm-0', 'order-3 order-sm-4'];

  return (
    <>
      <footer className="footer-wrapper pt-4 pt-sm-5 pb-4">
        <div className="container">
          <div className="row">
            <div className="col-lg-5 mb-0 mt-4 mt-sm-0 mb-sm-5 mb-lg-0 order-4 order-sm-1">
              <div className="d-flex align-items-center gap-3 gap-md-4">
                <Link href={routes.home} aria-label={siteName}>
                  {logoSrc ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img src={logoSrc} alt={siteName} className="footer-logo-svg" style={{ height: 49, width: 'auto' }} />
                  ) : (
                    <LogoFooter />
                  )}
                </Link>
                <SocialLinks social={footer.social} />
              </div>
              <p className="text-md mt-4">{footer.about}</p>
            </div>
            {footer.columns.map((col, index) => (
              <FooterColumn
                key={col.id}
                id={`footer-col-${col.id}`}
                title={col.title}
                icon={columnIcon(col.icon, col.title)}
                className={orderClasses[index] || 'order-3 order-sm-4 mb-3 mb-sm-0'}
                links={col.links.map((link) => ({ label: link.label, href: link.url }))}
              />
            ))}
          </div>
          <div className="footer-bottom mt-4 pt-4">{footer.copyright}</div>
        </div>
      </footer>
      <Marquee className="p-0 m-0" />
    </>
  );
}