import React, { useState, useEffect, useContext, useCallback, memo, useMemo, useRef } from "react";
import theme from "../theme.jsx";
import { isMobile } from "react-device-detect";
import AppGrid from "../components/AppGrid.jsx";
import { useLocation, useNavigate } from "react-router-dom";
import {
  TextField, Button, Typography, MenuItem, Select, Tabs, Tab, Zoom,
  Grid,
  Paper,
  ButtonBase,
  Tooltip,
  Box,
  CircularProgress,
  Checkbox,
  Skeleton,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  IconButton,
} from "@mui/material";
import { Context } from "../context/ContextApi.jsx";
import Add from '@mui/icons-material/Add';
import CachedIcon from '@mui/icons-material/Cached';
import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
import EditIcon from '@mui/icons-material/Edit';
import InputAdornment from '@mui/material/InputAdornment';
import Search from '@mui/icons-material/Search';
import ClearIcon from '@mui/icons-material/Clear';
import CloseIcon from '@mui/icons-material/Close';

import { ClearRefinements, connectHits, connectSearchBox, connectStateResults, InstantSearch, RefinementList, connectRefinementList, Configure } from "react-instantsearch-dom";
import { removeQuery } from "../components/ScrollToTop.jsx";
import { toast } from "react-toastify";
import algoliasearch from "algoliasearch/lite";
import { debounce } from "lodash";
import AppSelection from "../components/AppSelection.jsx";
import AppModal from "../components/AppModal.jsx";
import AppCreationModal from "../components/AppCreationModal.jsx";


const searchClient = algoliasearch(
  "JNSS5CFDZZ",
  "db08e40265e2941b9a7d8f644b6e5240"
);

// AppCard Component
const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl, deactivatedIndexes, currTab, handleAppClick, leftSideBarOpenByClick, userdata }) => {
  const navigate = useNavigate();
  const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" || window.location.host === "localhost:3000";
  const appUrl = isCloud ? `/apps/${data.id}` : `https://shuffler.io/apps/${data.id}`;
  var canEditApp = userdata.admin === "true" || userdata.id === data?.owner || data?.owner === "" || (userdata.admin === "true" && userdata.active_org.id === data?.reference_org) || !data?.generated

  const paperStyle = {
    backgroundColor: mouseHoverIndex === index ? "rgba(26, 26, 26, 1)" : "#212121",
    color: "rgba(241, 241, 241, 1)",
    cursor: "pointer",
    fontFamily: theme?.typography?.fontFamily,
    // position: "relative",
    width: "100%",
    height: 96,
    borderRadius: 8,
    boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
    marginBottom: 20,
    transition: "width 0.3s ease",
  };

  return (
    <Grid item xs={12} key={index}>
      <Paper elevation={0}
        style={paperStyle}
        onMouseOver={() => setMouseHoverIndex(index)}
        onMouseOut={() => setMouseHoverIndex(-1)}
      >
        <ButtonBase
          style={{
            borderRadius: 6,
            fontSize: 16,
            overflow: "hidden",
            display: "flex",
            fontFamily: theme?.typography?.fontFamily,
            width: '100%',
            backgroundColor: mouseHoverIndex === index ? "#2F2F2F" : "#212121"
          }}
          onClick={() => {
            handleAppClick(data);
          }}
        >
          <img
            alt={data.name}
            src={data.small_image || data.large_image ? (data.small_image || data.large_image) : "/images/no_image.png"}
            style={{
              width: 100,
              height: 100,
              borderRadius: 6,
              margin: 10,
              border: "1px solid #212122",
              boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)"
            }}
          />
          <div style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "flex-start",
            width: 339,
            gap: 8,
            fontWeight: '400',
            overflow: "hidden",
            margin: "12px 0",
            fontFamily: theme?.typography?.fontFamily
          }}>
            <div style={{
              display: 'flex',
              flexDirection: 'row',
              overflow: "hidden",
              textOverflow: "ellipsis",
              fontWeight: 600,
              whiteSpace: "nowrap",
              marginLeft: 8,
              gap: 8
            }}>
              {data.name.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())}
            </div>
            <div style={{
              overflow: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "nowrap",
              marginLeft: 8,
              color: "rgba(158, 158, 158, 1)"
            }}>
              {data.categories ? data.categories.join(", ") : "NA"}
            </div>
            <div style={{
              overflow: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "nowrap",
              width: "100%",
              marginLeft: 8,
              color: "rgba(158, 158, 158, 1)",
              display: "flex",
              justifyContent: 'space-between',
              paddingRight: 15,
              height: 35,
            }}>
              <div style={{
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
                color: "rgba(158, 158, 158, 1)",
              }}>
                {data.generated !== true && data.tags && data.tags.slice(0, 2).map((tag, tagIndex) => (
                  <span key={tagIndex}>
                    {tag}
                    {tagIndex < data.tags.length - 1 ? ", " : ""}
                  </span>
                ))}
              </div>
              {/* Deactivate button */}
              {currTab === 0 && !deactivatedIndexes.includes(index) && mouseHoverIndex === index && data.generated === true && (
                <div style={{
                  display: "flex",
                  gap: 8,
                  alignItems: 'center',
                  paddingRight: 20
                }}>
                  {
                    canEditApp && (
                      <button style={{ backgroundColor: "rgba(73, 73, 73, 1)", border: "none", cursor: "pointer", color: "white", borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center", height: 35 }}
                        onClick={(event) => {
                          event.preventDefault();
                          event.stopPropagation();
                          if (canEditApp) {
                            const editUrl = "/apps/edit/" + data?.id;
                            navigate(editUrl)
                          }
                        }}
                      >
                        <EditIcon />
                      </button>
                    )
                  }
                  <Button
                    className="deactivate-button"
                    sx={{
                      width: 102,
                      height: 35,
                      borderRadius: 0.75,
                      bgcolor: "rgba(73, 73, 73, 1)",
                      color: "rgba(241, 241, 241, 1)",
                      textTransform: "none",
                      fontFamily: theme?.typography?.fontFamily,
                      transition: "background-color 0.3s ease",
                      "&:hover": {
                        bgcolor: "rgba(93, 93, 93, 1)",
                      },
                    }}
                    onClick={(event) => {
                      event.preventDefault();
                      event.stopPropagation();
                      const url = `${globalUrl}/api/v1/apps/${data.id}/deactivate`;
                      toast("Deactivating app. Please wait...");
                      fetch(url, {
                        method: 'GET',
                        headers: {
                          'Content-Type': 'application/json',
                          'Accept': 'application/json',
                        },
                        credentials: "include",
                      })
                        .then((response) => response.json())
                        .then((responseJson) => {
                          if (responseJson.success === false) {
                            toast.error(responseJson.reason);
                          } else {
                            toast.success("App Deactivated Successfully.");
                          }
                        })
                        .catch(error => {
                          console.log("app error: ", error.toString());
                        });
                    }}
                  >
                    Deactivate
                  </Button>
                </div>
              )}
            </div>
          </div>
        </ButtonBase>
      </Paper>
    </Grid>
  );
};


