import * as THREE from "three";
import { create } from "zustand";
import { io } from "socket.io-client";
import * as CONSTANTS from "../../types/world/worldConstants";

export const useSocketStore = create<any>((set: any, get: any) => ({
  socket: null,
  initializeSocket: (email?: string, organization?: string, token?: string) => {
    const existingSocket = get().socket;
    if (existingSocket) {
      return;
    }

    const socket = io(
      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder_v1`,
      {
        reconnection: true,
        auth: { token },
      }
    );

    const visualizationSocket = io(
      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization_v1`,
      {
        reconnection: true,
        auth: { token },
      }
    );


    const dashBoardSocket = io(
      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/dashboard`,
      {
        reconnection: true,
        auth: { token },
      }
    );
    const projectSocket = io(
      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/project`,
      {
        reconnection: true,
        auth: { token },
      }
    );

    set({ socket, visualizationSocket, dashBoardSocket, projectSocket });
  },
  disconnectSocket: () => {
    set((state: any) => {
      state.socket?.disconnect();
      state.visualizationSocket?.disconnect();
      state.dashBoardSocket?.disconnect();
      state.projectSocket?.disconnect();
      return { socket: null };
    });
  },
}));
// export const useSocketStore = create<any>((set: any, get: any) => ({
//   socket: null,
//   initializeSocket: (
//     email: string,
//     organization: string,
//     userId?: string,
//     token?: string
//   ) => {
//     const existingSocket = get().socket;
//     if (existingSocket) {
//       return;
//     }

//     const socket = io(
//       `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
//       {
//         reconnection: true,
//         auth: { email, organization },
//       }
//     );

//     const visualizationSocket = io(
//       `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
//       {
//         reconnection: true,
//         auth: { email, organization },
//       }
//     );

//     const dashBoardSocket = io(
//       `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/dashboard`,
//       {
//         reconnection: true,
//         auth: { token },
//       }
//     );
//     // const dashBoardSocket = io(
//     //   `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/project`,
//     //   {
//     //     reconnection: true,
//     //     auth: { token },
//     //   }
//     // );

//     set({ socket, visualizationSocket, dashBoardSocket });
//   },
//   disconnectSocket: () => {
//     set((state: any) => {
//       state.socket?.disconnect();
//       state.visualizationSocket?.disconnect();
//       state.dashBoardSocket?.disconnect();
//       return { socket: null };
//     });
//   },
// }));
export const useLoadingProgress = create<{
  loadingProgress: number;
  setLoadingProgress: (x: number) => void;
}>((set) => ({
  loadingProgress: 1,
  setLoadingProgress: (x: number) => set({ loadingProgress: x }),
}));

export const useOrganization = create<any>((set: any) => ({
  organization: "",
  setOrganization: (x: any) => set(() => ({ organization: x })),
}));

export const useToggleView = create<any>((set: any) => ({
  toggleView: false,
  setToggleView: (x: any) => set(() => ({ toggleView: x })),
}));

export const useUpdateScene = create<any>((set: any) => ({
  updateScene: false,
  setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
}));

export const useWalls = create<any>((set: any) => ({
  walls: [],
  setWalls: (x: any) => set(() => ({ walls: x })),
}));

export const useRoomsState = create<any>((set: any) => ({
  roomsState: [],
  setRoomsState: (x: any) => set(() => ({ roomsState: x })),
}));

export const useZones = create<any>((set: any) => ({
  zones: [],
  setZones: (callback: any) =>
    set((state: any) => ({
      zones: typeof callback === "function" ? callback(state.zones) : callback,
    })),
}));

interface ZonePointsState {
  zonePoints: THREE.Vector3[];
  setZonePoints: (points: THREE.Vector3[]) => void;
}

export const useZonePoints = create<ZonePointsState>((set) => ({
  zonePoints: [],
  setZonePoints: (points) => set({ zonePoints: points }),
}));

export const useSelectedItem = create<any>((set: any) => ({
  selectedItem: {
    name: "",
    id: "",
    type: undefined,
    category: "",
    subCatergory: "",
  },
  setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
}));

