"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { useTranslation } from "react-i18next";

import { useHome } from "@/context/helpers/Home/HomeContext";
import Loading from "@/components/Loading";
import SEO from "@/components/shared/SEO";

export default function CMSPage() {
  const params = useParams();
  const slug = params?.slug;
  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?.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 =
    typeof window !== "undefined" ? `${baseUrl}${window.location.pathname}` : "";

  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="mx-auto px-4 py-16 max-w-7xl container">
        <div className="text-center">
          <h1 className="mb-4 font-bold text-gray-800 dark:text-gray-200 text-4xl">
            {t("title")}
          </h1>
          <p className="mb-8 text-gray-600 dark:text-gray-400">
            {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 || ""}
        type="article"
        schema={pageSchema}
      />

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