"use client";

import { PageDeleteDialog } from "@/components/dashboard/pages/page-delete-dialog";
import { PageDisableDialog } from "@/components/dashboard/pages/page-disable-dialog";
import { PageEnableDialog } from "@/components/dashboard/pages/page-enable-dialog";
import { PagePreviewDialog } from "@/components/dashboard/pages/page-preview-dialog";
import { PagesPageView } from "@/components/dashboard/pages/pages-page-view";
import type {
  DashboardPageItem,
  DashboardPageLanguage,
  PagesListFilters,
} from "@/components/dashboard/pages/pages-types";
import {
  useDashboardPageDetail,
  useDashboardPageMutations,
  useDashboardPagesData,
} from "@/hooks/use-dashboard-pages-data";
import { useRouter } from "@/i18n/routing";
import { useLocale } from "next-intl";
import { usePathname, useSearchParams } from "next/navigation";
import { useCallback, useMemo, useState } from "react";

export function PagesPageContainer() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const locale = useLocale() as DashboardPageLanguage;

  const [isFilterOpen, setIsFilterOpen] = useState(false);
  const [enabling, setEnabling] = useState<DashboardPageItem | null>(null);
  const [disabling, setDisabling] = useState<DashboardPageItem | null>(null);
  const [deleting, setDeleting] = useState<DashboardPageItem | null>(null);
  const [previewing, setPreviewing] = useState<DashboardPageItem | null>(null);

  const params = useMemo(() => {
    const pageNum = Number(searchParams.get("page") || "1");
    const perPageNum = Number(searchParams.get("perPage") || "8");
    return {
      page: Number.isFinite(pageNum) && pageNum > 0 ? pageNum : 1,
      perPage: Number.isFinite(perPageNum) && perPageNum > 0 ? perPageNum : 8,
      search: searchParams.get("search") || "",
    };
  }, [searchParams]);

  const filters: PagesListFilters = useMemo(
    () => ({
      status: (searchParams.get("status") as "active" | "disabled") || undefined,
      locationKey: searchParams.get("locationKey") || undefined,
      language:
        (searchParams.get("language") as DashboardPageLanguage) || undefined,
      createdFrom: searchParams.get("createdFrom") || undefined,
      createdTo: searchParams.get("createdTo") || undefined,
    }),
    [searchParams]
  );

  const writeFilters = useCallback(
    (next: PagesListFilters) => {
      const sp = new URLSearchParams(searchParams);
      ["status", "locationKey", "language", "createdFrom", "createdTo"].forEach(
        (k) => sp.delete(k)
      );
      if (next.status) sp.set("status", next.status);
      if (next.locationKey) sp.set("locationKey", next.locationKey);
      if (next.language) sp.set("language", next.language);
      if (next.createdFrom) sp.set("createdFrom", next.createdFrom);
      if (next.createdTo) sp.set("createdTo", next.createdTo);
      sp.set("page", "1");
      router.replace(`${pathname}?${sp.toString()}`);
    },
    [pathname, router, searchParams]
  );

  const { data, totalPages, totalItems, isLoading, isError } =
    useDashboardPagesData({
      page: params.page,
      perPage: params.perPage,
      search: params.search,
      locale,
      filters,
    });

  const { data: previewDetail } = useDashboardPageDetail(
    previewing?.id ?? "",
    locale
  );
  const mutations = useDashboardPageMutations();

  return (
    <>
      <PagesPageView
        data={data}
        page={params.page}
        perPage={params.perPage}
        totalPages={totalPages}
        totalItems={totalItems}
        isLoading={isLoading}
        isError={isError}
        isFilterOpen={isFilterOpen}
        filters={filters}
        onToggleFilter={() => setIsFilterOpen((v) => !v)}
        onApplyFilters={writeFilters}
        onClearFilters={() => writeFilters({})}
        onAddNew={() => router.push("/dashboard/pages/new")}
        onToggleStatus={(item) => {
          if (item.isActive) setDisabling(item);
          else setEnabling(item);
        }}
        onDelete={setDeleting}
        onEdit={(item) => router.push(`/dashboard/pages/${item.id}/edit`)}
        onPreview={setPreviewing}
      />

      <PageEnableDialog
        open={Boolean(enabling)}
        onOpenChange={(open) => !open && setEnabling(null)}
        title={enabling?.title ?? ""}
        location={enabling?.location ?? ""}
        isMutating={mutations.isMutating}
        onConfirm={async () => {
          if (!enabling) return;
          await mutations.toggleStatus(enabling.id, true);
          setEnabling(null);
        }}
      />

      <PageDisableDialog
        open={Boolean(disabling)}
        onOpenChange={(open) => !open && setDisabling(null)}
        title={disabling?.title ?? ""}
        location={disabling?.location ?? ""}
        isMutating={mutations.isMutating}
        onConfirm={async () => {
          if (!disabling) return;
          await mutations.toggleStatus(disabling.id, false);
          setDisabling(null);
        }}
      />

      <PageDeleteDialog
        open={Boolean(deleting)}
        onOpenChange={(open) => !open && setDeleting(null)}
        title={deleting?.title ?? ""}
        isMutating={mutations.isMutating}
        onConfirm={async () => {
          if (!deleting) return;
          await mutations.remove(deleting.id);
          setDeleting(null);
        }}
      />

      <PagePreviewDialog
        open={Boolean(previewing)}
        onOpenChange={(open) => !open && setPreviewing(null)}
        title={previewDetail?.title ?? previewing?.title ?? ""}
        subtitle={previewDetail?.subtitle ?? null}
        content={previewDetail?.content ?? null}
        metaImage={previewDetail?.metaImage ?? null}
      />
    </>
  );
}