// Component to fetch all public app from the algolia.
const Hits = ({
  userdata,
  hits,
  handleAppClick,
  setIsAnyAppActivated,
  searchQuery,
  globalUrl,
  isLoggedIn,
  currTab,
  leftSideBarOpenByClick
}) => {
  const [hoverEffect, setHoverEffect] = useState(-1);
  const [allActivatedAppIds, setAllActivatedAppIds] = useState([]);
  const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
  const [deactivatedIndexes, setDeactivatedIndexes] = React.useState([]);
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    var baseurl = globalUrl;
    fetch(baseurl + "/api/v1/me", {
      credentials: "include",
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then(response => response.json())
      .then(responseJson => {
        if (responseJson.success) {
          setAllActivatedAppIds(responseJson.active_apps)
        }
        setIsLoading(false)
      })
      .catch(error => {
        console.log("Failed login check: ", error);
      });
  }, [currTab]);

  const normalizedString = (name) => {
    if (typeof name === 'string') {
      return name.replace(/_/g, ' ');
    } else {
      return name;
    }
  };

  useEffect(() => {
    if (userdata && userdata.active_apps) {
      setAllActivatedAppIds(userdata.active_apps);
    }
  }, [currTab, window.location]);


  //Function for activation and deactivation of app
  const handleActivateButton = (event, data, type) => {

    //use prevent default so it will stop redirection to the app page
    event.preventDefault();
    event.stopPropagation();

    if (!isLoggedIn) {
      toast.error("Please log in to your account to activate the app.")
      return;
    }
    if (type === "activate") {
      toast.success(`The ${normalizedString(data.name)} app is activating. Please wait...`);
    }
    if (type === "deactivate") {
      toast.success(`The ${normalizedString(data.name)} app is deactivating. Please wait...`);
    }

    const baseURL = globalUrl;
    const url = `${baseURL}/api/v1/apps/${data.objectID}/${type}`;

    fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
      credentials: "include",
    })
      .then((response) => response.json())
      .then((responseJson) => {
        if (responseJson.success === false) {
          toast.error(responseJson.reason);
        } else {
          //toast.success(`App ${type}d Successfully!`);
          if (type === 'activate') {
            setAllActivatedAppIds(prev => [...prev, data.objectID]);
            setIsAnyAppActivated(true);
          }
          if (type === 'deactivate') {
            const updatedIds = allActivatedAppIds.filter(id => id !== data.objectID);
            setAllActivatedAppIds(updatedIds);
          }
        }
      })
      .catch(error => {
        console.log("app error: ", error.toString());
      });
  }

  let workflowDelay = 0;
  const isHeader = true;



  return (
    <div>
      {!isLoading ?
        (
          <div>
            {hits?.length === 0 && searchQuery.length >= 0 ? (
              <Typography>No apps found</Typography>
            ) : (
              <div
                style={{
                  marginTop: 16,
                  width: "100%",
                  display: "grid",
                  gridTemplateColumns: "repeat(auto-fill, minmax(365px, 1fr))",
                  gap: "20px",
                  fontFamily: theme?.typography?.fontFamily,
                  justifyContent: "space-between",
                  alignItems: "start",
                  padding: "0 10px",
                  paddingBottom: 40
                }}
              >
                {hits?.map((data, index) => {
                  const appUrl =
                    isCloud
                      ? `/apps/${data.objectID}?queryID=${data.__queryID}`
                      : `https://shuffler.io/apps/${data.objectID}?queryID=${data.__queryID}`;

                  return (
                    <Zoom
                      key={index}
                      in={true}
                      style={{
                        transitionDelay: `${workflowDelay}ms`,
                      }}
                    >
                      <Paper
                        elevation={0}
                        style={{
                          backgroundColor: hoverEffect === index ? "rgba(26, 26, 26, 1)" : "#212121",
                          color: "rgba(241, 241, 241, 1)",
                          cursor: "pointer",
                          fontFamily: theme?.typography?.fontFamily,
                          // position: "relative",
                          width: "100%",
                          height: 96,
                          borderRadius: 8,
                          boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
                          marginBottom: 20,
                          transition: "width 0.3s ease",
                        }}
                        onMouseEnter={() => {
                          setHoverEffect(index);
                        }}
                        onMouseLeave={() => {
                          setHoverEffect(-1);
                        }}
                      >
                        <ButtonBase style={{
                          borderRadius: 6,
                          fontSize: 16,
                          overflow: "hidden",
                          display: "flex",
                          width: '100%',
                          backgroundColor: hoverEffect === index ? "#2F2F2F" : "#212121",
                          fontFamily: theme?.typography?.fontFamily
                        }}
                          onClick={() => {
                            console.log("App modal", data)
                            handleAppClick(data);
                          }}
                        >
                          <img
                            alt={data.name}
                            src={data.image_url ? data.image_url : "/images/no_image.png"}
                            style={{
                              width: 100,
                              height: 100,
                              borderRadius: 6,
                              margin: 10,
                              border: "1px solid #212122",
                              boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)"
                            }}
                          />
                          <div
                            style={{
                              display: "flex",
                              flexDirection: "column",
                              alignItems: "flex-start",
                              width: 339,
                              gap: 6,
                              fontWeight: '400',
                              overflow: "hidden",
                              margin: "12px 0",
                              fontFamily: theme?.typography?.fontFamily
                            }}
                          >
                            <div
                              style={{
                                display: 'flex',
                                flexDirection: "row",
                                overflow: "hidden",
                                gap: 8,
                                fontWeight: 600,
                                textOverflow: "ellipsis",
                                whiteSpace: "nowrap",
                                color: '#F1F1F1'
                              }}
                            >
                              {(allActivatedAppIds && allActivatedAppIds.includes(data.objectID)) && <Box sx={{ width: 8, height: 8, backgroundColor: "#02CB70", borderRadius: '50%' }} />}
                              {normalizedString(data.name)}
                            </div>

                            <div
                              style={{
                                overflow: "hidden",
                                textOverflow: "ellipsis",
                                whiteSpace: "nowrap",
                                color: "rgba(158, 158, 158, 1)",
                                marginTop: 5,
                              }}
                            >
                              {data.categories !== null
                                ? normalizedString(data.categories).join(", ")
                                : "NA"}
                            </div>
                            <div
                              style={{
                                display: "flex",
                                justifyContent: 'space-between',
                                width: "100%",
                                textAlign: 'start',
                                color: "rgba(158, 158, 158, 1)",
                                height: 35,
                                alignItems: 'center'
                              }}
                            >
                              <div style={{
                                flex: 1
                              }}>
                                {hoverEffect === index && isCloud ? (
                                  <div>
                                    {data.tags && (
                                      <Tooltip
                                        title={data.tags.join(", ")}
                                        placement="bottom"
                                        componentsProps={{
                                          tooltip: {
                                            sx: {
                                              backgroundColor: "rgba(33, 33, 33, 1)",
                                              color: "rgba(241, 241, 241, 1)",
                                              width: "auto",
                                              height: "auto",
                                              fontSize: 16,
                                              border: "1px solid rgba(73, 73, 73, 1)",
                                            }
                                          }
                                        }}
                                      >
                                        <span>
                                          {data.tags.slice(0, 1).map((tag, tagIndex) => (
                                            <span key={tagIndex}>
                                              {normalizedString(tag)}
                                              {tagIndex < 1 ? ", " : ""}
                                            </span>
                                          ))}
                                        </span>
                                      </Tooltip>
                                    )}
                                  </div>
                                ) : (
                                  <div style={{
                                    width: 230,
                                    textOverflow: "ellipsis",
                                    overflow: 'hidden',
                                    whiteSpace: 'nowrap',
                                  }}>
                                    {data.tags &&
                                      data.tags.map((tag, tagIndex) => (
                                        <span key={tagIndex}>
                                          {normalizedString(tag)}
                                          {tagIndex < data.tags.length - 1 ? ", " : ""}
                                        </span>
                                      ))}
                                  </div>
                                )}
                              </div>
                              <div style={{
                                display: 'flex',
                                justifyContent: 'flex-end',
                                alignItems: 'center',
                                paddingRight: 10,
                                minWidth: 110
                              }}>
                                {hoverEffect === index && isCloud && (
                                  <div>
                                    {allActivatedAppIds && allActivatedAppIds.includes(data.objectID) ? (
                                      <Button
                                        style={{
                                          width: 102,
                                          height: 35,
                                          borderRadius: 3,
                                          backgroundColor: "rgba(73, 73, 73, 1)",
                                          color: "rgba(241, 241, 241, 1)",
                                          textTransform: "none",
                                          fontFamily: theme?.typography?.fontFamily,
                                        }}
                                        onClick={(event) => {
                                          handleActivateButton(event, data, "deactivate");
                                        }}>
                                        Deactivate
                                      </Button>
                                    ) : (
                                      <Button
                                        style={{
                                          backgroundColor: "#FF8544",
                                          color: "black",
                                          width: 102,
                                          height: 35,
                                          borderRadius: 3,
                                          textTransform: "none",
                                          fontFamily: theme?.typography?.fontFamily,
                                        }}
                                        onClick={(event) => {
                                          handleActivateButton(event, data, "activate");
                                        }}
                                      >
                                        Activate
                                      </Button>
                                    )}
                                  </div>
                                )}
                              </div>
                            </div>
                          </div>
                        </ButtonBase>
                      </Paper>
                    </Zoom>
                  );
                })}
              </div>
            )}
          </div>
        ) : (
          <LoadingGrid />
        )
      }
    </div >
  );
}



