import { foodDatabase } from './foodDatabase.js';
import { getButtonById, getDivById, getInputById, showFoodPreview } from './DomUtils.ts';
import { FoodItem, MealType, PlannedFoodItem } from './types.js';
import { AppwriteDB } from './appwrite.js';
import swal from 'sweetalert';
import { hideLoading, showLoading, getCleanName, getIcon } from './Utils.ts';
import { appState } from "./state";

let selectedPlanFood: FoodItem | null = null;
let currentMealType: MealType | null = null;

// Navigation functions
export async function toggleMealPlannerView() {
  const showMealPlanner = getButtonById('mealPlannerBtn').textContent?.includes('Meal Planner');

  if (showMealPlanner) {
    showLoading();

    try {
      // Load templates
      await loadMealPlanTemplates();

      // Load active template if exists
      const activeTemplate = await AppwriteDB.getActiveMealPlanTemplate();
      if (activeTemplate) {
        appState.currentTemplate = activeTemplate as any;
        await loadPlannedItemsForTemplate(activeTemplate.$id);
      }

      // Show meal planner page
      getDivById('app-content').classList.add('hidden');
      getDivById('settings-content').classList.add('hidden');
      getDivById('meal-planner-content').classList.remove('hidden');
      getButtonById('mealPlannerBtn').textContent = '← Back';
      getButtonById('mealPlannerBtnMobile').textContent = '← Back';
      hideLoading();
    } catch (error) {
      hideLoading();
      console.error('Show meal planner error:', error);
      if (error instanceof Error) {
        swal('Oh no!', 'Failed to load meal planner: ' + error.message, 'error');
      }
    }
  } else {
    // Go back to main app
    getDivById('app-content').classList.remove('hidden');
    getDivById('meal-planner-content').classList.add('hidden');
    getButtonById('mealPlannerBtn').textContent = '📋 Meal Planner';
    getButtonById('mealPlannerBtnMobile').textContent = '📋 Meal Planner';
  }
}

export function handleMobileMealPlannerClick() {
  toggleMealPlannerView();
  // Close mobile menu
  const mobileMenu = document.getElementById('mobileMenu');
  if (mobileMenu) {
    mobileMenu.classList.add('hidden');
  }
}

// Template management functions
export async function loadMealPlanTemplates() {
  try {
    const templates = await AppwriteDB.getMealPlanTemplates();
    const templateSelector = document.getElementById('templateSelector') as HTMLSelectElement;

    if (!templateSelector) return;

    // Clear existing options except the first one
    templateSelector.innerHTML = '<option value="">-- Select a plan --</option>';

    // Add templates
    templates.forEach(template => {
      const option = document.createElement('option');
      option.value = template.$id;
      option.textContent = template.name;
      if (template.isActive) {
        option.selected = true;
      }
      templateSelector.appendChild(option);
    });
  } catch (error) {
    console.error('Load templates error:', error);
    throw error;
  }
}

export async function createNewTemplate() {
  const templateName = await swal({
    title: 'New Meal Plan',
    text: 'Enter a name for your meal plan:',
    content: {
      element: 'input',
      attributes: {
        placeholder: 'e.g., Workout Day, Rest Day',
        type: 'text',
      },
    },
    buttons: {
      cancel: true,
      confirm: true,
    },
  });

  if (!templateName || templateName.trim() === '') {
    return;
  }

  showLoading();

  try {
    const newTemplate = await AppwriteDB.createMealPlanTemplate(templateName.trim());
    await loadMealPlanTemplates();

    // Set as active and load it
    await AppwriteDB.setActiveMealPlanTemplate(newTemplate.$id);
    appState.currentTemplate = newTemplate as any;
    appState.plannedItems = [];

    // Update selector
    const templateSelector = document.getElementById('templateSelector') as HTMLSelectElement;
    if (templateSelector) {
      templateSelector.value = newTemplate.$id;
    }

    // Refresh display
    displayPlannedItems();
    updatePlanTotals();

    hideLoading();
    swal('Success!', 'Meal plan created successfully!', 'success');
  } catch (error) {
    hideLoading();
    console.error('Create template error:', error);
    if (error instanceof Error) {
      swal('Oh no!', 'Failed to create meal plan: ' + error.message, 'error');
    }
  }
}