export const useNavMesh = create<any>((set: any) => ({
  navMesh: null,
  setNavMesh: (x: any) => set({ navMesh: x }),
}));

export const useSelectedAssets = create<any>((set: any) => ({
  selectedAssets: [],
  setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
}));

export const useLayers = create<any>((set: any) => ({
  Layers: 1,
  setLayers: (x: any) => set(() => ({ Layers: x })),
}));

export const useCamPosition = create<any>((set: any) => ({
  camPosition: { x: undefined, y: undefined, z: undefined },
  setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
}));

export const useMenuVisible = create<any>((set: any) => ({
  menuVisible: false,
  setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
}));

// export const useDeleteTool = create<any>((set: any) => ({
//   deleteTool: false,
//   setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
// }));

export const useToolMode = create<any>((set: any) => ({
  toolMode: null,
  setToolMode: (x: any) => set(() => ({ toolMode: x })),
}));

export const useNewLines = create<any>((set: any) => ({
  newLines: [],
  setNewLines: (x: any) => set(() => ({ newLines: x })),
}));

export const useDeletedLines = create<any>((set: any) => ({
  deletedLines: [],
  setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
}));

export const useMovePoint = create<any>((set: any) => ({
  movePoint: false,
  setMovePoint: (x: any) => set(() => ({ movePoint: x })),
}));

// export const useDeletePointOrLine = create<any>((set: any) => ({
//   deletePointOrLine: false,
//   setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
// }));

export const useWallItems = create<any>((set: any) => ({
  wallItems: [],
  setWallItems: (callback: any) =>
    set((state: any) => ({
      wallItems:
        typeof callback === "function" ? callback(state.wallItems) : callback,
    })),
}));

export const useSelectedWallItem = create<any>((set: any) => ({
  selectedWallItem: null,
  setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
}));

export const useSelectedFloorItem = create<any>((set: any) => ({
  selectedFloorItem: null,
  setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
}));

export const useDeletableFloorItem = create<any>((set: any) => ({
  deletableFloorItem: null,
  setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
}));

export const useSetScale = create<any>((set: any) => ({
  scale: null,
  setScale: (x: any) => set(() => ({ scale: x })),
}));

export const useRoofVisibility = create<any>((set: any) => ({
  roofVisibility: false,
  setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
}));

export const useWallVisibility = create<any>((set: any) => ({
  wallVisibility: false,
  setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
}));

export const useShadows = create<any>((set: any) => ({
  shadows: false,
  setShadows: (x: any) => set(() => ({ shadows: x })),
}));

export const useSunPosition = create<any>((set: any) => ({
  sunPosition: { x: undefined, y: undefined, z: undefined },
  setSunPosition: (newSuntPosition: any) =>
    set({ sunPosition: newSuntPosition }),
}));

export const useRemoveLayer = create<any>((set: any) => ({
  removeLayer: false,
  setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
}));

export const useRemovedLayer = create<any>((set: any) => ({
  removedLayer: null,
  setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
}));

export const useProjectName = create<any>((set: any) => ({
  projectName: "Creating Your Project",
  setProjectName: (x: any) => set({ projectName: x }),
}));

export const useActiveLayer = create<any>((set: any) => ({
  activeLayer: 1,
  setActiveLayer: (x: any) => set({ activeLayer: x }),
}));

interface RefTextUpdateState {
  refTextupdate: number;
  setRefTextUpdate: (
    callback: (currentValue: number) => number | number
  ) => void;
}

export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
  refTextupdate: -1000,
  setRefTextUpdate: (callback) =>
    set((state) => ({
      refTextupdate:
        typeof callback === "function"
          ? callback(state.refTextupdate)
          : callback,
    })),
}));

export const useResetCamera = create<any>((set: any) => ({
  resetCamera: false,
  setResetCamera: (x: any) => set({ resetCamera: x }),
}));

export const useAddAction = create<any>((set: any) => ({
  addAction: null,
  setAddAction: (x: any) => set({ addAction: x }),
}));

export const useActiveTool = create<any>((set: any) => ({
  activeTool: "cursor",
  setActiveTool: (x: any) => set({ activeTool: x }),
}));