// Custom SearchBox Component
const SearchBox = ({ refine, searchQuery, setSearchQuery }) => {
  const inputRef = useRef(null);
  const [localQuery, setLocalQuery] = useState(searchQuery);
  const location = useLocation();
  // Initialize search when component mounts or when switching to Discover tab
  useEffect(() => {
    if (searchQuery) {
      setLocalQuery(searchQuery);
      refine(searchQuery); // This will trigger the Algolia search
    }
  }, [searchQuery, refine]);

  // Debounced function to refine search
  const debouncedRefine = useRef(
    debounce((value) => {
      setSearchQuery(value);
      removeQuery("q");
      refine(value);
    }, 300)
  ).current;

  useEffect(() => {
    const urlSearchParams = new URLSearchParams(window.location.search);
    const params = Object.fromEntries(urlSearchParams.entries());
    const foundQuery = params["q"];
    if (foundQuery) {
      setLocalQuery(foundQuery);
      debouncedRefine(foundQuery);
    }
  }, [debouncedRefine]);

  useEffect(() => {
    if (searchQuery === "") {
      return;
    }
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, [searchQuery]);

  const handleChange = (event) => {
    const value = event.target.value;
    setLocalQuery(value);
    debouncedRefine(value);
  };

  return (
    <TextField
      fullWidth
      variant="outlined"
      placeholder="Search for apps"
      value={localQuery}
      id="shuffle_search_field"
      inputRef={inputRef}
      onChange={handleChange}
      onKeyDown={(event) => {
        if (event.key === "Enter") {
          event.preventDefault();
        }
      }}
      style={{ borderRadius: 8, height: 45, fontFamily: theme?.typography?.fontFamily, flex: 1 }}
      InputProps={{
        style: {
          borderRadius: 8,
          height: 45
        },
        endAdornment: (
          <InputAdornment position="end">
            {localQuery?.length === 0 ? <Search /> : (
              <ClearIcon
                style={{
                  cursor: "pointer",
                }}
                onClick={() => {
                  setLocalQuery('');
                  debouncedRefine('');
                  const queryParams = new URLSearchParams(location.search);
                  queryParams.delete('q');
                  window.history.replaceState({}, '', `${location.pathname}?${queryParams.toString()}`);
                }}
              />
            )}
          </InputAdornment>
        ),
      }}
    />
  );
};

const CustomSearchBox = connectSearchBox(SearchBox);
const CustomHits = connectHits(Hits);

// Custom Category Dropdown Component
const CategoryDropdown = ({ items, currentRefinement, refine }) => {
  const handleChange = (event) => {
    const value = event.target.value;
    refine(value);
  };

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      <Select
        fullWidth
        variant="outlined"
        value={currentRefinement}
        onChange={handleChange}
        displayEmpty
        multiple
        style={{ borderRadius: 8, height: 45, fontFamily: theme?.typography?.fontFamily, flex: 1 }}
        renderValue={(selected) => {
          if (selected.length === 0) return 'All Categories';
          return (
            <div style={{
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              maxWidth: '90%'
            }}>
              {selected.join(', ')}
            </div>
          );
        }}
      >
        <MenuItem disabled value="" style={{ fontFamily: theme?.typography?.fontFamily }}>
          All Categories
        </MenuItem>
        {items.map(item => (
          <MenuItem key={item.label} value={item.label} style={{ fontFamily: theme?.typography?.fontFamily, fontSize: 16 }}>
            <Checkbox checked={currentRefinement.includes(item.label)} />
            {item.label} ({item.count})
          </MenuItem>
        ))}
      </Select>
      {currentRefinement.length > 0 && (
        <ClearIcon
          style={{
            position: 'absolute',
            right: 35,
            top: '50%',
            transform: 'translateY(-50%)',
            cursor: 'pointer',
            color: 'white',
            fontSize: 20,
            zIndex: 1000
          }}
          onClick={() => refine([])}
        />
      )}
    </div>
  );
};
const CustomCategoryDropdown = connectRefinementList(CategoryDropdown);

// Custom Label Dropdown Component
const LabelDropdown = ({ items, currentRefinement, refine }) => {
  const handleChange = (event) => {
    const value = event.target.value;
    refine(value);
  };

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      <Select
        fullWidth
        variant="outlined"
        value={currentRefinement}
        onChange={handleChange}
        displayEmpty
        multiple
        style={{ borderRadius: 8, height: 45, fontFamily: theme?.typography?.fontFamily, flex: 1 }}
        renderValue={(selected) => {
          if (selected.length === 0) return 'All Labels';
          return (
            <div style={{
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              maxWidth: '90%'
            }}>
              {selected.join(', ')}
            </div>
          );
        }}
      >
        <MenuItem disabled value="">
          All Labels
        </MenuItem>
        {items.map(item => (
          <MenuItem key={item.label} value={item.label} style={{
            fontFamily: theme?.typography?.fontFamily,
            fontSize: 16
          }}>
            <Checkbox checked={currentRefinement.includes(item.label)} />
            {item.label} ({item.count})
          </MenuItem>
        ))}
      </Select>
      {currentRefinement.length > 0 && (
        <ClearIcon
          style={{
            position: 'absolute',
            right: 35,
            top: '50%',
            transform: 'translateY(-50%)',
            cursor: 'pointer',
            color: 'white',
            fontSize: 20,
            zIndex: 1000
          }}
          onClick={() => refine([])}
        />
      )}
    </div>
  );
};
const CustomLabelDropdown = connectRefinementList(LabelDropdown);



