(() => {
  // ===== DOM & VARIABLES =====
  const RECIPES_URL = 'https://dummyjson.com/recipes';

  const searchInput = document.querySelector('#search-input');
  const searchButton = document.querySelector('#search-button');
  const recipesTableBody = document.querySelector('#recipes-table tbody');
  const loadingIndicator = document.querySelector('#loading');
  const errorMessage = document.querySelector('#error-message');

  const modal = document.querySelector('#recipe-modal');
  const modalTitle = document.querySelector('#modal-title');
  const modalImage = document.querySelector('#modal-image');
  const modalCategory = document.querySelector('#modal-category');
  const modalTime = document.querySelector('#modal-time');
  const modalIngredients = document.querySelector('#modal-ingredients');
  const modalInstructions = document.querySelector('#modal-instructions');
  const closeModal = document.querySelector('.close');

  let allRecipes = [];

  // ===== INIT =====
  const init = () => {
    // TODO: Fetch and display all recipes on initial load

    // Event Listeners
    closeModal.addEventListener('click', closeModalEvent);
    window.addEventListener('click', windowClickEvent);
  };

  // ===== EVENT LISTENERS =====
  const searchButtonEvent = () => {
    const query = searchInput.value.trim().toLowerCase();
    if (query !== '') {
      // TODO: Implement search functionality
    } else {
      // TODO: Display all recipes if search input is empty
    }
  };

  // Close Modal Event
  const closeModalEvent = () => {
    modal.style.display = 'none';
  };

  // Close Modal when clicking outside the modal content
  const windowClickEvent = (event) => {
    if (event.target == modal) {
      modal.style.display = 'none';
    }
  };

  // ===== FUNCTIONS =====
  // Fetches all recipes from the API and displays them.
  const fetchAndDisplayRecipes = async () => {
    showLoading(true);
    showError(false, '');

    try {
      // TODO: Fetch data from API
    } catch (error) {
      console.error(error);
      showError(true, 'An error occurred while fetching recipes.');
    } finally {
      showLoading(false);
    }
  };

  // Searches for recipes by name and displays the results.
  const searchRecipes = async (query) => {
    showLoading(true);
    showError(false, '');

    try {
      // TODO: Search for recipes by name
    } catch (error) {
      console.error(error);
      showError(true, 'An error occurred while searching for recipes.');
    } finally {
      showLoading(false);
    }
  };

  // Displays a list of recipes in the table.
  const displayRecipes = (recipes) => {
    clearTable();

    // TODO: Iterate over the recipes and display them in the table
  };

  // Displays detailed information about a selected recipe in a modal.
  const showRecipeDetails = (recipe) => {
    // TODO: Calculate total preparation time
    // TODO: Set image source
    // TODO: Populate ingredients
    // TODO: Show modal
  };

  // Shows or hides the loading indicator.
  const showLoading = (show) => {
    loadingIndicator.style.display = show ? 'block' : 'none';
  };

  // Displays or hides an error message.
  const showError = (show, message) => {
    if (show) {
      errorMessage.textContent = message;
      errorMessage.style.display = 'block';
    } else {
      errorMessage.textContent = '';
      errorMessage.style.display = 'none';
    }
  };

  // Clears the recipes table.
  const clearTable = () => {
    recipesTableBody.innerHTML = '';
  };

  // ===== CALL INIT =====
  init();
})();