"use client";

import { Divider } from "@nextui-org/react";
import Image from "next/image";
import Link from "next/link";

import CyberEssentialsLogo from "@/public/client/services/certifications/cyber-essentials.webp";
import FairDataCertification from "@/components/common/sprites/certificates/fair-data-sprite";
import MRSCertification from "@/components/common/sprites/certificates/mrs-sprite";
import PFRDefaultLogo from "@/components/common/sprites/pfr-default-logo-sprite";
import {
  EXTERNAL_PAGES,
  INTERNAL_PAGES,
} from "@/constants/pages-mapping/internal-pages-mapping";
import {
  NAVBAR_LINKS_CLIENT,
  NAVBAR_LINKS_PARTICIPANT,
  SOCIAL_MEDIA_DATA_CLIENT,
  SOCIAL_MEDIA_DATA_PARTICIPANT,
} from "@/constants/ui-helpers";
import TrustPilotSprite from "@/components/common/sprites/trust-pilot/trust-pilot-sprite";

type FooterProps = {
  source: "client" | "participant";
  isUnderMaintenance?: boolean;
};

function CertificationsLinks() {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-4 place-items-center gap-4 pt-4 lg:py-0">
      <Link
        aria-label="Visit MRS Certification page (opens in a new tab)"
        className="xxl:h-20 xxxl:h-24 grid place-items-center"
        href={EXTERNAL_PAGES.mrsCertification}
        rel="noopener noreferrer"
        target="_blank"
      >
        <MRSCertification fill="#fff" height={75} />
      </Link>
      <Link
        aria-label="Visit Fair Data Certification page (opens in a new tab)"
        className="xxl:h-20 xxxl:h-24 grid place-items-center"
        href={EXTERNAL_PAGES.fairDataCertification}
        rel="noopener noreferrer"
        target="_blank"
      >
        <FairDataCertification fill="#fff" height={75} />
      </Link>
      <Link
        aria-label="Visit Cyber Essentials Certification page (opens in a new tab)"
        className="xxl:h-20 xxxl:h-24 grid place-items-center"
        href={EXTERNAL_PAGES.cyberEssentialsCertification}
        rel="noopener noreferrer"
        target="_blank"
      >
        <Image
          alt="Cyber Essentials Certified logo"
          className="h-[55px] w-auto"
          src={CyberEssentialsLogo}
        />
      </Link>
      <Link
        aria-label="Visit TrustPilot page (opens in a new tab)"
        className="xxl:h-20 xxxl:h-24 grid place-items-center"
        href={EXTERNAL_PAGES.trustPilot}
        rel="noopener noreferrer"
        target="_blank"
      >
        <TrustPilotSprite fill="#fff" height={75} width={100} />
      </Link>
    </div>
  );
}

function Footer({ source, isUnderMaintenance = false }: FooterProps) {
  const NAVBAR_LINKS =
    source === "client" ? NAVBAR_LINKS_CLIENT : NAVBAR_LINKS_PARTICIPANT;

  const SOCIAL_MEDIA_LINKS =
    source === "client"
      ? SOCIAL_MEDIA_DATA_CLIENT
      : SOCIAL_MEDIA_DATA_PARTICIPANT;

  const classesToApply =
    "block h-1 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left mt-1";

  const linkHomepageToUse =
    source === "client"
      ? INTERNAL_PAGES.client.homepage
      : INTERNAL_PAGES.participant.homepage;

  return (
    <footer
      className="bg-black text-white pb-16 px-12 xxl:px-16 xxxl:px-20"
      id="footer"
    >
      <div className="pt-16 xxl:pt-20 xxxl:pt-24">
        <Link href={linkHomepageToUse}>
          <PFRDefaultLogo fill="#fff" width={100} />
        </Link>
      </div>
      <div className="flex flex-col lg:flex-row lg:justify-between lg:items-start space-y-4 lg:space-y-0 xxl:space-y-6 xxxl:space-y-8">
        <span className="font-noto font-semibold text-sm lg:text-lg xxl:text-xl xxxl:text-2xl lg:max-w-md xxl:max-w-xl xxxl:max-w-2xl">
          Specialised in providing participant recruitment for user research and
          usability testing.
        </span>
        {!isUnderMaintenance && (
          <div className="flex flex-col space-x-0 space-y-2 lg:flex-row lg:space-x-4 lg:space-y-0 xxl:space-x-10 xxxl:space-x-12">
            {NAVBAR_LINKS.map((page) => (
              <Link
                key={page.title}
                className={`font-noto text-sm xxl:text-base xxxl:text-lg font-bold cursor-pointer text-white hover:text-userViewingLight/10 relative group ${
                  page.comingSoon ? "pointer-events-none opacity-50" : ""
                }`}
                href={page.comingSoon ? "#" : page.href}
              >
                {page.title}
                {page.comingSoon && (
                  <span className="ml-2 px-2 py-1 bg-gray-400 text-xs rounded-md text-white">
                    Coming soon
                  </span>
                )}
                {!page.comingSoon && (
                  <span className={`lg:${classesToApply} hidden`}></span>
                )}
              </Link>
            ))}
          </div>
        )}
      </div>
      <div className="flex flex-col lg:flex-row text-center lg:text-start justify-between mt-8 xxl:mt-10 xxxl:mt-12 items-center">
        <div className="flex flex-col font-noto text-xs xxl:text-sm xxxl:text-base">
          <span>Suite 302, QC30 Queen Charlotte Street, Bristol BS1 4HJ</span>
          <span>+44 117 921 0008</span>
          <Link
            className="underline"
            href={EXTERNAL_PAGES.googleMapsPeopleForResearch}
            rel="noopener noreferrer"
            target="_blank"
          >
            Google Maps
          </Link>
        </div>
        <CertificationsLinks />
      </div>
      <div className="py-8 xxl:py-10 xxxl:py-12">
        <Divider className="bg-white" />
      </div>
      <div className="flex flex-col items-center space-y-3 lg:space-y-0 lg:flex-row lg:justify-between">
        <span className="justify-start font-noto text-xs xxl:text-sm xxxl:text-base">
          © {new Date().getFullYear()} People for Research. All Rights Reserved.{" "}
          {source === "client" && (
            <Link
              className="underline"
              href={INTERNAL_PAGES.client.privacyPolicy}
              rel="noopener noreferrer"
              target="_blank"
            >
              Privacy Policy
            </Link>
          )}
        </span>
        <div className="flex flex-row space-x-4 xxl:space-x-5 xxxl:space-x-6">
          {SOCIAL_MEDIA_LINKS.map((data) => (
            <Link
              key={data.id}
              aria-label={`Visit ${data.label} page (opens in a new tab)`}
              className="text-white"
              href={data.href}
              rel="noopener noreferrer"
              target="_blank"
            >
              <data.icon
                aria-hidden
                className="xxl:w-6 xxl:h-6 xxxl:w-7 xxxl:h-7"
                focusable="false"
                role="img"
                size={20}
              />
            </Link>
          ))}
        </div>
      </div>
    </footer>
  );
}

export default Footer;