export async function deleteCurrentTemplate() {
  if (!appState.currentTemplate) {
    swal('Oh no!', 'No meal plan selected', 'error');
    return;
  }

  const confirm = await swal({
    title: 'Delete Meal Plan',
    text: `Are you sure you want to delete "${appState.currentTemplate.name}"? This will also delete all planned items.`,
    icon: 'warning',
    buttons: {
      cancel: true,
      confirm: {
        text: 'Delete',
        value: true,
      },
    },
    dangerMode: true,
  });

  if (!confirm) {
    return;
  }

  showLoading();

  try {
    await AppwriteDB.deleteMealPlanTemplate(appState.currentTemplate.id!);
    appState.currentTemplate = null;
    appState.plannedItems = [];

    await loadMealPlanTemplates();
    displayPlannedItems();
    updatePlanTotals();

    hideLoading();
    swal('Success!', 'Meal plan deleted successfully!', 'success');
  } catch (error) {
    hideLoading();
    console.error('Delete template error:', error);
    if (error instanceof Error) {
      swal('Oh no!', 'Failed to delete meal plan: ' + error.message, 'error');
    }
  }
}

export async function handleTemplateChange(templateId: string) {
  if (!templateId) {
    appState.currentTemplate = null;
    appState.plannedItems = [];
    displayPlannedItems();
    updatePlanTotals();
    return;
  }

  showLoading();

  try {
    // Set as active template
    await AppwriteDB.setActiveMealPlanTemplate(templateId);

    // Load template details
    const templates = await AppwriteDB.getMealPlanTemplates();
    const template = templates.find(t => t.$id === templateId);

    if (template) {
      appState.currentTemplate = template as any;
      await loadPlannedItemsForTemplate(templateId);
    }

    hideLoading();
  } catch (error) {
    hideLoading();
    console.error('Handle template change error:', error);
    if (error instanceof Error) {
      swal('Oh no!', 'Failed to load meal plan: ' + error.message, 'error');
    }
  }
}

async function loadPlannedItemsForTemplate(templateId: string) {
  try {
    const items = await AppwriteDB.getPlannedItemsByTemplate(templateId);
    appState.plannedItems = items as any[];
    displayPlannedItems();
    updatePlanTotals();
  } catch (error) {
    console.error('Load planned items error:', error);
    throw error;
  }
}

// Food search and add functions
export function setupPlanFoodSearch() {
  const searchInput = document.getElementById('planFoodSearchInput') as HTMLInputElement;
  const gramAmountInput = document.getElementById('planGramAmount') as HTMLInputElement;

  if (!searchInput || !gramAmountInput) return;

  searchInput.addEventListener('input', (e) => {
    const target = e.target as HTMLInputElement;
    const searchTerm = target.value.trim().toLowerCase();

    if (searchTerm === '') {
      hidePlanSearchResults();
      selectedPlanFood = null;
      return;
    }

    // Debounce search
    if (appState.planSearchTimeout) {
      clearTimeout(appState.planSearchTimeout);
    }

    appState.planSearchTimeout = window.setTimeout(() => {
      performPlanFoodSearch(searchTerm);
    }, 300);
  });

  searchInput.addEventListener('keydown', (e) => {
    navigatePlanResultsKeyboard(e as KeyboardEvent);
  });

  gramAmountInput.addEventListener('input', () => {
    previewPlanCalories();
  });
}

function performPlanFoodSearch(searchTerm: string) {
  const results = foodDatabase.filter(food =>
    food.name.toLowerCase().includes(searchTerm)
  ).slice(0, 10);

  appState.planSearchResults = results;
  appState.planCurrentHighlightIndex = -1;
  displayPlanSearchResults(results);
}

function displayPlanSearchResults(results: FoodItem[]) {
  const searchResults = document.getElementById('planSearchResults');
  if (!searchResults) return;

  if (results.length === 0) {
    searchResults.innerHTML = '<div class="no-results">No foods found</div>';
    searchResults.classList.remove('hidden');
    return;
  }

  searchResults.innerHTML = '';
  results.forEach((food, index) => {
    const resultItem = document.createElement('div');
    resultItem.className = 'search-result-item';
    resultItem.setAttribute('data-index', index.toString());
    resultItem.innerHTML = `
      ${getIcon(food.info.category)}
      <span class="food-name">${getCleanName(food.name)}</span>
      <span class="food-calories">${food.info.calories} cal</span>
    `;
    resultItem.addEventListener('click', () => selectPlanFood(food));
    searchResults.appendChild(resultItem);
  });

  searchResults.classList.remove('hidden');
}