// New filter function
const filterApps = (apps, searchQuery, selectedCategory, selectedLabel) => {
  if (!Array.isArray(apps)) return [];

  return apps.filter((app) => {
    const matchesSearchQuery = (
      searchQuery === "" || // If searchQuery is empty, match all apps
      app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      (app.tags && app.tags.some(tag =>
        tag.toLowerCase().includes(searchQuery.toLowerCase())
      )) ||
      (app.categories && app.categories.some((category) =>
        category.toLowerCase().includes(searchQuery.toLowerCase())
      ))
    );

    const matchesSelectedCategories = (
      selectedCategory.length === 0 || // If no category is selected, match all apps
      (app.categories && app.categories.some(category =>
        selectedCategory.includes(category)
      ))
    );

    const matchesSelectedTags = (
      selectedLabel.length === 0 || // If no label is selected, match all apps
      (app.tags && app.tags.some(tag =>
        selectedLabel.includes(tag)
      ))
    );

    return matchesSearchQuery && matchesSelectedCategories && matchesSelectedTags;
  });
};

// Add this new component for the app skeleton
const AppSkeleton = () => {
  return (
    <Paper elevation={0} style={{
      backgroundColor: "#212121",
      width: "100%",
      height: 120,
      borderRadius: 8,
    }}>
      <div style={{
        display: "flex",
        padding: 10,
        width: "100%",
        height: "100%"
      }}>
        <Skeleton
          variant="rectangular"
          width={100}
          height={90}
          style={{
            borderRadius: 6,
            backgroundColor: "rgba(255, 255, 255, 0.1)"
          }}
        />
        <div style={{
          display: "flex",
          flexDirection: "column",
          marginLeft: 10,
          flex: 1,
          gap: 6
        }}>
          <Skeleton
            variant="text"
            width="40%"
            height={24}
            style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
          />
          <Skeleton
            variant="text"
            width="60%"
            height={20}
            style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
          />
          <Skeleton
            variant="text"
            width="30%"
            height={20}
            style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
          />
        </div>
      </div>
    </Paper>
  );
};

// Replace the loading sections in the main component with this
const LoadingGrid = () => {
  return (
    <div style={{
      marginTop: 16,
      width: "100%",
      display: "grid",
      gridTemplateColumns: "repeat(auto-fill, minmax(365px, 1fr))",
      gap: "20px",
      justifyContent: "space-between",
      alignItems: "start",
      padding: "0 10px"
    }}>
      {[...Array(7)].map((_, index) => (
        <AppSkeleton key={index} />
      ))}
    </div>
  );
};

