"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";

type CmsPage = {
  id: number | string;
  slug: string;
  title: string;
  html_content?: string;
  meta_title?: string;
  meta_description?: string;
  meta_keywords?: string;
};

export default function CmsSlugPage({
  params,
}: {
  params: { slug: string; locale: string };
}) {
  const locale = useLocale();
  const tAbout = useTranslations("about-us-page");

  const [page, setPage] = useState<CmsPage | null>(null);
  const [loading, setLoading] = useState(true);

  const slug = params?.slug;

  useEffect(() => {
    let cancelled = false;

    async function load() {
      setLoading(true);
      try {
        const res = await fetch(`/api/catalog/settings?locale=${locale}`, {
          method: "GET",
          headers: { "Content-Type": "application/json" },
        });
        const data = await res.json().catch(() => null);
        const cmsPages = Array.isArray(data?.cmsPages) ? data.cmsPages : [];

        const match =
          cmsPages.find((p: any) => String(p.slug) === String(slug)) || null;

        if (!cancelled) setPage(match);
      } catch {
        if (!cancelled) setPage(null);
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    if (slug) load();
    return () => {
      cancelled = true;
    };
  }, [locale, slug]);

  const dir = useMemo(() => (locale === "ar" ? "rtl" : "ltr"), [locale]);

  return (
    <div
      dir={dir}
      className="bg-background-light dark:bg-background-dark font-cairo text-text-main-light dark:text-gray-100 transition-colors duration-300 antialiased min-h-screen"
    >
      <main className="max-w-4xl mx-auto px-6 py-12 md:py-16">
        {/* Breadcrumb */}
        <nav
          aria-label="Breadcrumb"
          className="flex items-center text-sm text-text-muted-light dark:text-gray-500 mb-16"
        >
          <Link
            href={`/${locale}/home`}
            className="hover:text-text-main-light dark:hover:text-gray-300 transition-colors"
          >
            {tAbout("breadcrumb-home")}
          </Link>
          <span className="mx-2 text-xs opacity-50">&gt;</span>
          <span className="text-text-muted-light dark:text-gray-300 font-medium">
            {page?.title || (loading ? "..." : slug)}
          </span>
        </nav>

        {loading ? (
          <div className="text-lg text-gray-600 dark:text-gray-300">
            Loading...
          </div>
        ) : !page ? (
          <div className="space-y-4">
            <h1 className="text-3xl md:text-4xl font-bold text-text-main-light dark:text-white">
              {slug}
            </h1>
            <p className="text-lg leading-loose text-gray-600 dark:text-gray-300">
              This page is not available.
            </p>
          </div>
        ) : (
          <div className="space-y-10">
            <section className="relative">
              <div className="mb-6 inline-block relative">
                <h1 className="text-3xl md:text-4xl font-bold text-text-main-light dark:text-white pb-2 relative z-10">
                  {page.title}
                </h1>
              </div>

              <div
                className="text-lg leading-loose text-gray-600 dark:text-gray-300 max-w-3xl text-justify md:text-start font-light [&_.static-container]:space-y-6 [&_a]:underline [&_a:hover]:opacity-80"
                dangerouslySetInnerHTML={{ __html: page.html_content || "" }}
              />
            </section>
          </div>
        )}
      </main>
      <div className="h-2 w-full bg-gradient-to-l from-gray-200 to-transparent dark:from-gray-800 dark:to-transparent mt-12 opacity-30" />
    </div>
  );
}