"use client";

import { Suspense, useCallback, useEffect } from "react";
import { helpServiceTopics } from "@/data/helpServiceTopics";
import { useRouter, useSearchParams } from "next/navigation";
import { Container, Stack } from "@mantine/core";
import { MarketingLayout } from "@/layouts/MarketingLayout";
import { HelpCategoryFilter } from "@/components/help/HelpCategoryFilter";
import { HelpFaqSection } from "@/components/help/HelpFaqSection";
import { HelpSearchHero } from "@/components/help/HelpSearchHero";
import { HelpServiceTopicsSection } from "@/components/help/HelpServiceTopicsSection";

function AjudaContent() {
  const router = useRouter();
  const params = useSearchParams();
  const q = params.get("q") ?? undefined;
  const categorySlug = params.get("categoria") ?? null;
  const isServiceCategory =
    categorySlug !== null &&
    helpServiceTopics.some((t) => t.categorySlug === categorySlug);

  useEffect(() => {
    if (!isServiceCategory) return;
    const t = window.setTimeout(() => {
      document.getElementById("help-faq-list")?.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 80);
    return () => window.clearTimeout(t);
  }, [isServiceCategory, categorySlug]);

  const setCategory = useCallback(
    (slug: string | null) => {
      const next = new URLSearchParams(params.toString());
      if (slug) {
        next.set("categoria", slug);
      } else {
        next.delete("categoria");
      }
      next.delete("q");
      const qs = next.toString();
      router.replace(qs ? `/ajuda?${qs}` : "/ajuda", { scroll: false });
    },
    [params, router],
  );

  return (
    <>
      <HelpSearchHero />
      <Container size="md" pb={100} pt={0}>
        <Stack gap="lg">
          <HelpServiceTopicsSection
            activeCategorySlug={categorySlug}
            onSelectCategory={setCategory}
          />
          <HelpCategoryFilter value={categorySlug} onChange={setCategory} />
          <HelpFaqSection searchQuery={q} categorySlug={categorySlug} />
        </Stack>
      </Container>
    </>
  );
}

export default function AjudaPage() {
  return (
    <MarketingLayout>
      <Suspense fallback={<HelpSearchHero />}>
        <AjudaContent />
      </Suspense>
    </MarketingLayout>
  );
}