// Main Apps Component
const Apps2 = (props) => {
  const { globalUrl, isLoaded, serverside, userdata, isLoggedIn, checkLogin } = props;
  let navigate = useNavigate();
  const { leftSideBarOpenByClick } = useContext(Context);
  const location = useLocation();
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCategory, setSelectedCategory] = useState([]);
  const [selectedLabel, setSelectedLabel] = useState([]);
  const [currTab, setCurrTab] = useState(0);
  const [categories, setCategories] = useState([]);
  const [labels, setLabels] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [userApps, setUserApps] = useState([]);
  const [orgApps, setOrgApps] = useState([]);
  const [appsToShow, setAppsToShow] = useState([]);
  const [deactivatedIndexes, setDeactivatedIndexes] = React.useState([]);
  const [IsAnyAppActivated, setIsAnyAppActivated] = useState(false);
  const [mouseHoverIndex, setMouseHoverIndex] = useState(-1);
  var counted = 0;
  const [showNoAppFound, setShowNoAppFound] = useState(false);
  const [openModal, setOpenModal] = useState(false);
  const [selectedApp, setSelectedApp] = useState(null);
  const [appFramework, setAppFramework] = useState(undefined);
  const [defaultSearch, setDefaultSearch] = useState("");

  const [apps, setApps] = useState([]);
  const [filteredApps, setFilteredApps] = useState([]);
  const [appSearchLoading, setAppSearchLoading] = useState(false);
  const [creatorProfile, setCreatorProfile] = useState({});
  const [openApi, setOpenApi] = React.useState("");
  const [loadAppsModalOpen, setLoadAppsModalOpen] = useState(false);
  const [downloadBranch, setDownloadBranch] = useState("master");
  const [field1, setField1] = useState("");
  const [field2, setField2] = useState("");
  const [validation, setValidation] = useState(null);
  const [createAppModalOpen, setCreateAppModalOpen] = useState(false);

  const baseRepository = "https://github.com/frikky/shuffle-apps";

  const isCloud =
    window.location.host === "localhost:3002" ||
      window.location.host === "shuffler.io"
      ? true
      : false;

  // Set the current tab based on the query parameter
  useEffect(() => {
    const queryParams = new URLSearchParams(location.search);
    const tabParam = queryParams.get('tab');
    if (tabParam !== null && tabParam !== undefined) {
      if (tabParam === 'org_apps') {
        setCurrTab(0);
      } else if (tabParam === 'my_apps') {
        setCurrTab(1);
      } else {
        setCurrTab(2);
      }
    }
  }, [location.search]);

  useEffect(() => {

    const getFramework = () => {
      fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        credentials: "include",
      })
        .then((response) => {
          if (response.status !== 200) {
            console.log("Status not 200 for framework!");
          }

          return response.json();
        })
        .then((responseJson) => {
          if (responseJson.success === false) {
            setAppFramework({})

            if (responseJson.reason !== undefined) {
              //toast("Failed loading: " + responseJson.reason)
            } else {
              //toast("Failed to load framework for your org.")
            }
          } else {
            setAppFramework(responseJson)
          }
        })
        .catch((error) => {
          console.log("err in framework: ", error.toString());
        })
    }

    getFramework();
  }, []);

  // Fetch apps based on the current tab : 0 -> org_apps, 1 -> my_apps, 2 -> all_apps
  useEffect(() => {
    const fetchApps = async () => {
      const baseUrl = globalUrl;
      let url;
      setIsLoading(true);
      const userId = userdata?.id;
      if (currTab === 1 && userId) {
        url = `${baseUrl}/api/v1/users/${userId}/apps`;
      } else if (currTab === 0) {
        url = `${baseUrl}/api/v1/apps`;
      }
      try {
        const response = await fetch(url, {
          method: "GET",
          credentials: "include",
          headers: {
            "Content-Type": "application/json",
          },
        });
        const data = await response.json();
        if (currTab === 1) {
          setAppsToShow(data);
          setUserApps(data);
        } else if (currTab === 0) {
          setAppsToShow(data);
          setOrgApps(data);
          // For testing the empty state
          // setAppsToShow([]);
          // setOrgApps([]);
        }
        setIsLoading(false);
      } catch (err) {
        console.error("Error fetching apps:", err);
        setIsLoading(false);
      }
    };


    // Only fetch if we have required data
    if (globalUrl && (currTab === 0 || (currTab === 1 && userdata?.id))) {
      fetchApps();
    }
  }, [currTab, globalUrl, userdata?.id]); // Remove location.search dependency

  // useEffect(() => {
  //   // setSearchQuery("");
  //   setSelectedCategory([]);
  //   setSelectedLabel([]);
  // }, [currTab])


  // Find top categories and tags based on the current tab
  useEffect(() => {
    if (currTab === 0 || currTab === 1) {
      setCategories(findTopCategories());
      setLabels(findTopTags());
    }
  }, [currTab, appsToShow])

  const getUserProfile = (username) => {
    if (serverside === true || !isCloud) {
      setCreatorProfile({})
      return;
    }

    fetch(`${globalUrl}/api/v1/users/creators/${username}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      credentials: "include",
    })
      .then((response) => {
        if (response.status !== 200) {
          console.log("Status not 200 for WORKFLOW EXECUTION :O!");
        }

        return response.json();
      })
      .then((responseJson) => {
        if (responseJson.success !== false) {
          console.log("creator profile: ", responseJson)
          setCreatorProfile(responseJson);
        } else {
          setCreatorProfile({})
        }
      })
      .catch((error) => {
        console.log(error);
        setCreatorProfile({})
      });
  };

  useEffect(() => {
    if (serverside) {
      return null;
    }
  }, [serverside]);

  const getApps = () => {
    // Get apps from localstorage
    var storageApps = []
    try {
      const appstorage = localStorage.getItem("apps")
      storageApps = JSON.parse(appstorage)
      if (storageApps === null || storageApps === undefined || storageApps.length === 0) {
        storageApps = []
      } else {
        setAppsToShow(storageApps)
        setOrgApps(storageApps)
        setApps(storageApps)
        // setFilteredApps(storageApps)
        // setAppSearchLoading(false)
      }
    } catch (e) {
      //console.log("Failed to get apps from localstorage: ", e)
    }

    fetch(globalUrl + "/api/v1/apps", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      credentials: "include",
    })
      .then((response) => {
        setIsLoading(false);
        if (response.status !== 200) {
          console.log("Status not 200 for apps :O!");

          //if (isCloud) {
          //  window.location.pathname = "/search";
          //}
        }

        return response.json();
      })
      .then((responseJson) => {
        //responseJson = sortByKey(responseJson, "large_image")
        //responseJson = sortByKey(responseJson, "is_valid")
        //setFilteredApps(responseJson.filter(app => !internalIds.includes(app.name) && !(!app.activated && app.generated)))
        console.log("responseJson: from getApps ", responseJson)
        var privateapps = [];
        var valid = [];
        var invalid = [];
        for (var key in responseJson) {
          const app = responseJson[key];
          if (app.is_valid && !(!app.activated && app.generated)) {
            privateapps.push(app);
          } else if (
            app.private_id !== undefined &&
            app.private_id.length > 0
          ) {
            valid.push(app);
          } else {
            invalid.push(app);
          }
        }

        //console.log(privateapps)
        //console.log(valid)
        //console.log(invalid)
        //console.log(privateapps)
        //privateapps.reverse()
        privateapps.push(...valid);
        privateapps.push(...invalid);
        console.log("privateapps: setting apps ", privateapps)
        setAppsToShow(privateapps);
        setOrgApps(privateapps);
        setApps(privateapps);
        // setCursearch("");

        //handleSearchChange(event.target.value)
        //setCursearch(event.target.value)
        // setFilteredApps(privateapps);
        if (privateapps.length > 0) {
          if (selectedApp.id === undefined || selectedApp.id === null) {
            if (privateapps[0].owner !== undefined && privateapps[0].owner !== null) {
              getUserProfile(privateapps[0].owner);
            }

            // setContact(privateapps[0].contact_info)

            // setSelectedApp(privateapps[0]);
            // setSharingConfiguration(privateapps[0].sharing === true ? "public" : "you")
          }

          // if (
          //   privateapps[0].actions !== null &&
          //   privateapps[0].actions.length > 0
          // ) {
          //   setSelectedAction(privateapps[0].actions[0]);
          // } else {
          //   setSelectedAction({});
          // }
        }

        if (privateapps.length > 0 && storageApps.length === 0) {
          try {
            localStorage.setItem("apps", JSON.stringify(privateapps))
          } catch (e) {
            console.log("Failed to set apps in localstorage: ", e)
          }
        }

        //setTimeout(() => {
        //	setFirstLoad(false)
        //}, 5000)
      })
      .catch((error) => {
        toast(error.toString());
        setIsLoading(false);
      });
  };

  // Locally hotloads app from folder
  const hotloadApps = () => {
    toast("Hotloading apps from location in .env");
    setIsLoading(true);
    fetch(globalUrl + "/api/v1/apps/run_hotload", {
      method: "POST",
      mode: "cors",
      headers: {
        Accept: "application/json",
      },
      credentials: "include",
    })
      .then((response) => {
        setIsLoading(false);
        if (response.status === 200) {
          //toast("Hotloaded apps!")
          getApps();
        }

        return response.json();
      })
      .then((responseJson) => {
        if (responseJson.success === true) {
          toast("Successfully finished hotload");
        } else {
          console.log("failed hotload: ", responseJson)
          // toast(`Failed hotload: ${responseJson.reason}`);
          //(responseJson.reason !== undefined && responseJson.reason.length > 0) {
        }
      })
      .catch((error) => {
        toast(`Failed hotload: ${error.toString()}`);
      });
  };


  // Load data e.g. from github
  const getSpecificApps = (url, forceUpdate) => {
    setValidation(true);

    setIsLoading(true);
    //start()

    const parsedData = {
      url: url,
      branch: downloadBranch || "master",
    };

    if (field1.length > 0) {
      parsedData["field_1"] = field1;
    }

    if (field2.length > 0) {
      parsedData["field_2"] = field2;
    }

    parsedData["force_update"] = forceUpdate;

    toast("Getting specific apps from your URL.");
    var cors = "cors";
    fetch(globalUrl + "/api/v1/apps/get_existing", {
      method: "POST",
      mode: "cors",
      headers: {
        Accept: "application/json",
      },
      body: JSON.stringify(parsedData),
      credentials: "include",
    })
      .then((response) => {
        if (response.status === 200) {
          toast("Loaded existing apps!");
        }

        //stop()
        setIsLoading(false);
        setValidation(false);
        return response.json();
      })
      .then((responseJson) => {
        console.log("DATA: ", responseJson);
        if (responseJson.reason !== undefined) {
          toast("Failed loading: " + responseJson.reason);
        }
      })
      .catch((error) => {
        console.log("ERROR: ", error.toString());
        //toast(error.toString());
        //stop()

        setIsLoading(false);
        setValidation(false);
      });
  };

  const handleGithubValidation = (forceUpdate) => {
    getSpecificApps(openApi, forceUpdate);
    setLoadAppsModalOpen(false);
  };


  const appsModalLoad = loadAppsModalOpen ? (
    <Dialog
      open={loadAppsModalOpen}
      onClose={() => {
        setOpenApi("");
        setLoadAppsModalOpen(false);
        setField1("");
        setField2("");
      }}
      maxWidth="md"
      fullWidth
      PaperProps={{
        sx: {
          borderRadius: 2,
          border: "1px solid #494949",
          minWidth: '440px',
          fontFamily: theme?.typography?.fontFamily,
          backgroundColor: "#212121",
          zIndex: 1000,
          '& .MuiDialogContent-root': {
            backgroundColor: "#212121",
          },
          '& .MuiDialogTitle-root': {
            backgroundColor: "#212121",
          },
          '& .MuiTypography-root': {
            fontFamily: theme?.typography?.fontFamily,
          },
          '& .MuiButton-root': {
            fontFamily: theme?.typography?.fontFamily,
          },
        }
      }}
    >
      <DialogTitle
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          pb: 2,
          pt: 2,
          pl: 3,
          pr: 2,
        }}
      >
        <Typography component="div" sx={{ fontWeight: 500, color: "#F1F1F1", fontSize: "22px" }}>
          Load from Github Repository
        </Typography>
        <IconButton
          onClick={() => {
            setOpenApi("");
            setLoadAppsModalOpen(false);
            setField1("");
            setField2("");
          }}
          sx={{
            color: 'rgba(255, 255, 255, 0.7)',
            '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' }
          }}
        >
          <CloseIcon />
        </IconButton>
      </DialogTitle>
      <DialogContent sx={{ py: 3, px: 3 }}>
        <Typography variant="body1" sx={{ mb: 2, color: 'rgba(255, 255, 255, 0.7)' }}>
          Repository (supported: github, gitlab, bitbucket)
        </Typography>
        <TextField
          fullWidth
          variant="outlined"
          defaultValue="https://github.com/frikky/shuffle-apps"
          placeholder="https://github.com/frikky/shuffle-apps"
          value={openApi}
          onChange={(e) => setOpenApi(e.target.value)}
          sx={{
            mb: 3,
            '& .MuiOutlinedInput-root': {
              color: 'white',
              height: '50px',
              '& fieldset': {
                borderColor: 'rgba(255, 255, 255, 0.23)',
              },
            },
          }}
        />

        <Typography variant="body1" sx={{ mb: 2, color: 'rgba(255, 255, 255, 0.7)' }}>
          Branch (default value is "master")
        </Typography>
        <TextField
          fullWidth
          variant="outlined"
          value={downloadBranch}
          onChange={(e) => setDownloadBranch(e.target.value)}
          placeholder="master"
          sx={{
            mb: 3,
            '& .MuiOutlinedInput-root': {
              color: 'white',
              height: '50px',
              '& fieldset': {
                borderColor: 'rgba(255, 255, 255, 0.23)',
              },
            },
          }}
        />

        <Typography variant="body1" sx={{ mb: 2, color: 'rgba(255, 255, 255, 0.7)' }}>
          Authentication (optional - private repos etc)
        </Typography>
        <div style={{ display: 'flex', gap: 16 }}>
          <TextField
            fullWidth
            variant="outlined"
            type="text"
            placeholder="Username / APIkey (optional)"
            value={field1}
            onChange={(e) => setField1(e.target.value)}
            sx={{
              '& .MuiOutlinedInput-root': {
                color: 'white',
                height: '50px',
                '& fieldset': {
                  borderColor: 'rgba(255, 255, 255, 0.23)',
                },
              },
            }}
          />
          <TextField
            fullWidth
            variant="outlined"
            type="password"
            placeholder="Password (optional)"
            value={field2}
            onChange={(e) => setField2(e.target.value)}
            sx={{
              '& .MuiOutlinedInput-root': {
                color: 'white',
                height: '50px',
                '& fieldset': {
                  borderColor: 'rgba(255, 255, 255, 0.23)',
                },
              },
            }}
          />
        </div>
      </DialogContent>
      <DialogActions sx={{
        p: 3,
        backgroundColor: "#212121"
      }}>
        <Button
          variant="contained"
          sx={{
            bgcolor: '#494949',
            '&:hover': { bgcolor: '#494949' },
            textTransform: 'none',
            borderRadius: 1,
            py: 1,
            px: 3,
            color: "#fff",
            fontFamily: theme?.typography?.fontFamily
          }}
          onClick={() => setLoadAppsModalOpen(false)}
        >
          Cancel
        </Button>
        {!isCloud && (
          <Button
            variant="contained"
            sx={{
              bgcolor: '#494949',
              '&:hover': { bgcolor: '#494949' },
              textTransform: 'none',
              borderRadius: 1,
              py: 1,
              px: 3,
              color: "#fff",
              fontFamily: theme?.typography?.fontFamily
            }}
            disabled={openApi.length === 0 || !openApi.includes("http")}
            onClick={() => handleGithubValidation(true)}
          >
            Force Update
          </Button>
        )}
        <Button
          variant="contained"
          sx={{
            bgcolor: '#FF8544',
            '&:hover': { bgcolor: '#FF8544' },
            textTransform: 'none',
            borderRadius: 1,
            py: 1,
            px: 3,
            color: "black",
            fontFamily: theme?.typography?.fontFamily
          }}
          disabled={openApi.length === 0 || !openApi.includes("http")}
          onClick={() => handleGithubValidation(false)}
        >
          Submit
        </Button>
      </DialogActions>
    </Dialog>
  ) : null;


  const findTopCategories = () => {
    const categoryCountMap = {};
    const apps = currTab === 1 ? userApps : orgApps;
    // Check if userAndOrgsApp is an array before iterating over it and Find top 10 Category from the apps
    if (Array.isArray(apps)) {
      apps.forEach((app) => {
        const categories = app.categories;

        if (categories && categories.length > 0) {
          categories.forEach((category) => {
            categoryCountMap[category] = (categoryCountMap[category] || 0) + 1;
          });
        }
      });

      const categoryArray = Object.keys(categoryCountMap).map((category) => ({
        category,
        count: categoryCountMap[category],
      }));

      categoryArray.sort((a, b) => b.count - a.count);

      const topCategories = categoryArray.slice(0, 7);

      return topCategories;
    }
  };

  const findTopTags = () => {
    const tagCountMap = {};
    const apps = currTab === 1 ? userApps : orgApps;

    if (Array.isArray(apps)) {
      apps.forEach((app) => {
        const tags = app.tags;
        if (tags && tags.length > 0) {
          tags.forEach((tag) => {
            tagCountMap[tag] = (tagCountMap[tag] || 0) + 1;
          });
        }
      });
    }

    const tagArray = Object.keys(tagCountMap).map((tag) => ({
      tag,
      count: tagCountMap[tag],
    }));

    tagArray.sort((a, b) => b.count - a.count);

    const topTags = tagArray.slice(0, 8);

    return topTags;
  };

  const handleCreateApp = (e) => {
    e.preventDefault();
    setCreateAppModalOpen(true);
    // setOpenModal(true);
  };


  useEffect(() => {
    const apps = currTab === 1 ? userApps : orgApps;
    const filteredUserAppdata = filterApps(apps, searchQuery, selectedCategory, selectedLabel);
    setAppsToShow(filteredUserAppdata);
  }, [searchQuery, selectedCategory, selectedLabel, currTab]);


  const handleTabChange = (event, newTab) => {
    setCurrTab(newTab);

    // Apply filters immediately when changing tabs
    if (newTab === 0) {
      const filteredOrgApps = filterApps(orgApps, searchQuery, selectedCategory, selectedLabel);
      setAppsToShow(filteredOrgApps);
    } else if (newTab === 1) {
      const filteredUserApps = filterApps(userApps, searchQuery, selectedCategory, selectedLabel);
      setAppsToShow(filteredUserApps);
    }

    // Update URL query params based on tab index
    const tabMapping = {
      0: 'org_apps',
      1: 'my_apps',
      2: 'all_apps'
    };

    const queryParams = new URLSearchParams(location.search);
    queryParams.set('tab', tabMapping[newTab]);

    // Maintain search query in URL regardless of tab
    if (searchQuery) {
      queryParams.set('q', searchQuery);
    } else {
      queryParams.delete('q');
    }

    navigate(`${location.pathname}?${queryParams.toString()}`);
  };

  // Update useEffect for filtering without URL manipulation
  useEffect(() => {
    if (currTab === 2) return; // Skip for "Discover Apps" tab as it uses Algolia

    const apps = currTab === 1 ? userApps : orgApps;
    const filteredApps = filterApps(apps, searchQuery, selectedCategory, selectedLabel);
    setAppsToShow(filteredApps);
  }, [searchQuery, selectedCategory, selectedLabel, currTab, userApps, orgApps]);

  // Add URL update only when search is performed
  const handleSearchChange = (event) => {
    const newSearchQuery = event.target.value;
    setSearchQuery(newSearchQuery);

    // Update URL only when user performs search
    const queryParams = new URLSearchParams(location.search);
    if (newSearchQuery) {
      queryParams.set('q', newSearchQuery);
    } else {
      queryParams.delete('q');
    }
    window.history.replaceState({}, '', `${location.pathname}?${queryParams.toString()}`);
  };

  const boxStyle = {
    color: "white",
    display: "flex",
    flexDirection: "column",
    height: "100%",
    width: "100%",
    margin: "auto",
    maxWidth: "70%",
    fontFamily: theme?.typography?.fontFamily,
    // padding: '20px 380px',
  };


  const handleCategoryChange = (event) => {
    const value = event.target.value;
    setSelectedCategory(value);
  };

  const handleLabelChange = (event) => {
    const value = event.target.value;
    setSelectedLabel(value);
  };

  const handleAppClick = (app) => {
    setSelectedApp(app);
    setOpenModal(true);
  }

  const handleAppModalClose = () => {
    setOpenModal(false)
  }

  return (
    <div style={{ paddingTop: 70, paddingLeft: leftSideBarOpenByClick ? 200 : 0, transition: "padding-left 0.3s ease", backgroundColor: "#1A1A1A", fontFamily: theme?.typography?.fontFamily, zoom: 0.8, }}>
      <InstantSearch searchClient={searchClient} indexName="appsearch">
        <AppModal
          open={openModal}
          onClose={handleAppModalClose}
          app={selectedApp}
          userdata={userdata}
          globalUrl={globalUrl}
        />
        <AppCreationModal
          open={createAppModalOpen}
          onClose={() => setCreateAppModalOpen(false)}
          theme={theme}
          globalUrl={globalUrl}
          isCloud={isCloud}
        />
        {appsModalLoad}
        <div style={boxStyle}>
          <div style={{ display: "flex", flexDirection: "row", width: "100%", justifyContent: "space-between" }}>
            <Typography variant="h4" style={{ marginBottom: 20, paddingLeft: 15, textTransform: 'none', fontFamily: theme?.typography?.fontFamily }}>
              Apps
            </Typography>
            {isCloud ? null : (
              <span style={{ display: "flex", gap: 15 }}>
                {userdata === undefined || userdata === null || isLoading ? null : (
                  <Tooltip
                    title={"Reload apps locally"}
                    style={{ marginTop: "28px" }}
                    placement="bottom"
                    componentsProps={{
                      tooltip: {
                        sx: {
                          backgroundColor: "rgba(33, 33, 33, 1)",
                          color: "rgba(241, 241, 241, 1)",
                          fontSize: 14,
                          border: "1px solid rgba(73, 73, 73, 1)",
                          fontFamily: theme?.typography?.fontFamily,
                        }
                      }
                    }}
                  >
                    <Button
                      variant="contained"
                      style={{
                        height: 45,
                        minWidth: 45,
                        backgroundColor: "#2F2F2F",
                        borderRadius: 8,
                        padding: "8px 16px",
                      }}
                      disabled={isLoading}
                      onClick={() => {
                        hotloadApps();
                      }}
                    >
                      {isLoading ? (
                        <CircularProgress size={20} style={{ color: "#FF8544" }} />
                      ) : (
                        <CachedIcon style={{ color: "#F1F1F1" }} />
                      )}
                    </Button>
                  </Tooltip>
                )}

                {userdata === undefined || userdata === null || userdata.admin === "false" ? null :
                  <Tooltip
                    title={"Download from Github"}
                    style={{ marginTop: "28px" }}
                    placement="bottom"
                    componentsProps={{
                      tooltip: {
                        sx: {
                          backgroundColor: "rgba(33, 33, 33, 1)",
                          color: "rgba(241, 241, 241, 1)",
                          fontSize: 14,
                          border: "1px solid rgba(73, 73, 73, 1)",
                          fontFamily: theme?.typography?.fontFamily,
                        }
                      }
                    }}
                  >
                    <Button
                      variant="contained"
                      style={{
                        height: 45,
                        minWidth: 45,
                        backgroundColor: "#2F2F2F",
                        borderRadius: 8,
                        padding: "8px 16px",
                      }}
                      disabled={isLoading}
                      onClick={() => {
                        console.log("opening modal")
                        setOpenApi(baseRepository);
                        setLoadAppsModalOpen(true);
                      }}
                    >
                      {isLoading ? (
                        <CircularProgress size={20} style={{ color: "#FF8544" }} />
                      ) : (
                        <CloudDownloadIcon style={{ color: "#F1F1F1" }} />
                      )}
                    </Button>
                  </Tooltip>
                }
              </span>
            )}
          </div>
          <div style={{ borderBottom: '1px solid gray', marginBottom: 30 }}>
            <Tabs
              value={currTab}
              onChange={(event, newTab) => handleTabChange(event, newTab)}
              TabIndicatorProps={{ style: { height: '3px', borderRadius: 10, backgroundColor: "#FF8544" } }}
              style={{ fontFamily: theme?.typography?.fontFamily }}
            >
              <Tab label="Organization Apps" style={{ textTransform: 'none', marginRight: 20, fontFamily: theme?.typography?.fontFamily }} />
              <Tab label="My Apps" style={{ textTransform: 'none', marginRight: 20, fontFamily: theme?.typography?.fontFamily }} />
              <Tab label="Discover Apps" style={{ textTransform: 'none', fontFamily: theme?.typography?.fontFamily }} />
            </Tabs>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", gap: 10, marginBottom: 20, height: 45, paddingRight: 25 }}>
            <div style={{
              width: "25%",
              minWidth: "25%",
              maxWidth: "25%"
            }}>
              {(currTab === 0 || currTab === 1) ? (
                <TextField
                  fullWidth
                  variant="outlined"
                  placeholder="Search for apps"
                  value={searchQuery}
                  id="shuffle_search_field"
                  onChange={handleSearchChange}
                  onKeyDown={(event) => {
                    if (event.key === "Enter") {
                      event.preventDefault();
                    }
                  }}
                  limit={5}
                  InputProps={{
                    style: {
                      borderRadius: 8,
                      height: 45
                    },
                    endAdornment: (
                      <InputAdornment position="end">
                        {searchQuery.length === 0 ? <Search /> : (
                          <ClearIcon
                            style={{ cursor: "pointer" }}
                            onClick={() => {
                              setSearchQuery("")
                              const queryParams = new URLSearchParams(location.search);
                              queryParams.delete('q');
                              window.history.replaceState({}, '', `${location.pathname}?${queryParams.toString()}`);
                            }}
                          />
                        )}
                      </InputAdornment>
                    ),
                  }}
                />
              ) : (
                <CustomSearchBox searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
              )}
            </div>
            <div style={{
              width: "25%",
              minWidth: "25%",
              maxWidth: "25%",
              position: 'relative'
            }}>
              {currTab === 2 ? (
                <CustomCategoryDropdown attribute="categories" />
              ) : (
                <>
                  <Select
                    fullWidth
                    variant="outlined"
                    value={selectedCategory}
                    onChange={handleCategoryChange}
                    displayEmpty
                    multiple
                    style={{
                      borderRadius: 8,
                      height: 45,
                      fontFamily: theme?.typography?.fontFamily
                    }}
                    renderValue={(selected) => {
                      if (selected.length === 0) return 'All Categories';
                      return (
                        <div style={{
                          whiteSpace: 'nowrap',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          maxWidth: '90%'
                        }}>
                          {selected.join(', ')}
                        </div>
                      );
                    }}
                  >
                    <MenuItem disabled value="" style={{ fontFamily: theme?.typography?.fontFamily }}>
                      All Categories
                    </MenuItem>
                    {categories?.map((category) => (
                      <MenuItem key={category.category} value={category.category} style={{ fontFamily: theme?.typography?.fontFamily, fontSize: 16 }}>
                        <Checkbox checked={selectedCategory.includes(category.category)} />
                        {category.category}
                      </MenuItem>
                    ))}
                  </Select>
                  {selectedCategory.length > 0 && (
                    <ClearIcon
                      style={{
                        position: 'absolute',
                        right: 35,
                        top: '50%',
                        transform: 'translateY(-50%)',
                        cursor: 'pointer',
                        color: 'white',
                        fontSize: 20,
                        zIndex: 1000
                      }}
                      onClick={() => setSelectedCategory([])}
                    />
                  )}
                </>
              )}
            </div>
            <div style={{
              width: "25%",
              minWidth: "25%",
              maxWidth: "25%",
              position: 'relative'
            }}>
              {currTab === 2 ? (
                <CustomLabelDropdown attribute="action_labels" />
              ) : (
                <>
                  <Select
                    fullWidth
                    variant="outlined"
                    value={selectedLabel}
                    onChange={handleLabelChange}
                    displayEmpty
                    multiple
                    style={{
                      borderRadius: 8,
                      height: 45,
                      fontFamily: theme?.typography?.fontFamily
                    }}
                    renderValue={(selected) => {
                      if (selected.length === 0) return 'All Labels';
                      return (
                        <div style={{
                          whiteSpace: 'nowrap',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          maxWidth: '90%'
                        }}>
                          {selected.join(', ')}
                        </div>
                      );
                    }}
                  >
                    <MenuItem disabled value="" style={{ fontFamily: theme?.typography?.fontFamily }}>
                      All Labels
                    </MenuItem>
                    {labels?.map((tag) => (
                      <MenuItem key={tag.tag} value={tag.tag} style={{ fontFamily: theme?.typography?.fontFamily, fontSize: 16 }}>
                        <Checkbox checked={selectedLabel.includes(tag.tag)} />
                        {tag.tag}
                      </MenuItem>
                    ))}
                  </Select>
                  {selectedLabel.length > 0 && (
                    <ClearIcon
                      style={{
                        position: 'absolute',
                        right: 35,
                        top: '50%',
                        transform: 'translateY(-50%)',
                        cursor: 'pointer',
                        color: 'white',
                        fontSize: 20,
                        zIndex: 1000
                      }}
                      onClick={() => setSelectedLabel([])}
                    />
                  )}
                </>
              )}
            </div>
            <div style={{
              width: "25%",
              minWidth: "25%",
              maxWidth: "25%"
            }}>
              <Button
                variant="contained"
                color="primary"
                onClick={handleCreateApp}
                style={{
                  height: "100%",
                  width: '100%',
                  borderRadius: '7px',
                  textTransform: 'none',
                  backgroundColor: "#FF8544",
                  color: "#1A1A1A",
                  fontFamily: theme?.typography?.fontFamily,
                  fontSize: 16,
                  fontWeight: 500
                }}
                startIcon={<Add style={{ color: "#1A1A1A" }} />}
              >
                Create an App
              </Button>
            </div>
          </div>
          <div>

            {
              currTab === 0 && (
                <div style={{ minHeight: 570 }}>
                  {isLoading ? (
                    <LoadingGrid />
                  ) : (
                    <>
                      {appsToShow?.length > 0 && appsToShow !== undefined && !isLoading ? (
                        <div style={{
                          marginTop: 16,
                          width: "100%",
                          display: "grid",
                          gridTemplateColumns: "repeat(auto-fill, minmax(365px, 1fr))",
                          gap: "20px",
                          justifyContent: "space-between",
                          alignItems: "start",
                          padding: "0 10px",
                          paddingBottom: 40
                        }}>
                          {appsToShow.map((data, index) => (
                            <AppCard
                              key={index}
                              data={data}
                              index={index}
                              mouseHoverIndex={mouseHoverIndex}
                              setMouseHoverIndex={setMouseHoverIndex}
                              globalUrl={globalUrl}
                              deactivatedIndexes={deactivatedIndexes}
                              currTab={currTab}
                              handleAppClick={handleAppClick}
                              leftSideBarOpenByClick={leftSideBarOpenByClick}
                              userdata={userdata}
                            />
                          ))}
                        </div>
                      ) : (
                        <div style={{ width: "100%", marginTop: 60, textAlign: "center", display: "flex", justifyContent: "center", alignItems: "center" }}>
                          <AppSelection
                            userdata={userdata}
                            globalUrl={globalUrl}
                            appFramework={appFramework}
                            setAppFramework={setAppFramework}
                            defaultSearch={defaultSearch}
                            setDefaultSearch={setDefaultSearch}
                            checkLogin={checkLogin}
                            isAppPage={true}
                          />
                        </div>
                      )}
                    </>
                  )}
                </div>
              )
            }
            {
              currTab === 1 && (
                <div style={{ minHeight: 570 }}>
                  {isLoading ? (
                    <LoadingGrid />
                  ) : (
                    <>
                      {appsToShow?.length > 0 && appsToShow !== undefined ? (
                        <div style={{
                          marginTop: 16,
                          width: "100%",
                          display: "grid",
                          gridTemplateColumns: "repeat(auto-fill, minmax(365px, 1fr))",
                          gap: "20px",
                          justifyContent: "space-between",
                          alignItems: "start",
                          padding: "0 10px",
                          paddingBottom: 40
                        }}>
                          {appsToShow.map((data, index) => (
                            <AppCard key={index} data={data} index={index} mouseHoverIndex={mouseHoverIndex} setMouseHoverIndex={setMouseHoverIndex} globalUrl={globalUrl} deactivatedIndexes={deactivatedIndexes} currTab={currTab} userdata={userdata}
                              handleAppClick={handleAppClick} leftSideBarOpenByClick={leftSideBarOpenByClick}
                            />
                          ))}
                        </div>
                      ) : (
                        <div style={{ width: "100%", marginTop: 60, textAlign: "center", display: "flex", justifyContent: "center", alignItems: "center" }}>
                          <AppSelection
                            userdata={userdata}
                            globalUrl={globalUrl}
                            appFramework={appFramework}
                            setAppFramework={setAppFramework}
                            defaultSearch={defaultSearch}
                            setDefaultSearch={setDefaultSearch}
                            checkLogin={checkLogin}
                            isAppPage={true}
                          />
                        </div>
                      )}
                    </>
                  )}
                </div>
              )
            }

            {
              currTab === 2 &&
              <CustomHits
                isLoggedIn={isLoggedIn}
                userdata={userdata}
                handleAppClick={handleAppClick}
                setIsAnyAppActivated={setIsAnyAppActivated}
                hitsPerPage={5}
                globalUrl={globalUrl}
                searchQuery={searchQuery}
                mouseHoverIndex={mouseHoverIndex}
                setMouseHoverIndex={setMouseHoverIndex}
                currTab={currTab}
                leftSideBarOpenByClick={leftSideBarOpenByClick}
              />
            }
          </div>
        </div >
        <Configure clickAnalytics />
      </InstantSearch>
    </div>
  );
};

export default Apps2;