"use client";

import Image from "next/image";
import { Button as BaseButton, Chip, Tooltip } from "@nextui-org/react";
import DOMPurify from "isomorphic-dompurify";
import parse, { domToReact } from "html-react-parser";
import {
  FaBook,
  FaChevronRight,
  FaCircleInfo,
  FaClock,
  FaFacebook,
  FaFileContract,
  FaHandHolding,
  FaHouseLaptop,
  FaLink,
  FaLinkedin,
  FaWhatsapp,
  FaXTwitter,
} from "react-icons/fa6";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";

import "@/components/pages/participant/how-it-works/article-styles.css";

import Breadcrumbs from "@/components/common/breadcrumbs";
import { Post } from "@/types/blog/blogTypes";
import { formatSection } from "@/utils/posts-utils";
import PFRSamLogo from "@/components/common/sprites/pfr-sam-logo-sprite";
import { SM_LINKS_PARTICIPANT } from "@/constants/pages-mapping/external-pages-mapping";
import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import { InternalParticipantBlogTags } from "@/constants/blog-data";

type PostsProps = {
  post: Post;
  section: string;
};

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

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

  const [copied, setCopied] = useState(false);

  const handleLinkCopy = () => {
    const baseUrl = process.env.NEXT_PUBLIC_PFR_WEBSITE_BASE_URL;
    const currentPath = window.location.pathname;
    const fullUrl = `${baseUrl}${currentPath}`;

    navigator.clipboard.writeText(fullUrl).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000); // resets after 2 seconds.
    });
  };

  return (
    <div className="flex flex-row">
      {socialMediaIcons.map((socialId) => (
        <Tooltip
          key={socialId}
          classNames={{ content: "text-sm shadow-none border border-1" }}
          content={
            socialId === "link"
              ? copied
                ? "Link copied successfully."
                : "Copy link"
              : `Share on ${
                  socialId.charAt(0).toUpperCase() + socialId.slice(1)
                }`
          }
        >
          <BaseButton
            isIconOnly
            aria-label={
              socialId === "link"
                ? "Copy link"
                : `Share on ${
                    socialId.charAt(0).toUpperCase() + socialId.slice(1)
                  }`
            }
            variant="light"
            onPress={() =>
              socialId === "link" ? handleLinkCopy() : onClick(socialId)
            }
          >
            {(() => {
              const classes = "text-black size-5";

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

function ArticleCTA() {
  const router = useRouter();

  const handleApplyClick = () => {
    router.push(INTERNAL_PAGES.participant.opportunities.main);
  };

  return (
    <div className="bg-gray-200/70 dark:bg-[#383934] m-8 p-8 rounded-lg flex flex-col lg:flex-row justify-between items-center space-x-6 xl:mx-48">
      <div>
        <h2 className="text-3xl font-black font-inter text-center lg:text-start">
          Be heard. Be part of the research.
        </h2>
        <h3 className="text-lg font-noto mt-2 text-center lg:text-start">
          Join exciting studies and share your unique perspective.
        </h3>
      </div>
      <div className="flex space-x-4 mt-4 lg:mt-0">
        <Button
          btnLabel="Apply to opportunities"
          customVariant="primary"
          endContent={<FaChevronRight />}
          onClick={handleApplyClick}
        />
      </div>
    </div>
  );
}

function Article({ post, section }: PostsProps) {
  const sanitizedPost = DOMPurify.sanitize(post.html, {
    ADD_TAGS: ["iframe"],
  });

  const options = {
    replace: (domNode: any) => {
      if (domNode.name === "img") {
        return renderImage(domNode);
      }

      if (domNode.name === "figcaption") {
        return renderFigcaption(domNode, options);
      }

      if (domNode.name === "a") {
        return renderAnchor(domNode, options);
      }

      if (domNode.name === "iframe") {
        return renderIframe(domNode);
      }

      if (domNode.name === "blockquote") {
        return renderBlockquote(domNode, options);
      }

      if (domNode.name === "ol") {
        return renderOrderedList(domNode, options);
      }

      if (domNode.name === "li") {
        return renderListItem(domNode, options);
      }
    },
  };

  const renderImage = (domNode: any) => {
    return (
      <div className="flex items-center justify-center">
        <Image
          alt={domNode.attribs.alt}
          className="object-cover rounded w-full h-full"
          height={1000}
          loading="eager"
          src={domNode.attribs.src}
          width={1000}
        />
      </div>
    );
  };

  const renderFigcaption = (domNode: any, options: any) => {
    const children = domNode.children.map((childNode: any) => {
      if (childNode.name === "a") {
        return renderAnchorChild(childNode);
      }

      if (childNode.type === "text") {
        return childNode.data;
      }

      return domToReact([childNode], options);
    });

    return <figcaption>{children}</figcaption>;
  };

  const renderAnchor = (domNode: any, options: any) => {
    let href = domNode.attribs.href || "";

    try {
      const url = new URL(href);
      url.searchParams.delete("ref");
      href = url.toString();
    } catch {
      // relative URL — use as-is
    }

    return (
      <Link
        className="font-medium underline underline-offset-4 decoration-dotted"
        href={href}
        rel="noopener noreferrer"
        target="_blank"
      >
        {domToReact(domNode.children, options)}
      </Link>
    );
  };

  const renderAnchorChild = (childNode: any) => {
    return childNode.children
      .map((grandChildNode: any) => {
        if (grandChildNode.type === "text") {
          return grandChildNode.data;
        }

        if (grandChildNode.name === "span") {
          return grandChildNode.children[0].data;
        }
      })
      .join("");
  };

  const renderIframe = (domNode: any) => {
    return (
      <iframe
        allowFullScreen={domNode.attribs.allowfullscreen}
        className="my-iframe"
        src={domNode.attribs.src}
        title={domNode.attribs.title || "iframe"}
      />
    );
  };

  const renderOrderedList = (domNode: any, options: any) => {
    return <ol>{domToReact(domNode.children, options)}</ol>;
  };

  const renderListItem = (domNode: any, options: any) => {
    return <li>{domToReact(domNode.children, options)}</li>;
  };

  const handleOnClickSocial = (socialId: string) => {
    const baseUrl = process.env.NEXT_PUBLIC_PFR_WEBSITE_BASE_URL;
    const currentPath = window.location.pathname;
    const encodedUrl = encodeURIComponent(`${baseUrl}${currentPath}`);

    let shareUrl = "";

    switch (socialId) {
      case "facebook":
        shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`;
        break;
      case "twitter":
        shareUrl = `https://twitter.com/intent/tweet?url=${encodedUrl}`;
        break;
      case "linkedin":
        shareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${encodedUrl}`;
        break;
      case "whatsapp":
        shareUrl = `https://api.whatsapp.com/send?text=Check%20out%20this%20article%20from%20People%20for%20Research:%20${encodedUrl}`;
        break;
      default:
        shareUrl = "";
        return;
    }

    window.open(shareUrl, "_blank");
  };

  const renderBlockquote = (domNode: any, options: any) => {
    return (
      <blockquote className="border-s-3 ps-4 py-2 italic text-black">
        {domToReact(domNode.children, options)}
      </blockquote>
    );
  };

  const getIconForSection = (section: InternalParticipantBlogTags) => {
    switch (section) {
      case InternalParticipantBlogTags.ABOUT_US:
        return <PFRSamLogo fill="#fff" width={16} />;
      case InternalParticipantBlogTags.ABOUT_RESEARCH:
        return <FaCircleInfo />;
      case InternalParticipantBlogTags.RESEARCH_STORIES:
        return <FaBook />;
      case InternalParticipantBlogTags.REGISTRATION_HUB:
        return <FaHouseLaptop />;
      case InternalParticipantBlogTags.HELPFUL_GUIDES:
        return <FaHandHolding />;
      case InternalParticipantBlogTags.POLICIES:
        return <FaFileContract />;
      default:
        return null;
    }
  };

  return (
    <div className="py-4">
      <div className="flex flex-col items-start justify-start ps-8 pb-8">
        <Breadcrumbs />
      </div>
      <div className="relative bg-white mx-8 xl:mx-48 rounded-md p-8 sm:p-12 xl:p-16 block space-y-3 light">
        <div className="flex flex-col justify-between items-start space-y-2 sm:flex-row sm:items-center sm:space-y-0">
          <Chip
            classNames={{
              content: "font-semibold py-1 flex flex-row items-center gap-1",
              base: "bg-black text-white font-inter font-extrabold text-xs",
            }}
          >
            {getIconForSection(section as InternalParticipantBlogTags)}
            {formatSection(section)}
          </Chip>
          <PostSocialMedia
            onClick={(socialId) =>
              handleOnClickSocial(socialId as keyof typeof SM_LINKS_PARTICIPANT)
            }
          />
        </div>
        <h1 className="text-2xl md:text-3xl xl:text-4xl font-black font-inter text-black">
          {post.title}
        </h1>
        <div className="flex flex-col lg:flex-row items-start lg:items-center space-y-4 space-x-0 lg:space-y-0 lg:space-x-8 py-4">
          <div className="flex flex-row items-center space-x-2">
            <PFRSamLogo fill="#000" height={20} width={20} />
            <p className="font-inter font-semibold text-xs text-gray-800">
              People for Research
            </p>
          </div>
          <div className="flex flex-row items-center space-x-2 ">
            <FaClock className="text-gray-800" />
            <span className="font-inter font-semibold text-xs text-gray-800">
              {post.reading_time} min read
            </span>
          </div>
        </div>
        <article className="font-noto htmlContent space-y-4">
          {parse(sanitizedPost, options)}
        </article>
      </div>
      <ArticleCTA />
    </div>
  );
}

export default Article;