export const useActiveSubTool = create<any>((set: any) => ({
  activeSubTool: "cursor",
  setActiveSubTool: (x: any) => set({ activeSubTool: x }),
}));

export const use2DUndoRedo = create<any>((set: any) => ({
  is2DUndoRedo: null,
  set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
}));

export const useElevation = create<any>((set: any) => ({
  elevation: 45,
  setElevation: (x: any) => set({ elevation: x }),
}));

export const useAzimuth = create<any>((set: any) => ({
  azimuth: -160,
  setAzimuth: (x: any) => set({ azimuth: x }),
}));

export const useRenderDistance = create<any>((set: any) => ({
  renderDistance: 40,
  setRenderDistance: (x: any) => set({ renderDistance: x }),
}));

export const useCamMode = create<any>((set: any) => ({
  camMode: "ThirdPerson",
  setCamMode: (x: any) => set({ camMode: x }),
}));

export const useUserName = create<any>((set: any) => ({
  userName: "",
  setUserName: (x: any) => set({ userName: x }),
}));

export const useRenameModeStore = create<any>((set: any) => ({
  isRenameMode: false,
  setIsRenameMode: (state: boolean) => set({ isRenameMode: state }),
}));

export const useObjectPosition = create<any>((set: any) => ({
  objectPosition: { x: undefined, y: undefined, z: undefined },
  setObjectPosition: (newObjectPosition: any) =>
    set({ objectPosition: newObjectPosition }),
}));

export const useObjectRotation = create<any>((set: any) => ({
  objectRotation: { x: undefined, y: undefined, z: undefined },
  setObjectRotation: (newObjectRotation: any) =>
    set({ objectRotation: newObjectRotation }),
}));

export const useDrieTemp = create<any>((set: any) => ({
  drieTemp: undefined,
  setDrieTemp: (x: any) => set({ drieTemp: x }),
}));

export const useActiveUsers = create<any>((set: any) => ({
  activeUsers: [],
  setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
    set((state: { activeUsers: any[] }) => ({
      activeUsers:
        typeof callback === "function" ? callback(state.activeUsers) : callback,
    })),
}));

export const useDrieUIValue = create<any>((set: any) => ({
  drieUIValue: { touch: null, temperature: null, humidity: null },

  setDrieUIValue: (x: any) =>
    set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),

  setTouch: (value: any) =>
    set((state: any) => ({
      drieUIValue: { ...state.drieUIValue, touch: value },
    })),
  setTemperature: (value: any) =>
    set((state: any) => ({
      drieUIValue: { ...state.drieUIValue, temperature: value },
    })),
  setHumidity: (value: any) =>
    set((state: any) => ({
      drieUIValue: { ...state.drieUIValue, humidity: value },
    })),
}));

export const useStartSimulation = create<any>((set: any) => ({
  startSimulation: false,
  setStartSimulation: (x: any) => set({ startSimulation: x }),
}));

export const useEyeDropMode = create<any>((set: any) => ({
  eyeDropMode: false,
  setEyeDropMode: (x: any) => set({ eyeDropMode: x }),
}));

export const useEditingPoint = create<any>((set: any) => ({
  editingPoint: false,
  setEditingPoint: (x: any) => set({ editingPoint: x }),
}));

export const usezoneTarget = create<any>((set: any) => ({
  zoneTarget: [],
  setZoneTarget: (x: any) => set({ zoneTarget: x }),
}));

export const usezonePosition = create<any>((set: any) => ({
  zonePosition: [],
  setZonePosition: (x: any) => set({ zonePosition: x }),
}));

interface EditPositionState {
  Edit: boolean;
  setEdit: (value: boolean) => void;
}

export const useEditPosition = create<EditPositionState>((set) => ({
  Edit: false,
  setEdit: (value) => set({ Edit: value }),
}));

export const useAsset3dWidget = create<any>((set: any) => ({
  widgetSelect: "",
  setWidgetSelect: (x: any) => set({ widgetSelect: x }),
}));

export const useWidgetSubOption = create<any>((set: any) => ({
  widgetSubOption: "2D",
  setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
}));
export const useLimitDistance = create<any>((set: any) => ({
  limitDistance: true,
  setLimitDistance: (x: any) => set({ limitDistance: x }),
}));

