"use client";

import * as React from "react";
import { AddDealModal } from "./add-deal-modal";
import { EditDealModal } from "./edit-deal-modal";
import { NewPipelineModal } from "./new-pipeline-modal";
import type { Deal, Stage } from "@/components/deals/types";
import { useTeamsQuery } from "@/hooks/use-teams-query";
import { useAppDispatch } from "@/store/hooks";
import { closeDealsModals } from "@/store/slices/deals-modals-slice";
import {
  useDealsModalsHandlersSync,
  useDealsModalsUiSync,
} from "@/hooks/use-deals-modals-sync";

export interface DealsModalsProps {
  stages: Stage[];
  pipelineId: string | null;
  /** When the board scope changes, close any open pipeline modals so state stays scoped. */
  boardUiKey: string;
}

export function DealsModals({
  stages,
  pipelineId,
  boardUiKey,
}: DealsModalsProps) {
  const dispatch = useAppDispatch();
  const { data: teamsData } = useTeamsQuery();
  const teams = teamsData ?? [];
  const boardKeyCommittedRef = React.useRef(false);

  React.useEffect(() => {
    if (!boardKeyCommittedRef.current) {
      boardKeyCommittedRef.current = true;
      return;
    }
    dispatch(closeDealsModals());
  }, [boardUiKey, dispatch]);
  const { kind, dealForEdit, addModalInitialStageId } = useDealsModalsUiSync();
  const { onCreateDeal, onSaveDeal, onCreatePipeline, onImportSuccess } =
    useDealsModalsHandlersSync();

  const isEditModalOpen = kind === "edit";
  const isAddModalOpen = kind === "add";
  const isPipelineModalOpen = kind === "pipeline";

  return (
    <>
      <EditDealModal
        deal={dealForEdit}
        stages={stages}
        teams={teams}
        isOpen={isEditModalOpen}
        onClose={() => dispatch(closeDealsModals())}
        onSave={onSaveDeal}
      />
      <AddDealModal
        isOpen={isAddModalOpen}
        onClose={() => dispatch(closeDealsModals())}
        onCreate={onCreateDeal}
        stages={stages}
        teams={teams}
        pipelineId={pipelineId}
        initialStageId={addModalInitialStageId}
        onImportSuccess={onImportSuccess}
      />
      <NewPipelineModal
        isOpen={isPipelineModalOpen}
        onClose={() => dispatch(closeDealsModals())}
        onCreate={onCreatePipeline}
      />
    </>
  );
}