function hidePlanSearchResults() {
  const searchResults = document.getElementById('planSearchResults');
  if (searchResults) {
    searchResults.classList.add('hidden');
    searchResults.innerHTML = '';
  }
  appState.planSearchResults = [];
  appState.planCurrentHighlightIndex = -1;
}

function navigatePlanResultsKeyboard(e: KeyboardEvent) {
  const results = appState.planSearchResults;

  if (results.length === 0) return;

  if (e.key === 'ArrowDown') {
    e.preventDefault();
    appState.planCurrentHighlightIndex = Math.min(appState.planCurrentHighlightIndex + 1, results.length - 1);
    updatePlanResultsHighlight();
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    appState.planCurrentHighlightIndex = Math.max(appState.planCurrentHighlightIndex - 1, -1);
    updatePlanResultsHighlight();
  } else if (e.key === 'Enter') {
    e.preventDefault();
    if (appState.planCurrentHighlightIndex >= 0) {
      selectPlanFood(results[appState.planCurrentHighlightIndex]);
    }
  } else if (e.key === 'Escape') {
    hidePlanSearchResults();
  }
}

function updatePlanResultsHighlight() {
  const searchResults = document.getElementById('planSearchResults');
  if (!searchResults) return;

  const items = searchResults.querySelectorAll('.search-result-item');
  items.forEach((item, index) => {
    if (index === appState.planCurrentHighlightIndex) {
      item.classList.add('highlighted');
    } else {
      item.classList.remove('highlighted');
    }
  });
}

function selectPlanFood(food: FoodItem) {
  selectedPlanFood = food;
  const searchInput = document.getElementById('planFoodSearchInput') as HTMLInputElement;
  if (searchInput) {
    searchInput.value = getCleanName(food.name);
  }
  hidePlanSearchResults();
  previewPlanCalories();
}

function previewPlanCalories() {
  const gramAmountInput = document.getElementById('planGramAmount') as HTMLInputElement;
  const previewContainer = document.getElementById('plan-food-preview');

  if (!selectedPlanFood || !gramAmountInput || !previewContainer) {
    if (previewContainer) previewContainer.classList.add('display-none');
    return;
  }

  const grams = parseFloat(gramAmountInput.value) || 100;
  const proportion = grams / 100;

  const calories = Math.round(selectedPlanFood.info.calories * proportion);
  const protein = Math.round(selectedPlanFood.info.protein * proportion * 10) / 10;
  const fat = Math.round(selectedPlanFood.info.fat * proportion * 10) / 10;
  const carbs = Math.round(selectedPlanFood.info.carbs * proportion * 10) / 10;
  const fiber = Math.round(selectedPlanFood.info.fiber * proportion * 10) / 10;

  const calorieEl = document.getElementById('planCalorieValuePreview');
  const proteinEl = document.getElementById('planProteinValuePreview');
  const fatEl = document.getElementById('planFatValuePreview');
  const carbsEl = document.getElementById('planCarboValuePreview');
  const fiberEl = document.getElementById('planFiberValuePreview');

  if (calorieEl) calorieEl.textContent = calories.toString();
  if (proteinEl) proteinEl.textContent = protein.toString();
  if (fatEl) fatEl.textContent = fat.toString();
  if (carbsEl) carbsEl.textContent = carbs.toString();
  if (fiberEl) fiberEl.textContent = fiber.toString();

  previewContainer.classList.remove('display-none');
}

export function showAddFoodToPlan(mealType: MealType) {
  if (!appState.currentTemplate) {
    swal('Oh no!', 'Please select or create a meal plan first', 'error');
    return;
  }

  currentMealType = mealType;
  const addSection = document.getElementById('addFoodToPlanSection');
  const mealTypeSpan = document.getElementById('currentMealType');
  const currentMealTypeInput = document.getElementById('currentMealTypeInput') as HTMLInputElement;

  if (addSection) addSection.classList.remove('hidden');
  if (mealTypeSpan) mealTypeSpan.textContent = mealType.charAt(0).toUpperCase() + mealType.slice(1);
  if (currentMealTypeInput) currentMealTypeInput.value = mealType;

  // Scroll to form
  addSection?.scrollIntoView({ behavior: 'smooth' });
}

