import { create } from 'zustand';
import { useShallow } from 'zustand/react/shallow';
import { immer } from 'zustand/middleware/immer';

interface DataFieldsModal {
  nodeType: 'trigger' | 'action';
  typeIdentifier: string;
}

interface NodeToDelete {
  id: string;
  name: string;
}

interface UIState {
  // App selector panel
  showAppSelector: boolean;
  appSelectorType: 'trigger' | 'action';
  selectedPlaceholderId: string | null;

  // Data fields modal
  dataFieldsModal: DataFieldsModal | null;

  // Node deletion dialog
  nodeToDelete: NodeToDelete | null;

  // Unsaved changes dialogs
  showUnsavedDialog: boolean;
}

interface UIActions {
  // App selector
  openAppSelector: (type: 'trigger' | 'action', placeholderId?: string) => void;
  closeAppSelector: () => void;

  // Data fields modal
  openDataFieldsModal: (nodeType: 'trigger' | 'action', typeIdentifier: string) => void;
  closeDataFieldsModal: () => void;

  // Node deletion
  requestDeleteNode: (id: string, name: string) => void;
  cancelDeleteNode: () => void;
  clearNodeToDelete: () => void;

  // Unsaved changes
  setShowUnsavedDialog: (show: boolean) => void;

  // Reset
  reset: () => void;
}

type UIStore = UIState & UIActions;

const initialState: UIState = {
  showAppSelector: false,
  appSelectorType: 'action',
  selectedPlaceholderId: null,
  dataFieldsModal: null,
  nodeToDelete: null,
  showUnsavedDialog: false,
};

export const useUIStore = create<UIStore>()(
  immer((set) => ({
    ...initialState,

    openAppSelector: (type, placeholderId) =>
      set((state) => {
        state.showAppSelector = true;
        state.appSelectorType = type;
        state.selectedPlaceholderId = placeholderId ?? null;
      }),

    closeAppSelector: () =>
      set((state) => {
        state.showAppSelector = false;
        state.selectedPlaceholderId = null;
      }),

    openDataFieldsModal: (nodeType, typeIdentifier) =>
      set((state) => {
        state.dataFieldsModal = { nodeType, typeIdentifier };
      }),

    closeDataFieldsModal: () =>
      set((state) => {
        state.dataFieldsModal = null;
      }),

    requestDeleteNode: (id, name) =>
      set((state) => {
        state.nodeToDelete = { id, name };
      }),

    cancelDeleteNode: () =>
      set((state) => {
        state.nodeToDelete = null;
      }),

    clearNodeToDelete: () =>
      set((state) => {
        state.nodeToDelete = null;
      }),

    setShowUnsavedDialog: (show) =>
      set((state) => {
        state.showUnsavedDialog = show;
      }),

    reset: () => set(initialState),
  })),
);

// --- Granular selectors to prevent unnecessary re-renders ---

export const useAppSelector = () =>
  useUIStore(
    useShallow((s) => ({
      showAppSelector: s.showAppSelector,
      appSelectorType: s.appSelectorType,
      selectedPlaceholderId: s.selectedPlaceholderId,
      openAppSelector: s.openAppSelector,
      closeAppSelector: s.closeAppSelector,
    })),
  );

export const useDialogState = () =>
  useUIStore(
    useShallow((s) => ({
      nodeToDelete: s.nodeToDelete,
      showUnsavedDialog: s.showUnsavedDialog,
      setShowUnsavedDialog: s.setShowUnsavedDialog,
      requestDeleteNode: s.requestDeleteNode,
      cancelDeleteNode: s.cancelDeleteNode,
      clearNodeToDelete: s.clearNodeToDelete,
    })),
  );

export const useDataFieldsModal = () =>
  useUIStore(
    useShallow((s) => ({
      dataFieldsModal: s.dataFieldsModal,
      openDataFieldsModal: s.openDataFieldsModal,
      closeDataFieldsModal: s.closeDataFieldsModal,
    })),
  );