export const useTileDistance = create<any>((set: any) => ({
  gridValue: {
    size: CONSTANTS.gridConfig.size,
    divisions: CONSTANTS.gridConfig.divisions,
  },
  planeValue: {
    height: CONSTANTS.planeConfig.height,
    width: CONSTANTS.planeConfig.width,
  },

  setGridValue: (value: any) =>
    set((state: any) => ({
      gridValue: { ...state.gridValue, ...value },
    })),

  setPlaneValue: (value: any) =>
    set((state: any) => ({
      planeValue: { ...state.planeValue, ...value },
    })),
}));

export const usePlayAgv = create<any>((set, get) => ({
  PlayAgv: [],
  setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
    set({ PlayAgv: updateFn(get().PlayAgv) }),
}));

// Define the Asset type
type Asset = {
  id: string;
  name: string;
  position?: [number, number, number]; // Optional: 3D position
  rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation
};

// Zustand store type
type ZoneAssetState = {
  zoneAssetId: Asset | null;
  setZoneAssetId: (asset: Asset | null) => void;
};

// Zustand store
export const useZoneAssetId = create<ZoneAssetState>((set) => ({
  zoneAssetId: null,
  setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
}));

// version visible hidden
interface VersionHistoryState {
  viewVersionHistory: boolean;
  setVersionHistory: (value: boolean) => void;
}

const useVersionHistoryStore = create<VersionHistoryState>((set) => ({
  viewVersionHistory: false,
  setVersionHistory: (value) => set({ viewVersionHistory: value }),
}));

export default useVersionHistoryStore;

interface ShortcutStore {
  showShortcuts: boolean;
  setShowShortcuts: (value: boolean) => void;
  toggleShortcuts: () => void;
}

export const useShortcutStore = create<ShortcutStore>((set) => ({
  showShortcuts: false,
  setShowShortcuts: (value) => set({ showShortcuts: value }),
  toggleShortcuts: () =>
    set((state) => ({ showShortcuts: !state.showShortcuts })),
}));

export const useMachineCount = create<any>((set: any) => ({
  machineCount: 0,
  setMachineCount: (x: any) => set({ machineCount: x }),
}));
export const useMachineUptime = create<any>((set: any) => ({
  machineActiveTime: 0,
  setMachineActiveTime: (x: any) => set({ machineActiveTime: x }),
}));
export const useMachineDowntime = create<any>((set: any) => ({
  machineIdleTime: 0,
  setMachineIdleTime: (x: any) => set({ machineIdleTime: x }),
}));
export const useMaterialCycle = create<any>((set: any) => ({
  materialCycleTime: 0,
  setMaterialCycleTime: (x: any) => set({ materialCycleTime: x }),
}));

export const useThroughPutData = create<any>((set: any) => ({
  throughputData: 0,
  setThroughputData: (x: any) => set({ throughputData: x }),
}));
export const useProductionCapacityData = create<any>((set: any) => ({
  productionCapacityData: 0,
  setProductionCapacityData: (x: any) => set({ productionCapacityData: x }),
}));

export const useProcessBar = create<any>((set: any) => ({
  processBar: [],
  setProcessBar: (x: any) => set({ processBar: x }),
}));
export const useDfxUpload = create<any>((set: any) => ({
  dfxuploaded: [],
  dfxWallGenerate: [],
  objValue: { x: 0, y: 0, z: 0 },
  setDfxUploaded: (x: any) => set({ dfxuploaded: x }),
  setDfxGenerate: (x: any) => set({ dfxWallGenerate: x }),
  setObjValue: (x: any) => set({ objValue: x }),
}));

type InputValuesStore = {
  inputValues: Record<string, string>;
  setInputValues: (values: Record<string, string>) => void;
  updateInputValue: (label: string, value: string) => void; // <- New
};

export const useInputValues = create<InputValuesStore>((set) => ({
  inputValues: {},
  setInputValues: (values) => set({ inputValues: values }),
  updateInputValue: (label, value) =>
    set((state) => ({
      inputValues: {
        ...state.inputValues,
        [label]: value,
      },
    })),
}));