export function hideAddFoodToPlan() {
  const addSection = document.getElementById('addFoodToPlanSection');
  const searchInput = document.getElementById('planFoodSearchInput') as HTMLInputElement;
  const gramInput = document.getElementById('planGramAmount') as HTMLInputElement;
  const previewContainer = document.getElementById('plan-food-preview');

  if (addSection) addSection.classList.add('hidden');
  if (searchInput) searchInput.value = '';
  if (gramInput) gramInput.value = '100';
  if (previewContainer) previewContainer.classList.add('display-none');

  selectedPlanFood = null;
  currentMealType = null;
  hidePlanSearchResults();
}

export async function addFoodToPlan() {
  if (!selectedPlanFood || !currentMealType || !appState.currentTemplate) {
    swal('Oh no!', 'Please select a food item', 'error');
    return;
  }

  const gramAmountInput = document.getElementById('planGramAmount') as HTMLInputElement;
  const grams = parseFloat(gramAmountInput.value);

  if (!grams || grams <= 0) {
    swal('Oh no!', 'Please enter a valid amount in grams', 'error');
    return;
  }

  showLoading();

  try {
    const proportion = grams / 100;
    const plannedItem: Omit<PlannedFoodItem, 'id'> = {
      templateId: appState.currentTemplate.id!,
      mealType: currentMealType,
      name: selectedPlanFood.name,
      grams: grams,
      calories: Math.round(selectedPlanFood.info.calories * proportion),
      protein: Math.round(selectedPlanFood.info.protein * proportion * 10) / 10,
      fat: Math.round(selectedPlanFood.info.fat * proportion * 10) / 10,
      carbs: Math.round(selectedPlanFood.info.carbs * proportion * 10) / 10,
      fiber: Math.round(selectedPlanFood.info.fiber * proportion * 10) / 10,
      alkaline: selectedPlanFood.info.alkaline
    };

    await AppwriteDB.createPlannedFoodItem(plannedItem);
    await loadPlannedItemsForTemplate(appState.currentTemplate.id!);

    hideAddFoodToPlan();
    hideLoading();
    swal('Success!', 'Food added to meal plan!', 'success');
  } catch (error) {
    hideLoading();
    console.error('Add food to plan error:', error);
    if (error instanceof Error) {
      swal('Oh no!', 'Failed to add food: ' + error.message, 'error');
    }
  }
}

// Display functions
export function displayPlannedItems() {
  const mealTypes: MealType[] = ['breakfast', 'lunch', 'dinner', 'snacks'];

  mealTypes.forEach(mealType => {
    const container = document.getElementById(`${mealType}ItemsContainer`);
    if (!container) return;

    const items = appState.plannedItems.filter(item => item.mealType === mealType);

    if (items.length === 0) {
      container.innerHTML = '<p class="no-items-message">No foods planned for this meal</p>';
      return;
    }

    container.innerHTML = '';
    items.forEach(item => {
      const card = createPlannedItemCard(item);
      container.appendChild(card);
    });
  });
}

function createPlannedItemCard(item: PlannedFoodItem): HTMLElement {
  const card = document.createElement('div');
  card.className = 'planned-item-card';
  card.innerHTML = `
    <div class="planned-item-header">
      <span class="planned-item-name">${getCleanName(item.name)}</span>
      <span class="planned-item-grams">${item.grams}g</span>
    </div>
    <div class="planned-item-nutrition">
      <span>${item.calories} cal</span>
      <span>P: ${item.protein}g</span>
      <span>F: ${item.fat}g</span>
      <span>C: ${item.carbs}g</span>
    </div>
    <button class="delete-planned-item-btn" data-item-id="${item.id}">Delete</button>
  `;

  const deleteBtn = card.querySelector('.delete-planned-item-btn');
  if (deleteBtn) {
    deleteBtn.addEventListener('click', () => deletePlannedItem(item.id!));
  }

  return card;
}

export async function deletePlannedItem(itemId: string) {
  const confirm = await swal({
    title: 'Delete Item',
    text: 'Are you sure you want to delete this item from your meal plan?',
    icon: 'warning',
    buttons: {
      cancel: true,
      confirm: true,
    },
  });

  if (!confirm) return;

  showLoading();

  try {
    await AppwriteDB.deletePlannedFoodItem(itemId);
    if (appState.currentTemplate) {
      await loadPlannedItemsForTemplate(appState.currentTemplate.id!);
    }
    hideLoading();
  } catch (error) {
    hideLoading();
    console.error('Delete planned item error:', error);
    if (error instanceof Error) {
      swal('Oh no!', 'Failed to delete item: ' + error.message, 'error');
    }
  }
}

