"use client";

import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import { apiCall } from "@/utils/callApi";
import Newsletter from "@/components/frontend-pages/home/Newsletter";
import AppLoader from "@/components/ui-elements/AppLoader";

interface CMSData {
  _id: string;
  title: string;
  slug: string;
  content: string;
  featured_image?: string;
}

interface CMSResponse {
  success: boolean;
  data: CMSData;
}

export default function Page() {
  const params = useParams();
  const slug = params.slug as string;

  const [cmsData, setCmsData] = useState<CMSData | null>(null);
  const [loading, setLoading] = useState(true);

  const fetchCMS = async () => {
    try {
      const response = await apiCall<CMSResponse>(
        `/clientapi/cms?slug=${slug}`,
        {
          method: "GET",
        }
      );

      if (response?.data?.success && response?.data?.data) {
        setCmsData(response.data.data);
      }
    } catch (error) {
      console.error("CMS fetch error:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (slug) {
      fetchCMS();
    }
  }, [slug]);

  if (loading) {
    return (
      // <div className="min-h-screen flex items-center justify-center">
      //   <div className="flex flex-col items-center gap-3">
      //     <div className="w-10 h-10 border-4 border-gray-300 border-t-blue-600 rounded-full animate-spin"></div>
      //     <p className="text-gray-500 text-sm">Loading...</p>
      //   </div>
      // </div>
      <AppLoader loading={loading} />
    );
  }

  if (!cmsData) {
    return (
      <div className="min-h-[50vh] flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-3xl font-bold mb-2">Page Not Found</h1>
          <p className="text-gray-500">
            The requested page could not be found.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen">      
      <section className="breadcrumbcontainer">
        <div className="container container-xxl px-3">
          <ol className="breadcrumb">
            <li className="breadcrumb-item">
              <a href="/">Home</a>
            </li>
            <li className="breadcrumb-item active">
              {cmsData.title?.charAt(0)?.toUpperCase() + cmsData?.title?.slice(1)}
            </li>
          </ol>
        </div>
      </section>

      <section className="staticpagecontainer">
        <div className="container container-xxl px-3">
          <div className="flex flex-wrap -mx-2">
            <div className="w-full px-2">
              <div className="section-heading">
                <h2 className="capitalize">{cmsData.title}</h2>
              </div>

              {cmsData.featured_image && (
                <img
                  src={cmsData.featured_image}
                  alt={cmsData.title}
                />
              )}

              <div
                dangerouslySetInnerHTML={{
                  __html: cmsData.content,
                }}
              />
            </div>
          </div>
        </div>
      </section>
      <Newsletter/>
    </div>
  );
}