"use client";
import { Button as BaseButton } from "@nextui-org/react";
import Link from "next/link";
import { useEffect, useState } from "react";
import { FaFacebook, FaLinkedin, FaWhatsapp } from "react-icons/fa6";
import { FaWpforms } from "react-icons/fa";

import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import Breadcrumbs from "@/components/common/breadcrumbs";
import Loading from "@/components/pages/participant/opportunities/partials/loading";
import Button from "@/components/common/button";

type PostSocialMediaProps = {
  onClick: (socialId: string) => void;
};

function PostSocialMedia({ onClick }: PostSocialMediaProps) {
  const socialMediaIcons = ["facebook", "linkedin", "whatsapp"];

  return (
    <div className="flex flex-row items-center justify-center gap-3 mt-2">
      {socialMediaIcons.map((socialId) => (
        <BaseButton
          key={socialId}
          isIconOnly
          aria-label={`Share on ${
            socialId.charAt(0).toUpperCase() + socialId.slice(1)
          }`}
          variant="light"
          onPress={() => onClick(socialId)}
        >
          {(() => {
            const classes = "size-6";

            switch (socialId) {
              case "facebook":
                return <FaFacebook className={classes} />;
              case "linkedin":
                return <FaLinkedin className={classes} />;
              case "whatsapp":
                return <FaWhatsapp className={classes} />;
            }
          })()}
        </BaseButton>
      ))}
    </div>
  );
}