export function updatePlanTotals() {
  const totals = appState.plannedItems.reduce((acc, item) => {
    acc.calories += item.calories;
    acc.protein += item.protein;
    acc.fat += item.fat;
    acc.carbs += item.carbs;
    acc.fiber += item.fiber;
    return acc;
  }, { calories: 0, protein: 0, fat: 0, carbs: 0, fiber: 0 });

  // Update totals display
  const caloriesTotalEl = document.getElementById('planCaloriesTotal');
  const proteinValueEl = document.getElementById('planProteinValue');
  const fatValueEl = document.getElementById('planFatValue');
  const carboValueEl = document.getElementById('planCarboValue');
  const fiberValueEl = document.getElementById('planFiberValue');

  if (caloriesTotalEl) caloriesTotalEl.textContent = totals.calories.toString();
  if (proteinValueEl) proteinValueEl.textContent = Math.round(totals.protein * 10) / 10 + '';
  if (fatValueEl) fatValueEl.textContent = Math.round(totals.fat * 10) / 10 + '';
  if (carboValueEl) carboValueEl.textContent = Math.round(totals.carbs * 10) / 10 + '';
  if (fiberValueEl) fiberValueEl.textContent = Math.round(totals.fiber * 10) / 10 + '';

  // Update progress bars and goals
  updatePlanProgressBars(totals);
}

async function updatePlanProgressBars(totals: { calories: number, protein: number, fat: number, carbs: number, fiber: number }) {
  try {
    const settings = await AppwriteDB.getUserSettings();
    if (!settings || settings.length === 0) return;

    const userSettings = settings[settings.length - 1];

    // Update goal texts
    const caloriesGoalEl = document.getElementById('planCaloriesGoalText');
    const proteinGoalEl = document.getElementById('planProteinGoalText');
    const fatGoalEl = document.getElementById('planFatGoalText');
    const carboGoalEl = document.getElementById('planCarboGoalText');
    const fiberGoalEl = document.getElementById('planFiberGoalText');

    if (caloriesGoalEl) caloriesGoalEl.textContent = `of ${userSettings.caloriesGoal || 0}`;
    if (proteinGoalEl) proteinGoalEl.textContent = `of ${userSettings.proteinGoal}`;
    if (fatGoalEl) fatGoalEl.textContent = `of ${userSettings.fatGoal}`;
    if (carboGoalEl) carboGoalEl.textContent = `of ${userSettings.carboGoal}`;
    if (fiberGoalEl) fiberGoalEl.textContent = `of ${userSettings.fiberGoal}`;

    // Update progress bars
    updateProgressBar('planProteinProgress', totals.protein, userSettings.proteinGoal);
    updateProgressBar('planFatProgress', totals.fat, userSettings.fatGoal);
    updateProgressBar('planCarboProgress', totals.carbs, userSettings.carboGoal);
    updateProgressBar('planFiberProgress', totals.fiber, userSettings.fiberGoal);
  } catch (error) {
    console.error('Update progress bars error:', error);
  }
}

function updateProgressBar(elementId: string, current: number, goal: number) {
  const progressBar = document.getElementById(elementId);
  if (!progressBar) return;

  const percentage = Math.min((current / goal) * 100, 100);
  progressBar.style.width = `${percentage}%`;

  // Color coding: green when within range, yellow when getting close, red when over
  if (percentage < 80) {
    progressBar.style.backgroundColor = '#4CAF50'; // green
  } else if (percentage < 100) {
    progressBar.style.backgroundColor = '#FFC107'; // yellow
  } else {
    progressBar.style.backgroundColor = '#f44336'; // red
  }
}

