"use client";

import Image from "next/image";
import {
  Accordion,
  AccordionItem,
  Card,
  CardBody,
  CardHeader,
} from "@nextui-org/react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import DOMPurify from "isomorphic-dompurify";
import parse from "html-react-parser";

import { LEARN_MORE_CARD_MAPPING } from "@/constants/ui-helpers";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import ConnectedSection from "@/components/pages/participant/home/connected-section";

type HowItWorksProps = {
  accordionItems: { title: string; content: string }[];
};

function HowItWorks({ accordionItems }: HowItWorksProps) {
  const router = useRouter();

  const onClickCard = (href: string) => {
    router.push(`${INTERNAL_PAGES.participant.howItWorks.homepage}/${href}`);
  };

  const renderItem = (
    item: { title: string; content: string },
    index: number,
  ) => {
    const content = DOMPurify.sanitize(item.content);

    return (
      <AccordionItem
        key={`${item.title}-${index}`}
        classNames={{
          title: "font-inter font-bold text-base tracking-tight",
          content: "font-noto text-base my-4",
        }}
        title={item.title}
      >
        <div className="space-y-4 [&_a]:underline [&_a]:underline-offset-2 [&_ol]:list-decimal [&_ol]:ps-6 [&_ul]:list-disc [&_ul]:ps-6">
          {parse(content)}
        </div>
      </AccordionItem>
    );
  };

  return (
    <div className="py-4">
      <div className="w-full flex flex-col justify-center items-center text-center max-w-3xl mx-auto py-16">
        <span className="text-center font-noto text-sm font-medium tracking-widest uppercase">
          How it works
        </span>
        <h1 className="text-3xl md:text-5xl xl:text-6xl font-black font-inter text-center w-full text-black dark:text-white">
          Everything you need to know about taking part in{" "}
          <span className="text-participant-bittersweet dark:text-participant-cerulean">
            paid
          </span>{" "}
          research.
        </h1>
      </div>
      <main
        className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 xxxl:grid-cols-6 text-black gap-4 mx-16 md:mx-24 xl:mx-48 mb-36"
        id="main-content"
      >
        {LEARN_MORE_CARD_MAPPING.map((card, index) => {
          return (
            <Card
              key={`${card.title} ${index}`}
              disableAnimation
              isPressable
              className="bg-white dark:bg-[#18181a] border border-gray-200 dark:border-white/10 rounded-lg shadow-none light hover:bg-gray-100 hover:dark:bg-[#39393e]"
              onPress={() => onClickCard(card.href)}
            >
              <CardHeader className="p-0">
                <Image
                  alt={card.alt}
                  className="object-cover rounded-none w-[450px] h-[200px]"
                  loading="eager"
                  src={card.thumbnail}
                />
              </CardHeader>
              <CardBody className="flex flex-col space-y-2 p-4">
                <span className="font-inter tracking-tight font-black text-lg h-10 pt-3 text-black dark:text-white">
                  {card.title}
                </span>
                <p className="font-noto text-gray-700 dark:text-gray-300 text-sm">
                  {card.description}
                </p>
              </CardBody>
            </Card>
          );
        })}
      </main>
      <div className="flex flex-col sm:flex-row my-24 mx-12 space-y-12 sm:space-y-0 xl:space-y-0">
        <div className="space-y-4 text-center sm:text-start w-full xl:w-1/2 xl:pe-36">
          <span className="text-sm font-noto font-medium">
            Got a question? We have the answers.
          </span>
          <h2 className="text-3xl text-center sm:text-start xl:text-5xl font-black font-inter text-black dark:text-white">
            Frequently asked questions about taking part in research.
          </h2>
          <p className="text-lg font-noto">
            Can&apos;t find the answer you&apos;re looking for?{" "}
            <Link
              className="underline underline-offset-2 decoration-dotted cursor-pointer font-bold"
              href={INTERNAL_PAGES.participant.contactUs}
            >
              Reach
            </Link>{" "}
            out to our team.
          </p>
        </div>
        <div className="w-full xl:w-[70%]">
          <Accordion>{accordionItems.map(renderItem)}</Accordion>
        </div>
      </div>
      <ConnectedSection typeOfPage="howItWorks" />
    </div>
  );
}

export default HowItWorks;