export interface ROISummaryData {
  productName: string;
  roiPercentage: number;
  paybackPeriod: number;
  totalCost: number;
  revenueGenerated: number;
  netProfit: number;
  netLoss: number;
}

interface ROISummaryStore {
  roiSummary: ROISummaryData;
  setRoiSummaryData: (values: ROISummaryData) => void;
}

export const useROISummaryData = create<ROISummaryStore>((set) => ({
  roiSummary: {
    productName: "",
    roiPercentage: 0,
    paybackPeriod: 0,
    totalCost: 0,
    revenueGenerated: 0,
    netProfit: 0,
    netLoss: 0,
  },
  setRoiSummaryData: (values) => set({ roiSummary: values }),
}));

interface CompareStore {
  comparePopUp: boolean;
  setComparePopUp: (value: boolean) => void;
  toggleComparePopUp: () => void;
}

export const useCompareStore = create<CompareStore>((set) => ({
  comparePopUp: false,
  setComparePopUp: (value) => set({ comparePopUp: value }),
  toggleComparePopUp: () =>
    set((state) => ({ comparePopUp: !state.comparePopUp })),
}));

// Save state store
interface SaveVersionStore {
  isVersionSaved: boolean;
  setIsVersionSaved: (value: boolean) => void;
}

export const useSaveVersion = create<SaveVersionStore>((set) => ({
  isVersionSaved: false,
  setIsVersionSaved: (value: boolean) => set({ isVersionSaved: value }),
}));

// Version object type
export interface Version {
  id: string;
  versionLabel: string;
  versionName?: string;
  timestamp: string;
  savedBy: string;
  description?: string;
}

// Version list store
interface VersionListStore {
  versions: Version[];
  addVersion: (version: Version) => void;
  clearVersions: () => void;
  setVersions: (newVersions: Version[]) => void;
  updateVersion: (id: string, data: Partial<Version>) => void; // ✅ Added
}

export const useVersionStore = create<VersionListStore>((set) => ({
  versions: [],

  addVersion: (newVersion) =>
    set((state) => ({
      versions: [newVersion, ...state.versions],
    })),

  clearVersions: () => set({ versions: [] }),

  setVersions: (newVersions) => set({ versions: newVersions }),

  updateVersion: (id, data) =>
    set((state) => ({
      versions: state.versions.map((version) =>
        version.id === id ? { ...version, ...data } : version
      ),
    })),
}));



interface ViewSceneState {
  viewSceneLabels: boolean;
  setViewSceneLabels: (value: boolean | ((prev: boolean) => boolean)) => void;
}

export const useViewSceneStore = create<ViewSceneState>((set) => ({
  viewSceneLabels: getInitialViewSceneLabels(),
  setViewSceneLabels: (value) => {
    set((state) => {
      const newValue =
        typeof value === 'function' ? value(state.viewSceneLabels) : value;

      // Store in localStorage manually
      localStorage.setItem('viewSceneLabels', JSON.stringify(newValue));

      return { viewSceneLabels: newValue };
    });
  },
}));

function getInitialViewSceneLabels(): boolean {
  if (typeof window === 'undefined') return false; // SSR safety
  const saved = localStorage.getItem('viewSceneLabels');
  return saved ? JSON.parse(saved) : false;
}
export interface CompareProduct {
  productUuid: string;
  productName: string;
  simulationData: {
    // costPerUnit: number;
    // workingDaysPerYear: number;
    // shiftLength: number;
    // shiftsPerDay: number;
    roiPercentage: number;
    // paybackPeriod: number;
    // totalCost: number;
    // revenueGenerated: number;
    netProfit: number;
    // netLoss: number;
    machineIdleTime: number;
    machineActiveTime: number;
    throughputData: number;
  }
}

export const useCompareProductDataStore = create<{
  compareProductsData: CompareProduct[];
  setCompareProductsData: (x: CompareProduct[]) => void;
}>((set) => ({
  compareProductsData: [],
  setCompareProductsData: (x) => set({ compareProductsData: x }),
}));