// Quick add functions for food log
export async function displayQuickAddItems() {
  const quickAddSection = document.getElementById('quickAddSection');
  const quickAddContainer = document.getElementById('quickAddItemsContainer');

  if (!quickAddSection || !quickAddContainer) return;

  // Check if there's an active template
  const activeTemplate = await AppwriteDB.getActiveMealPlanTemplate();

  if (!activeTemplate) {
    quickAddSection.classList.add('hidden');
    return;
  }

  // Load planned items
  const plannedItems = await AppwriteDB.getPlannedItemsByTemplate(activeTemplate.$id);

  if (plannedItems.length === 0) {
    quickAddSection.classList.add('hidden');
    return;
  }

  // Show section and populate items
  quickAddSection.classList.remove('hidden');
  quickAddContainer.innerHTML = '';

  // Group by meal type
  const mealTypes: MealType[] = ['breakfast', 'lunch', 'dinner', 'snacks'];
  const mealIcons = {
    breakfast: '🌅',
    lunch: '☀️',
    dinner: '🌙',
    snacks: '🍿'
  };

  mealTypes.forEach(mealType => {
    const items = plannedItems.filter(item => item.mealType === mealType);

    if (items.length > 0) {
      // Add meal type header
      const mealHeader = document.createElement('h3');
      mealHeader.className = 'quick-add-meal-header';
      mealHeader.textContent = `${mealIcons[mealType]} ${mealType.charAt(0).toUpperCase() + mealType.slice(1)}`;
      quickAddContainer.appendChild(mealHeader);

      // Add items
      items.forEach(item => {
        const quickAddItem = createQuickAddButton(item);
        quickAddContainer.appendChild(quickAddItem);
      });
    }
  });
}

function createQuickAddButton(item: any): HTMLElement {
  const button = document.createElement('button');
  button.className = 'quick-add-btn';
  button.innerHTML = `
    <span class="quick-add-name">${getCleanName(item.name)}</span>
    <span class="quick-add-details">${item.grams}g • ${item.calories} cal</span>
  `;
  button.addEventListener('click', () => quickAddToFoodLog(item));
  return button;
}

async function quickAddToFoodLog(plannedItem: any) {
  showLoading();

  try {
    const now = new Date();
    const time = now.toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    });

    const selectedDate = new Date(); // This should be the actual selected date from the app
    const localDateTime = new Date(selectedDate.getTime() - (selectedDate.getTimezoneOffset() * 60000)).toISOString();

    const foodEntry = {
      name: plannedItem.name,
      grams: plannedItem.grams,
      calories: plannedItem.calories,
      protein: plannedItem.protein,
      fat: plannedItem.fat,
      carbs: plannedItem.carbs,
      fiber: plannedItem.fiber,
      time: time,
      date: localDateTime.split('T')[0],
      alkaline: plannedItem.alkaline
    };

    await AppwriteDB.saveFoodEntry(foodEntry);

    // Dispatch custom event to trigger food log reload
    const event = new CustomEvent('foodAdded');
    window.dispatchEvent(event);

    hideLoading();
    swal('Success!', `${getCleanName(plannedItem.name)} added to food log!`, 'success');
  } catch (error) {
    hideLoading();
    console.error('Quick add to food log error:', error);
    if (error instanceof Error) {
      swal('Oh no!', 'Failed to add food: ' + error.message, 'error');
    }
  }
}

// Event listener setup
export function setupMealPlannerEventListeners() {
  // Navigation buttons
  document.getElementById('mealPlannerBtn')?.addEventListener('click', toggleMealPlannerView);
  document.getElementById('mealPlannerBtnMobile')?.addEventListener('click', handleMobileMealPlannerClick);

  // Template management
  document.getElementById('newTemplateBtn')?.addEventListener('click', createNewTemplate);
  document.getElementById('deleteTemplateBtn')?.addEventListener('click', deleteCurrentTemplate);
  document.getElementById('templateSelector')?.addEventListener('change', (e) => {
    const target = e.target as HTMLSelectElement;
    handleTemplateChange(target.value);
  });

  // Add food buttons for each meal
  const addMealButtons = document.querySelectorAll('.add-meal-item-btn');
  addMealButtons.forEach(button => {
    button.addEventListener('click', (e) => {
      const target = e.target as HTMLElement;
      const mealType = target.getAttribute('data-meal-type') as MealType;
      showAddFoodToPlan(mealType);
    });
  });

  // Add food to plan form
  document.getElementById('addFoodToPlanBtn')?.addEventListener('click', addFoodToPlan);
  document.getElementById('cancelFoodToPlanBtn')?.addEventListener('click', hideAddFoodToPlan);

  // Setup food search
  setupPlanFoodSearch();
}