import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useHome } from "@/context/helpers/Home/HomeContext";
import Loading from "@/components/Loading";
import { useTranslation } from "react-i18next";
import SEO from "@/components/shared/SEO";

export default function CMSPage() {
  const router = useRouter();
  const { slug } = router.query;
  const { cmsPages, isLoading, companyData } = useHome();
  const { t } = useTranslation("notFound");

  const [content, setContent] = useState({
    html_content: "",
    id: "",
    slug: "",
    title: "",
    meta_title: "",
    meta_description: "",
    meta_keywords: "",
  });

  useEffect(() => {
    // If cmsPages is not empty, find the page with the matching slug
    if (cmsPages?.length > 0 && slug) {
      const pageData = cmsPages.find((page) => page.slug === slug);
      if (pageData) {
        setContent(pageData);
      }
    }
  }, [cmsPages, slug]);

  const baseUrl =
    typeof window !== "undefined"
      ? window.location.origin
      : companyData?.domain
        ? `https://${companyData.domain}`
        : "";
  const pageUrl = `${baseUrl}${router.asPath}`;

  // CMS Page schema for JSON-LD
  const pageSchema = content?.title
    ? {
        "@context": "https://schema.org",
        "@type": "WebPage",
        name: content.title,
        description: content.meta_description || "",
        url: pageUrl,
      }
    : null;

  if (isLoading) {
    return <Loading />;
  }

  if (!content?.title && !isLoading) {
    return (
      <div className="container mx-auto max-w-screen-xl px-4 py-16">
        <div className="text-center">
          <h1 className="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">
            {t("title")}
          </h1>
          <p className="text-gray-600 dark:text-gray-400 mb-8">
            {t("subtitle")}
          </p>
        </div>
      </div>
    );
  }

  return (
    <>
      <SEO
        title={content?.meta_title || content?.title || ""}
        metaTitle={content?.meta_title || content?.title}
        description={content?.meta_description || ""}
        keywords={content?.meta_keywords || ""}
        url={pageUrl}
        type="article"
        schema={pageSchema}
      />

      <main className="container mx-auto max-w-screen-xl px-4 py-8">
        <article className="prose dark:prose-invert max-w-none">
          {content?.title && (
            <h1 className="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-6">
              {content.title}
            </h1>
          )}
          {content?.html_content && (
            <div
              className="text-gray-700 dark:text-gray-300 cms-content"
              dangerouslySetInnerHTML={{ __html: content.html_content }}
            />
          )}
        </article>
      </main>
    </>
  );
}