"use client";
import { useAtom } from "jotai";
import { isOpenMapsetDialogAtom, selectedMapsetAtom } from "../../state/mapset-dialog";
import MapsetList from "./mapset-list";
import MainDialog from "./main";
import { useQueryParam, StringParam } from "use-query-params";
import { useEffect } from "react";
import { ArrowRight } from "lucide-react";
import TabSwitcher from "./tab-switcher";
import mapsetApi from "@/shared/services/mapset";
import { activeTabAtom } from "../../state/active-tab";

export default function MapsetDialog() {
  const [isOpenDialog, setIsOpenDialog] = useAtom(isOpenMapsetDialogAtom);
  const [openCatalog] = useQueryParam("open-catalog", StringParam);
  const [tabParam] = useQueryParam("tab", StringParam);
  const [mapsetIdParam] = useQueryParam("mapset-id", StringParam);
  const [, setSelectedMapset] = useAtom(selectedMapsetAtom);
  const [, setActiveTab] = useAtom(activeTabAtom);

  // Convert the query param to a valid tab type
  const initialTab = tabParam === "organization" || tabParam === "category" ? tabParam : undefined;
  useEffect(() => {
    if (isOpenDialog && !tabParam) {
      setActiveTab("category");
    }
  }, [isOpenDialog, tabParam, setActiveTab]);

  useEffect(() => {
    const fetchMapset = async () => {
      if (mapsetIdParam) {
        try {
          const data = await mapsetApi.getMapsetById(mapsetIdParam, { skipAuth: true });
          setSelectedMapset(data);
          setIsOpenDialog(true);
        } catch (error) {
          console.error("Error fetching mapset by ID:", error);
        }
      } else if (openCatalog === "true") {
        setIsOpenDialog(true);

        try {
          const response = await mapsetApi.getMapsets(
            {
              limit: 10,
              offset: 0,
              filter: JSON.stringify(["is_active=true", "status_validation=approved"]),
            },
            { skipAuth: true }
          );
          if (response.items && response.items.length > 0) {
            setSelectedMapset(response.items[0]);
          }
        } catch (error) {
          console.error("Error fetching mapsets for default:", error);
        }
      }
    };

    fetchMapset();
  }, [openCatalog, mapsetIdParam, setIsOpenDialog, setSelectedMapset]);

  return (
    <div className={`absolute inset-0 transition-opacity duration-300 ${isOpenDialog ? "opacity-100 z-[404]" : "z-0 opacity-0 pointer-events-none"}`}>
      <div className={`h-full flex flex-col w-full transform transition-all duration-300 ${isOpenDialog ? "scale-100 opacity-100" : "z-0 scale-95 opacity-0"}`}>
        <div className="relative flex w-full bg-white border-b border-gray-200">
          <div className="w-[376px] px-3 py-1.5 h-full">
            <TabSwitcher initialTab={initialTab} />
          </div>

          <button className="absolute items-center cursor-pointer text-zinc-950 space-x-2 right-4 top-4 flex group hover:text-zinc-600" onClick={() => setIsOpenDialog(false)}>
            <span>Jelajahi Peta</span>
            <ArrowRight className="w-4 h-4 text-zinc-700 group-hover:text-slate-600" />
          </button>
        </div>

        <div className="flex h-[calc(100vh-117px)] w-full pointer-events-auto">
          <div className="w-[376px] bg-white">
            <MapsetList />
          </div>
          <div className="flex-1 bg-gray-50">
            <MainDialog />
          </div>
        </div>
      </div>
    </div>
  );
}