// https://support.airtable.com/docs/embedding-airtable-views
// code based on https://airtable.com/appujxTcoG5mPuccZ/shrTB7cunuWUttZAR/embed.
function BankingResearch() {
  const AIRTABLE_SCRIPT_URL =
    "https://static.airtable.com/js/embed/embed_snippet_v1.js";

  const AIRTABLE_EMBED_URL =
    "https://airtable.com/embed/appujxTcoG5mPuccZ/shr5THSG61OH2actP";

  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = AIRTABLE_SCRIPT_URL;
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  const handleOnClickSocial = (socialId: string) => {
    const baseUrl = `${process.env.NEXT_PUBLIC_PFR_WEBSITE_BASE_URL}${INTERNAL_PAGES.participant.studies.bankingResearch}`;
    const message = "Check out this amazing study from People for Research! ";
    let shareUrl = "";

    switch (socialId) {
      case "facebook":
        shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${baseUrl}&quote=${encodeURIComponent(
          message
        )}`;
        break;
      case "linkedin":
        shareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${baseUrl}&title=${encodeURIComponent(
          message
        )}`;
        break;
      case "whatsapp":
        shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(
          message
        )}%20${baseUrl}`;
        break;
      default:
        return;
    }

    window.open(shareUrl, "_blank");
  };
  const handleClickApply = () => {
    const formElement = document.getElementById("application-form");

    if (formElement) {
      formElement.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  };

  return (
    <div className="w-full min-h-screen px-4 py-12 md:px-8 lg:px-16 xl:px-32">
      <div className="max-w-7xl mx-auto">
        <a
          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-foreground focus:text-background focus:font-bold focus:border-2 focus:border-foreground"
          href="#application-form"
        >
          Skip to application form
        </a>

        <header className="mb-16 space-y-6">
          <div className="py-4">
            <Breadcrumbs />
          </div>
          <h1 className="text-4xl md:text-5xl xl:text-6xl font-black text-start w-full font-inter">
            Swipe, tap, transfer. Tell us how you bank!
          </h1>
          <div className="text-lg md:text-xl leading-relaxed max-w-4xl border-s-4 border-foreground ps-6 space-y-4">
            <p>
              Do you use a banking or payment app on your phone? We&apos;re keen
              to hear how you manage your money digitally. If you&apos;re based
              in Europe or Australia, this is your chance to help shape the
              future of online banking! Your input will help improve how
              millions of people bank online, making financial tools smarter,
              faster, and easier for everyone. As part of this research,
              you&apos;ll complete a quick 15 minute online task.
            </p>
            <p>
              Once you&apos;re done, you&apos;ll receive £20 as a thank you for
              your time and feedback. If you&apos;re eligible, we&apos;ll send
              you an invite with a deadline. You can complete the task anytime
              that suits you, just make sure it&apos;s before the deadline. You
              can help improve online banking for everyone. Apply today!
            </p>
          </div>
        </header>

        <section
          aria-labelledby="study-details-heading"
          className="p-8 md:p-10 mb-8 hover:shadow-subtle transition-all bg-gray-200/70 dark:bg-[#383934]"
        >
          <h2
            className="font-black text-2xl md:text-3xl mb-8"
            id="study-details-heading"
          >
            Study details
          </h2>
          <dl className="space-y-1">
            <div>
              <dt className="font-bold inline">Dates: </dt>
              <dd className="inline">
                Wednesday 22nd October - Monday 3rd November
              </dd>
            </div>
            <div>
              <dt className="font-bold inline">Duration: </dt>
              <dd className="inline">15 minutes</dd>
            </div>
            <div>
              <dt className="font-bold inline">Location: </dt>
              <dd className="inline">Europe & Australia</dd>
            </div>
            <div>
              <dt className="font-bold inline">Incentive: </dt>
              <dd className="inline">£20, bank transfer or voucher</dd>
            </div>
            <div>
              <dt className="font-bold inline">Research type: </dt>
              <dd className="inline">Online short task</dd>
            </div>
          </dl>
          <p className="text-sm mt-4 italic">
            Please note that applying to this project does not guarantee
            participation.
          </p>
        </section>

        <section aria-labelledby="form-heading">
          <h2 className="font-bold text-2xl md:text-3xl mb-8" id="form-heading">
            Apply now
          </h2>
          <div className="relative w-full" id="application-form">
            {isLoading && (
              <div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-10">
                <Loading loadingMessage="Loading form..." />
              </div>
            )}
            <iframe
              className="airtable-embed airtable-dynamic-height w-full"
              height="2397"
              src={AIRTABLE_EMBED_URL}
              style={{ background: "transparent", border: "none" }}
              title="Finance professionals research study application form"
              onLoad={() => setIsLoading(false)}
            />
          </div>
        </section>

        <section
          aria-labelledby="data-security-heading"
          className="p-8 md:p-10 mt-8 hover:shadow-subtle transition-all bg-gray-200/70 dark:bg-[#383934]"
        >
          <h2
            className="text-2xl lg:text-4xl font-black font-inter text-start mb-2"
            id="data-security-heading"
          >
            Your data security
          </h2>
          <p className="leading-relaxed">
            People for Research are members of the Market Research Society and
            comply with all current data protection legislation. We will never
            sell or pass your details on to a third party. For more information
            on how we process your personal data and special category data,
            please read our{" "}
            <Link
              className="font-bold underline decoration-dotted"
              href={INTERNAL_PAGES.participant.howItWorks.policies}
              rel="noopener noreferrer"
              target="_blank"
            >
              privacy policy
            </Link>
            .
          </p>
        </section>

        <section
          aria-labelledby="referral-heading"
          className="p-8 md:p-10 mt-8 hover:shadow-subtle transition-all bg-gray-200/70 dark:bg-[#383934]"
        >
          <h2
            className="text-2xl lg:text-4xl font-black font-inter text-start mb-2"
            id="referral-heading"
          >
            Refer a friend or colleague
          </h2>
          <p className="leading-relaxed">
            Know anyone suitable for this project? Share this opportunity with
            them to be eligible for a <strong>£10 referral fee</strong> (terms
            and conditions apply).
          </p>
          <PostSocialMedia onClick={handleOnClickSocial} />
        </section>
      </div>
      <Button
        className="fixed bottom-8 right-8 z-40 font-bold shadow-lg hover:shadow-xl transition-shadow"
        customVariant="primary"
        endContent={<FaWpforms />}
        size="lg"
        onClick={handleClickApply}
      >
        Apply now
      </Button>
    </div>
  );
}

export default BankingResearch;