import { Metadata } from "next";
import * as cheerio from "cheerio";
import { FAQPage, WithContext } from "schema-dts";

import { fetchPostsByTag } from "@/services/blogActions";
import HowItWorks from "@/components/pages/participant/how-it-works/main";
import { Post } from "@/types/blog/blogTypes";
import { jsonForScript } from "@/utils/json-for-script";

export const revalidate = 60;

export const metadata: Metadata = {
  title: "How it works",
  description:
    "Find out how to get involved in paid research studies, digital and physical product testing, market research and online surveys. Learn how People for Research connects you with exciting opportunities.",
  openGraph: {
    title: "How it works",
    description:
      "Find out how to get involved in paid research studies, digital and physical product testing, market research and online surveys. Learn how People for Research connects you with exciting opportunities.",
    images: [
      {
        url: "/global-assets/pfr-logo-og-participant.svg",
        alt: "People for Research logo, featuring a person inside a circle, representing a focus on human-centered research and activities.",
        width: 200,
        height: 150,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "How it works",
    images: "/global-assets/pfr-logo-og-participant.svg",
    description:
      "Find out how to get involved in paid research studies, digital and physical product testing, market research and online surveys. Learn how People for Research connects you with exciting opportunities.",
  },
};

export default async function HowItWorksPage() {
  let data: Post | undefined;

  try {
    const faqsData = await fetchPostsByTag(["#participant-faqs"], 1, {
      revalidate: 60,
      timeoutMs: 5000,
    });
    data = faqsData.posts[0];
  } catch {
    // The rest of this page remains useful if Ghost is temporarily unavailable.
  }

  const htmlContent = data?.html || "";

  const $ = cheerio.load(htmlContent);

  const accordionItems: {
    title: string;
    content: string;
    plainText: string;
  }[] = [];

  $("h2").each((_, element) => {
    const title = $(element).text().trim();
    let content = "";

    let next = $(element).next();
    while (next.length && next.prop("tagName") !== "H2") {
      content += $.html(next);
      next = next.next();
    }

    const plainTextContent = $(element).nextUntil("h2").text();

    const plainText = plainTextContent.trim();

    if (title && plainText) {
      accordionItems.push({ title, content, plainText });
    }
  });

  const jsonLd: WithContext<FAQPage> = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: accordionItems.map((faq) => ({
      "@type": "Question",
      name: faq.title,
      acceptedAnswer: {
        "@type": "Answer",
        text: faq.plainText,
      },
    })),
  };

  return (
    <>
      {accordionItems.length > 0 && (
        <script
          dangerouslySetInnerHTML={{
            __html: jsonForScript(jsonLd),
          }}
          type="application/ld+json"
        />
      )}
      <div className="flex flex-col min-h-screen bg-participant-light dark:bg-participant-dark">
        <HowItWorks
          accordionItems={accordionItems.map(({ title, content }) => ({
            title,
            content,
          }))}
        />
      </div>
    </>
  );
}