"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 { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import Breadcrumbs from "@/components/common/breadcrumbs";
import Loading from "@/components/pages/participant/opportunities/partials/loading";

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 FinancialProfessionals() {
  const AIRTABLE_SCRIPT_URL =
    "https://static.airtable.com/js/embed/embed_snippet_v1.js";

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

  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.financialProfessionals}`;
    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");
  };

  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-semibold 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>
          {/* <p className="text-start text-xs font-bold tracking-[0.25em] uppercase">
            Studies for financial professionals
          </p> */}
          <h1 className="text-4xl md:text-5xl xl:text-6xl font-black text-start w-full font-inter">
            Your insights. Your experience.
            <br />
            Help shape better financial services.
          </h1>
          <p className="text-lg md:text-xl leading-relaxed max-w-4xl border-s-4 border-foreground ps-6">
            Test the latest products, influence vital services, and be a voice
            for your sector! We&apos;re inviting finance professionals to join
            paid research studies with industry-leading brands and financial
            organisations. To apply, please complete the short questionnaire
            below. We offer a variety of studies, so we&apos;ll notify you with
            opportunities that match your experience.
          </p>
        </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-2">
            <div>
              <dt className="font-semibold inline">Dates: </dt>
              <dd className="inline">Until 30th November 2025</dd>
            </div>
            <div>
              <dt className="font-semibold inline">Duration: </dt>
              <dd className="inline">60-90 minutes</dd>
            </div>
            <div>
              <dt className="font-semibold inline">Location: </dt>
              <dd className="inline">UK</dd>
            </div>
            <div>
              <dt className="font-semibold inline">Incentive: </dt>
              <dd className="inline font-semibold">
                £80-£120, bank transfer or voucher
              </dd>
            </div>
            <div>
              <dt className="font-semibold inline">Type: </dt>
              <dd className="inline">Online website testing</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="data-security-heading"
          className="p-8 md:p-10 mb-8 hover:shadow-subtle transition-all bg-gray-200/70 dark:bg-[#383934]"
        >
          <h2
            className="font-bold text-xl md:text-2xl mb-4"
            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 to a third party.{" "}
            <Link
              className="font-semibold underline decoration-dotted"
              href={INTERNAL_PAGES.participant.howItWorks.policies}
              rel="noopener noreferrer"
              target="_blank"
            >
              Read our privacy policy
            </Link>
            .
          </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="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>£20 referral fee</strong> (terms
            and conditions apply).
          </p>
          <PostSocialMedia onClick={handleOnClickSocial} />
        </section>
      </div>
    </div>
  );
}

export default FinancialProfessionals;